:root {
    --bg-deep:#15101c; --bg-panel:#21182b; --bg-card:#2c203a; --bg-card-hover:#372848;
    --border:#4a3560; --gold:#f8c84d; --amber:#efa04b; --pink:#ee9aa6;
    --crimson:#e03e52; --green:#4cd97b; --cyan:#5ce0e6; --violet:#9f86b8;
    --text:#f8eadb; --text-muted:#b8a3c8; --radius:14px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:radial-gradient(circle at 50% 0%,#2d1d3d 0%,var(--bg-deep) 70%) fixed;color:var(--text);line-height:1.5;min-height:100vh}
  button,select,input{font-family:inherit}
  header{background:rgba(21,16,28,.92);border-bottom:2px solid var(--border);padding:10px 20px;position:sticky;top:0;z-index:20;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
  .brand{display:flex;align-items:center;gap:12px}
  .brand-badge{background:linear-gradient(135deg,var(--gold),var(--amber));color:#25191f;font-weight:900;padding:5px 11px;border-radius:9px;font-size:.78rem;letter-spacing:.04em}
  .brand h1{font-size:1.06rem;font-weight:800;color:var(--gold)}
  .brand p{font-size:.74rem;color:var(--text-muted)}
  .bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  a{color:var(--cyan)}
  .wrap{max-width:1280px;margin:0 auto;padding:20px}
  .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;align-items:start}
  @media(max-width:980px){.cols{grid-template-columns:1fr}}
  .card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:18px}
  .card h2{font-size:1rem;color:var(--gold);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
  .muted{color:var(--text-muted);font-size:.8rem}
  .btn{background:var(--bg-card);color:var(--text);border:1px solid var(--border);padding:8px 14px;border-radius:10px;font-weight:700;font-size:.82rem;cursor:pointer}
  .btn:hover:not(:disabled){background:var(--bg-card-hover)}
  .btn:disabled{opacity:.4;cursor:not-allowed}
  .btn.primary{background:linear-gradient(135deg,var(--gold),var(--amber));color:#25191f;border-color:var(--gold)}
  .btn.small{padding:5px 10px;font-size:.75rem}
  select,input{background:var(--bg-card);border:1px solid var(--border);color:var(--text);padding:7px 10px;border-radius:9px;font-size:.84rem}
  .pill{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(159,134,184,.14);border:1px solid rgba(159,134,184,.4);color:var(--violet);white-space:nowrap}
  .pill.ok{background:rgba(76,217,123,.14);border-color:rgba(76,217,123,.45);color:var(--green)}
  .pill.warn{background:rgba(248,200,77,.14);border-color:rgba(248,200,77,.45);color:var(--gold)}
  .pill.bad{background:rgba(224,62,82,.14);border-color:rgba(224,62,82,.45);color:#ffb4bd}
  .msg{padding:9px 12px;border-radius:10px;font-size:.82rem;margin:8px 0;display:none}
  .msg.show{display:block}
  .msg.err{background:rgba(224,62,82,.14);border:1px solid var(--crimson);color:#ffb4bd}
  .msg.info{background:rgba(92,224,230,.1);border:1px solid rgba(92,224,230,.45);color:var(--cyan)}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:14px}
  .ham{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:10px;cursor:pointer;position:relative;transition:transform .2s ease,box-shadow .2s ease}
  .ham:hover{transform:translateY(-3px)}
  .ham.sel{outline:2px solid var(--gold);outline-offset:2px}
  .ham canvas{display:block;margin:0 auto;width:96px;height:96px}
  .ham .nm{font-weight:800;font-size:.92rem;text-align:center}
  .ham .eq{font-size:.68rem;color:var(--text-muted);text-align:center;margin-bottom:4px}
  .st{display:grid;grid-template-columns:62px 1fr 22px;gap:6px;align-items:center;font-size:.68rem;color:var(--text-muted)}
  .st i{display:block;height:6px;border-radius:4px;background:var(--gold)}
  .st span.b{background:#1a1426;border-radius:4px;height:6px;display:block}

  /* ---- NFT Rarity Framed Cards (4 Tiers by Average Attribute Score) ---- */
  .nft-legend-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding:8px 10px;background:rgba(15,10,24,.55);border:1px solid var(--border);border-radius:10px;font-size:.72rem;align-items:center}
  .nft-legend-item{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-weight:700}
  .nft-legend-item.red{background:rgba(255,42,60,.18);border:1px solid #ff3b52;color:#ff8a98;box-shadow:0 0 10px rgba(255,42,60,.3)}
  .nft-legend-item.purple{background:rgba(182,118,245,.16);border:1px solid #b87aff;color:#dfc2ff}
  .nft-legend-item.green{background:rgba(46,213,115,.16);border:1px solid #3ce67b;color:#7ef5aa}
  .nft-legend-item.wood{background:rgba(139,94,52,.24);border:1px dashed #a87644;color:#d6b087}

  .nft-card{padding:4px;border-radius:16px;overflow:hidden;position:relative}
  .nft-card-inner{background:rgba(20,14,30,.92);border-radius:12px;padding:12px;position:relative;z-index:2;height:100%;display:flex;flex-direction:column;gap:7px}
  .nft-card-top{display:flex;justify-content:space-between;align-items:center;gap:6px}
  .nft-tier-pill{font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.03em;text-transform:uppercase}
  .nft-avg-badge{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:8px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12)}
  .nft-avg-badge b{font-size:.84rem;color:var(--gold)}

  .nft-avatar-stage{position:relative;margin:2px auto;width:112px;height:104px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.08),rgba(0,0,0,.4) 75%)}
  .nft-avatar-halo{position:absolute;inset:8px;border-radius:50%;pointer-events:none;opacity:.55;filter:blur(8px)}
  .nft-avatar-stage canvas{position:relative;z-index:2;width:96px;height:96px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.6))}
  .nft-token-tag{position:absolute;bottom:4px;right:6px;z-index:3;font-size:.64rem;font-weight:800;padding:1px 6px;border-radius:6px;background:rgba(0,0,0,.68);color:var(--text-muted);border:1px solid rgba(255,255,255,.1)}

  .nft-title-block{text-align:center}
  .nft-dna-line{font-size:.64rem;color:var(--cyan);opacity:.85;margin-top:1px}
  .nft-section-label{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:2px;margin-top:2px}

  .nft-stats-box{display:flex;flex-direction:column;gap:4px;background:rgba(0,0,0,.28);padding:7px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.05)}
  .nft-stat-row{display:grid;grid-template-columns:86px 1fr 42px;gap:6px;align-items:center;font-size:.68rem}
  .nft-stat-name{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nft-stat-name small{color:var(--text-muted);font-size:.6rem}
  .nft-stat-bar{background:#120d1b;border-radius:999px;height:7px;overflow:hidden;border:1px solid rgba(255,255,255,.07);display:block}
  .nft-stat-bar i{display:block;height:100%;border-radius:999px}
  .nft-stat-val{text-align:right;font-family:ui-monospace,monospace;font-size:.7rem;color:var(--gold)}
  .nft-stat-val small{font-size:.58rem;color:var(--text-muted);font-weight:400}

  .nft-traits-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .nft-trait-chip{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:3px 6px;display:flex;flex-direction:column;line-height:1.25}
  .nft-trait-chip span{font-size:.58rem;color:var(--text-muted);text-transform:uppercase}
  .nft-trait-chip b{font-size:.68rem;color:var(--text);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .nft-combat-strip{display:flex;flex-wrap:wrap;gap:4px;justify-content:space-between;background:rgba(0,0,0,.3);padding:5px 7px;border-radius:8px;font-size:.64rem;font-weight:700;color:var(--text)}
  .nft-temper-strip{display:flex;justify-content:space-between;font-size:.62rem;color:var(--text-muted);padding:0 2px}
  .nft-temper-strip b{color:var(--text)}

  /* Frame Ornaments */
  .frame-ornament{position:absolute;width:14px;height:14px;z-index:4;pointer-events:none;border-style:solid;border-width:0}
  .fo-tl{top:4px;left:4px;border-top-width:3px;border-left-width:3px;border-top-left-radius:8px}
  .fo-tr{top:4px;right:4px;border-top-width:3px;border-right-width:3px;border-top-right-radius:8px}
  .fo-bl{bottom:4px;left:4px;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:8px}
  .fo-br{bottom:4px;right:4px;border-bottom-width:3px;border-right-width:3px;border-bottom-right-radius:8px}

  /* TIER 1 (>8/10): BLAZING RED (Đỏ rực) */
  @keyframes blazingPulse {
    0%,100%{box-shadow:0 0 16px rgba(255,30,50,.65),0 0 32px rgba(255,80,20,.35),inset 0 0 12px rgba(255,60,60,.45)}
    50%{box-shadow:0 0 24px rgba(255,20,40,.9),0 0 46px rgba(255,110,20,.55),inset 0 0 18px rgba(255,90,40,.7)}
  }
  .nft-frame-red{
    background:linear-gradient(135deg,#ff1e38 0%,#ff6a00 35%,#ff0844 70%,#ffbe3d 100%);
    border:2px solid #ff4d5e;
    animation:blazingPulse 2.4s infinite ease-in-out;
  }
  .nft-frame-red .nft-card-inner{background:linear-gradient(180deg,#2a0d16 0%,#1a0912 100%);border:1px solid rgba(255,90,90,.45)}
  .nft-frame-red .nft-tier-pill{background:linear-gradient(90deg,#ff1e38,#ff6a00);color:#fff;box-shadow:0 0 10px rgba(255,40,60,.6)}
  .nft-frame-red .nft-avatar-halo{background:radial-gradient(circle,#ff2a4b 0%,#ff7b00 60%,transparent 75%)}
  .nft-frame-red .nft-stat-bar i{background:linear-gradient(90deg,#ff2a4b,#ff8c1a)}
  .nft-frame-red .frame-ornament{border-color:#ffdf7a}

  /* TIER 2 (6-7/10): SOFT PURPLE (Tím nhẹ) */
  .nft-frame-purple{
    background:linear-gradient(135deg,#8a4fff 0%,#c38fff 50%,#7038d6 100%);
    border:2px solid #c99eff;
    box-shadow:0 0 16px rgba(175,115,255,.38),inset 0 0 10px rgba(195,143,255,.28);
  }
  .nft-frame-purple .nft-card-inner{background:linear-gradient(180deg,#221535 0%,#160e26 100%);border:1px solid rgba(195,143,255,.35)}
  .nft-frame-purple .nft-tier-pill{background:rgba(175,115,255,.25);border:1px solid #c99eff;color:#ebd6ff}
  .nft-frame-purple .nft-avatar-halo{background:radial-gradient(circle,#b57cff 0%,transparent 72%)}
  .nft-frame-purple .nft-stat-bar i{background:linear-gradient(90deg,#9b5de5,#d4a5ff)}
  .nft-frame-purple .frame-ornament{border-color:#e2c6ff}

  /* TIER 3 (4-5/10): RARE EMERALD GREEN (Xanh lục - Rare) */
  .nft-frame-green{
    background:linear-gradient(135deg,#16a05d 0%,#46e891 50%,#0f7a44 100%);
    border:2px solid #52f29c;
    box-shadow:0 0 15px rgba(60,230,123,.32),inset 0 0 8px rgba(60,230,123,.22);
  }
  .nft-frame-green .nft-card-inner{background:linear-gradient(180deg,#10261e 0%,#0b1a15 100%);border:1px solid rgba(82,242,156,.32)}
  .nft-frame-green .nft-tier-pill{background:rgba(46,213,115,.22);border:1px solid #46e891;color:#98ffbe}
  .nft-frame-green .nft-avatar-halo{background:radial-gradient(circle,#2ed573 0%,transparent 72%)}
  .nft-frame-green .nft-stat-bar i{background:linear-gradient(90deg,#1eb968,#5ef2a0)}
  .nft-frame-green .frame-ornament{border-color:#8affbe}

  /* TIER 4 (<4/10): TATTERED WOOD (Khung gỗ rách) */
  .nft-frame-wood{
    background:
      repeating-linear-gradient(94deg,#5c3c20 0px,#6e4929 7px,#472d16 14px,#634124 22px),
      linear-gradient(135deg,#5a3b1e,#38220f);
    border:3px dashed #8c6239;
    border-radius:13px 17px 14px 16px;
    box-shadow:inset 0 0 0 2px #2b180a,0 6px 14px rgba(0,0,0,.65);
    padding:6px;
  }
  .nft-frame-wood .nft-card-inner{
    background:
      radial-gradient(circle at 15% 20%,rgba(90,60,30,.22),transparent 50%),
      linear-gradient(180deg,#211811 0%,#17100b 100%);
    border:1px dashed rgba(168,118,68,.55);
    border-radius:9px;
  }
  .nft-frame-wood .nft-tier-pill{background:rgba(120,82,45,.38);border:1px dashed #a87644;color:#dec09e}
  .nft-frame-wood .nft-avatar-halo{background:radial-gradient(circle,#8c6239 0%,transparent 70%);opacity:.3}
  .nft-frame-wood .nft-stat-bar i{background:linear-gradient(90deg,#8c6239,#c49566)}
  .wood-nail{position:absolute;width:6px;height:6px;border-radius:50%;background:#302217;border:1px solid #7c5c3e;z-index:4}
  .wn-tl{top:6px;left:6px}.wn-tr{top:7px;right:6px}.wn-bl{bottom:6px;left:7px}.wn-br{bottom:6px;right:6px}
  .wood-crack{position:absolute;z-index:4;pointer-events:none;border-left:2px solid #1e1107;border-right:1px solid rgba(196,149,102,.3)}
  .wc-1{top:0;left:28%;height:14px;transform:rotate(22deg)}
  .wc-2{bottom:0;right:24%;height:16px;transform:rotate(-18deg)}
  table{width:100%;border-collapse:collapse;font-size:.78rem}
  th,td{text-align:left;padding:5px 7px;border-bottom:1px solid rgba(74,53,96,.5)}
  th{color:var(--text-muted);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em}
  tr.me td{background:rgba(248,200,77,.08)}
  .arenas tr{cursor:pointer}
  .arenas tr.sel td{background:rgba(92,224,230,.08)}
  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  #dropMap{width:100%;max-width:440px;aspect-ratio:1;display:block;margin:6px auto;border-radius:12px;border:1px solid var(--border);cursor:crosshair;background:#1a1426}
  .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:.78rem}
  .kv dt{color:var(--text-muted)}
  ol.flow{padding-left:18px;font-size:.8rem;color:var(--text-muted)}
  ol.flow b{color:var(--text)}
  /* ---- shared nav + manage page ---- */
  .nav{display:flex;gap:6px;flex-wrap:wrap}
  .nav a{color:var(--text-muted);text-decoration:none;font-weight:700;font-size:.8rem;padding:6px 11px;border-radius:9px;border:1px solid transparent;transition:all .18s ease}
  .nav a:hover{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(121,78,168,.4)}
  .nav a.on{color:var(--gold);border-color:var(--border);background:var(--bg-card)}
  .tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
  .tabs button{background:var(--bg-panel);border:1px solid var(--border);color:var(--text-muted);padding:8px 14px;border-radius:10px;font-weight:700;cursor:pointer;font-size:.82rem}
  .tabs button.on{color:#25191f;background:linear-gradient(135deg,var(--gold),var(--amber));border-color:var(--gold)}
  .tab{display:none}.tab.on{display:block}
  .g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
  .stat{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
  .stat b{display:block;font-size:1.15rem;color:var(--gold)}
  .stat span{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
  .stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:12px}
  .copy{cursor:pointer;border-bottom:1px dotted var(--text-muted)}
  .fn{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:9px 11px;margin-bottom:8px}
  .fn .sig{font-family:ui-monospace,monospace;font-size:.78rem;color:var(--cyan)}
  .fn .tag{font-size:.62rem;font-weight:800;padding:1px 6px;border-radius:6px;margin-left:6px}
  .fn .tag.view{background:rgba(92,224,230,.15);color:var(--cyan)}
  .fn .tag.write{background:rgba(248,200,77,.15);color:var(--gold)}
  .fn .tag.pay{background:rgba(238,154,166,.18);color:var(--pink)}
  .fn input{width:100%;margin-top:5px}
  .fn pre{white-space:pre-wrap;word-break:break-all;font-size:.74rem;background:#1a1426;border-radius:8px;padding:7px;margin-top:6px;max-height:260px;overflow:auto}
  .form{display:grid;grid-template-columns:150px 1fr auto;gap:8px;align-items:center;margin-bottom:8px}
  .form label{font-size:.78rem;color:var(--text-muted)}
  @media(max-width:640px){.form{grid-template-columns:1fr}}