:root { color-scheme: dark; --bg:#050506; --card:#0d0c13; --border:#27262d; --text:#f2f0f5; --muted:#97939e; --purple:#bd9af6; --font:"DM Sans",sans-serif; --display:"Space Grotesk",sans-serif }
    * { box-sizing:border-box }
    body { margin:0; min-width:320px; min-height:100vh; color:var(--text); background:var(--bg); font-family:var(--display) }
    button,input,textarea { font:inherit }
    button { color:inherit }
    a { color:inherit; text-decoration:none }
    .shell { width:min(672px,calc(100% - 34px)); margin:auto }
    .topbar { position:absolute; z-index:2; top:18px; left:50%; display:flex; align-items:center; justify-content:space-between; width:min(672px,calc(100% - 34px)); transform:translateX(-50%) }
    .brand { font-size:19px; font-weight:700; letter-spacing:-1px }
    .brand span { color:var(--purple) }
    .nav-actions { display:flex; gap:9px; align-items:center }
    .button,.icon-button { min-height:39px; padding:0 15px; border:1px solid var(--border); border-radius:12px; background:#111015; color:#e1dfe6; cursor:pointer; transition:.2s }
    .button:hover,.icon-button:hover { border-color:#625475; background:#17151c }
    .button.primary { border-color:transparent; background:#eeeaf3; color:#17151c; font-weight:700 }
    .button.primary:hover { background:white }
    .button.small { min-height:34px; padding:0 12px; font-size:12px }
    .icon-button { width:39px; padding:0; border-radius:50%; color:#aaa7b0 }
    .page { padding:clamp(145px,22vh,220px) 0 80px }
    .card { border:1px solid var(--border); border-radius:34px; background:var(--card); box-shadow:0 18px 65px rgba(0,0,0,.2) }
    .profile { position:relative; overflow:hidden; padding:0 25px 29px; text-align:center }
    .page-wallpaper { position:fixed; z-index:0; inset:0; background-color:#050506; background-size:cover; background-position:center; filter:brightness(.45); pointer-events:none }
    .page { position:relative; z-index:1 }
    .footer { position:relative; z-index:1 }
    .profile-banner { height:120px; margin:0 -25px; background:linear-gradient(135deg,#1c1725,#101015 60%,#25202c); background-position:center; background-size:cover; mask-image:linear-gradient(#000 55%,transparent 100%) }
    .avatar-wrap { position:relative; width:92px; height:92px; margin:-63px auto 12px; padding:5px; border:1px solid #393442; border-radius:50%; background:#0d0c13 }
    .avatar { display:grid; width:100%; height:100%; margin:0; place-items:center; overflow:hidden; border:1px solid #393442; border-radius:50%; background:linear-gradient(145deg,#35234d,#a36ab1); color:#f1dfff; font-size:28px; font-weight:700 }
    .avatar img { width:100%; height:100%; object-fit:cover }
    .online-indicator { position:absolute; right:3px; bottom:4px; width:16px; height:16px; border:3px solid #0d0c13; border-radius:50%; background:#8de1bf }
    h1 { margin:0; font-size:27px; letter-spacing:-.8px }
    .username { margin-top:5px; color:#85818d; font:12px var(--font) }
    .bio { max-width:480px; margin:15px auto 0; color:#aaa7b1; font:14px/1.7 var(--font) }
    .uid { margin-top:14px; color:#797681; font:11px var(--font) }
    .uid strong { color:#aaa6b2; font-family:var(--display); font-weight:500 }
    .profile-audio { width:min(360px,100%); height:38px; margin-top:15px }
    .upload-row { display:flex; align-items:center; gap:9px }
    .upload-row input[type=url] { min-width:0; flex:1 }
    .upload-row input[type=file] { width:100%; color:var(--muted); font:11px var(--font) }
    .upload-hint { margin-top:5px; color:#817d88; font:10px/1.5 var(--font) }
    .view-total { display:inline-flex; align-items:center; gap:6px; margin-top:17px; color:#a29eaa; font:12px var(--font) }
    .view-total strong { color:#f2f0f5; font:600 14px var(--display) }
    .badge { display:inline-block; padding:5px 9px; border:1px solid #393442; border-radius:8px; background:#17141e; color:#d8c5fa; font:600 10px var(--font) }
    .profile-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:13px }
    .badge.og { border-color:#675132; background:#241d12; color:#f2d28d }
    .badge.verified { border-color:#394d69; background:#151e2d; color:#a9d1ff }
    .badge.supporter { border-color:#68435d; background:#281825; color:#f1b5df }
    .badge.moderator { border-color:#3a5849; background:#14231b; color:#9ee2bd }
    .badge.admin { border-color:#59436b; background:#21172b; color:#d9b0ff }
    .badge.co_owner { border-color:#6a4050; background:#2b1820; color:#ffb2c6 }
    .badge.premium { border-color:#806632; background:linear-gradient(110deg,#34260f,#211b12); color:#f4d28b; box-shadow:0 0 14px rgba(238,190,88,.12) }
    .section-title { margin:28px 0 13px; color:#77747f; font:600 10px var(--font); letter-spacing:1.6px; text-align:center; text-transform:uppercase }
    .links { display:grid; gap:10px }
    .socials { display:flex; flex-wrap:wrap; justify-content:center; gap:11px; margin:19px 0 26px }
    .social-link { display:grid; width:44px; height:44px; place-items:center; border:1px solid var(--border); border-radius:15px; background:#111015; color:#d0cdd5; font-size:15px; font-weight:700; transition:transform .18s,border-color .18s,background .18s }
    .social-link:hover { transform:translateY(-3px); border-color:#6b5c7d; background:#1a1720 }
    .social-link[data-brand="YouTube"] { color:#ff8585 }
    .social-link[data-brand="Spotify"] { color:#80dca0 }
    .social-link[data-brand="Discord"] { color:#a7b4ff }
    .social-link[data-brand="Twitch"] { color:#c6a2ff }
    .social-link[data-brand="GitHub"] { color:#e5e2eb }
    .social-link[data-brand="Instagram"] { color:#f0a4c3 }
    .social-link[data-brand="TikTok"] { color:#d5d2dc }
    .social-link[data-brand="X"] { color:#eee }
    .link-card { display:flex; min-height:73px; align-items:center; gap:13px; padding:12px 18px; border:1px solid var(--border); border-radius:20px; background:var(--card); transition:.2s }
    a.link-card:hover { transform:translateY(-1px); border-color:#44414b; background:#111016 }
    .link-icon { display:grid; width:44px; height:44px; flex:0 0 44px; place-items:center; border-radius:50%; background:#1a1920; color:#bebac6; font-size:18px }
    .link-body { min-width:0; flex:1 }
    .link-name { font-size:14px; font-weight:600 }
    .link-url { overflow:hidden; margin-top:4px; color:#85818d; font:11px var(--font); text-overflow:ellipsis; white-space:nowrap }
    .arrow { color:#7b7883; font-size:16px }
    .empty { padding:22px; border:1px dashed var(--border); border-radius:18px; color:var(--muted); font:13px var(--font); text-align:center }
    .auth-wrap { padding:25px }
    .auth-heading { margin:0 0 7px; font-size:23px }
    .muted { color:var(--muted); font:13px/1.6 var(--font) }
    .tabs { display:flex; gap:8px; margin:22px 0 18px; padding:4px; border:1px solid var(--border); border-radius:13px; background:#09090c }
    .tab { flex:1; min-height:36px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer }
    .tab.active { background:#201d28; color:white }
    .field { margin:0 0 13px }
    .field label { display:block; margin:0 0 6px; color:#bcb8c3; font:600 11px var(--font) }
    .field input,.field textarea { width:100%; min-height:42px; padding:10px 12px; outline:none; border:1px solid #292730; border-radius:10px; background:#09090c; color:var(--text); font:13px var(--font) }
    .field textarea { min-height:90px; resize:vertical }
    .field input:focus,.field textarea:focus { border-color:#85709f }
    .auth-submit { width:100%; margin-top:5px }
    .auth-switch { margin-top:16px; color:var(--muted); font:12px var(--font); text-align:center }
    .text-button { padding:0; border:0; background:transparent; color:#d8c5fa; cursor:pointer }
    .message { display:none; margin-top:14px; padding:11px 12px; border:1px solid #3e354a; border-radius:10px; color:#ddd4e9; background:#17131d; font:12px/1.5 var(--font) }
    .message.show { display:block }
    .dashboard { padding:23px }

    .premium-banner { display:flex; align-items:center; gap:18px; margin:0 0 24px; padding:21px; border:1px solid #59452c; border-radius:22px; background:radial-gradient(ellipse at 10% 0%,rgba(190,135,58,.16),transparent 58%),linear-gradient(115deg,#17130e,#100f12 65%); }
    .premium-banner-active { border-color:#6c5936; background:radial-gradient(ellipse at 10% 0%,rgba(238,190,88,.2),transparent 58%),linear-gradient(115deg,#1c170e,#100f12 65%); }
    .premium-banner-icon { display:grid; flex:0 0 48px; width:48px; height:48px; place-items:center; border:1px solid #755d34; border-radius:15px; background:#292012; color:#f2d18a; font-size:25px; }
    .premium-banner-copy { min-width:0; flex:1; }
    .premium-eyebrow { color:#e1bb70; font:700 9px var(--font); letter-spacing:1.7px; }
    .premium-banner-copy h2 { margin:5px 0 4px!important; color:#f5ead4; font-size:18px!important; }
    .premium-banner-copy p { margin:0; color:#aaa19a; font:12px/1.6 var(--font); }
    .premium-feature-list { display:flex; flex-wrap:wrap; gap:7px 13px; margin-top:12px; color:#d8c7a7; font:10px var(--font); }
    .premium-banner-status { display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:0 0 auto; }
    .premium-status-pill { padding:6px 9px; border:1px solid #705a32; border-radius:99px; background:#2a2112; color:#f1d28e; font:700 9px var(--font); letter-spacing:.7px; }
    .premium-status-caption { color:#898078; font:10px var(--font); text-align:right; }
    .admin-user-card { border-radius:22px; }
    @media(max-width:540px) { .premium-banner { align-items:flex-start; flex-wrap:wrap; padding:16px; gap:12px; } .premium-banner-copy { flex-basis:calc(100% - 62px); } .premium-banner-status { flex-direction:row; align-items:center; width:100%; justify-content:space-between; } }

    .dash-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:20px }
    .dash-head h1 { font-size:21px }
    .dash-stats { display:flex; align-items:center; gap:14px; padding:15px; border:1px solid var(--border); border-radius:15px; background:#09090c }
    .stat-number { font-size:25px; font-weight:700 }
    .stat-label { margin-top:2px; color:var(--muted); font:11px var(--font) }
    .dashboard h2 { margin:23px 0 12px; font-size:14px }
    .editor-link { display:flex; align-items:center; gap:8px; margin-bottom:8px }
    .editor-link input { min-width:0; flex:1 }
    .editor-link select { min-width:0 }
    .delete-link { min-width:39px; height:39px; border:1px solid var(--border); border-radius:10px; background:#151218; color:#c4a9a9; cursor:pointer }
    .dash-actions { display:flex; justify-content:space-between; gap:8px; margin-top:16px }
    .notice { margin-top:14px; color:#817d88; font:11px/1.5 var(--font) }
    .footer { padding:0 0 24px; color:#7c7983; font-size:13px; text-align:center }
    .footer span { color:#c4c1ca; font-weight:700; letter-spacing:1px }
    .loading { color:var(--muted); font:13px var(--font); text-align:center }
    .hidden { display:none !important }
    @media(max-width:540px) {
      .page { padding-top:clamp(125px,18vh,175px) }
      .card { border-radius:27px }
      .profile { padding:0 17px 24px }
      .profile-banner { height:100px; margin:0 -17px }
      .avatar-wrap { width:82px; height:82px; margin-top:-56px }
      .social-link { width:42px; height:42px; border-radius:14px }
      .auth-wrap,.dashboard { padding:19px }
      .button { padding:0 11px }
      .brand { font-size:17px }
      h1 { font-size:24px }
      .editor-link { flex-wrap:wrap }
      .editor-link input { flex:1 1 120px }
      .editor-link select { flex:1 1 100% !important }
      .dash-head { align-items:flex-start }
      .dash-head .nav-actions { flex-wrap:wrap; justify-content:flex-end }
    }

    /* Creator dashboard and compact badge icon refinements */
    .page:has(.dashboard) { width:min(760px,calc(100% - 34px)) }
    .dashboard {
      padding:clamp(20px,4vw,34px);
      border-color:#302d38;
      border-radius:27px;
      background:
        radial-gradient(ellipse at 8% 0%,rgba(152,111,203,.12),transparent 32%),
        linear-gradient(145deg,#100f16,#0b0a10 68%);
    }
    .dash-head {
      align-items:center;
      padding-bottom:22px;
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .dash-kicker { margin-bottom:7px; color:#b695e8; font:700 9px var(--font); letter-spacing:1.8px }
    .dash-head h1 { font-size:24px; letter-spacing:-.6px }
    .dash-head .muted { margin-top:4px; font-size:12px }
    .dash-head .nav-actions { flex-wrap:wrap; justify-content:flex-end }
    .dash-head .button { border-radius:11px }
    .dash-head .button.primary { color:#1b1522 }
    .nav-button-icon { margin-right:4px; color:#d9bcff }
    .dash-stats {
      position:relative;
      overflow:hidden;
      margin:20px 0 24px;
      padding:17px 19px;
      border-color:#302b3b;
      border-radius:16px;
      background:linear-gradient(110deg,rgba(134,94,178,.13),rgba(16,14,21,.9) 67%);
    }
    .dash-stats::after {
      position:absolute;
      top:-44px;
      right:-30px;
      width:130px;
      height:130px;
      border:1px solid rgba(198,161,245,.11);
      border-radius:50%;
      box-shadow:0 0 0 15px rgba(198,161,245,.025),0 0 0 31px rgba(198,161,245,.02);
      content:"";
      pointer-events:none;
    }
    .stat-number { color:#f5efff; font-size:31px; letter-spacing:-1px }
    .dashboard .stat-label { font-size:11px }
    .dashboard form > .form-section-title {
      display:flex;
      align-items:center;
      gap:10px;
      margin:24px 0 15px;
      padding-top:19px;
      border-top:1px solid rgba(255,255,255,.07);
      color:#9d83c1;
      font:600 10px var(--font);
      letter-spacing:1.2px;
    }
    .form-section-title span { color:#ede9f2; font:600 14px var(--display); letter-spacing:-.2px }
    .dashboard .field { margin-bottom:15px }
    .dashboard .field label { color:#c9c4d0; font-size:11px }
    .dashboard .field input,
    .dashboard .field textarea {
      min-height:43px;
      border-color:#302e38;
      border-radius:11px;
      background:rgba(7,7,10,.72);
      font-size:12px;
      transition:border-color .18s,background .18s;
    }
    .dashboard .field input:hover,
    .dashboard .field textarea:hover { border-color:#45404f }
    .dashboard .field input:focus,
    .dashboard .field textarea:focus { border-color:#8d70b3; background:#0c0a11 }
    .dashboard .field input[readonly] {
      color:#aaa4b3;
      text-overflow:ellipsis;
    }
    .dashboard .field input[type=url] { text-overflow:ellipsis }
    .dashboard .field input[type=file] {
      min-height:46px;
      padding:7px;
      color:#aaa4b3;
      font-size:11px;
      cursor:pointer;
    }
    .dashboard .field input[type=file]::file-selector-button {
      min-height:29px;
      margin-right:10px;
      padding:0 11px;
      border:1px solid #3a3544;
      border-radius:8px;
      background:#1a1720;
      color:#e0d5ef;
      font:600 11px var(--font);
      cursor:pointer;
    }
    .dashboard .field input[type=file]::file-selector-button:hover { background:#282132 }
    .upload-hint { padding-left:2px; color:#817b8a; font-size:10px }
    .dashboard .notice { color:#9992a3 }
    .dashboard #addLink { margin-top:2px }
    .dashboard .editor-link input { min-width:0 }
    .dashboard .delete-link { background:#19151b }
    .dashboard .dash-actions { align-items:center; padding-top:15px; border-top:1px solid rgba(255,255,255,.07) }
    .dashboard .dash-actions .notice { margin:0 }
    .badge {
      display:inline-flex;
      align-items:center;
      gap:6px;
      min-height:25px;
      padding:4px 9px 4px 7px;
      border-radius:999px;
      font-size:10px;
      letter-spacing:.1px;
    }
    .badge-icon { display:inline-grid; width:14px; height:14px; place-items:center }
    .badge-icon img { display:block; width:16px; height:16px; object-fit:contain }
    @media(max-width:540px) {
      .page:has(.dashboard) { width:calc(100% - 24px) }
      .dashboard { padding:18px 15px; border-radius:22px }
      .dash-head { align-items:flex-start }
      .dash-head h1 { font-size:21px }
      .dash-head .nav-actions { gap:6px }
      .dash-head .button { min-height:32px; padding:0 9px; font-size:10px }
      .dashboard .dash-actions { align-items:flex-start; flex-direction:column }
      .dashboard .dash-actions .button { align-self:flex-end }
      .dashboard .editor-link { gap:6px }
    }

    .page:has(.dashboard) {
      width:min(1120px,calc(100% - 48px));
      padding-top:112px;
    }
    .dashboard {
      padding:0;
      overflow:hidden;
      border:1px solid #27232e;
      border-radius:25px;
      background:
        radial-gradient(ellipse at 4% 0%,rgba(126,82,170,.15),transparent 26%),
        linear-gradient(155deg,#100f15,#09090d 72%);
      box-shadow:0 26px 100px rgba(0,0,0,.42),0 0 90px rgba(125,82,165,.05);
    }
    .studio-header {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      padding:31px 34px 25px;
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .studio-heading .dash-kicker { margin-bottom:10px }
    .studio-sparkle { margin-right:5px; color:#e0b7ff; font-size:12px }
    .studio-heading h1 { font-size:31px; letter-spacing:-1.2px }
    .studio-heading p { margin:6px 0 0; color:#9893a0; font:13px var(--font) }
    .studio-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px }
    .studio-quiet {
      display:inline-flex;
      min-height:37px;
      align-items:center;
      gap:7px;
      border-color:#302c37;
      border-radius:11px;
      background:#15131a;
      color:#ded9e5;
      font:500 11px var(--font);
    }
    .studio-quiet:hover { border-color:#685477; background:#1b1722 }
    .studio-metrics {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
      padding:20px 34px 22px;
    }
    .metric-card {
      position:relative;
      min-height:120px;
      overflow:hidden;
      padding:15px 17px;
      border:1px solid #292630;
      border-radius:15px;
      background:linear-gradient(135deg,rgba(25,23,31,.95),rgba(13,12,17,.95));
    }
    .metric-card::after {
      position:absolute;
      right:-29px;
      bottom:-65px;
      width:115px;
      height:115px;
      border:1px solid rgba(208,174,246,.1);
      border-radius:50%;
      box-shadow:0 0 0 13px rgba(208,174,246,.025),0 0 0 27px rgba(208,174,246,.018);
      content:"";
      pointer-events:none;
    }
    .metric-views { border-color:#40324e; background:linear-gradient(125deg,rgba(102,68,134,.3),rgba(18,15,23,.97) 75%) }
    .metric-icon { float:right; color:#a899b8; font-size:14px }
    .metric-value { margin-top:9px; font:600 28px var(--display); letter-spacing:-1px }
    .metric-label { margin-top:2px; color:#c3bdca; font:700 9px var(--font); letter-spacing:1px }
    .metric-caption { display:block; margin-top:5px; color:#77727f; font:10px var(--font) }
    .metric-live { display:flex; align-items:center; gap:8px; font-size:19px }
    .metric-live i { width:8px; height:8px; border-radius:50%; background:#83d5ab; box-shadow:0 0 12px rgba(131,213,171,.6) }
    .studio-columns {
      display:grid;
      grid-template-columns:minmax(0,1fr) 290px;
      align-items:start;
      gap:23px;
      padding:0 34px 33px;
    }
    .studio-editor { min-width:0 }
    .editor-section {
      margin-bottom:15px;
      padding:19px;
      border:1px solid #28252f;
      border-radius:17px;
      background:rgba(15,14,19,.8);
    }
    .editor-section-heading {
      display:flex;
      align-items:flex-start;
      gap:12px;
      margin-bottom:18px;
    }
    .section-index {
      display:grid;
      width:27px;
      height:27px;
      flex:0 0 27px;
      place-items:center;
      border:1px solid #41344f;
      border-radius:9px;
      background:#20182a;
      color:#d3b3fa;
      font:600 10px var(--display);
    }
    .editor-section-heading h2 { margin:1px 0 0; font:600 14px var(--display) }
    .editor-section-heading p { margin:4px 0 0; color:#85808d; font:11px var(--font) }
    .studio-editor .field { margin-bottom:13px }
    .studio-editor .field:last-child { margin-bottom:0 }
    .studio-editor .field label { display:flex; justify-content:space-between; gap:10px; color:#c9c4d0; font-size:11px }
    .field-count { color:#77717f; font-size:8px; letter-spacing:.8px }
    .studio-editor .field input,
    .studio-editor .field textarea {
      min-height:41px;
      border-color:#302d37;
      border-radius:10px;
      background:#09090d;
      font-size:12px;
    }
    .studio-editor .field textarea { min-height:76px }
    .asset-field { margin-top:12px; padding:12px; border:1px solid #292630; border-radius:12px; background:#0b0a0f }
    .asset-top { display:flex; align-items:center; gap:10px; margin-bottom:10px }
    .asset-glyph { display:grid; width:31px; height:31px; place-items:center; border:1px solid #38303f; border-radius:10px; background:#19141f; color:#d0b0f0; font-size:14px }
    .asset-top label { color:#e1dce6; font:600 11px var(--font) }
    .asset-top p { margin:3px 0 0; color:#797481; font:10px var(--font) }
    .studio-editor .asset-field .asset-url {
      width:100%;
      min-height:35px;
      padding:8px 10px;
      border-color:#28252f;
      border-radius:8px;
      background:#08080b;
      color:#bbb4c3;
      font:11px var(--font);
    }
    .upload-button {
      display:flex !important;
      width:max-content;
      min-height:29px;
      align-items:center;
      gap:7px;
      margin-top:9px;
      padding:0 10px;
      border:1px solid #38313f;
      border-radius:8px;
      background:#1a1720;
      color:#d6c6e8 !important;
      font:500 10px var(--font) !important;
      cursor:pointer;
      transition:.18s;
    }
    .upload-button:hover { border-color:#725b86; background:#211a2a }
    .upload-button input[type=file] { display:none }
    .links-section #linkEditors { display:grid; gap:8px }
    .studio-editor .editor-link {
      display:flex;
      align-items:center;
      gap:10px;
      margin:0;
      padding:10px;
      border:1px solid #292630;
      border-radius:12px;
      background:#0b0a0f;
    }
    .editor-link-icon { display:grid; width:36px; height:36px; flex:0 0 36px; place-items:center; border:1px solid #38303f; border-radius:11px; background:#19151f; color:#cfb0ea; font-size:15px }
    .editor-link-icon .site-icon { width:22px; height:22px }
    .editor-link-icon .site-icon-fallback.site-icon-fallback-visible { display:inline }
    .editor-link-fields { display:grid; min-width:0; flex:1; gap:5px }
    .studio-editor .editor-link-fields input {
      width:100%;
      min-height:29px;
      padding:5px 8px;
      border:1px solid transparent;
      border-radius:7px;
      background:#111015;
      color:#e7e3ed;
      font:11px var(--font);
    }
    .studio-editor .editor-link-fields input[data-field=url] { color:#938b9d; font-size:10px }
    .studio-editor .editor-link-fields input:focus { border-color:#574367 }
    .studio-editor .delete-link { min-width:29px; width:29px; height:29px; border-radius:8px; color:#827585 }
    .studio-editor .delete-link:hover { border-color:#74474f; color:#ffc0c5 }
    .add-link-button { width:100%; min-height:39px; margin-top:10px; border-style:dashed; border-radius:10px; color:#c5b2dd; font:500 11px var(--font) }
    .add-link-button span { color:#d2aafa; font-size:15px }
    .save-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 2px 0 }
    .save-bar > span { display:flex; align-items:center; gap:7px; color:#817d88; font:10px var(--font) }
    .save-bar > span i { width:7px; height:7px; border-radius:50%; background:#83d5ab }
    .save-button { min-height:39px; border-radius:10px; font-size:11px }
    .save-button span { margin-left:8px }
    .studio-preview-column { position:sticky; top:18px; padding-top:3px }
    .preview-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; color:#a69eaf; font:700 9px var(--font); letter-spacing:1.3px }
    .preview-dot { width:7px; height:7px; border-radius:50%; background:#83d5ab; box-shadow:0 0 10px rgba(131,213,171,.55) }
    .preview-card { overflow:hidden; padding:0 17px 16px; border:1px solid #302c37; border-radius:20px; background:#0d0c12; text-align:center; box-shadow:0 15px 45px rgba(0,0,0,.3) }
    .preview-cover { height:89px; margin:0 -17px; background:radial-gradient(ellipse at 80% 15%,rgba(223,174,255,.78),transparent 30%),radial-gradient(ellipse at 24% 12%,rgba(127,92,191,.9),transparent 42%),linear-gradient(125deg,#29203a,#17131f 58%,#3c2543); background-position:center; background-size:cover }
    .preview-avatar { display:grid; width:62px; height:62px; margin:-31px auto 8px; place-items:center; overflow:hidden; border:4px solid #0d0c12; border-radius:50%; background:linear-gradient(145deg,#594071,#b07bbd); color:white; font:700 22px var(--display) }
    .preview-avatar img { width:100%; height:100%; object-fit:cover }
    .preview-name { font:600 15px var(--display) }
    .preview-username { margin-top:3px; color:#85818d; font:10px var(--font) }
    .preview-bio { min-height:29px; margin:10px 0; color:#aaa5b1; font:10px/1.5 var(--font) }
    .preview-divider { height:1px; margin:12px 0; background:#25222b }
    .preview-socials { display:flex; justify-content:center; gap:8px; color:#c8c2cf; font-size:12px }
    .preview-socials span { display:grid; width:25px; height:25px; place-items:center; border:1px solid #2b2832; border-radius:8px; background:#15131a }
    .preview-link-skeleton { display:flex; height:31px; align-items:center; gap:8px; margin-top:7px; padding:0 9px; border:1px solid #2c2932; border-radius:9px; background:#131119 }
    .preview-link-skeleton i { width:15px; height:15px; border-radius:50%; background:#282330 }
    .preview-link-skeleton b { width:72px; height:5px; border-radius:4px; background:#302c36 }
    .preview-link-skeleton span { margin-left:auto; color:#77717f; font-size:11px }
    .preview-open { display:block; margin-top:12px; color:#c5a4e4; font:10px var(--font) }
    .preview-open:hover { color:white }
    .share-card { display:flex; align-items:center; gap:10px; margin-top:12px; padding:11px; border:1px solid #292630; border-radius:13px; background:#100e15 }
    .share-card-icon { display:grid; width:32px; height:32px; place-items:center; border:1px solid #3a3044; border-radius:10px; background:#1c1623; color:#d4b3ef }
    .share-card div:nth-child(2) { min-width:0; flex:1; text-align:left }
    .share-card strong,.share-card span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .share-card strong { font:600 10px var(--font) }
    .share-card span { margin-top:3px; color:#88818f; font:9px var(--font) }
    .share-card button { width:28px; height:28px; border:1px solid #302c37; border-radius:8px; background:#17141d; color:#c7b1df; cursor:pointer }
    .preview-footnote { margin:10px 2px; color:#726e79; font:9px/1.5 var(--font); text-align:center }
    .dashboard .message { margin:0 34px 22px }
    @media(max-width:900px) {
      .page:has(.dashboard) { width:min(760px,calc(100% - 32px)) }
      .studio-columns { grid-template-columns:minmax(0,1fr) 250px; gap:15px; padding-right:23px; padding-left:23px }
      .studio-header { padding-right:23px; padding-left:23px }
      .studio-metrics { padding-right:23px; padding-left:23px }
      .editor-section { padding:15px }
    }
    @media(max-width:700px) {
      .page:has(.dashboard) { width:min(560px,calc(100% - 24px)); padding-top:85px }
      .dashboard { border-radius:20px }
      .studio-header { align-items:flex-start; flex-direction:column; padding:22px 17px 17px }
      .studio-heading h1 { font-size:27px }
      .studio-actions { justify-content:flex-start }
      .studio-metrics { gap:7px; padding:14px 14px 16px }
      .metric-card { min-height:98px; padding:11px 9px }
      .metric-value { font-size:23px }
      .metric-label { font-size:8px; letter-spacing:.5px }
      .metric-caption { font-size:9px }
      .studio-columns { grid-template-columns:1fr; gap:20px; padding:0 14px 19px }
      .studio-preview-column { position:static; grid-row:1 }
      .studio-editor { grid-row:2 }
      .preview-card { max-width:390px; margin:0 auto }
      .share-card { max-width:390px; margin-right:auto; margin-left:auto }
      .preview-footnote { display:none }
      .editor-section { padding:14px }
      .dashboard .message { margin:0 14px 17px }
    }
    @media(max-width:390px) {
      .studio-metrics { grid-template-columns:repeat(2,minmax(0,1fr)) }
      .metric-card:last-child { grid-column:1/-1; min-height:75px }
      .studio-actions .button { font-size:10px }
      .studio-heading p { font-size:11px }
      .save-bar { align-items:flex-start; flex-direction:column }
      .save-button { align-self:flex-end }
    }

    body[data-theme="midnight"] { --theme-accent:#c59bff; --theme-glow:rgba(144,97,195,.18) }
    body[data-theme="violet"] { --theme-accent:#b18aff; --theme-glow:rgba(136,83,213,.25) }
    body[data-theme="rose"] { --theme-accent:#f18eb7; --theme-glow:rgba(207,89,144,.2) }
    body[data-theme="forest"] { --theme-accent:#7ed6a8; --theme-glow:rgba(77,168,119,.19) }
    body[data-theme="ocean"] { --theme-accent:#70c8ef; --theme-glow:rgba(61,148,193,.2) }
    body[data-theme="aurora"] { --theme-accent:#70e0c4; --theme-glow:rgba(71,196,167,.22) }
    body[data-theme="crimson"] { --theme-accent:#ff6f82; --theme-glow:rgba(204,68,92,.21) }
    body[data-theme="mono"] { --theme-accent:#e4e4e7; --theme-glow:rgba(190,190,200,.17) }
    body[data-theme] .profile-badges + .username { color:var(--profile-accent,var(--theme-accent)) }
    body[data-theme] .social-link:hover { border-color:var(--profile-accent,var(--theme-accent)) }
    body[data-theme] .link-card:hover { border-color:color-mix(in srgb,var(--profile-accent,var(--theme-accent)) 55%,#333) }
    body[data-theme] .view-total strong { color:var(--profile-accent,var(--theme-accent)) }
    .theme-picker { margin-top:13px; padding:12px; border:1px solid #292630; border-radius:12px; background:#0b0a0f }
    .theme-picker-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; color:#e1dce6; font:600 11px var(--font) }
    .theme-picker-heading > span + span { color:#77717f; font-size:8px; letter-spacing:.9px }
    .theme-options { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:6px }
    .theme-option { display:flex; min-width:0; align-items:center; flex-direction:column; gap:6px; padding:8px 3px; border:1px solid #2a2730; border-radius:9px; background:#100f14; color:#96909d; font:9px var(--font); cursor:pointer; transition:.18s }
    .theme-option:hover { border-color:#50435e; color:#ddd3e9 }
    .theme-option.active { border-color:var(--profile-accent,#c59bff); background:#1a1521; color:#eee5f9 }
    .theme-option i { width:23px; height:23px; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:var(--swatch,#c59bff); box-shadow:0 0 12px color-mix(in srgb,var(--swatch) 35%,transparent) }
    .theme-option[data-theme="midnight"] i { --swatch:#c59bff }
    .theme-option[data-theme="violet"] i { --swatch:#9663ef }
    .theme-option[data-theme="rose"] i { --swatch:#ec7fa8 }
    .theme-option[data-theme="forest"] i { --swatch:#70c795 }
    .theme-option[data-theme="ocean"] i { --swatch:#62bce7 }
    .theme-option[data-theme="aurora"] i { --swatch:#70e0c4 }
    .theme-option[data-theme="crimson"] i { --swatch:#ff6f82 }
    .theme-option[data-theme="mono"] i { --swatch:#e4e4e7 }
    .theme-option.premium-theme:not(.active) { border-style:dashed }
    .theme-option.premium-theme:not(.active) span { color:#c6a6e7 }
    .accent-picker { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px solid #25222b; color:#bdb7c5; font:10px var(--font) }
    .accent-picker > span { display:flex; align-items:center; gap:7px }
    .accent-picker > span i { width:8px; height:8px; border-radius:50%; background:var(--profile-accent,#c59bff) }
    .accent-picker input { width:29px; height:24px; padding:2px; border:1px solid #38323f; border-radius:7px; background:#0b0a0f; cursor:pointer }
    .theme-option.active { --profile-accent:var(--theme-accent,#c59bff) }
    .preview-card[data-theme="midnight"] { border-color:#463850 }
    .preview-card[data-theme="violet"] { border-color:#493866 }
    .preview-card[data-theme="rose"] { border-color:#553344 }
    .preview-card[data-theme="forest"] { border-color:#2e4d3e }
    .preview-card[data-theme="ocean"] { border-color:#2e4858 }
    .preview-card[data-theme="aurora"] { border-color:#286354 }
    .preview-card[data-theme="crimson"] { border-color:#66313a }
    .preview-card[data-theme="mono"] { border-color:#55555b }
    .admin-user-states,.admin-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px }
    .admin-user-states span { padding:4px 8px; border:1px solid #302c37; border-radius:99px; color:#bcb4c6; font:9px var(--font) }
    .admin-actions .button:disabled { opacity:.45; cursor:not-allowed }
    .admin-password-reset { margin-top:12px; border-top:1px solid #302c37; color:#bcb4c6 }
    .admin-password-reset summary { padding:11px 0; color:#ded5e6; font:600 11px var(--font); cursor:pointer }
    .admin-password-reset form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; gap:8px }
    .admin-password-reset .field { margin:0 }
    .admin-password-reset .field label { font-size:9px }
    .admin-password-reset .field input { min-height:37px }
    .admin-password-reset > p { margin:8px 0 2px; color:#8e8795; font:10px/1.45 var(--font) }
    .button.danger { border-color:#673c47; color:#f09aaa }
    .button.danger:hover:not(:disabled) { border-color:#a95164; background:#29141a; color:#ffc0ca }
    .link-row-actions { display:flex; align-items:center; gap:5px }
    .link-click-count { margin-right:3px; color:#77717f; font:9px var(--font); white-space:nowrap }
    .move-link,.drag-link { display:grid; width:27px; height:27px; flex:0 0 27px; place-items:center; border:1px solid #302c37; border-radius:8px; background:#15131a; color:#9e96a8; cursor:pointer }
    .move-link:hover:not(:disabled),.drag-link:hover { border-color:#6a557d; color:#e3d0fa }
    .move-link:disabled { opacity:.35; cursor:default }
    .drag-link { padding:0; border-style:dashed; cursor:grab; font-size:14px; user-select:none }
    .editor-link.dragging { opacity:.45; border-color:#a987d0 }
    .forgot-password { display:block; margin:13px 0 0 auto; font:11px var(--font) }
    .hidden-audio { display:none }
    .music-toggle { display:inline-flex; align-items:center; gap:9px; margin-top:16px; padding:9px 12px; border:1px solid #36303f; border-radius:999px; background:#111016; color:#d9c9eb; cursor:pointer; transition:.2s }
    .music-toggle:hover,.music-toggle.playing { border-color:var(--profile-accent,#c59bff); background:color-mix(in srgb,var(--profile-accent,#c59bff) 12%,#111016) }
    .music-toggle-icon { font:11px var(--font) }
    .music-toggle-label { font:700 9px var(--font); letter-spacing:1px }
    .music-equalizer { display:flex; height:13px; align-items:center; gap:2px }
    .music-equalizer i { display:block; width:2px; height:4px; border-radius:2px; background:var(--profile-accent,#c59bff) }
    .music-toggle.playing .music-equalizer i { animation:equalize .65s ease-in-out infinite alternate }
    .music-toggle.playing .music-equalizer i:nth-child(2) { animation-delay:.2s }
    .music-toggle.playing .music-equalizer i:nth-child(3) { animation-delay:.4s }
    .music-toggle.playing .music-equalizer i:nth-child(4) { animation-delay:.1s }
    @keyframes equalize { from { height:3px } to { height:13px } }
    @media(max-width:540px) {
      .theme-options { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px }
      .theme-option { padding-right:1px; padding-left:1px; font-size:8px }
      .admin-password-reset form { grid-template-columns:1fr }
      .link-click-count { display:none }
      .link-row-actions { gap:3px }
      .move-link,.drag-link { width:25px; height:25px; flex-basis:25px }
    }
    @media(prefers-reduced-motion:reduce) {
      *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
    }

    body:has(.landing) {
      background:
        radial-gradient(ellipse at 50% -18%,rgba(118,65,176,.17),transparent 38%),
        #070609;
    }
    body:has(.landing) .topbar,
    body:has(.dashboard) .topbar {
      position:absolute;
      top:20px;
      width:min(1160px,calc(100% - 48px));
      min-height:64px;
      padding:10px 13px 10px 23px;
      border:1px solid rgba(210,190,232,.12);
      border-radius:20px;
      background:rgba(15,13,19,.78);
      box-shadow:0 12px 45px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035);
      backdrop-filter:blur(18px);
    }
    body:has(.landing) .brand,
    body:has(.dashboard) .brand { font-size:20px; letter-spacing:-1.1px }
    body:has(.landing) .brand span,
    body:has(.dashboard) .brand span { color:#c49aff }
    body:has(.landing) .button.primary,
    body:has(.dashboard) .button.primary {
      background:linear-gradient(115deg,#c392ff,#a96af3);
      color:#170d24;
      box-shadow:0 5px 22px rgba(173,111,246,.2);
    }
    body:has(.landing) .button.primary:hover,
    body:has(.dashboard) .button.primary:hover {
      background:linear-gradient(115deg,#d4b1ff,#bb87ff);
      box-shadow:0 7px 28px rgba(173,111,246,.3);
      transform:translateY(-1px);
    }
    .page:has(.landing) {
      width:min(1160px,calc(100% - 48px));
      padding:126px 0 64px;
    }
    .landing { position:relative; isolation:isolate }
    .landing-glow {
      position:absolute;
      z-index:-1;
      width:370px;
      height:370px;
      border-radius:50%;
      filter:blur(110px);
      opacity:.18;
      pointer-events:none;
    }
    .landing-glow-one { top:65px; right:10%; background:#963ef0 }
    .landing-glow-two { top:355px; left:-150px; width:260px; height:260px; background:#53268f; opacity:.12 }
    .landing-hero {
      display:grid;
      min-height:495px;
      grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
      align-items:center;
      gap:55px;
      padding:34px 48px 57px;
    }
    .landing-copy { position:relative; z-index:1; max-width:570px }
    .landing-eyebrow {
      display:flex;
      align-items:center;
      gap:9px;
      color:#c2a0e5;
      font:700 10px var(--font);
      letter-spacing:1.8px;
    }
    .landing-eyebrow i {
      width:7px;
      height:7px;
      border-radius:50%;
      background:#bf8cff;
      box-shadow:0 0 14px rgba(191,140,255,.8);
    }
    .landing-copy h1 {
      margin:22px 0 17px;
      font:700 clamp(43px,6.5vw,76px)/.99 var(--display);
      letter-spacing:-4.7px;
    }
    .landing-copy h1 span,
    .feature-intro h2 span,
    .landing-bottom h2 span {
      color:transparent;
      background:linear-gradient(105deg,#e5d4ff 0%,#bd88fa 47%,#8953c6 100%);
      background-clip:text;
      -webkit-background-clip:text;
    }
    .landing-intro {
      max-width:445px;
      margin:0;
      color:#a49daa;
      font:15px/1.8 var(--font);
    }
    .landing-actions { display:flex; align-items:center; gap:22px; margin-top:27px }
    .landing-cta {
      display:inline-flex;
      min-height:49px;
      align-items:center;
      gap:18px;
      padding:0 19px;
      border-radius:13px;
      font:700 12px var(--font);
      cursor:pointer;
      transition:.2s;
    }
    .landing-cta span { font-size:16px }
    .landing-secondary {
      color:#cbc4d1;
      font:600 12px var(--font);
      transition:color .2s;
    }
    .landing-secondary:hover { color:#d2aaff }
    .landing-secondary span { margin-left:5px; color:#b586e9 }
    .landing-proof { display:flex; align-items:center; gap:11px; margin-top:32px; color:#817a89; font:11px var(--font) }
    .proof-avatars { display:flex; padding-left:3px }
    .proof-avatars i {
      display:grid;
      width:25px;
      height:25px;
      margin-left:-3px;
      place-items:center;
      border:1px solid #3d3049;
      border-radius:50%;
      background:#19141f;
      color:#d2b0f5;
      font:11px var(--font);
      font-style:normal;
    }
    .proof-avatars i + i { margin-left:-7px; background:#21192b }
    .proof-avatars i + i + i { background:#2c1e38 }
    .landing-showcase { position:relative; display:grid; min-height:435px; place-items:center }
    .showcase-orbit {
      position:absolute;
      width:350px;
      height:350px;
      border:1px solid rgba(188,132,239,.12);
      border-radius:50%;
      box-shadow:0 0 0 35px rgba(174,112,227,.025),0 0 0 75px rgba(174,112,227,.018);
    }
    .showcase-chip {
      position:absolute;
      z-index:2;
      top:37px;
      right:8px;
      display:flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border:1px solid rgba(208,184,229,.16);
      border-radius:999px;
      background:rgba(22,18,29,.88);
      color:#d7c6e8;
      font:700 8px var(--font);
      letter-spacing:1px;
      box-shadow:0 9px 30px rgba(0,0,0,.25);
      transform:rotate(3deg);
    }
    .showcase-live { width:6px; height:6px; border-radius:50%; background:#9ae0b8; box-shadow:0 0 10px #77c99b }
    .showcase-profile {
      position:relative;
      z-index:1;
      display:block;
      width:min(100%,346px);
      overflow:hidden;
      border:1px solid rgba(220,193,245,.23);
      border-radius:23px;
      background:linear-gradient(155deg,rgba(26,21,34,.97),rgba(12,11,16,.98) 70%);
      box-shadow:0 27px 80px rgba(0,0,0,.56),0 0 55px rgba(148,89,196,.13),inset 0 1px rgba(255,255,255,.06);
      transform:rotate(-2deg);
      color:inherit;
      text-decoration:none;
      transition:border-color .2s,box-shadow .2s,transform .2s;
    }
    .showcase-profile:hover { border-color:rgba(220,193,245,.48); box-shadow:0 30px 85px rgba(0,0,0,.6),0 0 62px rgba(148,89,196,.2); transform:rotate(-1deg) translateY(-2px) }
    .showcase-profile.showcase-loading,.showcase-profile.showcase-error {
      display:grid;
      min-height:370px;
      place-items:center;
      padding:24px;
      color:#b8a9c3;
      font:12px/1.6 var(--font);
      text-align:center;
    }
    .showcase-profile.showcase-error { border-color:rgba(228,126,141,.4); color:#efb3be }
    .showcase-cover {
      height:91px;
      background:
        radial-gradient(ellipse at 75% 15%,rgba(234,190,255,.86),transparent 22%),
        radial-gradient(ellipse at 25% 5%,rgba(148,87,205,.9),transparent 44%),
        linear-gradient(125deg,#382448,#17131f 56%,#553258);
    }
    .showcase-content { padding:0 20px 19px }
    .showcase-avatar {
      position:relative;
      display:grid;
      width:57px;
      height:57px;
      margin-top:-29px;
      place-items:center;
      border:4px solid #14111a;
      border-radius:50%;
      background:linear-gradient(145deg,#d2a6ff,#78429a);
      color:#fbf5ff;
      font:700 24px var(--display);
      box-shadow:0 4px 18px rgba(0,0,0,.35);
    }
    .showcase-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover }
    .showcase-avatar span { position:absolute; right:0; bottom:1px; width:11px; height:11px; border:2px solid #17131c; border-radius:50%; background:#8de1b3 }
    .showcase-identity { display:flex; align-items:center; gap:7px; margin-top:9px }
    .showcase-identity strong { font:600 17px var(--display); letter-spacing:-.3px }
    .showcase-identity > span { color:#8e8796; font:10px var(--font) }
    .showcase-identity i { margin-left:auto; color:#c997ff; font-size:13px; font-style:normal }
    .showcase-badges { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px }
    .showcase-badges .badge { min-height:18px; gap:3px; padding:2px 6px 2px 4px; font-size:8px }
    .showcase-badges .badge-icon { width:10px; height:10px }
    .showcase-badges .badge-icon img { width:12px; height:12px }
    .showcase-content > p { margin:8px 0 12px; color:#aaa3b0; font:11px/1.6 var(--font) }
    .showcase-socials { display:flex; gap:7px; margin-bottom:13px }
    .showcase-socials span {
      display:grid;
      width:28px;
      height:28px;
      place-items:center;
      border:1px solid #302936;
      border-radius:9px;
      background:#1a1620;
      color:#d5c5e5;
      font-size:11px;
    }
    .showcase-socials .site-icon { width:17px; height:17px }
    .showcase-socials .site-icon-fallback { display:none }
    .showcase-socials .site-icon-fallback.site-icon-fallback-visible { display:block; color:#d5c5e5; font-size:11px }
    .showcase-link {
      display:flex;
      min-height:49px;
      align-items:center;
      gap:10px;
      margin-top:7px;
      padding:7px 10px;
      border:1px solid #312b39;
      border-radius:12px;
      background:linear-gradient(100deg,rgba(45,35,54,.65),rgba(20,18,24,.8));
      transition:border-color .2s,transform .2s;
    }
    .showcase-link:first-of-type { border-color:#614679 }
    .showcase-link > i { display:grid; width:29px; height:29px; place-items:center; border-radius:9px; background:#2b2036; color:#d4aff7; font-style:normal }
    .showcase-link > i .site-icon { width:18px; height:18px }
    .showcase-link > i .site-icon-fallback.site-icon-fallback-visible { display:inline }
    .showcase-link > span { min-width:0; flex:1 }
    .showcase-link b,.showcase-link small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .showcase-link b { color:#ede7f1; font:600 10px var(--font) }
    .showcase-link small { margin-top:3px; color:#827987; font:9px var(--font) }
    .showcase-link em { color:#a28cae; font-size:12px; font-style:normal }
    .showcase-more { margin:9px 0 0; color:#a28caf; font:9px var(--font); text-align:center }
    .showcase-note {
      position:absolute;
      z-index:2;
      right:-11px;
      bottom:29px;
      display:flex;
      align-items:center;
      gap:10px;
      padding:11px 15px 11px 12px;
      border:1px solid rgba(216,192,238,.15);
      border-radius:13px;
      background:rgba(21,17,27,.93);
      box-shadow:0 13px 38px rgba(0,0,0,.36);
      transform:rotate(2deg);
      color:inherit;
      text-decoration:none;
      transition:transform .2s,border-color .2s;
    }
    .showcase-note:hover { border-color:rgba(216,192,238,.38); transform:rotate(1deg) translateY(-2px) }
    .showcase-note > span { display:grid; width:29px; height:29px; place-items:center; border-radius:9px; background:#30203e; color:#d4a9ff }
    .showcase-note b,.showcase-note small { display:block }
    .showcase-note b { color:#e8e0ec; font:600 9px var(--font) }
    .showcase-note small { margin-top:4px; color:#89808e; font:9px var(--font) }
    .landing-ribbon {
      display:flex;
      min-height:54px;
      align-items:center;
      justify-content:center;
      gap:22px;
      margin:3px 0 76px;
      border-top:1px solid rgba(207,185,229,.1);
      border-bottom:1px solid rgba(207,185,229,.1);
      color:#93899b;
      font:700 9px var(--font);
      letter-spacing:1.5px;
    }
    .landing-ribbon i { color:#ae7adb; font-size:11px; font-style:normal }
    .landing-features {
      display:grid;
      grid-template-columns:1.05fr 1fr 1fr;
      gap:13px;
      scroll-margin-top:110px;
    }
    .feature-intro { padding:20px 20px 20px 7px }
    .feature-intro h2,.landing-bottom h2 { margin:18px 0 10px; font:600 34px/1.08 var(--display); letter-spacing:-1.3px }
    .feature-intro p { max-width:260px; margin:0; color:#99919f; font:12px/1.7 var(--font) }
    .feature-card {
      position:relative;
      display:flex;
      min-height:205px;
      flex-direction:column;
      justify-content:space-between;
      overflow:hidden;
      padding:19px;
      border:1px solid rgba(214,195,232,.12);
      border-radius:17px;
      background:linear-gradient(145deg,rgba(26,22,32,.88),rgba(14,13,18,.92));
      box-shadow:inset 0 1px rgba(255,255,255,.025);
      transition:transform .2s,border-color .2s;
    }
    .feature-card:hover { transform:translateY(-3px); border-color:rgba(190,141,231,.32) }
    .feature-card-custom { background:radial-gradient(ellipse at 90% 0%,rgba(143,83,190,.16),transparent 45%),linear-gradient(145deg,rgba(29,23,37,.94),rgba(14,13,18,.96)) }
    .feature-icon { display:grid; width:34px; height:34px; place-items:center; border:1px solid #473455; border-radius:11px; background:#21182b; color:#d3a8fa; font-size:15px }
    .feature-card small { color:#a48bae; font:700 8px var(--font); letter-spacing:1.1px }
    .feature-card h3 { margin:8px 0 5px; color:#f0eaf4; font:600 16px var(--display); letter-spacing:-.3px }
    .feature-card p { max-width:260px; margin:0; color:#928b98; font:10px/1.65 var(--font) }
    .feature-decoration { position:absolute; top:-20px; right:15px; color:rgba(199,155,239,.12); font-size:100px }
    .landing-bottom {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:25px;
      margin-top:67px;
      padding:28px 31px;
      border:1px solid rgba(206,174,237,.16);
      border-radius:19px;
      background:radial-gradient(ellipse at 90% 50%,rgba(132,74,181,.2),transparent 42%),linear-gradient(110deg,#17121d,#100e14);
    }
    .landing-bottom h2 { margin-bottom:0; font-size:29px }
    body:has(.dashboard) .page:has(.dashboard) { padding-top:112px }
    body:has(.dashboard) .dashboard {
      border-color:rgba(207,179,235,.18);
      background:
        radial-gradient(ellipse at 4% 0%,rgba(152,91,199,.16),transparent 28%),
        linear-gradient(155deg,#100e14,#09090d 72%);
      box-shadow:0 28px 105px rgba(0,0,0,.48),0 0 95px rgba(130,77,176,.07);
    }
    body:has(.dashboard) .studio-header { border-color:rgba(218,194,239,.1) }
    body:has(.dashboard) .studio-heading h1 { font-size:34px }
    body:has(.dashboard) .metric-card { border-color:rgba(210,190,229,.14); background:linear-gradient(145deg,rgba(29,25,35,.94),rgba(13,12,17,.96)) }
    body:has(.dashboard) .metric-views { border-color:rgba(184,132,226,.36); background:linear-gradient(125deg,rgba(108,68,143,.34),rgba(18,15,23,.97) 75%) }
    body:has(.dashboard) .editor-section { border-color:rgba(210,190,229,.13); background:rgba(17,15,21,.84) }
    body:has(.dashboard) .preview-card { border-color:rgba(206,172,235,.24); background:#100e14 }
    @media(max-width:900px) {
      .landing-hero { gap:24px; padding-right:25px; padding-left:25px }
      .landing-copy h1 { letter-spacing:-3.5px }
      .landing-features { grid-template-columns:repeat(2,minmax(0,1fr)) }
      .feature-intro { min-height:175px; padding-left:2px }
    }
    @media(max-width:700px) {
      body:has(.landing) .topbar,
      body:has(.dashboard) .topbar { top:12px; width:calc(100% - 24px); min-height:56px; padding:8px 9px 8px 15px; border-radius:16px }
      body:has(.landing) .brand,
      body:has(.dashboard) .brand { font-size:18px }
      .page:has(.landing) { width:calc(100% - 28px); padding-top:102px }
      .landing-hero { min-height:0; grid-template-columns:1fr; gap:19px; padding:32px 8px 35px }
      .landing-copy h1 { margin-top:17px; font-size:clamp(44px,12vw,68px); letter-spacing:-3.7px }
      .landing-intro { max-width:510px; font-size:13px }
      .landing-proof { margin-top:23px }
      .landing-showcase { min-height:420px }
      .showcase-profile { width:min(100% - 24px,360px) }
      .showcase-chip { top:21px; right:0 }
      .showcase-note { right:-2px; bottom:20px }
      .landing-ribbon { justify-content:flex-start; gap:14px; overflow:hidden; margin:0 -4px 46px; padding:0 4px; font-size:8px; white-space:nowrap }
      .landing-features { grid-template-columns:1fr; gap:10px }
      .feature-intro { min-height:0; padding:0 4px 12px }
      .feature-intro h2 { font-size:30px }
      .feature-card { min-height:166px; padding:16px }
      .landing-bottom { align-items:flex-start; flex-direction:column; margin-top:42px; padding:23px 19px }
      .landing-bottom h2 { font-size:27px }
      .landing-bottom .landing-cta { min-height:44px }
      body:has(.dashboard) .page:has(.dashboard) { padding-top:89px }
      body:has(.dashboard) .studio-heading h1 { font-size:29px }
    }
    @media(max-width:390px) {
      .landing-copy h1 { font-size:42px; letter-spacing:-2.7px }
      .landing-actions { gap:15px }
      .landing-cta { gap:10px; padding:0 13px; font-size:11px }
      .showcase-profile { width:calc(100% - 12px) }
      .showcase-note { right:-4px; padding-right:10px }
      .landing-bottom { padding:20px 15px }
    }
    .profile ~ .section-title { margin-top:27px; margin-bottom:12px }
    .socials {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(142px,1fr));
      gap:9px;
      margin:0 0 19px;
    }
    .social-link {
      display:flex;
      min-width:0;
      min-height:54px;
      align-items:center;
      gap:10px;
      padding:8px 11px;
      border:1px solid color-mix(in srgb,currentColor 23%,var(--border));
      border-radius:15px;
      background:linear-gradient(135deg,rgba(27,25,32,.96),rgba(15,14,19,.95));
      color:#d0cdd5;
      font:600 11px var(--font);
      text-decoration:none;
      box-shadow:inset 0 1px rgba(255,255,255,.025);
      transition:transform .18s,border-color .18s,background .18s;
    }
    .social-link:hover { transform:translateY(-2px); border-color:color-mix(in srgb,currentColor 52%,var(--border)); background:#17141d }
    .social-icon {
      display:grid;
      width:34px;
      height:34px;
      flex:0 0 34px;
      place-items:center;
      border:1px solid color-mix(in srgb,currentColor 26%,#302c37);
      border-radius:11px;
      background:color-mix(in srgb,currentColor 12%,#17141d);
      font-size:15px;
    }
    .site-icon { display:block; width:20px; height:20px; object-fit:contain }
    .site-icon[hidden] { display:none }
    .site-icon-fallback { display:none }
    .site-icon-fallback.site-icon-fallback-visible { display:inline }
    .social-icon .site-icon { width:19px; height:19px }
    .social-icon .site-icon-fallback.site-icon-fallback-visible { display:block }
    .link-icon .site-icon { width:25px; height:25px }
    .link-icon .site-icon-fallback.site-icon-fallback-visible { display:block }
    .social-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .social-arrow { margin-left:auto; color:#77717f; font-size:13px }
    .social-link[data-brand="YouTube"] { color:#ff8585 }
    .social-link[data-brand="Spotify"] { color:#80dca0 }
    .social-link[data-brand="Discord"] { color:#a7b4ff }
    .social-link[data-brand="Twitch"] { color:#c6a2ff }
    .social-link[data-brand="GitHub"] { color:#e5e2eb }
    .social-link[data-brand="Instagram"] { color:#f0a4c3 }
    .social-link[data-brand="TikTok"] { color:#d5d2dc }
    .social-link[data-brand="X"] { color:#eee }
    .editor-link-icon[data-brand="YouTube"] { color:#ff8585 }
    .editor-link-icon[data-brand="Spotify"] { color:#80dca0 }
    .editor-link-icon[data-brand="Discord"] { color:#a7b4ff }
    .editor-link-icon[data-brand="Twitch"] { color:#c6a2ff }
    .editor-link-icon[data-brand="GitHub"] { color:#e5e2eb }
    .editor-link-icon[data-brand="Instagram"] { color:#f0a4c3 }
    .editor-link-icon[data-brand="TikTok"] { color:#d5d2dc }
    .editor-link-icon[data-brand="X"] { color:#eee }
    @media(max-width:540px) {
      .socials { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px }
      .social-link { min-height:49px; gap:7px; padding:7px 8px; font-size:10px }
      .social-icon { width:30px; height:30px; flex-basis:30px }
    }
    .auth-password-note { margin:12px 0 0; text-align:center }
    .username-migration {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      margin:18px 34px 0;
      padding:15px 17px;
      border:1px solid rgba(191,145,231,.26);
      border-radius:14px;
      background:linear-gradient(110deg,rgba(104,66,136,.2),rgba(20,17,25,.92));
    }
    .username-migration strong { color:#eee4f6; font:600 12px var(--font) }
    .username-migration p { margin:5px 0 0; color:#a49aa9; font:11px/1.55 var(--font) }
    .password-settings {
      margin:0 34px 23px;
      border:1px solid rgba(210,190,229,.13);
      border-radius:13px;
      background:rgba(17,15,21,.8);
    }
    .password-settings summary { padding:14px 16px; color:#ded5e6; font:600 12px var(--font); cursor:pointer }
    .password-settings-body { padding:0 16px 16px }
    .password-settings-body p { margin:0 0 13px; color:#99909f; font:11px/1.5 var(--font) }
    .password-settings-body .field { max-width:420px }
    @media(max-width:700px) {
      .username-migration { align-items:flex-start; flex-direction:column; margin:15px 14px 0; padding:13px }
      .password-settings { margin:0 14px 17px }
    }
    .field select {
      width:100%;
      min-height:42px;
      padding:10px 12px;
      border:1px solid #292730;
      border-radius:10px;
      background:#09090c;
      color:var(--text);
      font:12px var(--font);
    }
    .customization-picker { margin-top:13px; padding:12px; border:1px solid #292630; border-radius:12px; background:#0b0a0f }
    .customization-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 10px }
    .customization-grid .field { min-width:0; margin-bottom:9px }
    .customization-picker .field label { font-size:10px }
    .customization-picker .field select { min-height:37px; padding:7px 9px; font-size:10px }
    .customization-picker select:disabled { color:#77717f }
    .customization-ranges { padding-top:8px; border-top:1px solid #25222b }
    .range-field { display:block; min-width:0; margin-top:8px; color:#bdb7c5; font:10px var(--font) }
    .range-field > span { display:flex; justify-content:space-between; gap:8px }
    .range-field output { color:#d9bcff }
    .range-field input { display:block; width:100%; height:20px; margin:8px 0 0; accent-color:var(--profile-accent,#c59bff) }
    .customization-note { margin:8px 0 0; color:#8e8795; font:10px/1.45 var(--font) }
    #app[data-profile-layout="compact"] { width:min(520px,calc(100% - 34px)) }
    #app[data-profile-layout="wide"] { width:min(900px,calc(100% - 34px)) }
    #app[data-profile-layout="wide"] .links { grid-template-columns:repeat(2,minmax(0,1fr)) }
    #app[data-profile-layout="compact"] .profile-banner { height:95px }
    #app[data-profile-font="serif"] { --custom-profile-font:Georgia,"Times New Roman",serif }
    #app[data-profile-font="mono"] { --custom-profile-font:"SFMono-Regular",Consolas,monospace }
    #app[data-profile-font="rounded"] { --custom-profile-font:"Trebuchet MS",Arial,sans-serif }
    #app[data-profile-font] .profile,
    #app[data-profile-font] .social-link,
    #app[data-profile-font] .link-card { font-family:var(--custom-profile-font,var(--font)) }
    #app[data-link-style="pill"] .link-card,
    #app[data-link-style="pill"] .social-link { border-radius:999px }
    #app[data-link-style="square"] .link-card,
    #app[data-link-style="square"] .social-link { border-radius:6px }
    #app[data-link-style="solid"] .link-card,
    #app[data-link-style="solid"] .social-link { border-color:var(--profile-accent,#c59bff); background:color-mix(in srgb,var(--profile-accent,#c59bff) 22%,#111015) }
    #app[data-link-style="outline"] .link-card,
    #app[data-link-style="outline"] .social-link { border:2px solid var(--profile-accent,#c59bff); background:transparent }
    #app[data-profile-animation="float"] .avatar-wrap { animation:profile-float 4s ease-in-out infinite }
    #app[data-profile-animation="glow"] .link-card,
    #app[data-profile-animation="glow"] .social-link { box-shadow:0 0 20px color-mix(in srgb,var(--profile-accent,#c59bff) 24%,transparent) }
    .preview-card[data-profile-font="serif"] { font-family:Georgia,"Times New Roman",serif }
    .preview-card[data-profile-font="mono"] { font-family:"SFMono-Regular",Consolas,monospace }
    .preview-card[data-profile-font="rounded"] { font-family:"Trebuchet MS",Arial,sans-serif }
    .preview-card[data-link-style="pill"] .preview-link-skeleton { border-radius:999px }
    .preview-card[data-link-style="square"] .preview-link-skeleton { border-radius:6px }
    .preview-card[data-link-style="solid"] .preview-link-skeleton { border-color:var(--profile-accent,#c59bff); background:color-mix(in srgb,var(--profile-accent,#c59bff) 22%,#111015) }
    .preview-card[data-link-style="outline"] .preview-link-skeleton { border:2px solid var(--profile-accent,#c59bff); background:transparent }
    .preview-card[data-profile-animation="float"] .preview-avatar { animation:profile-float 4s ease-in-out infinite }
    .preview-card[data-profile-animation="glow"] .preview-link-skeleton { box-shadow:0 0 20px color-mix(in srgb,var(--profile-accent,#c59bff) 24%,transparent) }
    @keyframes profile-float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-5px) } }
    @media(max-width:540px) {
      .customization-grid { grid-template-columns:1fr }
      #app[data-profile-layout="wide"] .links { grid-template-columns:1fr }
    }
    @media(prefers-reduced-motion:reduce) {
      #app[data-profile-animation="float"] .avatar-wrap { animation:none }
    }

    /* ===================================================================
       v2: dashboard bento, connections, premium perks, admin control room
       =================================================================== */
    :root { --v2-line:#2a2833; --v2-panel:linear-gradient(160deg,rgba(25,22,32,.96),rgba(12,11,16,.98)); --v2-soft:#9b96a5 }
    .dash-kicker { color:#b9a3d6; font:700 10px var(--font); letter-spacing:1.8px }
    .dash-v2 { padding:26px }
    .dash-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:6px 4px 22px; border-bottom:1px solid var(--v2-line) }
    .dash-hero-main { display:flex; align-items:center; gap:16px; min-width:0 }
    .dash-hero-avatar { display:grid; flex:0 0 64px; width:64px; height:64px; place-items:center; overflow:hidden; border-radius:50%; border:2px solid color-mix(in srgb,var(--profile-accent,#c59bff) 60%,transparent); background:linear-gradient(145deg,#35234d,#a36ab1); color:#f1dfff; font:700 24px var(--display); box-shadow:0 0 28px color-mix(in srgb,var(--profile-accent,#c59bff) 25%,transparent) }
    .dash-hero-avatar img { width:100%; height:100%; object-fit:cover }
    .dash-hero-copy h1 { margin:6px 0 4px; font-size:30px; letter-spacing:-1px }
    .dash-hero-copy p { margin:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--v2-soft); font:12px var(--font) }
    .dash-hero-url { overflow-wrap:anywhere }
    .live-pill { display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border:1px solid #2f5a48; border-radius:99px; background:#11231b; color:#9ee2bd; font:700 10px var(--font); letter-spacing:1px }
    .live-pill i { width:7px; height:7px; border-radius:50%; background:#83d5ab; box-shadow:0 0 10px #83d5ab; animation:pulse-dot 2s ease-in-out infinite }
    @keyframes pulse-dot { 50% { opacity:.35 } }
    .bento { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; margin:22px 0 26px }
    .bento-card { min-width:0; padding:18px; border:1px solid var(--v2-line); border-radius:24px; background:var(--v2-panel); box-shadow:0 14px 40px rgba(0,0,0,.25) }
    .bento-views { grid-column:span 4; position:relative; overflow:hidden }
    .bento-views::before { content:""; position:absolute; inset:-40% -20% auto auto; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--profile-accent,#c59bff) 30%,transparent),transparent 70%); pointer-events:none }
    .bento-strength,.bento-top { grid-column:span 2 }
    .bento-top { grid-column:span 3 }
    .bento-perks { grid-column:span 3 }
    .bento-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px }
    .bento-eyebrow { color:#9e96ab; font:700 9px var(--font); letter-spacing:1.6px }
    .bento-tag { padding:4px 8px; border:1px solid #3a3346; border-radius:99px; color:#c9bddc; font:700 8px var(--font); letter-spacing:1px }
    .bento-tag.tag-premium { border-color:#70572a; background:#2a2112; color:#f1d28e }
    .bento-tag.tag-active { border-color:#2f5a48; background:#11231b; color:#9ee2bd }
    .bento-big { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
    .bento-big > span { font:600 42px var(--display); letter-spacing:-1.8px; line-height:1 }
    .bento-big small { color:#9ee2bd; font:600 11px var(--font) }
    .bento-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px }
    .bento-stats div { padding:10px; border:1px solid #2a2833; border-radius:14px; background:rgba(0,0,0,.2) }
    .bento-stats b { display:block; font:600 18px var(--display) }
    .bento-stats span { color:#8f8a99; font:9px var(--font); letter-spacing:.3px }
    .bento-note { margin:10px 0 0; color:#8f8a99; font:11px/1.6 var(--font) }
    .chart-wrap { position:relative; min-height:170px; margin-top:6px }
    .chart-svg { display:block; width:100%; height:auto }
    .chart-grid { stroke:#2a2833; stroke-width:1 }
    .chart-axis { fill:#77727f; font:9px var(--font) }
    .chart-line-views { fill:none; stroke:var(--profile-accent,#c59bff); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round }
    .chart-line-clicks { fill:none; stroke:#8de1bf; stroke-width:2; stroke-dasharray:5 4; stroke-linecap:round }
    .chart-dot-views { fill:var(--profile-accent,#c59bff); stroke:#0d0c13; stroke-width:2 }
    .chart-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; color:#9d98a7; font:10px var(--font) }
    .chart-legend span { display:inline-flex; align-items:center; gap:6px }
    .chart-legend i { width:14px; height:3px; border-radius:3px; display:inline-block }
    .lg-views { background:var(--profile-accent,#c59bff) }
    .lg-clicks { background:#8de1bf }
    .chart-today { margin-left:auto; color:#c9bddc }
    .locked-chart { filter:blur(4px) saturate(.7); opacity:.55; pointer-events:none }
    .locked-chart svg { width:100%; height:170px; display:block }
    .locked-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:18px }
    .locked-overlay b { color:#f2e7c9; font:600 15px var(--display) }
    .locked-overlay span { color:#a79f8e; font:11px/1.5 var(--font) }
    .skeleton-bar { height:150px; border-radius:16px; background:linear-gradient(90deg,#17141d 25%,#211c29 50%,#17141d 75%); background-size:200% 100%; animation:shimmer-bg 1.4s linear infinite }
    @keyframes shimmer-bg { to { background-position:-200% 0 } }
    .strength { display:flex; align-items:center; gap:16px }
    .ring-wrap { position:relative; flex:0 0 84px; width:84px; height:84px; display:grid; place-items:center }
    .ring { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) }
    .ring-track { fill:none; stroke:#27232f; stroke-width:7 }
    .ring-fill { fill:none; stroke:var(--profile-accent,#c59bff); stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset .6s ease }
    .ring-wrap b { font:600 16px var(--display) }
    .checklist { margin:0; padding:0; list-style:none; display:grid; gap:6px; color:#8f8a99; font:11px var(--font) }
    .checklist li { display:flex; align-items:center; gap:8px }
    .checklist li span { display:grid; width:16px; height:16px; place-items:center; border-radius:50%; border:1px solid #3a3346; font-size:9px }
    .checklist li.done { color:#d6d0e0 }
    .checklist li.done span { border-color:#2f5a48; background:#11231b; color:#9ee2bd }
    .perk-list { display:flex; flex-wrap:wrap; gap:6px }
    .perk { padding:5px 9px; border:1px solid #2f5a48; border-radius:99px; background:#11231b; color:#bfe9d4; font:10px var(--font) }
    .perk.locked { border:1px dashed #5a4a2a; background:#1d170e; color:#c9b58a }
    .bar-list,.locked-bars { display:grid; gap:10px }
    .bar-row { min-width:0 }
    .bar-meta { display:flex; justify-content:space-between; gap:10px; margin-bottom:5px; font:11px var(--font); color:#cfc9d8 }
    .bar-meta b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600 }
    .bar-track { height:8px; border-radius:99px; background:#1c1923; overflow:hidden }
    .bar-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--profile-accent,#c59bff),#8de1bf) }
    .locked-bars { filter:blur(2px); opacity:.6 }
    .limit-note { margin:0 0 12px; color:#8f8a99; font:11px var(--font) }
    .limit-note b { color:#f2f0f5 }
    .editor-link { flex-direction:column!important; align-items:stretch!important; gap:8px!important; }
    .editor-link-top { display:flex; align-items:center; gap:10px }
    .editor-link-top .editor-link-fields { flex:1; min-width:0 }
    .editor-link-bottom { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-left:38px; font:10px var(--font); color:#8f8a99 }
    .connection-type { display:flex; align-items:center; gap:7px }
    .connection-type span { color:#9d98a7; letter-spacing:.4px }
    .connection-type select { min-height:30px; padding:4px 8px; border:1px solid #2c2933; border-radius:9px; background:#09090c; color:#e7e3ee; font:11px var(--display) }
    .connection-shows { color:#b9a3d6 }
    .link-click-count { margin-left:auto }
    .feature-toggle { min-height:28px; padding:0 10px; border:1px solid #3a3346; border-radius:9px; background:#15131a; color:#e0c48a; font:600 10px var(--font); cursor:pointer }
    .feature-toggle.on { border-color:#8a6a2a; background:#2a2112 }
    .feature-toggle.locked { color:#8f8a99; border-style:dashed }
    .editor-link.is-featured { border-color:#7a5f2a!important; box-shadow:0 0 0 1px rgba(238,190,88,.18) }
    .preview-connections { display:grid; gap:7px; text-align:left }
    .pv-featured { display:flex; flex-direction:column; gap:2px; padding:9px 10px; border:1px solid #7a5f2a; border-radius:12px; background:linear-gradient(120deg,#2a2112,#16120b); color:#f4d28b; font:10px var(--font) }
    .pv-featured b { color:#f5ead4; font:600 12px var(--display) }
    .pv-socials { display:flex; flex-wrap:wrap; justify-content:center; gap:6px }
    .pv-social { display:grid; width:28px; height:28px; place-items:center; border:1px solid #2b2832; border-radius:9px; background:#15131a; color:#d0cdd5; font-size:12px }
    .pv-link { display:flex; align-items:center; gap:8px; min-height:32px; padding:0 10px; border:1px solid #2c2932; border-radius:11px; background:#111015; font:11px var(--font) }
    .pv-link i { display:grid; width:16px; height:16px; place-items:center; font-style:normal }
    .pv-link b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600 }
    .pv-link span { margin-left:auto; color:#77717f }
    .pv-more,.pv-empty { color:#726e79; font:9px var(--font); text-align:center }
    .preview-card[data-link-style="pill"] .pv-link { border-radius:999px }
    .preview-card[data-link-style="square"] .pv-link { border-radius:6px }
    .preview-card[data-link-style="solid"] .pv-link { border-color:var(--profile-accent,#c59bff); background:color-mix(in srgb,var(--profile-accent,#c59bff) 22%,#0d0c12) }
    .preview-card[data-link-style="outline"] .pv-link { border:2px solid var(--profile-accent,#c59bff); background:transparent }
    .preview-card[data-profile-animation="glow"] .pv-link { box-shadow:0 0 16px color-mix(in srgb,var(--profile-accent,#c59bff) 24%,transparent) }
    .preview-card[data-profile-font="display"] { font-family:var(--display) }
    .preview-card[data-profile-font="serif"] { font-family:Georgia,"Times New Roman",serif }
    .preview-card[data-profile-font="mono"] { font-family:"SFMono-Regular",Consolas,monospace }
    .preview-card[data-profile-font="rounded"] { font-family:"Trebuchet MS",Arial,sans-serif }
    .preview-card[data-avatar-ring="gradient"] .preview-avatar,
    #app[data-avatar-ring="gradient"] .avatar-wrap { background:conic-gradient(from 0deg,#c59bff,#70e0c4,#ffb07a,#c59bff); }
    .preview-card[data-avatar-ring="neon"] .preview-avatar,
    #app[data-avatar-ring="neon"] .avatar-wrap { box-shadow:0 0 0 2px #0d0c12,0 0 0 4px var(--profile-accent,#c59bff),0 0 22px var(--profile-accent,#c59bff); }
    .preview-card[data-avatar-ring="pulse"] .preview-avatar,
    #app[data-avatar-ring="pulse"] .avatar-wrap { animation:ring-pulse 2.4s ease-in-out infinite }
    @keyframes ring-pulse { 0%,100% { box-shadow:0 0 0 0 color-mix(in srgb,var(--profile-accent,#c59bff) 60%,transparent) } 50% { box-shadow:0 0 0 12px transparent } }
    #app[data-profile-animation="shimmer"] .link-card,
    #app[data-profile-animation="shimmer"] .social-link,
    #app[data-profile-animation="shimmer"] .featured-card { background-image:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%); background-size:250% 100%; animation:sheen 4.5s linear infinite }
    .preview-card[data-profile-animation="shimmer"] .pv-link { background-image:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%); background-size:250% 100%; animation:sheen 4.5s linear infinite }
    @keyframes sheen { from { background-position:150% 0 } to { background-position:-150% 0 } }
    #app[data-profile-font="display"] { --custom-profile-font:var(--display) }
    .featured-card { position:relative; display:block; margin:0 0 14px; padding:16px 18px; border:1px solid color-mix(in srgb,var(--profile-accent,#c59bff) 55%,#333); border-radius:22px; background:linear-gradient(125deg,color-mix(in srgb,var(--profile-accent,#c59bff) 18%,#0d0c13),#0d0c13 70%); box-shadow:0 0 30px color-mix(in srgb,var(--profile-accent,#c59bff) 18%,transparent); transition:transform .18s }
    .featured-card:hover { transform:translateY(-2px) }
    .featured-tag { display:inline-block; margin-bottom:10px; padding:3px 8px; border-radius:99px; background:rgba(238,190,88,.14); color:#f4d28b; font:700 9px var(--font); letter-spacing:1.2px }
    .featured-body { display:flex; align-items:center; gap:13px }
    .featured-body .link-body { min-width:0; flex:1; text-align:left }
    .featured-body .link-name { display:block; font:600 17px var(--display) }
    .featured-body .link-url { display:block; color:#8f8a99; font:11px var(--font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .featured-body .arrow { color:#8f8a99 }
    .theme-option.locked { opacity:.6; border-style:dashed }
    body[data-theme="nebula"] { --theme-accent:#d08cff; --theme-glow:rgba(160,80,220,.22) }
    body[data-theme="sunset"] { --theme-accent:#ffb07a; --theme-glow:rgba(230,120,60,.2) }
    body[data-theme="glacier"] { --theme-accent:#9ad8ff; --theme-glow:rgba(90,160,220,.2) }
    .theme-option[data-theme="nebula"] i { --swatch:#d08cff }
    .theme-option[data-theme="sunset"] i { --swatch:#ffb07a }
    .theme-option[data-theme="glacier"] i { --swatch:#9ad8ff }
    .perk-list .perk.unlocked { white-space:nowrap }

    .toast-stack { position:fixed; z-index:50; right:18px; bottom:18px; display:grid; gap:8px; width:min(360px,calc(100% - 36px)) }
    .toast { padding:12px 15px; border:1px solid #3a3346; border-radius:14px; background:#15121b; color:#ece8f2; font:12px/1.5 var(--font); box-shadow:0 14px 40px rgba(0,0,0,.45); opacity:0; transform:translateY(8px); transition:.25s }
    .toast.show { opacity:1; transform:none }
    .toast-error { border-color:#70323b; background:#1f1015; color:#ffc7cd }
    .toast-warn { border-color:#70572a; background:#1f1a0e; color:#f4d28b }
    .toast-info { border-color:#3a4a6a; background:#101722; color:#c6dbff }

    body:has(.admin-console) .page { width:min(1080px,calc(100% - 34px)) }
    body:has(.admin-console) .topbar { width:min(1080px,calc(100% - 34px)) }
    .admin-console { padding:26px; border:1px solid var(--v2-line); border-radius:30px; background:linear-gradient(170deg,rgba(22,19,28,.97),rgba(9,9,12,.98)); box-shadow:0 20px 70px rgba(0,0,0,.35) }
    .admin-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--v2-line) }
    .admin-hero h1 { margin:6px 0 4px; font-size:32px; letter-spacing:-1.1px }
    .admin-hero p { margin:0; color:var(--v2-soft); font:13px var(--font) }
    .admin-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:20px 0 14px }
    .admin-stat { min-width:0; padding:14px; border:1px solid var(--v2-line); border-radius:16px; background:rgba(255,255,255,.02) }
    .admin-stat span { display:block; color:#8f8a99; font:700 9px var(--font); letter-spacing:1px; text-transform:uppercase }
    .admin-stat b { display:block; margin-top:6px; font:600 24px var(--display); letter-spacing:-.6px }
    .admin-stat-error { color:#ffc7cd; font:12px var(--font) }
    .skeleton-tile { min-height:72px; background:linear-gradient(90deg,#17141d 25%,#211c29 50%,#17141d 75%); background-size:200% 100%; animation:shimmer-bg 1.4s linear infinite }
    .admin-command { display:flex; align-items:center; gap:10px; padding:8px 8px 8px 16px; border:1px solid #3a3346; border-radius:16px; background:#09080d }
    .admin-command:focus-within { border-color:#8d70b3; box-shadow:0 0 0 3px rgba(141,112,179,.18) }
    .admin-command-prompt { color:#9ee2bd; font:600 13px var(--display); white-space:nowrap }
    .admin-command input { flex:1; min-width:0; min-height:36px; padding:0; border:0; outline:0; background:transparent; color:#f2f0f5; font:13px var(--display) }
    .admin-command-help { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 18px }
    .command-chip { padding:5px 9px; border:1px solid #2c2933; border-radius:99px; background:#111015; color:#b9b3c4; font:10px var(--display); cursor:pointer }
    .command-chip:hover { border-color:#6b5c7d; color:#fff }
    .admin-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start }
    .admin-panel { padding:16px; border:1px solid var(--v2-line); border-radius:20px; background:rgba(255,255,255,.015) }
    .admin-panel-title { margin-bottom:12px; color:#9e96ab; font:700 9px var(--font); letter-spacing:1.5px; text-transform:uppercase }
    .admin-search { display:flex; gap:8px; margin-bottom:14px }
    .admin-search input { flex:1; min-width:0; min-height:40px; padding:0 13px; border:1px solid #2c2933; border-radius:12px; background:#09090c; color:#f2f0f5; font:13px var(--display) }
    .admin-results { display:grid; gap:12px }
    .admin-profile { padding:15px; border:1px solid #2c2933; border-radius:18px; background:#0e0d13 }
    .admin-profile.is-banned { border-color:#5a2a33; background:#140d10 }
    .admin-profile-head { display:flex; align-items:center; gap:12px }
    .admin-avatar { display:grid; flex:0 0 46px; width:46px; height:46px; place-items:center; overflow:hidden; border-radius:50%; background:linear-gradient(145deg,#35234d,#a36ab1); color:#f1dfff; font:700 16px var(--display) }
    .admin-avatar img { width:100%; height:100%; object-fit:cover }
    .admin-profile-id { min-width:0; flex:1 }
    .admin-profile-id strong { display:block; font:600 15px var(--display) }
    .admin-profile-id > span { color:#8f8a99; font:11px var(--font) }
    .admin-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px }
    .chip { padding:3px 8px; border:1px solid #33303b; border-radius:99px; color:#bcb4c6; font:600 9px var(--font); letter-spacing:.3px }
    .chip-admin { border-color:#59436b; background:#21172b; color:#d9b0ff }
    .chip-premium { border-color:#70572a; background:#2a2112; color:#f1d28e }
    .chip-ok { border-color:#2f5a48; background:#11231b; color:#9ee2bd }
    .chip-danger { border-color:#6a2a35; background:#2a1016; color:#ffb3bd }
    .chip-badge { border-color:#3a4a6a; background:#101722; color:#c6dbff }
    .admin-profile-stat { text-align:right }
    .admin-profile-stat b { display:block; font:600 18px var(--display) }
    .admin-profile-stat span { color:#8f8a99; font:9px var(--font); letter-spacing:.8px; text-transform:uppercase }
    .admin-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:13px }
    .admin-group { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px; border:1px solid #25222c; border-radius:14px; background:rgba(0,0,0,.18) }
    .admin-group-label { width:100%; color:#8f8a99; font:700 8px var(--font); letter-spacing:1.3px; text-transform:uppercase }
    .admin-group-danger { border-color:#3a2329 }
    .badge-tool { display:flex; gap:6px; width:100%; flex-wrap:wrap }
    .badge-tool select { flex:1; min-width:110px; min-height:34px; padding:0 9px; border:1px solid #2c2933; border-radius:9px; background:#09090c; color:#e7e3ee; font:11px var(--display) }
    .button.danger { border-color:#5a2a33; color:#ffc7cd }
    .button.danger:hover { border-color:#8a3a48; background:#22121a }
    .admin-tools { margin-top:12px; border-top:1px solid #25222c }
    .admin-tools summary { padding:10px 0; color:#c9bddc; font:600 11px var(--font); cursor:pointer }
    .admin-tools-grid { display:grid; gap:12px; padding-bottom:6px }
    .reset-buttons { display:flex; flex-wrap:wrap; gap:6px }
    .password-form { display:grid; grid-template-columns:1fr 1fr auto; gap:6px }
    .password-form input { min-height:34px; min-width:0; padding:0 10px; border:1px solid #2c2933; border-radius:9px; background:#09090c; color:#f2f0f5; font:11px var(--display) }
    .admin-list,.admin-audit { display:grid; gap:10px; margin:0; padding:0; list-style:none; font:11px var(--font) }
    .admin-list li,.admin-audit li { display:flex; align-items:center; gap:9px; min-width:0 }
    .admin-list small,.admin-audit small { display:block; color:#7d7887 }
    .admin-list b,.admin-audit b { color:#e9e5ef; font-weight:600 }
    .admin-audit li { align-items:flex-start }
    .admin-audit time { flex:0 0 52px; color:#7d7887; font-size:10px }
    .admin-audit span { color:#c9bddc }
    .admin-audit em { display:block; color:#8f8a99; font-style:normal }
    .admin-mini-avatar { display:grid; flex:0 0 28px; width:28px; height:28px; place-items:center; border-radius:50%; background:#241c33; color:#d9b0ff; font:700 11px var(--display) }
    .admin-list > li > div { min-width:0; flex:1 }
    .admin-list b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    @media(max-width:900px) {
      .bento { grid-template-columns:repeat(2,minmax(0,1fr)) }
      .bento-views { grid-column:1/-1 }
      .bento-strength,.bento-top,.bento-perks { grid-column:span 1 }
      .admin-grid { grid-template-columns:1fr }
      .admin-action-grid { grid-template-columns:1fr }
    }
    @media(max-width:700px) {
      .dash-v2,.admin-console { padding:18px 15px }
      .bento { grid-template-columns:1fr }
      .bento-strength,.bento-top,.bento-perks { grid-column:auto }
      .admin-stats { grid-template-columns:repeat(2,minmax(0,1fr)) }
      .password-form { grid-template-columns:1fr }
      .toast-stack { left:12px; right:12px; width:auto }
      body:has(.admin-console) .page { width:calc(100% - 24px) }
      body:has(.admin-console) .topbar { width:calc(100% - 24px) }
    }