:root{
  --bg-0:#07070b;
  --bg-1:#0d0d14;
  --card:#111118;
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.16);
  --text-hi:#f4f2ea;
  --text-mid:#a8a6b3;
  --text-lo:#6b697a;
  --amber:#e8a54b;
  --amber-dim:rgba(232,165,75,0.15);
  --cyan:#3ec6e0;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg-0);
  color:var(--text-hi);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:40px 16px 80px;
}
.accent-font{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}

.brand{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:0.02em;
  color:var(--text-mid);
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:30px;
}
.brand .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);}

.auth-card{
  width:100%;
  max-width:380px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
}
.auth-card h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:22px;
  font-weight:600;
  margin:0 0 6px;
}
.auth-card .sub{
  color:var(--text-mid);
  font-size:13.5px;
  margin:0 0 24px;
  line-height:1.5;
}
.field{margin-bottom:14px;}
.field:last-of-type{margin-bottom:0;}
.field label{
  display:block;
  font-size:12.5px;
  color:var(--text-mid);
  margin-bottom:6px;
  font-weight:500;
}
.field input, .field select, .field textarea{
  width:100%;
  background:var(--bg-1);
  border:1px solid var(--line);
  color:var(--text-hi);
  border-radius:var(--radius-sm);
  padding:11px 12px;
  font-family:'Inter',sans-serif;
  font-size:14px;
  outline:none;
  transition:border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--amber);}
.field textarea{resize:vertical;min-height:56px;}

.primary-btn{
  width:100%;
  background:var(--text-hi);
  color:#0a0a0d;
  border:none;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:14.5px;
  padding:13px;
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all .15s ease;
  margin-top:22px;
}
.primary-btn:hover{background:var(--amber);}
.primary-btn:disabled{opacity:0.5;cursor:not-allowed;}

.ghost-btn{
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--text-hi);
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  font-weight:500;
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:all .15s ease;
}
.ghost-btn:hover{background:rgba(255,255,255,0.06);}

.switch-line{
  text-align:center;
  font-size:13px;
  color:var(--text-mid);
  margin-top:20px;
}
.switch-line a{color:var(--amber);text-decoration:none;font-weight:500;}
.switch-line a:hover{text-decoration:underline;}

.error-msg{
  background:rgba(224,90,90,0.12);
  border:1px solid rgba(224,90,90,0.35);
  color:#e88a8a;
  font-size:13px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  margin-bottom:16px;
  display:none;
}
.error-msg.show{display:block;}

.topbar{
  width:100%;
  max-width:460px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
}
.mode-toggle{
  display:flex;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
  gap:2px;
}
.mode-toggle button{
  border:none;
  background:transparent;
  color:var(--text-mid);
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:12.5px;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:all .18s ease;
}
.mode-toggle button.active{background:var(--text-hi);color:#0a0a0d;}

.card-wrap{
  width:100%;
  max-width:460px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-1);
  position:relative;
}
.card-wrap.glow{
  animation: card-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes card-glow-pulse{
  0%,100%{ box-shadow: 0 0 18px 2px var(--glow-a), 0 0 38px 8px var(--glow-a); }
  50%{ box-shadow: 0 0 26px 5px var(--glow-b), 0 0 54px 14px var(--glow-b); }
}
.banner{
  position:relative;
  height:190px;
  width:100%;
  overflow:hidden;
  background:linear-gradient(180deg,#0a0a12 0%, #131320 55%, #0a0a12 100%);
}
.banner svg{position:absolute;bottom:0;left:0;width:100%;height:100%;}
.banner .haze{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 120%, rgba(232,165,75,0.16), transparent 60%);
  pointer-events:none;
}
.banner .vgrad{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, var(--bg-1) 100%);
  pointer-events:none;
}
.win{animation:tw 4.5s ease-in-out infinite;}
@keyframes tw{0%,100%{opacity:.25;}50%{opacity:.9;}}

.identity{position:relative;padding:0 26px 22px;margin-top:-52px;}
.avatar{
  width:96px;height:96px;border-radius:50%;
  border:3px solid var(--bg-1);
  background-size:cover;background-position:center;background-color:#1a1a24;
  box-shadow:0 0 0 1px var(--line-strong), 0 6px 22px rgba(0,0,0,0.5);
}
.name-row{display:flex;align-items:center;gap:7px;margin-top:14px;}
.name-row .name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:23px;letter-spacing:-0.01em;}
.badge{width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;}
.tagline{color:var(--text-mid);font-size:14px;line-height:1.5;margin-top:6px;max-width:360px;}
.meta-row{display:flex;align-items:center;gap:14px;margin-top:14px;color:var(--text-lo);font-size:12.5px;}
.meta-row .item{display:flex;align-items:center;gap:5px;}
.meta-row svg{width:13px;height:13px;opacity:.8;}

.socials{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;}

.media-player{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  margin-top:16px;
}
.media-cover{
  width:44px;height:44px;border-radius:8px;
  object-fit:cover;background:#1a1a24;flex-shrink:0;
}
.media-info{flex:1;min-width:110px;}
.media-title{
  font-size:13px;font-weight:600;color:var(--text-hi);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-decoration:none;display:block;
}
.media-title:hover{text-decoration:underline;}
.media-time{
  font-size:11px;color:var(--text-lo);margin-top:2px;
  font-family:'JetBrains Mono',monospace;
}
.media-progress-track{
  height:3px;background:var(--line);border-radius:2px;margin-top:6px;overflow:hidden;
}
.media-progress-fill{
  height:100%;background:var(--amber);width:0%;
}
.media-play-btn{
  width:34px;height:34px;border-radius:50%;
  background:var(--amber);color:#0a0a0d;border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;cursor:pointer;flex-shrink:0;
}
.media-play-btn:hover{opacity:0.9;}
.media-volume{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.media-mute-btn{
  background:transparent;border:none;color:var(--text-mid);
  cursor:pointer;font-size:14px;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
}
.media-mute-btn:hover{color:var(--text-hi);}
.media-volume input[type=range]{
  width:60px;height:3px;accent-color:var(--amber);cursor:pointer;
}
.social-pill{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  padding:9px 14px 9px 9px;
  border-radius:999px;
  text-decoration:none;color:var(--text-hi);
  font-size:13px;font-weight:500;
  transition:all .15s ease;cursor:pointer;
}
.social-pill:hover{border-color:var(--line-strong);background:rgba(255,255,255,0.06);transform:translateY(-1px);}
.social-pill .badge-icon{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#f4f2ea;
  flex-shrink:0;
  overflow:hidden;
}
.social-pill .badge-icon img, .social-pill .badge-icon svg{
  width:60%;height:60%;
  object-fit:contain;
}
.social-pill.icon-only{
  padding:9px;
  gap:0;
}
.social-pill.icon-only .badge-icon{
  width:30px;height:30px;
}
.social-pill.text-only{
  padding:9px 16px;
}
.empty-hint{color:var(--text-lo);font-size:13px;padding:14px 0 2px;}

.footer-strip{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 26px 22px;border-top:1px solid var(--line);margin-top:8px;
}
.footer-strip .views{display:flex;align-items:center;gap:7px;color:var(--text-lo);font-size:12.5px;}

.editor{width:100%;max-width:460px;margin-top:22px;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;margin-bottom:14px;}
.panel h3{
  font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:600;
  letter-spacing:0.02em;text-transform:uppercase;color:var(--text-mid);margin:0 0 16px;
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.color-row{display:flex;gap:10px;}
.swatch{width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .15s ease;}
.swatch.selected{border-color:var(--text-hi);transform:scale(1.08);}

.color-picker-swatch{
  width:32px;height:32px;
  padding:0;
  border:2px dashed var(--line-strong);
  border-radius:50%;
  cursor:pointer;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
}
.color-picker-swatch::-webkit-color-swatch-wrapper{padding:2px;border-radius:50%;}
.color-picker-swatch::-webkit-color-swatch{border:none;border-radius:50%;}
.color-picker-swatch::-moz-color-swatch{border:none;border-radius:50%;}

.link-item{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 10px 10px 12px;margin-bottom:8px;
}
.link-item .mini-badge{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#f4f2ea;flex-shrink:0;overflow:hidden;
}
.link-item .mini-badge img, .link-item .mini-badge svg{
  width:60%;height:60%;object-fit:contain;
}
.link-item .info{flex:1;min-width:0;}
.link-item .info .plat{font-size:12.5px;font-weight:500;}
.link-item .info .url{font-size:11.5px;color:var(--text-lo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.icon-btn{
  background:transparent;border:none;color:var(--text-lo);cursor:pointer;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;transition:all .15s ease;flex-shrink:0;
}
.icon-btn:hover{background:rgba(255,255,255,0.08);color:var(--text-hi);}
.icon-btn.danger:hover{color:#e05a5a;}

.add-link-row{display:grid;grid-template-columns:110px 1fr auto;gap:8px;margin-top:12px;}
.add-btn{
  background:var(--amber);border:none;color:#241505;
  font-family:'Inter',sans-serif;font-weight:600;font-size:13px;
  border-radius:var(--radius-sm);padding:0 16px;cursor:pointer;transition:all .15s ease;
}
.add-btn:hover{background:#f2b769;}

.save-status{text-align:center;font-size:12px;color:var(--text-lo);margin-top:10px;min-height:14px;}
.save-status.ok{color:var(--cyan);}
.save-status.err{color:#e88a8a;}

.invite-row{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;margin-bottom:8px;font-size:13px;
}
.invite-row .code{font-family:'JetBrains Mono',monospace;letter-spacing:0.02em;}
.invite-row .status{font-size:11.5px;color:var(--text-lo);}
.invite-row .status.used{color:var(--cyan);}

.center-note{color:var(--text-lo);font-size:13px;text-align:center;margin-top:60px;}

.member-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  margin-bottom:8px;
  text-decoration:none;
  transition:all .15s ease;
}
.member-row:hover{
  border-color:var(--line-strong);
  background:rgba(255,255,255,0.03);
}
.member-avatar{
  width:40px;height:40px;border-radius:50%;
  background-size:cover;background-position:center;
  background-color:#1a1a24;flex-shrink:0;
}
.member-info{flex:1;min-width:0;}
.member-name{
  font-size:14px;font-weight:600;color:var(--text-hi);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.member-username{
  font-size:12px;color:var(--text-lo);
  font-family:'JetBrains Mono',monospace;
}

.continue-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:rgba(7,7,11,0.72);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  cursor:pointer;
  text-align:center;
  padding:24px;
}
.continue-site{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:22px;
  color:var(--text-hi);
  letter-spacing:-0.01em;
}
.continue-cta{
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-mid);
  animation: hint-pulse 1.8s ease-in-out infinite;
}
@keyframes hint-pulse{
  0%,100%{opacity:0.7; transform:translateY(0);}
  50%{opacity:1; transform:translateY(-3px);}
}

.trail-particle{
  position:fixed;
  pointer-events:none;
  z-index:9999;
  left:0;top:0;
  will-change:transform, opacity;
  animation: trail-fade 900ms ease-out forwards;
}
.trail-particle.snow{
  animation-name: trail-fade-snow;
}
.trail-particle.glitter{
  animation-name: trail-fade-glitter;
  animation-duration: 700ms;
}
@keyframes trail-fade{
  0%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(0.4) rotate(50deg) translateY(16px);}
}
@keyframes trail-fade-snow{
  0%{opacity:1; transform:translate(-50%,-50%) scale(1) translateY(0);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(0.75) translateY(28px);}
}
@keyframes trail-fade-glitter{
  0%{opacity:1; transform:translate(-50%,-50%) scale(1) translate(0,0);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(0.15) translate(var(--dx,0px), var(--dy,0px));}
}

/* ---------- dev panel ---------- */
.dev-gate{color:var(--text-mid);font-size:13.5px;line-height:1.6;}
.user-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.user-row:last-child{border-bottom:none;}
.user-row .who{display:flex;flex-direction:column;min-width:120px;margin-right:auto;}
.user-row .uname{font-weight:600;font-size:13.5px;}
.user-row .meta{color:var(--text-lo);font-size:11.5px;margin-top:2px;}
.pill{
  font-size:10.5px;
  font-weight:600;
  padding:3px 9px;
  border-radius:999px;
  letter-spacing:0.02em;
  white-space:nowrap;
}
.pill.owner{background:rgba(240,196,110,0.15);color:#f0c46e;}
.pill.dev{background:rgba(62,198,224,0.15);color:var(--cyan);}
.pill.admin{background:rgba(139,127,209,0.15);color:#a89af0;}
.pill.staff{background:rgba(91,141,239,0.15);color:#5b8def;}
.pill.banned{background:rgba(224,90,90,0.15);color:#e88a8a;}
.user-row select{
  background:var(--bg-1);
  border:1px solid var(--line);
  color:var(--text-hi);
  border-radius:var(--radius-sm);
  padding:6px 8px;
  font-size:12px;
  outline:none;
}
.user-row .icon-btn{width:30px;height:30px;}
.dev-search{margin-bottom:14px;}

/* ---------- error toast popup ---------- */
.toast-popup{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%) translateY(-12px);
  background:rgba(224,90,90,0.15);
  border:1px solid rgba(224,90,90,0.4);
  color:#e88a8a;
  font-size:13.5px;
  font-weight:500;
  padding:12px 20px;
  border-radius:var(--radius-md);
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  z-index:1000;
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.toast-popup.show{opacity:1;transform:translateX(-50%) translateY(0);}