*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --fire1:#FF2200;--fire2:#FF6A00;--fire3:#FFB700;--fire4:#FFE259;
  --bg:#0a0a0b;--surface:#111114;--surface2:#1a1a1f;
  --border:rgba(255,106,0,0.15);--text:#f5f0ea;--muted:#6b6670;
  --radius:14px;
}
html,body { min-height:100%; background:var(--bg); color:var(--text); font-family:'Outfit',sans-serif; overflow-x:hidden; }

/* ── Ember BG ── */
.bg-canvas { position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none; }
.bg-canvas::before { content:'';position:absolute;inset:0;
  background: radial-gradient(ellipse 60% 50% at 50% 100%,rgba(255,60,0,.18) 0%,transparent 70%),
              radial-gradient(ellipse 40% 30% at 50% 95%,rgba(255,160,0,.10) 0%,transparent 60%); }
@keyframes ember-float {
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  10%{opacity:1} 90%{opacity:.6}
  100%{transform:translateY(-110vh) translateX(var(--dx)) scale(.3);opacity:0}
}
.ember{position:absolute;bottom:-10px;width:var(--sz);height:var(--sz);border-radius:50%;background:var(--col);filter:blur(1px);animation:ember-float var(--dur) var(--delay) ease-in infinite;}

/* ── Admin Toggle Button ── */
#admin-toggle {
  position:fixed;bottom:20px;right:20px;z-index:1000;
  background:linear-gradient(135deg,var(--fire1),var(--fire2));
  color:#fff;border:none;border-radius:50px;
  padding:10px 18px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;box-shadow:0 4px 20px rgba(255,80,0,.35);
  display:flex;align-items:center;gap:7px;
  transition:transform .15s,box-shadow .15s;
}
#admin-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(255,80,0,.45);}

/* ── Admin Panel ── */
#admin-panel {
  position:fixed;top:0;right:-420px;width:400px;height:100vh;
  background:#13131a;border-left:1px solid rgba(255,106,0,.2);
  z-index:999;overflow-y:auto;
  transition:right .35s cubic-bezier(.4,0,.2,1);
  padding:0 0 40px;
}
#admin-panel.open { right:0; }
.panel-header {
  position:sticky;top:0;background:#13131a;
  padding:20px 20px 16px;border-bottom:1px solid rgba(255,106,0,.12);z-index:2;
}
.panel-header h2 { font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;
  background:linear-gradient(90deg,var(--fire2),var(--fire3));-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text; }
.panel-header p { font-size:11.5px;color:var(--muted);margin-top:2px; }
.panel-close { position:absolute;top:18px;right:18px;background:none;border:none;
  color:var(--muted);cursor:pointer;font-size:20px;line-height:1; }
.panel-close:hover{color:var(--text);}

.panel-section { padding:16px 20px 0; }
.panel-section--spaced { margin-top:16px; }
.panel-section-title {
  font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fire2);margin-bottom:12px;padding-bottom:6px;
  border-bottom:1px solid rgba(255,106,0,.1);
}

/* Fields */
.field-group { margin-bottom:12px; }
.field-group label { display:block;font-size:11px;color:var(--muted);margin-bottom:5px;letter-spacing:.04em; }
.field-group input[type=text],
.field-group input[type=url],
.field-group textarea,
.field-group select {
  width:100%;background:var(--surface2);border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:9px 12px;color:var(--text);font-family:'Outfit',sans-serif;
  font-size:13px;outline:none;transition:border-color .2s;
}
.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus { border-color:rgba(255,106,0,.5); }
.field-group textarea { resize:vertical;min-height:60px;line-height:1.5; }

/* Avatar upload */
.avatar-upload-area {
  border:1.5px dashed rgba(255,106,0,.3);border-radius:12px;
  padding:16px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;
  margin-bottom:8px;
}
.avatar-upload-area:hover{border-color:var(--fire2);background:rgba(255,106,0,.04);}
.avatar-upload-area p { font-size:12px;color:var(--muted);margin-top:6px; }
.avatar-preview-wrap {
  width:64px;height:64px;border-radius:50%;
  background:var(--surface2);margin:0 auto 8px;overflow:hidden;
  border:2px solid rgba(255,106,0,.3);
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--fire3);
}
.avatar-preview-wrap img{width:100%;height:100%;object-fit:cover;}
#avatar-file-input{display:none;}

/* Link cards in panel */
.link-editor-list { display:flex;flex-direction:column;gap:8px; }
.link-editor-item {
  background:var(--surface);border:1px solid rgba(255,255,255,.06);
  border-radius:10px;overflow:hidden;
}
.link-editor-header {
  display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;
}
.link-editor-emoji { font-size:20px;width:30px;text-align:center;flex-shrink:0; }
.link-editor-name { flex:1;font-size:13px;font-weight:500;color:var(--text); }
.link-editor-chevron { color:var(--muted);font-size:14px;transition:transform .2s; }
.link-editor-item.expanded .link-editor-chevron { transform:rotate(90deg); }
.link-editor-body { display:none;padding:0 12px 12px;border-top:1px solid rgba(255,255,255,.05); }
.link-editor-item.expanded .link-editor-body { display:block; }
.link-editor-body .field-group { margin-top:10px;margin-bottom:8px; }

/* Emoji picker row */
.emoji-picker-row {
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;
}
.emoji-opt {
  width:32px;height:32px;border-radius:8px;background:var(--surface2);
  border:1px solid rgba(255,255,255,.06);cursor:pointer;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,background .15s;
}
.emoji-opt:hover,.emoji-opt.selected{border-color:var(--fire2);background:rgba(255,106,0,.1);}

/* Icon color picker */
.color-picker-row { display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
.color-opt {
  width:28px;height:28px;border-radius:6px;cursor:pointer;
  border:2px solid transparent;transition:border-color .15s,transform .1s;
}
.color-opt:hover,.color-opt.selected{border-color:#fff;transform:scale(1.1);}

/* Toggle / remove buttons */
.item-actions { display:flex;gap:6px;margin-top:10px; }
.btn-sm {
  flex:1;padding:7px 10px;border-radius:8px;border:none;cursor:pointer;
  font-family:'Outfit',sans-serif;font-size:12px;font-weight:500;
  transition:opacity .15s;
}
.btn-remove { background:rgba(220,50,50,.15);color:#ff6060; }
.btn-toggle { background:rgba(255,106,0,.12);color:var(--fire3); }
.btn-sm:hover{opacity:.8;}

/* Add button */
.btn-add {
  width:100%;margin-top:10px;padding:10px;border-radius:10px;
  background:rgba(255,106,0,.1);border:1.5px dashed rgba(255,106,0,.3);
  color:var(--fire3);font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;transition:background .2s,border-color .2s;
}
.btn-add:hover{background:rgba(255,106,0,.18);border-color:var(--fire2);}

/* Save button */
.btn-save {
  width:calc(100% - 40px);margin:16px 20px 0;padding:13px;border-radius:12px;
  background:linear-gradient(135deg,var(--fire1),var(--fire2),var(--fire3));
  border:none;color:#fff;font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;
  cursor:pointer;letter-spacing:.04em;
  transition:opacity .15s,transform .15s;
}
.btn-save:hover{opacity:.9;transform:translateY(-1px);}
.btn-save--secondary {
  background:#1a1a1f;border:1px solid rgba(255,106,0,.3);color:var(--fire3);margin-top:8px;
}

/* Export hint */
.panel-export-hint {
  padding:12px 20px 0;font-size:11px;color:var(--muted);text-align:center;
}
.panel-export-hint strong { color:var(--fire3); }

/* ── Page layout ── */
.page {
  position:relative;z-index:1;max-width:480px;margin:0 auto;
  padding:52px 20px 100px;display:flex;flex-direction:column;align-items:center;
}
.avatar {
  width:88px;height:88px;border-radius:50%;
  background:var(--surface2);position:relative;margin-bottom:16px;overflow:hidden;
  opacity:0;animation:fade-up .6s .1s ease forwards;flex-shrink:0;
}
.avatar::before {
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:linear-gradient(135deg,var(--fire1),var(--fire2),var(--fire3));z-index:-1;
}
.avatar-inner {
  width:100%;height:100%;border-radius:50%;background:var(--surface2);
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--fire3);overflow:hidden;
}
.avatar-inner img{width:100%;height:100%;object-fit:cover;}
.name {
  font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:2.5px;
  text-align:center;line-height:1;
  background:linear-gradient(90deg,var(--fire2),var(--fire3),var(--fire4));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:4px;opacity:0;animation:fade-up .6s .2s ease forwards;
}
.brand-name {
  font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:4px;
  color:var(--muted);text-align:center;margin-bottom:10px;
  opacity:0;animation:fade-up .6s .3s ease forwards;
}
.bio {
  font-size:13.5px;font-weight:300;color:var(--muted);text-align:center;
  line-height:1.65;max-width:300px;margin-bottom:32px;
  opacity:0;animation:fade-up .6s .4s ease forwards;
}
.bio strong{color:var(--fire3);font-weight:500;}
.flame-divider{width:40px;height:28px;margin:0 auto 28px;opacity:0;animation:fade-up .5s .5s ease forwards;}
.section-label {
  align-self:flex-start;font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;padding-left:2px;
  opacity:0;animation:fade-up .5s .5s ease forwards;
}
.links{width:100%;display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
.link-card {
  width:100%;display:flex;align-items:center;gap:14px;padding:15px 18px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  text-decoration:none;color:var(--text);position:relative;overflow:hidden;
  transition:transform .18s ease,border-color .2s ease,box-shadow .2s ease;
  opacity:0;animation:fade-up .5s ease forwards;
}
.link-card.hidden-card{display:none;}
.link-card::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,106,0,.06),transparent);opacity:0;transition:opacity .2s ease;}
.link-card:hover{transform:translateX(4px);border-color:rgba(255,106,0,.4);box-shadow:0 4px 30px rgba(255,80,0,.12),-4px 0 0 0 var(--fire2);}
.link-card:hover::before{opacity:1;}
.link-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.link-text{flex:1;}
.link-title{font-size:14px;font-weight:600;margin-bottom:2px;}
.link-desc{font-size:11.5px;font-weight:300;color:var(--muted);line-height:1.4;}
.link-arrow{color:var(--muted);font-size:16px;transition:transform .2s ease,color .2s ease;flex-shrink:0;}
.link-card:hover .link-arrow{transform:translateX(3px);color:var(--fire3);}
.badge{position:absolute;top:10px;right:14px;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:linear-gradient(90deg,var(--fire1),var(--fire2));color:#fff;}
.divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:4px 0 24px;}
.socials{display:flex;gap:12px;margin-bottom:36px;opacity:0;animation:fade-up .5s 1.2s ease forwards;}
.social-btn{width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;text-decoration:none;color:var(--muted);transition:border-color .2s,color .2s,transform .15s;}
.social-btn:hover{border-color:rgba(255,106,0,.5);color:var(--fire3);transform:translateY(-2px);}
.footer{font-size:11px;color:var(--muted);letter-spacing:.04em;text-align:center;opacity:0;animation:fade-up .5s 1.4s ease forwards;}
.footer span{color:var(--fire2);font-weight:500;}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Icon color classes */
.ic-red{background:rgba(255,34,0,.12);color:#ff5533;}
.ic-orange{background:rgba(255,106,0,.12);color:#ff8833;}
.ic-yellow{background:rgba(255,183,0,.12);color:#ffcc33;}
.ic-white{background:rgba(255,255,255,.06);color:#e0ddd8;}
.ic-red2{background:rgba(220,20,60,.14);color:#ff3355;}
.ic-green{background:rgba(0,200,80,.10);color:#33dd88;}
.ic-blue{background:rgba(0,140,255,.10);color:#44aaff;}
.ic-purple{background:rgba(160,80,255,.10);color:#cc88ff;}