@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

  :root{
    --bg:#0B0913;
    --bg-2:#0F0B1B;
    --surface:#16112A;
    --surface-2:#1E1738;
    --surface-3:#271E47;
    --line:rgba(255,255,255,.08);
    --line-2:rgba(255,255,255,.14);
    --text:#F4F1FE;
    --dim:#A79EC6;
    --mute:#675E86;

    --cyan:#46E3FF;
    --cyan-deep:#1C9DC4;

    --gold-a:#FFD964; --gold-b:#FF9A2E;
    --galaxy-a:#A276FF; --galaxy-b:#4D7CFF; --galaxy-c:#FF6FE0;
    --gummy-a:#FF7DBA; --gummy-b:#74ECCB; --gummy-c:#FFE07A;
    --base-a:#62E9FF; --base-b:#4A8DFF;
    --neon-a:#9BFF5E; --neon-b:#FF3DAE;
    --prism-a:#FF5E8A; --prism-b:#5EA8FF;

    --r-common:#8A93A8;
    --r-rare:#42A6FF;
    --r-epic:#B662FF;
    --r-legendary:#FFB23E;
    --r-mythic:#FFE15A;

    --radius:18px;
    --radius-sm:12px;
    --ease:cubic-bezier(.22,.61,.36,1);
  }

  *{box-sizing:border-box}
  html,body{margin:0}
  #root{
    font-family:'Inter',system-ui,sans-serif;
    color:var(--text);
    background:
      radial-gradient(1100px 600px at 80% -10%, rgba(96,62,200,.20), transparent 60%),
      radial-gradient(900px 500px at 0% 10%, rgba(28,157,196,.16), transparent 55%),
      var(--bg);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  input,select,textarea{font-family:inherit}
  ::selection{background:rgba(70,227,255,.3)}

  .wrap{max-width:1160px;margin:0 auto;padding:0 24px}

  /* ---------- HEADER ---------- */
  header.app{
    position:sticky;top:0;z-index:40;
    background:linear-gradient(180deg, rgba(11,9,19,.92), rgba(11,9,19,.72));
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .head-row{display:flex;align-items:center;gap:20px;padding:18px 0 16px}
  .brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
  .brand-mark{
    width:40px;height:40px;border-radius:11px;position:relative;flex-shrink:0;
    background:conic-gradient(from 200deg,var(--galaxy-a),var(--cyan),var(--galaxy-c),var(--galaxy-a));
    box-shadow:0 0 0 1px rgba(255,255,255,.1) inset, 0 8px 24px -8px rgba(120,90,255,.7);
  }
  .brand-mark::after{
    content:"";position:absolute;inset:7px;border-radius:6px;
    background:radial-gradient(circle at 32% 28%, #fff, transparent 42%), var(--bg-2);
    box-shadow:0 0 14px 2px rgba(70,227,255,.5) inset;
  }
  .brand h1{
    font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:19px;letter-spacing:.5px;
    margin:0;line-height:1;text-transform:uppercase;
  }
  .brand span{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--mute);letter-spacing:2.5px;text-transform:uppercase}

  .search{
    flex:1;max-width:340px;margin-left:auto;display:flex;align-items:center;gap:9px;
    background:var(--surface);border:1px solid var(--line);border-radius:11px;
    padding:9px 13px;transition:border-color .2s, box-shadow .2s;
  }
  .search:focus-within{border-color:var(--line-2);box-shadow:0 0 0 3px rgba(70,227,255,.12)}
  .search svg{flex-shrink:0;color:var(--mute)}
  .search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:14px;min-width:0}
  .search input::placeholder{color:var(--mute)}

  .nav-btn{
    display:inline-flex;align-items:center;gap:7px;
    padding:10px 15px;border-radius:11px;font-size:13.5px;font-weight:600;
    background:var(--surface);border:1px solid var(--line);transition:.2s var(--ease);
    flex-shrink:0;
  }
  .nav-btn:hover{border-color:var(--line-2);transform:translateY(-1px)}
  .nav-btn.primary{
    background:linear-gradient(135deg,var(--cyan-deep),#5b4bd6);color:#fff;border-color:transparent;
    box-shadow:0 8px 24px -10px rgba(91,75,214,.9);
  }

  /* ---------- PROGRESS ---------- */
  .progress-strip{padding:0 0 18px}
  .pcard{
    display:flex;align-items:center;gap:22px;flex-wrap:wrap;
    background:linear-gradient(120deg, var(--surface), rgba(30,23,56,.4));
    border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;
  }
  .pmeter{flex:1;min-width:220px}
  .pmeter-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
  .pmeter-top b{font-family:'Chakra Petch',sans-serif;font-size:15px;font-weight:600;letter-spacing:.4px}
  .pmeter-top .pct{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--cyan)}
  .bar{height:9px;border-radius:99px;background:var(--bg-2);overflow:hidden;border:1px solid var(--line)}
  .bar i{
    display:block;height:100%;border-radius:99px;
    background:linear-gradient(90deg,var(--cyan),var(--galaxy-a),var(--galaxy-c));
    box-shadow:0 0 18px rgba(120,90,255,.6);
    transition:width .7s var(--ease);
  }
  .pstats{display:flex;gap:26px}
  .pstat{text-align:center}
  .pstat b{display:block;font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;line-height:1}
  .pstat span{font-size:10.5px;color:var(--mute);text-transform:uppercase;letter-spacing:1.5px}

  /* ---------- FILTERS ---------- */
  .filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0 22px}
  .chip{
    padding:8px 14px;border-radius:99px;font-size:13px;font-weight:600;
    background:var(--surface);border:1px solid var(--line);color:var(--dim);
    transition:.18s var(--ease);display:inline-flex;align-items:center;gap:7px;
  }
  .chip:hover{border-color:var(--line-2);color:var(--text)}
  .chip.on{background:var(--text);color:var(--bg);border-color:transparent}
  .chip .dot{width:8px;height:8px;border-radius:99px;background:currentColor;opacity:.9}
  .filters .sep{width:1px;height:22px;background:var(--line);margin:0 2px}
  select.flt{
    padding:8px 30px 8px 13px;border-radius:99px;font-size:13px;font-weight:600;
    background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A79EC6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    border:1px solid var(--line);color:var(--dim);appearance:none;outline:none;cursor:pointer;
  }
  .toggle-miss{margin-left:auto}

  /* ---------- GRID ---------- */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:16px;padding-bottom:60px}
  .card{
    position:relative;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);padding:16px 16px 14px;cursor:pointer;overflow:hidden;
    transition:.22s var(--ease);
  }
  .card::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:linear-gradient(140deg,var(--rar),transparent 55%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;transition:opacity .22s;
  }
  .card:hover{transform:translateY(-4px);border-color:var(--line-2)}
  .card:hover::before{opacity:1}
  .card .rar-tag{
    position:absolute;top:13px;right:13px;font-family:'JetBrains Mono',monospace;
    font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    color:var(--rar);background:color-mix(in srgb,var(--rar) 16%,transparent);
    padding:3px 7px;border-radius:6px;z-index:2;
  }
  .orb-stage{aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin-bottom:12px;position:relative}
  .card .cname{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:16px;letter-spacing:.3px;margin-bottom:9px}
  .styles-row{display:flex;gap:5px;align-items:center}
  .style-pip{width:14px;height:14px;border-radius:5px;border:1px solid rgba(255,255,255,.18);position:relative;overflow:hidden}
  .style-pip.locked{opacity:.28;filter:grayscale(1)}
  .card .count{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--dim)}
  .card .count b{color:var(--text)}

  /* ---------- ORB (procedural spirit) ---------- */
  .orb{width:84px;height:84px;border-radius:50%;position:relative;flex-shrink:0}
  .orb.sm{width:46px;height:46px}
  .orb.lg{width:120px;height:120px}
  .orb-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 12px 30px -12px rgba(0,0,0,.7)}
  .orb .glyph{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:30px;color:rgba(255,255,255,.92);
    text-shadow:0 2px 8px rgba(0,0,0,.4);z-index:3;
  }
  .orb.sm .glyph{font-size:17px}
  .orb.lg .glyph{font-size:42px}
  .orb .core{position:absolute;inset:0;border-radius:50%;z-index:1;
    box-shadow:0 0 0 1px rgba(255,255,255,.16) inset, 0 14px 34px -14px rgba(0,0,0,.8)}
  .orb .sheen{position:absolute;inset:0;border-radius:50%;z-index:2;mix-blend-mode:screen;pointer-events:none}
  .orb.locked{filter:grayscale(1) brightness(.45);opacity:.6}
  .orb.locked .glyph{color:rgba(255,255,255,.3)}

  /* materials */
  .mat-standard .core{background:radial-gradient(circle at 34% 28%, #d8fbff, var(--base-a) 34%, var(--base-b) 78%, #1a2b6b)}
  .mat-standard .sheen{background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.55),transparent 30%);animation:spin 5s linear infinite}

  .mat-metallic .core{background:radial-gradient(circle at 36% 26%, #fff6d6, var(--gold-a) 30%, var(--gold-b) 72%, #6b3d05)}
  .mat-metallic .sheen{background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.75) 40deg,transparent 90deg,transparent 220deg,rgba(255,240,200,.5) 260deg,transparent 310deg);animation:spin 4s linear infinite}

  .mat-cosmic .core{background:radial-gradient(circle at 30% 24%, #fff, var(--galaxy-c) 18%, var(--galaxy-a) 48%, var(--galaxy-b) 76%, #0a0838)}
  .mat-cosmic .sheen{
    background:
      radial-gradient(1.5px 1.5px at 30% 35%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 68% 28%, #fff, transparent),
      radial-gradient(1px 1px at 55% 65%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 78% 70%, #fff, transparent),
      radial-gradient(1px 1px at 22% 72%, #fff, transparent);
    animation:twinkle 3s ease-in-out infinite;
  }

  .mat-gummy .core{background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.95), var(--gummy-a) 38%, var(--gummy-b) 88%);box-shadow:0 0 0 1px rgba(255,255,255,.3) inset, 0 14px 34px -14px rgba(0,0,0,.6), 0 0 30px -6px var(--gummy-a)}
  .mat-gummy .sheen{background:radial-gradient(ellipse 40% 24% at 36% 24%, rgba(255,255,255,.85), transparent 70%)}

  .mat-neon .core{background:radial-gradient(circle at 34% 28%, #eafff0, var(--neon-a) 32%, var(--neon-b) 80%, #2a0a3a);box-shadow:0 0 0 1px rgba(255,255,255,.16) inset, 0 0 34px -4px var(--neon-a)}
  .mat-neon .sheen{background:conic-gradient(from 90deg,transparent,rgba(255,255,255,.5),transparent 40%);animation:spin 6s linear infinite}

  .mat-prism .core{background:conic-gradient(from 0deg,#ff5e8a,#ffb23e,#9bff5e,#46e3ff,#a276ff,#ff5e8a)}
  .mat-prism .sheen{background:radial-gradient(ellipse 50% 30% at 38% 26%, rgba(255,255,255,.9), transparent 70%);animation:spin 8s linear infinite}

  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes twinkle{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

  /* ---------- MODAL ---------- */
  .scrim{position:fixed;inset:0;z-index:60;background:rgba(6,5,12,.74);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .2s}
  @keyframes fade{from{opacity:0}}
  .modal{
    width:100%;max-width:580px;max-height:88vh;overflow:auto;
    background:var(--surface);border:1px solid var(--line-2);border-radius:24px;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.9);animation:pop .28s var(--ease);
  }
  @keyframes pop{from{transform:translateY(14px) scale(.97);opacity:0}}
  .modal-head{display:flex;align-items:center;gap:18px;padding:24px 26px;border-bottom:1px solid var(--line);position:relative}
  .modal-head .meta h2{font-family:'Chakra Petch',sans-serif;font-size:24px;font-weight:700;margin:0 0 6px;letter-spacing:.4px}
  .modal-head .rar-tag{position:static;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--rar);background:color-mix(in srgb,var(--rar) 16%,transparent);padding:4px 9px;border-radius:7px}
  .modal-head p{margin:8px 0 0;color:var(--dim);font-size:13.5px;line-height:1.5;max-width:320px}
  .x{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:9px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--dim);transition:.18s}
  .x:hover{background:var(--surface-3);color:var(--text)}
  .variant-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:13px;padding:22px 26px 26px}
  .vcard{
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:15px 12px 13px;text-align:center;transition:.2s var(--ease);position:relative;
  }
  .vcard.owned{border-color:color-mix(in srgb,var(--cyan) 40%,transparent);background:color-mix(in srgb,var(--cyan) 7%,var(--surface-2))}
  .vcard .vorb{display:flex;justify-content:center;margin-bottom:11px}
  .vcard .vname{font-size:12.5px;font-weight:600;margin-bottom:11px}
  .vbtn{
    width:100%;padding:8px;border-radius:9px;font-size:12px;font-weight:600;
    background:var(--surface-3);color:var(--dim);border:1px solid var(--line);transition:.18s;
    display:flex;align-items:center;justify-content:center;gap:6px;
  }
  .vbtn:hover{border-color:var(--line-2);color:var(--text)}
  .vbtn.owned{background:linear-gradient(135deg,var(--cyan-deep),#3aa);color:#fff;border-color:transparent}

  /* ---------- ADMIN ---------- */
  .admin{padding:28px 0 70px;animation:fade .25s}
  .admin-head{display:flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
  .admin-head h2{font-family:'Chakra Petch',sans-serif;font-size:22px;font-weight:700;margin:0;letter-spacing:.4px}
  .tabs{display:flex;gap:6px;background:var(--surface);padding:5px;border-radius:13px;border:1px solid var(--line)}
  .tab{padding:9px 16px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--dim);transition:.18s}
  .tab.on{background:var(--surface-3);color:var(--text)}

  .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
  .panel + .panel{margin-top:16px}
  .panel h3{font-family:'Chakra Petch',sans-serif;font-size:15px;font-weight:600;margin:0 0 16px;letter-spacing:.3px;color:var(--dim);text-transform:uppercase;letter-spacing:1.5px}

  .field{margin-bottom:14px}
  .field label{display:block;font-size:12px;font-weight:600;color:var(--dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}
  .field input[type=text],.field textarea,.field select{
    width:100%;padding:11px 13px;background:var(--bg-2);border:1px solid var(--line);
    border-radius:10px;color:var(--text);font-size:14px;outline:none;transition:.18s;
  }
  .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--cyan-deep);box-shadow:0 0 0 3px rgba(70,227,255,.1)}
  .field textarea{resize:vertical;min-height:64px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .color-in{display:flex;gap:8px;align-items:center}
  .color-in input[type=color]{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);padding:3px;cursor:pointer}

  .btn{padding:11px 18px;border-radius:11px;font-size:13.5px;font-weight:600;transition:.18s var(--ease);display:inline-flex;align-items:center;gap:7px}
  .btn-primary{background:linear-gradient(135deg,var(--cyan-deep),#5b4bd6);color:#fff;box-shadow:0 8px 22px -10px rgba(91,75,214,.8)}
  .btn-primary:hover{transform:translateY(-1px)}
  .btn-ghost{background:var(--surface-2);border:1px solid var(--line);color:var(--dim)}
  .btn-ghost:hover{color:var(--text);border-color:var(--line-2)}
  .btn-danger{background:color-mix(in srgb,#ff4d6d 14%,transparent);color:#ff7d97;border:1px solid color-mix(in srgb,#ff4d6d 30%,transparent)}
  .btn-danger:hover{background:color-mix(in srgb,#ff4d6d 22%,transparent)}

  .list-item{display:flex;align-items:center;gap:14px;padding:12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;margin-bottom:9px}
  .list-item .li-name{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:15px}
  .list-item .li-sub{font-size:12px;color:var(--mute);font-family:'JetBrains Mono',monospace}
  .li-actions{margin-left:auto;display:flex;gap:7px}
  .icon-btn{width:34px;height:34px;border-radius:9px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--dim);transition:.18s;border:1px solid var(--line)}
  .icon-btn:hover{color:var(--text);border-color:var(--line-2)}

  /* image manager grid in admin */
  .img-matrix{overflow-x:auto}
  .matrix{border-collapse:separate;border-spacing:0;width:100%;min-width:520px}
  .matrix th{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--mute);font-weight:600;padding:10px;text-align:center}
  .matrix th.spirit-col{text-align:left;padding-left:4px}
  .matrix td{padding:7px;text-align:center;border-top:1px solid var(--line)}
  .matrix td.spirit-cell{text-align:left;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px;white-space:nowrap}
  .img-cell{
    width:62px;height:62px;border-radius:11px;border:1px dashed var(--line-2);
    display:inline-flex;align-items:center;justify-content:center;position:relative;
    cursor:pointer;overflow:hidden;background:var(--bg-2);transition:.18s;
  }
  .img-cell:hover{border-color:var(--cyan-deep)}
  .img-cell img{width:100%;height:100%;object-fit:cover}
  .img-cell .plus{color:var(--mute);font-size:20px;font-weight:300}
  .img-cell .own-dot{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
  .img-cell .clr{position:absolute;bottom:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;width:16px;height:16px;border-radius:5px;font-size:10px;line-height:16px;opacity:0;transition:.15s}
  .img-cell:hover .clr{opacity:1}

  .empty{text-align:center;padding:80px 20px;color:var(--mute)}
  .empty .e-orb{margin:0 auto 20px}
  .empty h3{font-family:'Chakra Petch',sans-serif;color:var(--dim);font-size:18px;margin:0 0 8px}

  .toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--surface-3);border:1px solid var(--line-2);color:var(--text);
    padding:12px 20px;border-radius:12px;font-size:13.5px;font-weight:600;z-index:90;
    opacity:0;transition:.3s var(--ease);box-shadow:0 14px 40px -12px rgba(0,0,0,.8);
    display:flex;align-items:center;gap:9px;pointer-events:none;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  @media (max-width:640px){
    .wrap{padding:0 16px}
    .head-row{flex-wrap:wrap;gap:12px}
    .search{order:3;max-width:none;flex-basis:100%;margin-left:0}
    .pstats{width:100%;justify-content:space-around}
    .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
    .row2,.row3{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms!important;transition-duration:.05ms!important}
  }

/* ===================== LOGIN ===================== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{
  width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:24px;padding:36px 32px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  animation:pop .3s var(--ease);
}
.auth-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:26px}
.auth-brand .brand-mark{width:56px;height:56px;border-radius:15px;margin-bottom:16px}
.auth-brand .brand-mark::after{inset:9px;border-radius:8px}
.auth-brand h1{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:24px;letter-spacing:.6px;margin:0;text-transform:uppercase}
.auth-brand span{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--mute);letter-spacing:3px;text-transform:uppercase;margin-top:5px}
.auth-card .field input{width:100%}
.auth-error{background:color-mix(in srgb,#ff4d6d 12%,transparent);border:1px solid color-mix(in srgb,#ff4d6d 30%,transparent);color:#ff9db0;padding:11px 14px;border-radius:11px;font-size:13.5px;margin-bottom:16px}
.auth-card .btn-primary{width:100%;justify-content:center;margin-top:6px;padding:13px}
.auth-switch{text-align:center;margin-top:20px;font-size:13.5px;color:var(--dim)}
.auth-switch button{color:var(--cyan);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.userbar{display:flex;align-items:center;gap:9px;flex-shrink:0}
.userbar .uname{font-size:13px;font-weight:600;color:var(--dim)}
.userbar .uname b{color:var(--text)}

/* ===================== ADMIN: usuarios + checkboxes ===================== */
.style-checks{display:flex;flex-wrap:wrap;gap:8px}
.style-check{
  display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--line);font-size:13px;font-weight:600;cursor:pointer;transition:.15s;
}
.style-check:hover{border-color:var(--line-2)}
.style-check.on{border-color:var(--cyan-deep);background:color-mix(in srgb,var(--cyan) 8%,var(--bg-2));color:var(--text)}
.style-check .swatch{width:14px;height:14px;border-radius:5px}
.style-check input{display:none}
.user-row .li-name .badge{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--r-mythic);background:color-mix(in srgb,var(--r-mythic) 16%,transparent);padding:2px 6px;border-radius:5px;margin-left:8px}
.loading{display:flex;align-items:center;justify-content:center;min-height:60vh;color:var(--mute);font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:1px}