:root {
        color-scheme: light;

        --surface-1: #ffffff;
        --surface-2: #f8fafc;
        --surface-3: #f1f5f9;
        --line-1: #e2e8f0;
        
        --ink-1: #0f172a;
        --ink-2: #1e293b;
        --ink-3: #334155;
        --ink-4: #475569;
        --ink-5: #64748b;

        --danger-text: #b91c1c;
        --danger-solid: #dc2626;
        --danger-soft: #fef2f2;
        --danger-line: #fecaca;

        --success-text: #15803d;
        --success-solid: #16a34a;
        --success-soft: #f0fdf4;
        --success-line: #bbf7d0;

        --warn-text: #b45309;
        --warn-solid: #f59e0b;
        --warn-soft: #fffbeb;
        --warn-line: #fde68a;

        --rare-text: #6d28d9;
        --rare-solid: #7c3aed;
        --rare-soft: #f5f3ff;
        --rare-line: #ddd6fe;

        --brand: #d22730;
        --brand-soft: #fff1f2;

        --ink-6: #94a3b8;
        --surface-4: #e9edf2;
        
        --on-solid: #ffffff;
        
        --on-warn: #3d1f04;

        --on-dark-1: #eef2ff;        
        --on-dark-2: #cbd5e1;        
        --on-dark-3: #94a3b8;        
        --on-dark-gold: #fde68a;     
        --on-dark-danger: #fecaca;   
        --on-dark-success: #bbf7d0;  
        --on-dark-rare: #ddd6fe;     

        --fill-info: #2563eb;
        --fill-primary: #4338ca;
        --fill-danger: #b91c1c;
        --fill-rare: #6d28d9;
        --fill-warn-deep: #92400e;
        --fill-warn-strong: #d97706;
        --fill-warn-bright: #fbbf24;
        --fill-warn-text: #b45309;
        --line-2: #cbd5e1;
        --line-3: #94a3b8;
        --warn-tint: #fef3c7;
        
        --warn-deep: #92400e;
        --warn-strong: #d97706;
        --warn-bright: #fbbf24;
        --accent-orange: #f97316;
        
        --primary-text: #4338ca;
        --primary-line: #c7d2fe;
        --info: #2563eb;
        --info-soft: #eff6ff;

        --bg-primary: #f5f6f8;
        --bg-card: #ffffff;
        --border-color: #eef0f3;
        --text-main: #2d3036;
        --text-muted: #9ba1ad;
        --color-green: #e2f0e3;
        --color-green-text: #41904d;
        
        --r-xs: 4px;      
        --r-sm: 6px;
        --r-md: 8px;      
        --r-lg: 10px;     
        --r-xl: 14px;     
        --r-2xl: 20px;    
        --r-pill: 999px;  

        --s-1: 2px;  --s-2: 4px;  --s-3: 6px;  --s-4: 8px;
        --s-5: 10px; --s-6: 12px; --s-7: 14px; --s-8: 16px; --s-9: 20px;

        --sh-0: none;
        --sh-1: 0 1px 2px rgba(15, 23, 42, .06);
        --sh-2: 0 2px 8px rgba(15, 23, 42, .08);
        --sh-3: 0 8px 24px rgba(15, 23, 42, .10);
        --sh-4: 0 16px 38px rgba(15, 23, 42, .14);

        --radius-lg: 12px;
        --radius-sm: 8px;
        --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.02);

        --bg: var(--bg-primary);
        --panel: var(--bg-card);
        --card: var(--bg-card);
        --line: var(--border-color);
        --muted: var(--text-muted);
        --text: var(--text-main);
        --primary: #4f46e5;
        
        --primary-solid: #4f46e5;
        --primary-soft: #eef2ff;
        --green: var(--color-green-text);
        --red: #dc2626;
        --amber: #d97706;
        --blue: #2563eb;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;

        --sidebar-red-deep: #fffaf9;
        --sidebar-red-light: #ffe3e0;
        --sidebar-red-active: var(--red);
        --sidebar-fg: #7a1f1f;
        --sidebar-fg-muted: #9b5752;   
        --sidebar-icon: #c23b33;       
        --content-dark: #ffffff;

        --font-mecha-num: -apple-system, BlinkMacSystemFont, "Arial Narrow", "Helvetica Neue", "PingFang SC", sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      .font-mecha-num {
        font-family: var(--font-mecha-num);
        font-stretch: condensed;
        font-weight: 700;
        letter-spacing: -0.01em;
        font-variant-numeric: tabular-nums;
      }

      body {
        margin: 0;
        min-height: 100vh;
        color: var(--text);
        
        background: var(--bg-primary);
      }

      button,
      input {
        font: inherit;
      }

      button {
        cursor: pointer;
      }

      .app {
        height: 100vh;
        display: grid;
        grid-template-rows: 62px minmax(0, 1fr);
        overflow: hidden;
      }

      .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        flex-wrap: nowrap;
        gap: var(--s-9);
        padding: 0 24px;
        
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-card);
        
        position: relative;
        z-index: 200;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: var(--s-8);
        min-width: 0;
        
        flex: 1 1 auto;
      }

      .asset-strip {
        display: flex;
        align-items: center;
        gap: var(--s-5);
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .asset-strip::-webkit-scrollbar {
        display: none;
      }

      html.theme-dark {
        color-scheme: dark;
        --surface-1: #232830;
        --surface-2: #1c2027;
        --surface-3: #191d23;
        --line-1: #333a45;
        
        --ink-1: #eef1f6;
        --ink-2: #dfe4ec;
        --ink-3: #c3cad6;
        --ink-4: #a8b1c0;
        --ink-5: #8d97a8;

        --danger-text: #fca5a5;
        --danger-solid: #dc2626;
        --danger-soft: rgba(220, 38, 38, .16);
        --danger-line: rgba(220, 38, 38, .38);

        --success-text: #86efac;
        --success-solid: #16a34a;
        --success-soft: rgba(22, 163, 74, .16);
        --success-line: rgba(22, 163, 74, .38);

        --warn-text: #fcd34d;
        --warn-solid: #f59e0b;
        --warn-soft: rgba(245, 158, 11, .14);
        --warn-line: rgba(245, 158, 11, .36);

        --rare-text: #c4b5fd;
        --rare-solid: #7c3aed;
        --rare-soft: rgba(124, 58, 237, .18);
        --rare-line: rgba(124, 58, 237, .40);

        --brand: #ef4b54;
        --brand-soft: rgba(210, 39, 48, .18);

        --ink-6: #8791a3;
        
        --sh-1: 0 1px 2px rgba(0, 0, 0, .35);
        --sh-2: 0 2px 8px rgba(0, 0, 0, .45);
        --sh-3: 0 8px 24px rgba(0, 0, 0, .55);
        --sh-4: 0 16px 38px rgba(0, 0, 0, .65);
        --surface-4: #2b313a;
        
        --on-solid: #f7f9fc;
        --on-warn: #3d1f04;
        --line-2: #3b4350;
        --line-3: #4d566633;
        --warn-tint: rgba(245, 158, 11, .20);
        --warn-deep: #fbbf24;
        --warn-strong: #fcd34d;
        --warn-bright: #fde68a;
        --accent-orange: #fb923c;
        --primary-text: #a5b4fc;
        --primary-line: rgba(99, 102, 241, .38);
        --info: #7dd3fc;
        --info-soft: rgba(37, 99, 235, .16);

        --bg-primary: #14171c;
        --bg-card: var(--surface-1);
        --border-color: var(--line-1);
        --text-main: #e6e9ef;
        --text-muted: #98a1b0;

        --bg: var(--bg-primary);
        --panel: var(--surface-1);
        --card: var(--surface-1);
        --line: var(--line-1);
        --muted: var(--text-muted);
        --text: var(--text-main);

        --primary-soft: #2a3040;
        
        --primary: #818cf8;
        --primary-solid: #4f46e5;
        
        --dash-bg: #14171c; --dash-card: #232830;
        --dash-border: #333a45;
        --dash-text: #e6e9ef; --dash-muted: #98a1b0;
        --color-green: #1e3326;

        --sidebar-red-deep: #1d181a;
        --sidebar-red-light: #2a1f22;
        --sidebar-fg: #f0dcdc;
        --sidebar-fg-muted: #bb9a9a;
        --sidebar-icon: #f08a82;
        --content-dark: #14171c;
      }
      html.theme-dark body { background: var(--bg-primary); color: var(--text-main); }
      html.theme-dark input,
      html.theme-dark select,
      html.theme-dark textarea {
        background: var(--surface-2);
        color: var(--text-main);
        border-color: var(--line-1);
      }
      html.theme-dark input::placeholder,
      html.theme-dark textarea::placeholder { color: #6b7480; }
      
      html.theme-dark .pg-row-meta,
      html.theme-dark .pg-sub,
      html.theme-dark .pg-note,
      html.theme-dark .asset-button,
      html.theme-dark .profile-trigger,
      html.theme-dark .confirm-box p,
      html.theme-dark .mg-plot-card-sub { color: var(--text-muted); }
      html.theme-dark .pg-title,
      html.theme-dark .pg-row-name,
      html.theme-dark .mg-plot-card-title,
      html.theme-dark .confirm-box h3 { color: var(--text-main); }
      html.theme-dark .home-btn-secondary,
      html.theme-dark .confirm-cancel {
        background: var(--surface-2);
        color: var(--text-main);
        border-color: var(--line-1);
      }
      html.theme-dark .pg-tag { background: #2c323c; color: #c3cad6; }
      
      html.theme-dark .hud-substat-item .v { color: var(--ink-1); }   
      html.theme-dark .hud-substat-item .k { color: #b9a678; }        
      html.theme-dark .pg-step.plus { color: #a5b4fc; border-color: #3d4663; } 
      html.theme-dark .pg-step { color: var(--ink-3); border-color: var(--line-1); }
      html.theme-dark .pg-hero-value { color: #f0b45c; }              
      
      html.theme-dark .fm-cargo-gain { color: #f0b45c; }
      html.theme-dark .fm-cargo-warn { color: #f0c98a; background: #3a3324; border-color: #5c4f31; }
      
      html.theme-dark .eq-crystal-have.is-short { color: #f87171; }
      
      html.theme-dark .task-bonus-bar { background: var(--surface-3); }
      html.theme-dark .task-bonus-bar .task-bonus-text { color: var(--text-main); }
      
      .eq-stat-raw { font-size: 10px; color: var(--text-muted); font-weight: 500; margin-left: var(--s-2); }

      .eq-headline {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: var(--s-5); flex-wrap: wrap;
        margin: var(--s-1) 0 var(--s-3); padding: var(--s-3) var(--s-5);
        background: var(--surface-2); border-radius: var(--r-md);
      }
      .eq-headline-cp { display: flex; align-items: baseline; gap: var(--s-3); }
      .eq-headline-cp-label { font-size: 11px; color: var(--text-muted); }
      .eq-headline-cp b {
        font-size: 20px; font-weight: 800; color: var(--text-main);
        font-variant-numeric: tabular-nums; line-height: 1.1;
      }
      .eq-cmp { font-size: 11px; font-weight: 700; color: var(--text-muted); }
      .eq-cmp-up { color: var(--color-green-text); }
      .eq-cmp-down { color: var(--red); }
      .eq-cmp-on { color: var(--blue); }

      .nft-roster-list { display: flex; flex-direction: column; gap: var(--s-4); max-height: 62vh; overflow-y: auto; }
      .nft-roster-row {
        display: flex; align-items: center; gap: var(--s-6);
        border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); background: var(--surface-2);
      }
      .nft-roster-thumb {
        flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--r-md); overflow: hidden;
        display: grid; place-items: center; font-size: 22px;
      }
      .nft-roster-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .nft-roster-main { min-width: 0; flex: 1 1 auto; }
      .nft-roster-name { font-weight: 800; font-size: 13.5px; color: var(--ink-1); font-variant-numeric: tabular-nums; }
      .nft-roster-rarity { font-size: 11px; font-weight: 700; margin-left: var(--s-3); }
      .nft-roster-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.7; }
      .nft-roster-acct { margin-left: var(--s-3); font-variant-numeric: tabular-nums; opacity: .8; }
      html.theme-dark .nft-roster-row { background: var(--surface-3); }

      .land-relocate-banner {
        position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
        display: flex; align-items: center; justify-content: center; gap: var(--s-6); flex-wrap: wrap;
        padding: var(--s-5) var(--s-7); font-size: 12.5px; line-height: 1.6;
        background: var(--warn-soft); color: var(--warn-deep); border-bottom: 1px solid var(--warn-line);
        box-shadow: var(--sh-2);
      }
      .land-relocate-banner b { font-weight: 800; }
      html.theme-dark .land-relocate-banner { background: #3a3324; color: #f0c98a; border-bottom-color: #5c4f31; }

      .help-phase { margin-bottom: var(--s-7); }
      .help-phase-head { display: flex; align-items: baseline; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-5); }
      .help-phase-head h3 { margin: 0; font-size: 15px; color: var(--ink-1); }
      .help-phase-note { font-size: 11.5px; color: var(--text-muted); }

      .help-step { display: flex; gap: var(--s-6); padding: var(--s-6) 0; border-top: 1px dashed var(--line-1); }
      .help-step:first-of-type { border-top: 0; padding-top: var(--s-1); }
      .help-step-no {
        flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
        display: grid; place-items: center;
        background: var(--surface-3); color: var(--ink-2);
        font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
      }
      .help-step-body { flex: 1 1 auto; min-width: 0; }
      .help-step-title {
        display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
        flex-wrap: wrap; margin-bottom: var(--s-3);
        font-size: 13.5px; font-weight: 800; color: var(--ink-1);
      }
      .help-step-what { font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
      .help-step-why,
      .help-step-stuck { font-size: 12px; line-height: 1.7; margin-top: var(--s-3); color: var(--ink-4); }
      
      .help-tag {
        display: inline-block; margin-right: var(--s-3); padding: var(--s-1) var(--s-3); border-radius: var(--r-xs);
        font-size: 10.5px; font-weight: 700; vertical-align: 1px;
        background: var(--surface-3); color: var(--text-muted);
      }
      .help-tag.warn { background: var(--warn-soft); color: var(--warn-deep); }

      .help-wiki-list { display: flex; flex-direction: column; gap: var(--s-3); }
      .help-wiki-item { border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--surface-2); }
      .help-wiki-item > summary {
        cursor: pointer; padding: var(--s-5) var(--s-6); font-size: 13px; font-weight: 700; color: var(--ink-2);
        display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap;
      }
      .help-wiki-desc { font-size: 11px; font-weight: 400; color: var(--text-muted); }
      .help-wiki-body,
      .help-wiki-tips { padding: 0 var(--s-6) var(--s-5); font-size: 12.5px; line-height: 1.8; color: var(--ink-3); }
      .help-wiki-tips { border-top: 1px dashed var(--line-1); padding-top: var(--s-4); color: var(--ink-4); }

      html.theme-dark .help-tag.warn { background: #3a3324; color: #f0c98a; }

      .confirm-box.suggest-box {
        width: min(1100px, 92vw);
        max-width: 92vw;
        text-align: left;
        padding: var(--s-9) 24px var(--s-9);
      }
      .confirm-box.suggest-box h3 { font-size: 17px; }
      .suggest-form textarea {
        width: 100%; box-sizing: border-box; resize: vertical;
        padding: var(--s-4) var(--s-5); font-size: 13px; line-height: 1.5;
        border: 1px solid var(--line-1); border-radius: var(--r-md);
        background: var(--surface-2); color: var(--text-main);
        font-family: inherit;
      }
      .suggest-form-foot { display: flex; align-items: center; justify-content: space-between; margin: var(--s-4) 0 var(--s-7); }
      
      .suggest-list { max-height: max(220px, min(60vh, 620px)); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-4); }
      .suggest-item {
        border: 1px solid var(--line-1); border-radius: var(--r-lg);
        padding: var(--s-5) var(--s-6); background: var(--surface-2);
      }

      .starter-lease {
        margin-top: var(--s-5); padding: var(--s-5) var(--s-6);
        border: 1px solid var(--line-1); border-radius: var(--r-lg);
        background: var(--surface-2);
      }
      .starter-lease.is-urgent { border-color: var(--warn-solid); background: rgba(245,158,11,.08); }
      .starter-lease-head {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: var(--s-5); flex-wrap: wrap; font-size: 13px; color: var(--text-main);
      }
      .starter-lease.is-urgent .starter-lease-head { color: var(--warn-strong); font-weight: 700; }
      .starter-lease-acts { display: flex; gap: var(--s-4); flex-wrap: wrap; }
      .starter-lease-acts .home-btn { flex: 1 1 auto; min-width: 140px; font-size: 12.5px; }

      .suggest-item-head {
        display: flex; align-items: flex-start; justify-content: space-between;
        gap: var(--s-5); margin-bottom: var(--s-3);
      }
      .sg-who { display: flex; align-items: center; gap: var(--s-4); min-width: 0; flex-wrap: wrap; }
      .sg-who .dropdown-avatar-mini { width: 28px; height: 28px; font-size: 15px; flex-shrink: 0; }
      .sg-who-name { font-size: 13px; font-weight: 700; color: var(--text-main); }
      .sg-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; padding-top: var(--s-1); }
      
      .sg-tag {
        font-size: 10px; font-weight: 700; line-height: 1.6;
        padding: 0 var(--s-3); border-radius: var(--r-xs);
        background: var(--surface-1); border: 1px solid var(--line-1); color: var(--text-muted);
      }
      .sg-tag.me { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
      .sg-tag.ok { border-color: var(--success-solid); color: var(--success-solid); background: rgba(22,163,74,.10); }
      .sg-tag.author { border-color: var(--warn-strong); color: var(--warn-strong); background: rgba(217,119,6,.10); }
      .sg-tag.dev { border-color: var(--rare-solid); color: var(--rare-solid); background: rgba(124,58,237,.12); }
      
      .suggest-item-body {
        font-size: 13px; line-height: 1.55; color: var(--text-main);
        white-space: pre-wrap; word-break: break-word; padding-left: 36px;
      }
      .suggest-item-reply {
        margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
        background: var(--primary-soft); font-size: 12px; color: var(--text-main);
      }
      .suggest-item-foot { display: flex; gap: var(--s-4); margin-top: var(--s-5); padding-left: 36px; flex-wrap: wrap; }
      .suggest-item.is-open { border-color: var(--primary); }
      .sg-caret { font-size: 9px; opacity: .7; }

      .sg-comments {
        margin: var(--s-6) 0 var(--s-1) 36px; padding: var(--s-5) 0 0 var(--s-6);
        border-left: 2px solid var(--line-1);
        display: flex; flex-direction: column; gap: var(--s-5);
      }
      .suggest-item.is-open .sg-comments { border-left-color: var(--primary); }
      .sg-comment-head {
        display: flex; align-items: flex-start; justify-content: space-between;
        gap: var(--s-4); margin-bottom: var(--s-2);
      }
      
      .sg-comment .sg-who .dropdown-avatar-mini { width: 22px; height: 22px; font-size: 12px; }
      .sg-comment .sg-who-name { font-size: 12px; }
      .sg-comment-body {
        font-size: 12.5px; line-height: 1.55; color: var(--text-main);
        white-space: pre-wrap; word-break: break-word; padding-left: 30px;
      }
      .sg-comment-ops { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
      
      .sg-mini {
        border: none; background: none; padding: 0 var(--s-1);
        font-size: 11px; color: var(--text-muted); cursor: pointer;
        opacity: .55; transition: opacity .15s, color .15s;
      }
      .sg-comment:hover .sg-mini { opacity: 1; }
      .sg-mini:hover { color: var(--primary); opacity: 1; }
      .sg-mini.danger:hover { color: var(--brand); }
      .sg-composer { display: flex; gap: var(--s-4); align-items: flex-end; margin-top: var(--s-1); }
      .sg-composer textarea {
        flex: 1; min-width: 0; box-sizing: border-box; resize: vertical;
        padding: var(--s-4) var(--s-5); font-size: 12.5px; line-height: 1.5;
        border: 1px solid var(--line-1); border-radius: var(--r-md);
        background: var(--surface-1); color: var(--text-main); font-family: inherit;
      }
      .sg-composer textarea:focus { border-color: var(--primary); outline: none; }
      .sg-send { flex-shrink: 0; padding: var(--s-4) var(--s-8); font-size: 12.5px; }
      
      @media (max-width: 560px) {
        .suggest-item-body, .suggest-item-foot { padding-left: 0; }
        .sg-comments { margin-left: 0; }
        .sg-comment-body { padding-left: 0; }
        .sg-composer { flex-direction: column; align-items: stretch; }
      }
      .suggest-act {
        border: 1px solid var(--line-1); background: var(--surface-1);
        border-radius: var(--r-pill); padding: var(--s-2) var(--s-6); font-size: 12px; font-weight: 700;
        color: var(--text-main); cursor: pointer;
      }
      .suggest-act:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
      .suggest-act.is-on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
      .suggest-act:disabled { opacity: .45; cursor: not-allowed; }
      
      html.theme-dark .currency-readout { background: var(--surface-2); color: var(--text-main); }
      html.theme-dark .pg-subtabs.subtab-strip { background: var(--surface-3); }

      .theme-mode-menu {
        position: fixed;
        z-index: 3600;
        min-width: 190px;
        background: var(--surface-1);
        border: 1px solid var(--line-1);
        border-radius: var(--r-lg);
        box-shadow: var(--sh-4);
        padding: var(--s-3);
        display: flex;
        flex-direction: column;
        gap: var(--s-1);
        animation: themeMenuIn 0.14s ease;
      }
      @keyframes themeMenuIn {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .theme-mode-item {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "label tick" "desc tick";
        align-items: center;
        gap: 0 var(--s-4);
        text-align: left;
        padding: var(--s-4) var(--s-5);
        border: 0;
        border-radius: var(--r-md);
        background: transparent;
        cursor: pointer;
        color: var(--text-main);
      }
      .theme-mode-item:hover { background: var(--surface-2); }
      .theme-mode-item.is-on { background: var(--surface-2); }
      .theme-mode-item-label { grid-area: label; font-size: 13px; font-weight: 700; }
      .theme-mode-item-desc { grid-area: desc; font-size: 11px; color: var(--text-muted); }
      .theme-mode-item-tick { grid-area: tick; color: var(--color-green-text); font-weight: 800; }
      
      html.theme-terminal .theme-mode-menu { filter: grayscale(100%); }

      .maintenance-banner {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        top: 8px;
        z-index: 3500;
        max-width: min(680px, calc(100vw - 24px));
        display: flex;
        align-items: center;
        gap: var(--s-5);
        padding: var(--s-4) var(--s-6);
        border-radius: var(--r-lg);
        background: var(--fill-warn-deep);
        color: var(--on-dark-gold);
        font-size: 13px;
        box-shadow: var(--sh-3);
      }
      .maintenance-banner button {
        border: 0; background: transparent; color: inherit;
        cursor: pointer; font-size: 14px; line-height: 1; padding: var(--s-1) var(--s-2); opacity: .8;
      }
      .maintenance-banner button:hover { opacity: 1; }

      .asset-button {
        border: 0;
        background: var(--surface-2);
        color: var(--ink-4);
      }

      .asset-button:hover {
        background: var(--primary-soft);
        color: #3730a3;
      }

      .currency-readout {
        display: inline-flex;
        align-items: center;
        
        flex: 0 0 auto;
        height: 28px;
        padding: 0 var(--s-5);
        border-radius: var(--r-xs);
        background: var(--surface-2);
        border: 1px solid var(--surface-4);
        color: var(--ink-2);
        font-size: 13px;
        font-weight: 700;
        box-shadow: none;
        cursor: pointer;
        transition: border-color .12s ease;
      }

      span.currency-readout {
        cursor: default;
      }

      .currency-readout:hover {
        border-color: var(--brand);
      }

      .currency-readout:hover .cur-value {
        font-weight: 800;
      }

      .cur-value {
        font-weight: 700;
        transition: font-weight .12s ease;
      }

      .currency-icon-img {
        display: inline-block;
        vertical-align: -3px;
        object-fit: contain;
        flex: 0 0 auto;
      }
      
      .cur-spark {
        transform-origin: center;
        animation: curSparkleTwinkle 1.8s ease-in-out infinite;
      }
      @keyframes curSparkleTwinkle {
        0%, 100% { opacity: 0.25; transform: scale(0.8); }
        50% { opacity: 1; transform: scale(1.15); }
      }

      .currency-icon-img--sm {
        width: 14px;
        height: 14px;
        margin-right: var(--s-3);
      }

      .currency-icon-img--md {
        width: 20px;
        height: 20px;
        margin-right: var(--s-3);
      }

      .currency-icon-img--lg {
        width: 26px;
        height: 26px;
        margin-right: var(--s-4);
      }

      .currency-icon-img--xl {
        width: 36px;
        height: 36px;
        margin-right: var(--s-4);
      }

      .brand-title {
        display: flex;
        align-items: baseline;
        gap: var(--s-4);
        white-space: nowrap;
      }

      .pixel-logo {
        display: flex;
        align-items: center;
        gap: var(--s-2);
        padding-right: var(--s-5);
        
        flex: 0 0 auto;
      }

      .pixel-letter {
        display: grid;
        grid-template-columns: repeat(5, 3px);
        grid-template-rows: repeat(7, 3px);
        gap: var(--s-1);
      }

      .pixel-cell {
        width: 3px;
        height: 3px;
        background: transparent;
      }

      .pixel-cell.on {
        background: var(--red);
      }

      .brand-title span {
        color: var(--ink-6);
        font-size: 12px;
      }

      .service {
        display: inline-flex;
        align-items: center;
        gap: var(--s-4);
        color: var(--ink-5);
        font-size: 13px;
      }

      .status-dot {
        width: 10px;
        height: 10px;
        border-radius: var(--r-pill);
        background: #22c55e;
        animation: breathe 2.2s ease-in-out infinite;
      }

      @keyframes breathe {
        0%, 100% {
          opacity: 0.45;
          transform: scale(0.9);
          box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.25);
        }

        50% {
          opacity: 1;
          transform: scale(1.18);
          box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.12);
        }
      }

      .top-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--s-7);
        min-width: 0;
        
        flex: 0 0 auto;
        flex-wrap: nowrap;
      }

      .profile-menu-wrap {
        position: relative;
      }

      .profile-trigger {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        gap: var(--s-4);
        padding: 0 var(--s-6);
        border: 1px solid var(--line-1);
        border-radius: var(--r-md);
        background: var(--surface-1);
        color: var(--ink-3);
        font-weight: 800;
      }

      .profile-trigger:hover {
        border-color: var(--primary-line);
        background: var(--surface-2);
      }

      .profile-trigger-avatar.dropdown-avatar-mini {
        width: 24px;
        height: 24px;
        font-size: 13px;
        border-width: 1.5px;
      }

      .dropdown-menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        
        z-index: 5000;
        width: min(360px, calc(100vw - 28px));
        
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        display: none;
        padding: var(--s-6);
        border: 1px solid var(--line-1);
        border-radius: var(--r-md);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--sh-4);
      }

      .dropdown-menu.open {
        display: block;
      }

      .dropdown-section {
        padding: var(--s-4);
      }

      .dropdown-title {
        display: block;
        margin-bottom: var(--s-4);
        color: var(--ink-6);
        font-size: 10px;
        font-weight: 900;
      }

      .dropdown-divider {
        height: 1px;
        margin: var(--s-4) 0;
        background: var(--surface-3);
      }

      .dropdown-func-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-4);
      }

      .dropdown-func-btn {
        min-height: 40px;
        border: 1px solid var(--surface-4);
        border-radius: var(--r-md);
        background: var(--surface-2);
        color: var(--ink-4);
        font-size: 12px;
        font-weight: 800;
        text-align: left;
        padding: 0 var(--s-5);
      }

      .dropdown-func-btn:hover {
        border-color: var(--primary-line);
        background: var(--primary-soft);
        color: #3730a3;
      }

      .dropdown-func-btn.full-width {
        grid-column: 1 / -1;
      }

      .clock {
        min-width: 96px;
        
        flex: 0 0 auto;
        padding: var(--s-4) var(--s-6);
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        background: var(--surface-2);
        color: var(--ink-4);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
        text-align: center;
      }

      .user-chip {
        display: none;
        align-items: center;
        gap: var(--s-5);
        min-width: 0;
      }

      .user-chip.visible {
        display: flex;
      }

      .nickname {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 700;
        font-size: 14px;
      }

      .account-pill,
      .vip-pill,
      .guest-pill {
        padding: var(--s-2) var(--s-4);
        border-radius: var(--r-pill);
        font-size: 11px;
        white-space: nowrap;
      }

      .account-pill,
      .asset-button {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--r-2xl);
        padding: var(--s-3) var(--s-7);
        color: var(--text-main);
        font-weight: 700;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
        font-size: 13px;
        box-shadow: var(--shadow-light);
      }

      .asset-strip .account-pill:hover,
      .asset-button:hover {
        background: var(--bg-primary);
      }

      .logout-btn {
        border: 0;
        border-radius: var(--r-pill);
        padding: var(--s-4) var(--s-5);
        background: transparent;
        color: var(--ink-6);
        font-size: 12px;
      }

      .logout-btn:hover {
        background: var(--brand-soft);
        color: var(--red);
      }

      .shell {
        display: grid;
        
        grid-template-columns: 176px minmax(0, 1fr);
        min-height: 0;
      }

      .sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--s-7);
        min-height: 0;
        padding: var(--s-7) var(--s-5) var(--s-9);
        background: linear-gradient(165deg, var(--sidebar-red-deep) 0%, var(--sidebar-red-light) 100%);
        overflow-y: auto;
      }

      .sidebar-collapse-btn {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: var(--r-sm);
        background: transparent;
        
        color: var(--sidebar-fg-muted);
        font-size: 14px;
        cursor: pointer;
      }

      .sidebar-collapse-btn:hover {
        
        background: rgba(220, 38, 38, 0.1);
        color: var(--sidebar-fg);
      }

      .nav-list {
        display: grid;
        gap: var(--s-2);
      }

      .nav-group-first-row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--s-4);
      }

      body.sidebar-collapsed .nav-group-first-row {
        justify-content: center;
      }

      .nav-item {
        width: 100%;
        min-height: 34px;
        display: flex;
        align-items: center;
        gap: var(--s-5);
        padding: var(--s-4) var(--s-5);
        border: 0;
        border-radius: var(--r-pill);
        background: transparent;
        
        color: var(--sidebar-fg-muted);
        text-align: left;
        font-size: 13px;
      }

      .nav-item:hover {
        
        background: rgba(220, 38, 38, 0.08);
        color: var(--sidebar-fg);
      }

      .nav-item.active {
        background: var(--sidebar-red-active);
        color: var(--on-solid);
        font-weight: 700;
        box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
      }

      .nav-icon {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit;
      }

      .nav-label {
        flex: 1;
        min-width: 0;
      }

      .badge {
        padding: var(--s-1) var(--s-4);
        border-radius: var(--r-pill);
        background: var(--brand-soft);
        color: #e11d48;
        font-size: 10px;
        font-weight: 800;
        
        border: 1px solid rgba(225, 29, 72, 0.35);
      }

      .side-note {
        margin-top: auto;
        padding: var(--s-7) var(--s-6);
        
        border-top: 1px solid rgba(220, 38, 38, 0.15);
        color: var(--sidebar-fg-muted);
        font-size: 11px;
        line-height: 1.8;
      }

      .content {
        min-width: 0;
        min-height: 0;
        padding: 26px;
        overflow-y: auto;
        background: var(--content-dark);
      }

      .content-inner {
        width: min(1050px, 100%);
        margin: 0 auto;
      }

      .login-wrap {
        min-height: calc(100vh - 148px);
        display: grid;
        place-items: center;
        padding: var(--s-9) 0;
      }

      .login-hero {
        width: min(980px, 100%);
        display: grid;
        grid-template-columns: 1.15fr 400px;
        border-radius: var(--r-2xl);
        overflow: hidden;
        box-shadow: var(--sh-4);
      }

      .login-hero-brand {
        position: relative;
        overflow: hidden;
        background: #15171e;
        padding: 52px 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: var(--on-solid);
      }

      .login-hero-brand::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
        background-size: 16px 16px;
        pointer-events: none;
      }

      .login-hero-brand::after {
        content: "";
        position: absolute;
        width: 440px;
        height: 440px;
        border-radius: 50%;
        top: -140px;
        right: -160px;
        background: radial-gradient(circle, rgba(220, 38, 38, 0.38), transparent 70%);
        filter: blur(6px);
        pointer-events: none;
      }

      .login-hero-brand > * {
        position: relative;
        z-index: 1;
      }

      .login-hero-logo {
        width: 76px;
        height: 76px;
        border-radius: var(--r-xl);
        display: grid;
        place-items: center;
        margin-bottom: 26px;
        background: linear-gradient(135deg, #1e222d, #101218);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 16px 34px rgba(0, 0, 0, 0.4);
      }

      .login-hero-logo .pixel-r-icon {
        grid-template-columns: repeat(5, 7px);
        grid-template-rows: repeat(7, 7px);
        gap: var(--s-1);
        color: #ff4d4d;
        filter: drop-shadow(0 0 7px rgba(255, 77, 77, 0.65));
      }

      .login-hero-title {
        font-size: 34px;
        font-weight: 900;
        letter-spacing: 1px;
        line-height: 1.2;
      }

      .login-hero-desc {
        margin-top: var(--s-7);
        color: rgba(255, 255, 255, 0.62);
        font-size: 14px;
        line-height: 1.7;
      }

      .login-hero-features {
        list-style: none;
        margin: 30px 0 0;
        padding: 0;
        display: grid;
        gap: var(--s-7);
      }

      .login-hero-features li {
        display: flex;
        align-items: center;
        gap: var(--s-6);
        font-size: 13px;
        color: rgba(255, 255, 255, 0.82);
      }

      .login-hero-feature-icon {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        border-radius: var(--r-md);
        display: grid;
        place-items: center;
        font-size: 15px;
        background: rgba(255, 255, 255, 0.08);
      }

      .login-card {
        width: 100%;
        padding: 40px 36px;
        background: var(--card);
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .login-tabs {
        display: flex;
        gap: var(--s-2);
        padding: var(--s-2);
        margin-bottom: var(--s-9);
        border-radius: var(--r-lg);
        background: var(--surface-3);
      }

      .login-tab-btn {
        flex: 1;
        border: 0;
        padding: var(--s-5) 0;
        border-radius: var(--r-md);
        background: transparent;
        color: var(--ink-6);
        font-weight: 800;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.15s, color 0.15s, box-shadow 0.15s;
      }

      .login-tab-btn.active {
        background: var(--surface-1);
        color: var(--primary);
        box-shadow: var(--sh-2);
      }

      .login-head {
        text-align: left;
        margin-bottom: var(--s-9);
      }

      h1,
      h2,
      h3,
      p {
        margin: 0;
      }

      .login-head h2 {
        font-size: 22px;
        line-height: 1.2;
      }

      .login-head p {
        margin-top: var(--s-3);
        color: var(--muted);
        font-size: 13px;
      }

      .field {
        display: grid;
        gap: var(--s-4);
        margin-top: var(--s-7);
      }

      label {
        color: var(--ink-5);
        font-size: 12px;
        font-weight: 800;
      }

      input {
        width: 100%;
        min-height: 44px;
        padding: var(--s-5) var(--s-6);
        border: 1px solid var(--line-1);
        border-radius: var(--r-md);
        outline: none;
        background: var(--surface-2);
        color: var(--ink-1);
      }

      input:focus {
        border-color: var(--info);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
      }

      .primary-btn,
      .register-btn {
        width: 100%;
        min-height: 44px;
        border: 0;
        border-radius: var(--r-md);
        color: var(--on-solid);
        font-weight: 800;
        transition: transform 0.14s, box-shadow 0.14s, background 0.14s;
      }

      .primary-btn {
        margin-top: var(--s-9);
        background: var(--primary-solid);
        box-shadow: 0 12px 24px rgba(79, 70, 229, 0.22);
      }

      .primary-btn:hover {
        background: var(--fill-primary);
        box-shadow: 0 15px 26px rgba(79, 70, 229, 0.26);
      }

      .register-btn {
        margin-top: var(--s-6);
        background: #059669;
      }

      .primary-btn:active,
      .register-btn:active {
        transform: translateY(1px) scale(0.99);
      }

      .switch-line {
        margin-top: var(--s-8);
        color: var(--ink-6);
        font-size: 12px;
        text-align: center;
      }

      .link-btn {
        border: 0;
        background: transparent;
        color: var(--primary);
        font-weight: 800;
      }

      .register-panel {
        display: none;
      }

      .register-panel.visible {
        display: block;
      }

      .login-form {
        display: none;
      }

      .login-form.visible {
        display: block;
      }

      .captcha-row {
        display: flex;
        align-items: center;
        gap: var(--s-5);
      }

      .captcha-row input {
        flex: 1;
      }

      #loginCaptchaCanvas {
        width: 132px;
        height: 42px;
        border: 1px solid var(--line-2);
        border-radius: var(--r-lg);
        background: var(--surface-2);
        cursor: pointer;
        flex-shrink: 0;
      }

      .captcha-hint {
        margin-top: var(--s-4);
        color: var(--ink-6);
        font-size: 12px;
        line-height: 1.4;
      }

      .message {
        min-height: 20px;
        margin-top: var(--s-6);
        color: var(--ink-5);
        font-size: 13px;
        line-height: 1.5;
      }

      .message.error {
        color: var(--red);
      }

      .message.success {
        color: var(--green);
      }

      @media (max-width: 900px) {
        .login-hero {
          grid-template-columns: 1fr;
        }

        .login-hero-brand {
          padding: 34px 28px;
        }

        .login-hero-features {
          display: flex;
          flex-wrap: wrap;
          gap: var(--s-5) var(--s-9);
        }

        .login-card {
          padding: 32px 24px;
        }
      }

      .view {
        display: none;
      }

      .view.active {
        display: block;
      }

      .card {
        border: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: var(--r-md);
        background: var(--card);
        box-shadow: var(--sh-4);
      }

      .card-pad {
        padding: 24px;
      }

      .section-title {
        display: flex;
        align-items: center;
        gap: var(--s-7);
        margin-bottom: var(--s-9);
      }

      .section-title .big-icon {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: var(--r-md);
        background: var(--info-soft);
        color: var(--primary);
        font-size: 24px;
        
        align-self: flex-start;
      }
      
      .section-title .big-icon[data-nav-icon] {
        color: var(--danger-solid);
        background: var(--danger-soft);
      }

      .section-title h2 {
        font-size: 23px;
        line-height: 1.2;
      }

      .section-title p {
        margin-top: var(--s-2);
        color: var(--ink-6);
        font-size: 13px;
      }

      .stats-grid,
      .shop-grid,
      .func-grid {
        display: grid;
        gap: var(--s-7);
      }

      .stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .home-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .stat {
        min-height: 96px;
        padding: var(--s-8);
        border: 1px solid var(--surface-4);
        border-radius: var(--r-md);
        background: var(--surface-2);
        text-align: center;
      }

      .stat span {
        display: block;
        color: var(--ink-5);
        font-size: 13px;
      }

      .stat strong {
        display: block;
        margin-top: var(--s-4);
        font-size: 22px;
      }

      .wealth-empty {
        padding: var(--s-5);
        border: 1px dashed var(--line-2);
        border-radius: var(--r-lg);
        color: var(--ink-5);
        font-size: 12px;
        text-align: center;
        background: rgba(255, 255, 255, 0.7);
      }

      .leaderboard-row {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr) auto;
        gap: var(--s-6);
        align-items: center;
        padding: var(--s-6) var(--s-6);
        border: 1px solid var(--surface-4);
        border-radius: var(--r-lg);
        background: var(--surface-1);
      }

      .leaderboard-row.top-1 {
        border-color: var(--warn-bright);
        background: linear-gradient(135deg, var(--warn-soft), var(--on-solid));
      }

      .leaderboard-row.top-2 {
        border-color: var(--line-2);
        background: linear-gradient(135deg, var(--surface-2), var(--on-solid));
      }

      .leaderboard-row.top-3 {
        border-color: #fdba74;
        background: linear-gradient(135deg, var(--warn-soft), var(--on-solid));
      }

      .leaderboard-rank {
        color: var(--ink-1);
        font-size: 14px;
        font-weight: 900;
      }

      .leaderboard-player {
        display: flex;
        align-items: center;
        gap: var(--s-4);
        min-width: 0;
        font-weight: 900;
      }

      .leaderboard-player .player-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .leaderboard-wealth {
        color: #7c2d12;
        font-size: 13px;
        font-weight: 900;
        white-space: nowrap;
      }

      .placeholder {
        min-height: 230px;
        display: grid;
        place-items: center;
        padding: 28px;
        border: 1px dashed var(--line-1);
        border-radius: var(--r-md);
        background: var(--surface-2);
        color: var(--ink-6);
        text-align: center;
      }

      .placeholder strong {
        display: block;
        margin-bottom: var(--s-3);
        color: var(--ink-5);
        font-size: 18px;
      }

      .shop-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .confirm-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        backdrop-filter: blur(2px);
      }

      .confirm-box {
        background: var(--surface-1);
        border-radius: var(--r-xl);
        
        padding: 24px var(--s-9) var(--s-9);
        
        width: min(360px, 92vw);
        max-width: 92vw;
        box-shadow: var(--sh-4);
        text-align: center;
      }

      .confirm-box .confirm-icon { font-size: 40px; margin-bottom: var(--s-6); }
      .confirm-box h3 { font-size: 18px; color: var(--ink-1); margin-bottom: var(--s-4); }
      .confirm-box p { font-size: 13px; color: var(--ink-5); margin-bottom: var(--s-9); line-height: 1.6; }

      .confirm-box .confirm-cost {
        display: inline-block;
        background: var(--warn-tint);
        color: var(--warn-text);
        font-weight: 800;
        font-size: 15px;
        padding: var(--s-3) var(--s-8);
        border-radius: var(--r-pill);
        margin-bottom: var(--s-9);
      }

      .confirm-btn-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: var(--s-5);
      }
      .confirm-btn-row > button {
        flex: 1 1 132px;
        min-width: 0;
        height: auto;
        min-height: 44px;
        box-sizing: border-box;
        padding: var(--s-5) var(--s-6);
        border-radius: var(--r-lg);
        font-size: 14px;
        font-weight: 800;
        line-height: 1.3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--s-3);
        text-align: center;
        white-space: normal;
        cursor: pointer;
      }

      .confirm-cancel {
        flex: 1;
        padding: var(--s-5);
        border: 1.5px solid var(--line-1);
        border-radius: var(--r-lg);
        background: var(--surface-1);
        color: var(--ink-5);
        font-weight: 700;
        cursor: pointer;
        font-size: 14px;
      }

      .confirm-ok {
        flex: 1;
        padding: var(--s-5);
        border: 0;
        border-radius: var(--r-lg);
        color: var(--on-solid);
        font-weight: 800;
        cursor: pointer;
        font-size: 14px;
        
        background: linear-gradient(135deg, var(--fill-info), var(--rare-solid));
      }

      .confirm-ok.blue { background: linear-gradient(135deg, var(--fill-info), var(--rare-solid)); }
      .confirm-ok.orange { background: linear-gradient(135deg, var(--warn-solid), var(--accent-orange)); }
      
      .confirm-ok.green { background: var(--color-green-text); }
      
      .confirm-ok.red { background: linear-gradient(135deg, var(--brand), var(--fill-danger)); }
      
      .confirm-ok.danger { background: linear-gradient(135deg, var(--accent-orange), var(--danger-solid)); }
      
      .land-worker-detail {
        margin: var(--s-1) 0 var(--s-5); padding: var(--s-3) 0 var(--s-3) var(--s-5);
        border-left: 2px solid var(--border);
        font-size: 11.5px; line-height: 1.7; color: var(--text-muted);
      }
      .land-worker-detail strong { color: var(--ink-2); font-weight: 700; }

      #activeBuffChip {
        display: inline-flex; align-items: center; gap: var(--s-2);
        padding: var(--s-2) var(--s-5); font-size: 12px; line-height: 1;
        cursor: pointer;
      }
      #activeBuffChip .cur-value { font-variant-numeric: tabular-nums; font-weight: 700; }

      .confirm-danger-pill {
        display: inline-block;
        margin-top: var(--s-4);
        padding: var(--s-2) var(--s-6);
        border-radius: var(--r-pill);
        background: var(--danger-soft);
        border: 1px solid var(--brand);
        color: var(--danger-text);
        font-size: 12px;
        font-weight: 800;
      }

      .furnace-box {
        background: #1A1A1A !important; border: 1px solid #8B0000; border-radius: var(--r-lg);
        color: var(--on-dark-1); text-align: left;
      }
      .furnace-box h3 { color: var(--on-solid); display: flex; align-items: center; gap: var(--s-3); }
      .furnace-icon-flame {
        display: inline-block; font-size: 20px; filter: drop-shadow(0 0 4px rgba(210,39,48,0.7));
        animation: furnaceFlameFlicker 1.4s ease-in-out infinite;
      }
      @keyframes furnaceFlameFlicker {
        0%, 100% { transform: scale(1) translateY(0); opacity: 1; }
        50% { transform: scale(1.08) translateY(-1px); opacity: 0.85; }
      }
      
      .furnace-check-row { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-4) 0; font-size: 13px; color: var(--line-2); }
      .furnace-check-row input[type="checkbox"] {
        appearance: none; width: 18px; height: 18px; border-radius: var(--r-sm); border: 1.5px solid #6B7280;
        background: #262626; cursor: pointer; position: relative; flex: 0 0 auto;
      }
      .furnace-check-row input[type="checkbox"]:checked {
        background: #8B0000; border-color: var(--brand);
      }
      .furnace-check-row input[type="checkbox"]:checked::after {
        content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        color: var(--on-solid); font-size: 12px; font-weight: 900;
      }
      
      .furnace-preview-box {
        margin: var(--s-5) 0; padding: var(--s-5) var(--s-6); border-radius: var(--r-sm); background: #241414;
        border: 1px dashed #8B0000; font-size: 12.5px; color: #FCA5A5; line-height: 1.6;
      }
      .furnace-preview-box b { color: var(--on-dark-gold); }
      
      .furnace-item-grid {
        display: none; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: var(--s-3);
        margin: 0 0 var(--s-5); max-height: 176px; overflow-y: auto; padding: var(--s-1);
      }
      .furnace-item-card {
        position: relative; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09);
        border-left: 3px solid var(--fi-rarity, var(--line-3)); border-radius: var(--r-sm); padding: var(--s-3) var(--s-3) var(--s-2);
        text-align: center; transition: background 0.15s ease, transform 0.15s ease;
      }
      .furnace-item-card:hover { background: rgba(255,255,255,0.09); transform: translateY(-1px); }
      .furnace-item-card .fi-tier {
        display: block; font-size: 9px; font-weight: 800; color: var(--warn-line); letter-spacing: 0.3px;
      }
      .furnace-item-card .fi-name {
        display: block; font-size: 10px; color: var(--info-soft); white-space: nowrap; overflow: hidden;
        text-overflow: ellipsis; margin: var(--s-1) 0 var(--s-1);
      }
      .furnace-item-card .fi-enh { display: block; font-size: 9px; color: #93C5FD; font-weight: 700; }
      .furnace-item-more {
        grid-column: 1 / -1; text-align: center; font-size: 10.5px; color: var(--ink-5); padding: var(--s-2) 0 0;
      }
      
      .furnace-confirm-btn {
        width: 100%; height: 44px; border-radius: var(--r-sm); border: 0; background: var(--brand); color: var(--on-solid);
        font-weight: 900; font-size: 14px; letter-spacing: 0.5px; cursor: pointer; margin-top: var(--s-2);
        box-shadow: 0 4px 14px rgba(210,39,48,0.35);
      }
      .furnace-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
      .furnace-cancel-btn {
        width: 100%; height: 36px; border-radius: var(--r-sm); border: 1px solid #4B5563; background: transparent;
        color: var(--ink-6); font-weight: 700; font-size: 13px; cursor: pointer; margin-top: var(--s-4);
      }

      .furnace-switch-row {
        display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
        padding: var(--s-5) var(--s-6); margin: var(--s-2) 0 var(--s-5); border-radius: var(--r-sm);
        background: #241414; border: 1px solid #8B0000;
      }
      .furnace-switch-row .fs-label { font-size: 13px; font-weight: 800; color: var(--on-solid); }
      .furnace-switch-row .fs-state { font-size: 11.5px; color: var(--ink-6); margin-top: var(--s-1); }
      
      .furnace-switch {
        appearance: none; width: 46px; height: 24px; border-radius: var(--r-pill); border: 1.5px solid #6B7280;
        background: #262626; cursor: pointer; position: relative; flex: 0 0 auto; transition: background 0.18s ease, border-color 0.18s ease;
      }
      .furnace-switch::after {
        content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
        background: #9CA3AF; transition: transform 0.18s ease, background 0.18s ease;
      }
      .furnace-switch:checked { background: #8B0000; border-color: var(--brand); }
      .furnace-switch:checked::after { transform: translateX(22px); background: #FCA5A5; }
      .furnace-select-row {
        display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); margin: var(--s-4) 0;
        font-size: 13px; color: var(--line-2);
      }
      .furnace-select-row select {
        flex: 0 0 auto; min-width: 148px; height: 32px; padding: 0 var(--s-4); border-radius: var(--r-sm);
        background: #262626; color: var(--on-dark-1); border: 1.5px solid #6B7280; font-size: 12.5px; cursor: pointer;
      }
      .furnace-select-row select:disabled { opacity: 0.45; cursor: not-allowed; }
      .furnace-safety-note {
        margin: var(--s-4) 0 var(--s-2); padding: var(--s-4) var(--s-5); border-radius: var(--r-sm);
        background: rgba(253,230,138,0.06); border: 1px solid rgba(253,230,138,0.28);
        font-size: 11.5px; color: var(--warn-line); line-height: 1.65;
      }
      .furnace-usage-line { font-size: 11.5px; color: var(--ink-6); margin: var(--s-3) 0 var(--s-1); }

      .lucky-card {
        min-height: 148px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--s-4);
        padding: var(--s-8);
        border: 1px solid var(--surface-4);
        border-radius: var(--r-lg);
        background: var(--surface-1);
        text-align: center;
      }

      .lucky-card strong {
        color: var(--ink-1);
        font-size: 24px;
        letter-spacing: 0;
      }

      .lucky-card span {
        color: var(--ink-5);
        font-size: 12px;
      }

      .lucky-card .lucky-price {
        color: #7c2d12;
        font-weight: 800;
      }

      .lucky-buy-btn {
        width: 100%;
        max-width: 180px;
        margin-top: var(--s-2);
        padding: var(--s-5) var(--s-6);
        border: 0;
        border-radius: var(--r-lg);
        background: linear-gradient(135deg, var(--rare-solid), var(--fill-info));
        color: var(--on-solid);
        font-weight: 900;
        cursor: pointer;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
      }

      .lucky-buy-btn:hover {
        transform: scale(1.03);
        box-shadow: 0 10px 22px rgba(37, 99, 235, 0.25);
      }

      .shop-item,
      .func-card {
        border: 1px solid var(--surface-4);
        border-radius: var(--r-md);
        background: var(--surface-1);
        text-align: center;
      }

      .shop-item {
        padding: var(--s-9);
      }

      .shop-item strong {
        display: block;
        color: var(--ink-1);
        font-size: 20px;
      }

      .shop-item span {
        display: block;
        margin-top: var(--s-4);
        color: var(--ink-6);
        font-size: 13px;
      }

      .func-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .beian {
        margin-top: 24px;
        padding-top: var(--s-7);
        border-top: 1px solid var(--surface-4);
        color: var(--line-2);
        font-size: 10px;
        line-height: 1.8;
        text-align: center;
      }

      .cloud-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--s-3);
        cursor: help;
      }

      .cloud-status-dot {
        width: 8px;
        height: 8px;
        border-radius: var(--r-pill);
        background: #94a3b8;
        box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.14);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
      }

      .cloud-status.good .cloud-status-dot {
        background: #22c55e;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
      }

      .cloud-status.warn .cloud-status-dot {
        background: var(--warn-solid);
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
      }

      .cloud-status.bad .cloud-status-dot {
        background: var(--brand);
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
      }

      .online-pill {
        min-width: 96px;
        padding: var(--s-4) var(--s-6);
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        background: var(--surface-2);
        color: var(--ink-4);
        font-size: 12px;
        text-align: center;
      }

      .checkin-btn {
        min-height: 42px;
        padding: 0 var(--s-9);
        border: 0;
        border-radius: var(--r-md);
        background: linear-gradient(135deg, var(--warn-solid), var(--accent-orange));
        color: var(--on-warn);
        font-weight: 800;
        box-shadow: 0 10px 22px rgba(245, 158, 11, 0.24);
      }

      .checkin-btn:active {
        transform: scale(0.98);
      }

      .checkin-draw {
        margin-top: var(--s-6);
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--s-3);
        position: relative;
      }

      .draw-card {
        width: 100%;
        max-width: 118px;
        height: 165px;
        margin: 0 auto;
        border: 0;
        padding: 0;
        perspective: 900px;
        background: transparent;
        cursor: pointer;
        position: relative; 
      }

      .draw-card:disabled {
        cursor: default;
      }

      @media (max-width: 560px) {
        .checkin-draw {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .draw-card {
          max-width: 130px;
          height: 182px;
        }
      }

      .draw-inner {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.55s ease, opacity 0.2s ease;
      }

      .draw-card.flipped .draw-inner {
        transform: rotateY(180deg);
      }

      .draw-face {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding: var(--s-4) var(--s-3);
        border-radius: var(--r-lg);
        backface-visibility: hidden;
        text-align: center;
        overflow: hidden;
      }

      .draw-back {
        border: 2px solid rgba(239, 68, 68, 0.4);
        background:
          repeating-linear-gradient(90deg, rgba(239, 68, 68, 0.06) 0 2px, transparent 2px 26px),
          repeating-linear-gradient(0deg, rgba(239, 68, 68, 0.06) 0 2px, transparent 2px 26px),
          linear-gradient(160deg, #1b1e26, #0d0f13);
        color: rgba(255, 255, 255, 0.82);
        box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15), 0 12px 26px rgba(0, 0, 0, 0.5), inset 0 0 22px rgba(220, 38, 38, 0.08);
        position: relative;
      }

      .draw-hex-chip {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 13px;
        height: 13px;
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        background: linear-gradient(160deg, var(--brand), #7a1f1f);
        box-shadow: 0 0 6px rgba(239, 68, 68, 0.55);
      }
      .draw-hex-chip-2 {
        top: auto;
        left: auto;
        bottom: 6px;
        right: 6px;
        width: 10px;
        height: 10px;
        transform: rotate(30deg);
        opacity: 0.65;
      }

      .draw-scan-ring {
        position: absolute;
        top: 44%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 1px solid rgba(239, 68, 68, 0.35);
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.05), 0 0 0 11px rgba(239, 68, 68, 0.025);
        overflow: hidden;
      }
      .draw-scan-ring::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 50%;
        background: conic-gradient(from 0deg, rgba(239, 68, 68, 0) 0deg, rgba(239, 68, 68, 0.6) 26deg, rgba(239, 68, 68, 0) 74deg);
        animation: drawScanRotate 2.6s linear infinite;
      }
      @keyframes drawScanRotate {
        to { transform: rotate(360deg); }
      }

      .draw-scanline {
        position: absolute;
        left: 6%;
        right: 6%;
        top: -8%;
        height: 3px;
        border-radius: var(--r-xs);
        background: linear-gradient(90deg, rgba(239, 68, 68, 0), var(--brand) 45%, var(--brand) 55%, rgba(239, 68, 68, 0));
        box-shadow: 0 0 10px 2px rgba(239, 68, 68, 0.75);
        opacity: 0;
        pointer-events: none;
      }
      .draw-card.scanning .draw-back {
        animation: drawScanFlicker 0.38s ease-in-out 1;
      }
      .draw-card.scanning .draw-scanline {
        animation: drawScanSweep 0.38s linear 1;
      }
      @keyframes drawScanSweep {
        0% { top: -8%; opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { top: 104%; opacity: 0; }
      }
      @keyframes drawScanFlicker {
        0%, 100% { filter: brightness(1); }
        30% { filter: brightness(1.5); }
        55% { filter: brightness(0.85); }
        75% { filter: brightness(1.3); }
      }

      .draw-barcode {
        position: absolute;
        left: 14%;
        right: 14%;
        bottom: 18px;
        height: 9px;
        background: repeating-linear-gradient(90deg,
          var(--brand) 0 2px, transparent 2px 4px,
          var(--brand) 4px 5px, transparent 5px 9px,
          var(--brand) 9px 12px, transparent 12px 14px,
          var(--brand) 14px 15px, transparent 15px 20px);
        opacity: 0.7;
      }
      .draw-dbtext {
        position: absolute;
        left: 4px;
        right: 4px;
        bottom: 5px;
        text-align: center;
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
        font-size: 6px;
        letter-spacing: 0.5px;
        color: rgba(239, 68, 68, 0.75);
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .draw-front {
        transform: rotateY(180deg);
        border: 2px solid rgba(239, 68, 68, 0.5);
        background:
          repeating-linear-gradient(90deg, rgba(239, 68, 68, 0.04) 0 2px, transparent 2px 26px),
          linear-gradient(160deg, #1a1116, #0d0f13 75%);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(220, 38, 38, 0.08);
        color: var(--info-soft);
        position: relative;
      }
      
      .draw-front::before,
      .draw-front::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border: 2px solid rgba(239, 68, 68, 0.65);
      }
      .draw-front::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
      .draw-front::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

      .draw-card.win {
        filter: drop-shadow(0 12px 22px rgba(239, 68, 68, 0.35));
      }

      .draw-card.win .draw-front {
        border-color: var(--brand);
        background:
          repeating-linear-gradient(90deg, rgba(239, 68, 68, 0.08) 0 2px, transparent 2px 26px),
          linear-gradient(160deg, #2a1013, #150708 75%);
        animation: drawWinPulse 1.8s ease-in-out infinite;
      }
      @keyframes drawWinPulse {
        0%, 100% { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5), 0 0 22px rgba(239, 68, 68, 0.35), inset 0 0 18px rgba(239, 68, 68, 0.12); }
        50% { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.8), 0 0 34px rgba(239, 68, 68, 0.65), inset 0 0 26px rgba(239, 68, 68, 0.22); }
      }
      .draw-card.win .draw-front::before,
      .draw-card.win .draw-front::after {
        border-color: var(--brand);
      }
      .draw-card.win .draw-label {
        color: #fca5a5;
      }

      .draw-card.missed .draw-inner {
        opacity: 0.48;
        filter: grayscale(0.35);
      }

      .draw-card.flash-burst::after {
        content: "";
        position: absolute;
        inset: -10%;
        border-radius: var(--r-xl);
        background: radial-gradient(circle, rgba(239, 68, 68, 0.55), rgba(239, 68, 68, 0) 70%);
        opacity: 0;
        animation: drawFlashBurst 0.52s ease-out forwards;
        pointer-events: none;
        z-index: 5;
      }
      @keyframes drawFlashBurst {
        0% { opacity: 0; transform: scale(0.6); }
        35% { opacity: 0.9; transform: scale(1.05); }
        100% { opacity: 0; transform: scale(1.4); }
      }

      .draw-card.flash-burst {
        animation: drawFlipSettle 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
      }
      @keyframes drawFlipSettle {
        0% { transform: scale(1) translateY(0); }
        40% { transform: scale(1.08) translateY(-6px); }
        100% { transform: scale(1) translateY(0); }
      }

      .draw-overlay {
        grid-column: 1 / -1;
        padding: var(--s-5);
        border: 1px dashed rgba(239, 68, 68, 0.45);
        border-radius: var(--r-lg);
        background: rgba(13, 15, 19, 0.85);
        color: #f87171;
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
        font-size: 12px;
        letter-spacing: 0.3px;
        text-align: center;
      }

      .draw-icon {
        display: block;
        font-size: 28px;
        line-height: 1;
        position: relative;
        z-index: 1;
      }
      
      .draw-icon .currency-icon-img {
        margin-right: 0;
      }

      .draw-amount {
        display: block;
        margin-top: var(--s-3);
        color: var(--on-solid);
        font-size: 14px;
        font-weight: 900;
        position: relative;
        z-index: 1;
      }

      .draw-label {
        display: block;
        margin-top: var(--s-2);
        color: var(--ink-6);
        font-size: 10px;
        position: relative;
        z-index: 1;
      }

      .chat-shell {
        display: grid;
        gap: var(--s-7);
      }

      .chat-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-6);
      }

      .chat-status {
        padding: var(--s-3) var(--s-5);
        border-radius: var(--r-pill);
        background: var(--surface-3);
        color: var(--ink-5);
        font-size: 12px;
      }

      .chat-messages {
        height: 420px;
        display: flex;
        flex-direction: column;
        gap: var(--s-4);
        overflow-y: auto;
        padding: var(--s-7);
        border: 1px solid var(--surface-4);
        border-radius: var(--r-md);
        background: var(--surface-2);
      }

      .chat-empty {
        margin: auto;
        color: var(--ink-6);
        font-size: 14px;
        text-align: center;
      }

      .chat-message {
        max-width: 86%;
        padding: var(--s-5) var(--s-6);
        border: 1px solid var(--surface-4);
        border-radius: var(--r-md);
        background: var(--surface-1);
        box-shadow: var(--sh-1);
        word-break: break-word;
      }

      .chat-message.self {
        align-self: flex-end;
        border-color: var(--primary-line);
        background: var(--primary-soft);
      }

      .chat-message.system {
        align-self: center;
        max-width: 100%;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: var(--ink-6);
        font-size: 12px;
        text-align: center;
      }

      .chat-meta {
        display: flex;
        align-items: center;
        gap: var(--s-4);
        margin-bottom: var(--s-2);
        color: var(--ink-5);
        font-size: 12px;
        font-weight: 800;
      }

      .chat-vip-stack {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
      }

      .chat-vip-icon {
        min-width: 24px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 var(--s-3);
        border: 1px solid var(--surface-4);
        border-radius: var(--r-pill);
        background: var(--surface-2);
        font-size: 12px;
        font-weight: 900;
        white-space: nowrap;
      }

      .chat-vip-icon.member {
        border-color: #fed7aa;
        background: var(--warn-soft);
        color: #c2410c;
      }

      .chat-name {
        border: 0;
        background: transparent;
        color: var(--ink-3);
        font: inherit;
        font-weight: 900;
        cursor: pointer;
        padding: 0;
      }

      .chat-name:hover {
        text-decoration: underline;
      }

      .chat-level-icons,
      .chat-level-plain {
        color: var(--warn-strong);
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
      }

      .chat-house-badge {
        display: inline-flex;
        align-items: center;
        min-height: 22px;
        padding: var(--s-1) var(--s-4);
        border: 1px solid var(--primary-soft);
        border-radius: var(--r-pill);
        background: linear-gradient(135deg, var(--surface-2), var(--info-soft));
        color: var(--ink-4);
        font-size: 11px;
        font-weight: 900;
        white-space: nowrap;
      }

      .chat-channel-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-4);
      }

      .chat-channel-tabs.compact {
        gap: 0;
        border-bottom: 1px solid var(--surface-4);
      }

      .chat-channel-tabs.compact .chat-channel-tab {
        flex: 1;
        height: 30px;
        border: 0;
        border-radius: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: var(--ink-5);
        font-size: 12px;
        font-weight: 700;
      }

      .chat-channel-tabs.compact .chat-channel-tab.active {
        border-color: var(--line-1);
        color: var(--ink-3);
        background: transparent;
        border-bottom-color: var(--line-3);
      }

      .chat-channel-tab {
        height: 32px;
        padding: 0 var(--s-6);
        border: 1px solid var(--line-1);
        border-radius: var(--r-pill);
        background: var(--surface-2);
        color: var(--ink-5);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }

      .chat-channel-tab.has-unread {
        position: relative;
      }
      .chat-channel-tab.has-unread::after {
        content: "";
        position: absolute;
        top: 3px;
        right: 5px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--danger-solid);
        box-shadow: 0 0 0 2px var(--surface-2);
      }
      .chat-channel-tab.active.has-unread::after {
        box-shadow: 0 0 0 2px var(--surface-3);
      }

      .chat-channel-tab.active {
        border-color: var(--line-2);
        background: var(--surface-3);
        color: var(--ink-2);
      }

      .chat-private-panel {
        border: 1px solid var(--surface-4);
        border-radius: var(--r-md);
        padding: var(--s-5);
        background: var(--surface-2);
      }

      .chat-private-title {
        margin-bottom: var(--s-4);
        color: var(--ink-5);
        font-size: 12px;
        font-weight: 700;
      }

      .chat-private-list {
        display: grid;
        gap: var(--s-3);
        max-height: 110px;
        overflow-y: auto;
      }

      .chat-private-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-4);
        padding: var(--s-4) var(--s-5);
        border: 1px solid var(--line-1);
        border-radius: var(--r-md);
        background: var(--surface-1);
        font-size: 12px;
      }

      .chat-private-item .park-btn {
        height: 28px;
        min-height: 28px;
        padding: 0 var(--s-5);
      }

      .chat-dock {
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 80;
        display: grid;
        justify-items: end;
        gap: var(--s-5);
      }

      .lottery-entry-btn {
        position: fixed;
        left: 16px;
        bottom: 16px;
        z-index: 80;
        height: 40px;
        padding: 0 var(--s-7);
        border: 1px solid var(--warn-solid);
        border-radius: var(--r-pill);
        background: var(--warn-soft);
        color: var(--warn-text);
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
      }
      .lottery-entry-btn[hidden] { display: none; }

      .chat-dock-mini-badge {
        display: inline-block;
        margin-left: var(--s-2);
        min-width: 15px;
        height: 15px;
        padding: 0 var(--s-2);
        border-radius: var(--r-pill);
        background: var(--brand);
        color: var(--on-solid);
        font-size: 10px;
        font-weight: 700;
        line-height: 15px;
        text-align: center;
        vertical-align: middle;
      }
      
      .chat-dock-mini-badge[hidden] {
        display: none;
      }

      .chat-name.member-red {
        color: var(--danger-solid);
      }

      .member-red {
        color: var(--danger-solid);
      }

      .member-name {
        color: var(--danger-solid);
        font-weight: 900;
      }

      .name-card-regular {
        color: var(--danger-solid);
      }
      .name-card-premium {
        color: var(--danger-solid);
        text-shadow: 0 0 4px rgba(220, 38, 38, .55), 0 0 8px rgba(220, 38, 38, .4);
        animation: nameCardGlowPulse 1.3s ease-in-out infinite;
      }
      @keyframes nameCardGlowPulse {
        0%, 100% {
          text-shadow: 0 0 4px rgba(220, 38, 38, .55), 0 0 8px rgba(220, 38, 38, .4);
          filter: brightness(1) saturate(1);
        }
        50% {
          text-shadow: 0 0 7px rgba(220, 38, 38, .9), 0 0 14px rgba(220, 38, 38, .8);
          filter: brightness(1.35) saturate(1.25);
        }
      }

      .level-icons {
        color: var(--warn-strong);
        font-size: 13px;
        font-weight: 900;
        white-space: nowrap;
      }

      .qq-level-icons {
        display: inline-block;
        color: var(--warn-strong);
        font-weight: 900;
        line-height: 1.2;
        white-space: nowrap;
      }

      .qq-level-icons.large {
        font-size: 24px;
        letter-spacing: 0;
      }

      .identity-badges {
        display: inline-flex;
        align-items: center;
        gap: var(--s-3);
        vertical-align: middle;
      }

      .identity-badge {
        display: inline-flex;
        align-items: center;
        padding: 0;
        border-radius: var(--r-sm);
        line-height: 0;
      }

      .identity-badge.member {
        background: none;
        border: none;
      }

      .exp-bar {
        height: 14px;
        margin: var(--s-5) 0;
        overflow: hidden;
        border-radius: var(--r-pill);
        background: var(--line-1);
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
      }

      .exp-bar span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #4ade80, #10b981);
        transition: width 0.5s ease;
      }

      .chat-time {
        margin-left: auto;
        color: var(--ink-6);
        font-weight: 400;
      }

      .chat-content {
        color: var(--ink-1);
        font-size: 14px;
        line-height: 1.5;
      }

      .uc-stat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--s-4);
      }

      .uc-stat-cell {
        border-radius: var(--r-lg);
        background: rgba(148, 163, 184, 0.1);
        padding: var(--s-4) var(--s-5);
        min-width: 0;
      }

      .uc-stat-cell span {
        display: block;
        font-size: 11px;
        color: var(--ink-6);
        margin-bottom: var(--s-1);
      }

      .uc-stat-cell strong {
        display: block;
        font-size: 13px;
        color: var(--ink-1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .uc-stat-cell.uc-stat-clickable {
        cursor: pointer;
        transition: background-color 0.15s ease;
      }
      .uc-stat-cell.uc-stat-clickable:hover {
        background: rgba(210, 39, 48, 0.12);
      }
      .uc-stat-cell.uc-stat-clickable strong {
        color: var(--brand);
      }

      .title-picker-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-4);
        padding: var(--s-5) var(--s-5);
        border-radius: var(--r-md);
        margin-bottom: var(--s-3);
        background: rgba(148, 163, 184, 0.08);
        cursor: pointer;
        font-size: 13px;
      }
      .title-picker-row:hover { background: rgba(148, 163, 184, 0.16); }
      .title-picker-row.is-equipped {
        background: rgba(210, 39, 48, 0.1);
      }
      
      .title-picker-row.is-selected {
        background: rgba(210, 39, 48, 0.16);
        outline: 2px solid #D22730;
        outline-offset: -2px;
      }
      .title-picker-row.is-auto {
        background: rgba(148, 163, 184, 0.05);
        cursor: default;
        opacity: 0.85;
      }
      .title-picker-preview {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-4);
        padding: var(--s-5) var(--s-6);
        border-radius: var(--r-md);
        background: rgba(210, 39, 48, 0.08);
        border: 1px solid rgba(210, 39, 48, 0.25);
        margin-bottom: var(--s-6);
        font-size: 13px;
        font-weight: 700;
      }
      .title-picker-section-label {
        font-size: 11px;
        color: var(--ink-6);
        margin: var(--s-5) 0 var(--s-2);
        font-weight: 700;
      }

      .chat-input-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--s-5);
      }

      .send-btn {
        min-height: 44px;
        padding: 0 var(--s-9);
        border: 0;
        border-radius: var(--r-md);
        background: var(--primary-solid);
        color: var(--on-solid);
        font-weight: 800;
      }

      .toast-overlay {
        position: fixed;
        inset: 0;
        
        z-index: 10090;
        display: grid;
        place-items: center;
        padding: var(--s-9);
        background: rgba(15, 23, 42, 0.28);
        backdrop-filter: blur(4px);
      }

      .toast-box {
        width: min(420px, 100%);
        padding: 28px;
        border-radius: var(--r-lg);
        background: var(--surface-1);
        box-shadow: var(--sh-4);
        text-align: center;
      }

      .toast-icon {
        margin-bottom: var(--s-4);
        font-size: 42px;
      }

      .toast-box h3 {
        margin-bottom: var(--s-3);
        font-size: 20px;
      }

      .toast-box p {
        margin-bottom: var(--s-9);
        color: var(--ink-5);
        line-height: 1.6;
      }

      .toast-close {
        min-height: 38px;
        min-width: 110px;
        border: 0;
        border-radius: var(--r-pill);
        background: var(--primary-solid);
        color: var(--on-solid);
        font-weight: 800;
      }

      .corner-toast-container {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 10091;
        display: flex;
        flex-direction: column;
        gap: var(--s-4);
        pointer-events: none;
        max-width: min(320px, calc(100vw - 32px));
      }

      .corner-toast-item {
        display: flex;
        align-items: center;
        gap: var(--s-4);
        padding: var(--s-5) var(--s-7);
        border-radius: var(--r-lg);
        background: rgba(15, 23, 42, 0.92);
        color: var(--on-solid);
        box-shadow: var(--sh-3);
        font-size: 13px;
        line-height: 1.4;
        opacity: 0;
        transform: translateX(24px);
        transition: opacity 0.2s ease, transform 0.2s ease;
        border-left: 3px solid transparent;
      }

      .corner-toast-item.show {
        opacity: 1;
        transform: translateX(0);
      }

      .corner-toast-icon {
        font-size: 18px;
        flex-shrink: 0;
        
        display: flex;
        align-items: center;
      }

      .corner-toast-body strong {
        display: block;
        font-weight: 700;
        margin-bottom: var(--s-1);
      }

      .corner-toast-body span {
        color: rgba(255, 255, 255, 0.82);
      }

      .rules-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        place-items: center;
        padding: var(--s-9);
        background: rgba(15, 23, 42, 0.38);
        backdrop-filter: blur(4px);
        
        overflow-y: auto;
      }

      .rules-modal {
        width: min(760px, 100%);
        overflow: hidden;
        border: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: var(--r-xl);
        background: var(--surface-1);
        box-shadow: var(--sh-4);
      }

      .checkin-hub-modal {
        width: min(920px, 96vw) !important;
      }
      .rules-modal-scroll.checkin-hub-scroll {
        max-height: min(78vh, 780px);
      }

      .friend-detail-modal {
        width: min(360px, 90vw) !important;
      }

      .sandbox-plot-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
        gap: var(--s-4);
      }
      
      .sandbox-plot-actions .home-btn {
        width: 100%;
      }
      
      .sandbox-plot-actions .home-btn + .home-btn {
        margin-left: 0;
      }

      .rules-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-6);
        padding: var(--s-7) var(--s-9);
        border-bottom: 1px solid var(--surface-4);
        background: var(--surface-2);
      }

      .rules-modal-head strong {
        color: var(--ink-1);
        font-size: 16px;
      }

      .rules-modal-close {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: var(--r-pill);
        background: var(--surface-4);
        color: var(--ink-4);
        font-size: 18px;
        cursor: pointer;
      }

      .box-card-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--s-5);
      }
      .box-card-outer {
        aspect-ratio: 3 / 4;
        perspective: 700px;
        cursor: pointer;
      }
      .box-card-outer.opened,
      .box-card-outer.disabled {
        cursor: default;
      }
      .box-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
        transform-style: preserve-3d;
      }
      .box-card-inner.flipped {
        transform: rotateY(180deg);
      }
      .box-card-face {
        position: absolute;
        inset: 0;
        backface-visibility: hidden;
        border-radius: var(--r-lg);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: var(--s-2);
        box-sizing: border-box;
      }
      .box-card-face.back {
        background: linear-gradient(160deg, var(--fill-primary), var(--rare-solid));
        color: var(--on-dark-gold);
        font-size: 26px;
        border: 1px solid rgba(253, 230, 138, 0.4);
      }
      .box-card-face.back .box-card-index {
        font-size: 10px;
        color: var(--on-dark-rare);
        margin-top: var(--s-2);
      }
      .box-card-face.front {
        transform: rotateY(180deg);
        background: linear-gradient(160deg, var(--warn-soft), var(--warn-tint));
        border: 1px solid var(--warn-line);
        font-size: 22px;
      }
      .box-card-face.front .box-card-label {
        font-size: 10px;
        color: var(--warn-deep);
        font-weight: 700;
        margin-top: var(--s-1);
      }
      .box-card-face.front .box-card-pos {
        font-size: 9px;
        color: var(--warn-text);
      }
      
      .box-card-face.front.tier-medium {
        background: linear-gradient(160deg, #e0f2fe, #bae6fd 60%, #7dd3fc);
        border: 1px solid #38bdf8;
      }
      .box-card-face.front.tier-medium .box-card-label,
      .box-card-face.front.tier-medium .box-card-pos {
        color: #075985;
      }
      .box-card-face.front.tier-large {
        background: linear-gradient(160deg, #4c1d95, #7c3aed 55%, #f59e0b);
        border: 1px solid #fbbf24;
        box-shadow: 0 0 10px 2px rgba(251, 191, 36, 0.5);
      }
      .box-card-face.front.tier-large .box-card-label,
      .box-card-face.front.tier-large .box-card-pos {
        color: #fde68a;
      }
      
      .box-card-face.front.preview {
        filter: grayscale(0.5);
        opacity: 0.85;
        border-style: dashed;
      }
      .box-card-outer.anim-shake .box-card-inner {
        animation: boxCardShake 0.5s ease-in-out;
      }
      .box-card-outer.anim-glow .box-card-face.back {
        animation: boxCardGlow 0.5s linear;
      }
      @keyframes boxCardShake {
        0%, 100% { transform: translateX(0) rotate(0deg); }
        20% { transform: translateX(-4px) rotate(-3deg); }
        40% { transform: translateX(4px) rotate(3deg); }
        60% { transform: translateX(-3px) rotate(-2deg); }
        80% { transform: translateX(3px) rotate(2deg); }
      }
      @keyframes boxCardGlow {
        0% { box-shadow: 0 0 8px 2px #f87171; }
        20% { box-shadow: 0 0 8px 2px #fb923c; }
        40% { box-shadow: 0 0 8px 2px #facc15; }
        60% { box-shadow: 0 0 8px 2px #4ade80; }
        80% { box-shadow: 0 0 8px 2px #60a5fa; }
        100% { box-shadow: 0 0 8px 2px #c084fc; }
      }
      .box-draw-status {
        text-align: center;
        margin: var(--s-6) 0;
        font-size: 13px;
        color: var(--ink-5);
      }
      .box-draw-status strong {
        color: var(--warn-text);
      }

      .dropdown-avatar-mini {
        width: 36px;
        height: 36px;
        border-radius: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        background: var(--surface-3);
        flex-shrink: 0;
        cursor: pointer;
        box-sizing: border-box;
        border: 2px solid var(--line-1);
      }
      .avatar-frame-member { border: 3px solid var(--line-3); box-shadow: 0 0 6px rgba(148,163,184,.6); }
      
      .dropdown-avatar-mini-img { width: 100%; height: 100%; border-radius: 20%; object-fit: cover; }
      .profile-avatar-stage-img { width: 100%; height: 100%; object-fit: contain; }

      .avatar-nft-framed {
        border-width: 3px;
        border-style: solid;
        border-image: linear-gradient(135deg, #7a0d12 0%, #d22730 22%, #2b2b2b 45%, #d4af37 62%, #1a1a1a 80%, #d22730 100%) 1;
        box-shadow: 0 0 6px 1px rgba(210, 39, 48, 0.55), inset 0 0 4px rgba(212, 175, 55, 0.5);
        
        border-radius: 0;
      }
      
      .dropdown-avatar-mini:has(.avatar-nft-framed),
      .profile-avatar-stage:has(.avatar-nft-framed) {
        border: none;
        border-radius: 0;
        background: transparent;
      }
      .avatar-custom-dimmed {
        filter: brightness(0.55);
      }

      #dropdownAvatarMiniBtn.dropdown-avatar-mini {
        width: 68px;
        height: 68px;
        font-size: 34px;
        border-width: 3px;
      }
      .dd-mini-head {
        display: flex;
        align-items: center;
        gap: var(--s-6);
      }
      .dd-mini-head-info {
        display: flex;
        flex-direction: column;
        gap: var(--s-3);
        min-width: 0;
      }
      .dd-id-pills {
        display: flex;
        gap: var(--s-3);
        flex-wrap: wrap;
      }
      
      .dd-id-pill {
        display: inline-flex;
        align-items: center;
        padding: var(--s-2) var(--s-5);
        border-radius: var(--r-pill);
        background: rgba(99, 102, 241, 0.12);
        color: var(--primary-solid);
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
      }
      .dd-id-pill-level {
        background: rgba(180, 83, 9, 0.12);
        color: var(--warn-text);
      }

      .profile-avatar-layout {
        display: flex;
        flex-direction: column;
        gap: var(--s-7);
      }
      .profile-hero-row {
        display: flex;
        align-items: center;
        gap: var(--s-8);
      }
      .profile-hero-info {
        min-width: 0;
        flex: 1;
      }
      .profile-hero-row .profile-avatar-name-row {
        justify-content: flex-start;
        margin-bottom: var(--s-2);
      }
      .profile-hero-row .profile-avatar-hint {
        text-align: left;
        margin-bottom: 0;
      }
      @media (max-width: 480px) {
        .profile-hero-row { flex-direction: column; align-items: flex-start; }
      }
      .profile-avatar-stage {
        width: 160px;
        height: 160px;
        margin: 0;
        flex-shrink: 0;
        cursor: pointer;
        border-radius: var(--r-xl);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 64px;
        position: relative;
        overflow: hidden;
      }
      
      .profile-avatar-stage-inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .profile-avatar-hint {
        text-align: center;
        font-size: 12px;
        color: var(--ink-6);
        margin-bottom: var(--s-6);
      }
      .profile-avatar-name-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--s-3);
        margin-bottom: var(--s-1);
      }
      .profile-rename-icon {
        cursor: pointer;
        font-size: 14px;
        opacity: .7;
        background: none;
        border: none;
      }
      .profile-rename-icon:hover { opacity: 1; }

      .other-profile-header { display: flex; gap: var(--s-7); align-items: center; margin-bottom: var(--s-7); }
      .other-profile-avatar-block { flex-shrink: 0; width: 96px; text-align: center; }
      .other-profile-avatar-block .profile-avatar-stage { width: 96px; height: 96px; margin: 0 auto; }
      .other-profile-stats-compact {
        flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
      }
      .other-profile-section { margin-bottom: var(--s-7); }
      .other-profile-section-title {
        font-size: 12px; font-weight: 700; color: var(--ink-5); margin-bottom: var(--s-3);
        display: flex; align-items: center; gap: var(--s-2);
      }
      
      .other-profile-mini-card {
        flex-shrink: 0; width: 62px; aspect-ratio: 3 / 4; border-radius: var(--r-lg);
        position: relative; overflow: hidden; box-sizing: border-box;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        background: linear-gradient(160deg, #1F5C40 0%, #123024 100%);
        border: 2px solid transparent;
      }
      .other-profile-mini-card .op-mini-icon { font-size: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
      .other-profile-mini-card .op-mini-label {
        position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
        font-size: 9px; color: var(--on-solid); background: rgba(0,0,0,.45); padding: var(--s-1) 0; line-height: 1.3;
      }
      .other-profile-mini-card .op-mini-tag {
        position: absolute; top: 2px; left: 2px; font-size: 8px; color: var(--on-solid);
        background: rgba(0,0,0,.4); border-radius: var(--r-xs); padding: var(--s-1) var(--s-2);
      }
      .other-profile-mini-card[data-rarity="normal"] { border-color: #9CA3AF; }
      .other-profile-mini-card[data-rarity="good"] { border-color: #34D399; }
      .other-profile-mini-card[data-rarity="rare"] { border-color: #3B82F6; }
      .other-profile-mini-card[data-rarity="epic"] { border-color: #8B5CF6; }
      .other-profile-mini-card[data-rarity="legendary"] { border-color: #f97316; }
      .other-profile-mini-empty { font-size: 12px; color: var(--ink-6); padding: var(--s-5) 0; }
      .other-profile-footer {
        display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
        padding-top: var(--s-6); border-top: 1px solid var(--surface-3); flex-wrap: wrap;
      }
      .other-profile-footer .home-btn { width: auto; flex-shrink: 0; }

      .profile-identity-card .pg-body { display: flex; flex-direction: column; gap: var(--s-5); }
      .profile-card-cta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-5);
        flex-wrap: wrap;
      }
      .profile-achv-block { border-top: 1px dashed var(--border-color); padding-top: var(--s-4); }
      .profile-achv-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--s-1) 0;
        font-size: 13px;
        font-weight: 800;
        color: var(--text-main);
      }
      .profile-achv-body { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-4); }
      .profile-achv-group-title { font-size: 12px; font-weight: 800; color: var(--ink-5); margin-bottom: var(--s-3); }

      .profile-plots-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
        gap: var(--s-4);
        max-height: 320px;
        overflow-y: auto;
        align-content: start;
      }
      
      .land-card.land-card-compact {
        height: auto;
        width: 100%;
        cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease;
      }
      .land-card.land-card-compact:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
      .land-card.land-card-compact .land-card-name { font-size: 12px; }
      .land-card.land-card-compact .land-card-bg-emoji { font-size: 46px; }
      .land-card.land-card-compact .land-card-coord { font-size: 7px; gap: var(--s-1); }
      .land-card.land-card-compact .land-card-id-stack { gap: var(--s-1); }
      .land-card.land-card-compact .land-card-plotid-badge { font-size: 8px; padding: var(--s-1) var(--s-2); }
      .land-card.land-card-compact .land-card-coord-text { font-size: 7px; padding: var(--s-1) var(--s-2); }
      .land-card.land-card-compact .land-card-hex { width: 24px; height: 24px; top: 4px; right: 4px; }
      .land-card.land-card-compact .land-card-hex-inner { font-size: 9px; }
      
      .land-card.land-card-compact .land-card-bottom { padding: var(--s-2) var(--s-3) var(--s-3); gap: var(--s-1); }
      .land-card.land-card-compact .land-card-icons { gap: var(--s-2); }
      .land-card.land-card-compact .land-card-icon-circle { width: 12px; height: 12px; font-size: 7px; }
      .land-card.land-card-compact .land-card-bottom-stats { font-size: 7px; }

      .avatar-picker-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
        gap: var(--s-5);
      }
      .avatar-picker-item {
        border: 2px solid var(--line-1);
        border-radius: var(--r-lg);
        padding: var(--s-4) var(--s-2);
        text-align: center;
        cursor: pointer;
        font-size: 12px;
        position: relative;
      }
      .avatar-picker-item.equipped { border-color: var(--success-solid); box-shadow: 0 0 0 2px rgba(22,163,74,.25); }
      .avatar-picker-item.locked { opacity: .4; cursor: not-allowed; }
      .avatar-picker-item .avatar-picker-emoji { font-size: 26px; display: block; margin-bottom: var(--s-2); }
      
      .avatar-picker-item .avatar-picker-emoji.avatar-picker-img { width: 40px; height: 40px; object-fit: contain; margin: 0 auto 4px; }

      .mbox-modal-backdrop {
        
        position: fixed; inset: 0; background: rgba(8,9,12,.82); z-index: 10100;
        display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--s-7);
      }
      .mbox-viewport {
        position: relative; width: 600px; max-width: 94vw; height: 120px; overflow: hidden;
        border-radius: var(--r-lg); background: linear-gradient(180deg,#1b1e26,#0d0f13);
        box-shadow: inset 0 0 0 1px #2b3040, 0 12px 34px rgba(0,0,0,.55);
      }
      .mbox-viewport::before, .mbox-viewport::after {
        content: ""; position: absolute; top: 0; bottom: 0; width: 46px; z-index: 3; pointer-events: none;
      }
      .mbox-viewport::before { left: 0; background: linear-gradient(90deg, #0d0f13, rgba(13,15,19,0)); }
      .mbox-viewport::after { right: 0; background: linear-gradient(270deg, #0d0f13, rgba(13,15,19,0)); }
      .mbox-pointer {
        position: absolute; top: 0; left: 50%; width: 3px; height: 100%; transform: translateX(-50%);
        background: var(--brand); z-index: 5; box-shadow: 0 0 10px rgba(239,68,68,.85);
      }
      .mbox-pointer::before, .mbox-pointer::after {
        content: ""; position: absolute; left: 50%; transform: translateX(-50%);
        border-left: 6px solid transparent; border-right: 6px solid transparent;
      }
      .mbox-pointer::before { top: -1px; border-top: 8px solid var(--brand); }
      .mbox-pointer::after { bottom: -1px; border-bottom: 8px solid var(--brand); }
      
      .mbox-strip {
        position: absolute; top: 0; left: 0; height: 100%; display: flex;
        transform: translateX(0px);
      }
      .mbox-strip-inner { display: flex; align-items: center; height: 100%; }
      .mbox-strip-inner.mbox-shake { animation: mboxShake .15s ease-in-out; }
      .mbox-item {
        flex: 0 0 auto; width: 92px; height: 92px; margin: 0 var(--s-2); border-radius: var(--r-md);
        background: linear-gradient(160deg,#242832,#151820); border: 1px solid #2e3440;
        display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--on-dark-2);
      }
      
      .mbox-item .mbox-item-icon { font-size: 36px; line-height: 1; }
      .mbox-item .mbox-item-label {
        font-size: 9px; margin-top: var(--s-3); text-align: center; padding: 0 var(--s-2); color: var(--ink-6);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px;
      }
      .mbox-item.mbox-win { transition: transform .45s cubic-bezier(.34,1.7,.64,1), box-shadow .45s ease; }
      .mbox-item.mbox-win.mbox-win-bounce {
        transform: scale(1.3); border-color: var(--warn-solid); box-shadow: 0 0 18px rgba(245,158,11,.75);
      }
      @keyframes mboxShake {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(-6px); }
        40% { transform: translateX(5px); }
        60% { transform: translateX(-4px); }
        80% { transform: translateX(3px); }
      }
      .mbox-particle {
        position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%;
        background: var(--warn-solid); pointer-events: none; z-index: 6;
        animation: mboxParticleBurst .6s ease-out forwards;
      }
      @keyframes mboxParticleBurst {
        0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
        100% { transform: translate(-50%, -50%) translate(var(--mbox-dx), var(--mbox-dy)) scale(.2); opacity: 0; }
      }
      .mbox-hint { color: var(--ink-6); font-size: 13px; }
      
      .mbox-multi-lanes {
        display: flex; flex-direction: column; gap: var(--s-4); max-height: 74vh; overflow-y: auto; padding: var(--s-1);
      }
      .mbox-lane { display: flex; align-items: center; gap: var(--s-5); }
      .mbox-lane-num {
        flex: 0 0 auto; width: 22px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-6);
      }
      .mbox-lane-label {
        flex: 0 0 auto; min-width: 72px; max-width: 120px; font-size: 12px; color: var(--line-2);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .mbox-viewport-mini { width: 420px; max-width: 62vw; height: 64px; }
      
.mbox-item-mini { width: 52px; height: 52px; margin: 0 3px; }
      .mbox-item-mini .mbox-item-icon { font-size: 22px; }
      .mbox-item-mini .mbox-item-label { display: none; }
      
      .mbox-again-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
        height: 36px; padding: 0 var(--s-9); border-radius: var(--r-md); border: 1px solid transparent;
        font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
        transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease;
      }
      .mbox-again-btn:active:not(:disabled) { transform: scale(0.96); }
      .mbox-again-btn-one {
        background: linear-gradient(135deg, var(--brand), var(--fill-danger)); color: var(--on-solid);
        box-shadow: 0 4px 14px rgba(220,38,38,.35);
      }
      .mbox-again-btn-one:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(220,38,38,.5); }
      .mbox-again-btn-five {
        background: linear-gradient(135deg, var(--fill-warn-bright), var(--fill-warn-strong)); color: #3b1c02;
        box-shadow: 0 4px 14px rgba(217,119,6,.35);
      }
      .mbox-again-btn-five:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(217,119,6,.5); }
      .mbox-again-btn:disabled {
        background: #2b3040; color: var(--ink-5); box-shadow: none; cursor: not-allowed; opacity: .7;
      }
      .mbox-actions-row { display: flex; align-items: center; gap: var(--s-5); min-height: 1px; }
      
      .mbox-rules-grid { display: flex; flex-direction: column; gap: var(--s-5); }
      .mbox-rules-row {
        display: flex; align-items: center; gap: var(--s-6); padding: var(--s-4) var(--s-5);
        background: var(--surface-2); border: 1px solid var(--surface-4); border-radius: var(--r-md);
      }
      .mbox-rules-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
      .mbox-rules-info { display: flex; flex-direction: column; gap: var(--s-1); }
      .mbox-rules-name { font-size: 13px; font-weight: 700; color: var(--ink-2); }
      .mbox-rules-range { font-size: 12px; color: var(--ink-5); }
      
      .mbox-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
      .mbox-slot-tile {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
        height: 64px; border-radius: var(--r-lg); border: 1.5px solid var(--border-color); background: var(--surface-1);
        padding: var(--s-2) var(--s-1); text-align: center;
      }
      
      .mbox-slot-tile-icon { font-size: 32px; line-height: 1; }
      .mbox-slot-tile-name { font-size: 10px; font-weight: 700; color: var(--text-main); line-height: 1.3; }

      .redbox-layout { display: flex; gap: var(--s-9); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-2); }
      .redbox-visual-wrap { position: relative; flex: 0 0 auto; display: inline-flex; }
      .redbox-visual-wrap .redbox-flash-layer {
        position: absolute; inset: -6%; border-radius: var(--r-xl); background: var(--surface-1); opacity: 0; pointer-events: none;
      }
      .redbox-actions { flex: 1 1 220px; min-width: 200px; display: flex; flex-direction: column; gap: var(--s-4); }

      .redbox-btn-row { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-1); }
      
      .redbox-visual-wrap.redbox-opening .redbox-mystery-svg {
        animation: redboxPreludeShake 1.1s ease-in-out 1;
        transform-origin: 50% 60%;
      }
      .redbox-visual-wrap.redbox-opening .redbox-screen-flicker { animation: redboxScreenFlicker 1.1s ease-in-out 1; }
      .redbox-visual-wrap.redbox-opening .redbox-flash-layer { animation: redboxBurstFlash 1.1s ease-out 1; }
      @keyframes redboxPreludeShake {
        0%, 100% { transform: translate(0,0) rotate(0) scale(1); }
        6% { transform: translate(-3px,0) rotate(-2deg) scale(1); }
        12% { transform: translate(3px,0) rotate(2deg) scale(1); }
        18% { transform: translate(-3px,0) rotate(-1.6deg) scale(1); }
        24% { transform: translate(3px,0) rotate(1.6deg) scale(1); }
        30% { transform: translate(-2px,0) rotate(-1deg) scale(1); }
        36% { transform: translate(2px,0) rotate(1deg) scale(1); }
        42%, 74% { transform: translate(0,0) rotate(0) scale(1); }
        86% { transform: scale(1.16); }
        100% { transform: scale(1); }
      }
      @keyframes redboxScreenFlicker {
        0%, 100% { filter: brightness(1); }
        10% { filter: brightness(2.4); }
        20% { filter: brightness(0.8); }
        30% { filter: brightness(2.1); }
        40% { filter: brightness(0.9); }
        50% { filter: brightness(1.8); }
        74%, 100% { filter: brightness(1); }
      }
      @keyframes redboxBurstFlash {
        0%, 76% { opacity: 0; transform: scale(0.6); }
        84% { opacity: 0.85; transform: scale(1.15); }
        100% { opacity: 0; transform: scale(1.5); }
      }

      .gacha-result-*整段物理删除),改用
         "AI正在为你打造专属NFT"的高级感生成语言——深色卡片、点阵背景、扫光、圆环+
         进度条双进度指示、结束后淡出生成层/淡入最终大图。 */
      .nft-forge-overlay-box {
        width: 400px; max-width: 92vw; padding: 0; overflow: hidden;
        background: linear-gradient(165deg, #1a0f0f 0%, #120808 55%, #0a0505 100%);
        border: 1px solid #3f1d1d; border-radius: var(--r-xl);
        box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(239,68,68,0.08) inset;
        position: relative; text-align: center;
      }
      .nft-forge-header { padding: var(--s-9) var(--s-9) var(--s-7); }
      .nft-forge-title {
        font-size: 18px; font-weight: 800; color: var(--danger-soft); letter-spacing: 0.5px;
        display: flex; align-items: center; justify-content: center; gap: var(--s-3);
      }
      .nft-forge-sub { font-size: 11px; color: #a78b8b; margin-top: var(--s-2); }
      .nft-forge-canvas-wrap { padding: 0 var(--s-9); }
      .nft-forge-canvas {
        position: relative; width: 100%; aspect-ratio: 1/1; border-radius: var(--r-xl);
        overflow: hidden; background: #0d0707; border: 1px solid #2c1414;
      }
      .nft-forge-dotgrid {
        position: absolute; inset: 0;
        background-image: radial-gradient(circle, #7a3a3a 1.1px, transparent 1.6px);
        background-size: 16px 16px;
        opacity: 0.22;
      }
      .nft-forge-canvas.forging .nft-forge-dotgrid { animation: nftForgeDotPulse 2.2s ease-in-out infinite; }
      @keyframes nftForgeDotPulse {
        0%, 100% { opacity: 0.22; transform: scale(1); }
        50% { opacity: 0.55; transform: scale(1.08); }
      }
      .nft-forge-scan {
        position: absolute; inset: -40% -40%; opacity: 0;
        background: linear-gradient(115deg, transparent 42%, rgba(239,68,68,0.22) 50%, transparent 58%);
        pointer-events: none;
      }
      .nft-forge-canvas.forging .nft-forge-scan { opacity: 1; animation: nftForgeScanMove 2.6s linear infinite; }
      @keyframes nftForgeScanMove {
        0% { transform: translate(-20%, -20%); }
        100% { transform: translate(20%, 20%); }
      }
      .nft-forge-status {
        position: absolute; top: 14px; left: 16px; right: 16px; text-align: left;
        font-size: 13px; font-weight: 700; color: var(--danger-line);
        text-shadow: 0 0 8px rgba(239,68,68,0.5);
        opacity: 0; transition: opacity 0.3s ease;
      }
      .nft-forge-canvas.forging .nft-forge-status { opacity: 1; }
      .nft-forge-idle-hint {
        position: absolute; inset: 0; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: var(--s-4);
        color: #6b4a4a; font-size: 12px; transition: opacity 0.3s ease;
      }
      .nft-forge-canvas.forging .nft-forge-idle-hint,
      .nft-forge-canvas.revealed .nft-forge-idle-hint { opacity: 0; pointer-events: none; }
      .nft-forge-idle-icon { font-size: 40px; opacity: 0.55; }
      .nft-forge-result-img {
        position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
        opacity: 0; transition: opacity 0.6s ease;
      }
      .nft-forge-canvas.revealed .nft-forge-result-img { opacity: 1; }
      .nft-forge-canvas.revealed .nft-forge-dotgrid,
      .nft-forge-canvas.revealed .nft-forge-scan,
      .nft-forge-canvas.revealed .nft-forge-status { opacity: 0; pointer-events: none; }
      .nft-forge-rarity-ring {
        position: absolute; inset: 0; border-radius: var(--r-xl);
        box-shadow: 0 0 0 2px var(--rarity-color, #94a3b8) inset, 0 0 26px var(--rarity-color, #94a3b8);
        opacity: 0; transition: opacity 0.6s ease 0.15s;
      }
      .nft-forge-canvas.revealed .nft-forge-rarity-ring { opacity: 0.8; }
      .nft-forge-progress-wrap { padding: var(--s-8) var(--s-9) 0; display: none; align-items: center; gap: var(--s-6); }
      .nft-forge-progress-wrap.active { display: flex; }
      .nft-forge-progress-ring { position: relative; width: 42px; height: 42px; flex: none; }
      .nft-forge-progress-ring svg { transform: rotate(-90deg); }
      .nft-forge-progress-ring circle { fill: none; stroke-width: 4; }
      .nft-forge-progress-ring .track { stroke: #2c1414; }
      .nft-forge-progress-ring .fill {
        stroke: #ef4444; stroke-linecap: round;
        filter: drop-shadow(0 0 4px rgba(239,68,68,0.8));
        transition: stroke-dashoffset 0.2s linear;
      }
      .nft-forge-progress-pct {
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        font-size: 10px; font-weight: 800; color: var(--danger-line);
      }
      .nft-forge-progress-bar-col { flex: 1; text-align: left; }
      .nft-forge-progress-label { font-size: 10px; color: #f87171; font-weight: 700; letter-spacing: 1.5px; margin-bottom: var(--s-2); }
      .nft-forge-progress-track { width: 100%; height: 6px; border-radius: var(--r-pill); background: #2c1414; overflow: hidden; }
      .nft-forge-progress-fill {
        height: 100%; border-radius: var(--r-pill);
        background: linear-gradient(90deg, #f87171, var(--brand), var(--fill-warn-bright));
        box-shadow: 0 0 8px rgba(239,68,68,0.7);
        width: 0%; transition: width 0.2s linear;
      }
      .nft-forge-footer { padding: var(--s-8) var(--s-9) var(--s-9); }
      .nft-forge-balance { font-size: 12px; color: #a78b8b; margin-bottom: var(--s-5); }
      .nft-forge-balance b { color: var(--warn-bright); }
      .nft-forge-start-btn {
        width: 100%; padding: var(--s-6) 0; font-size: 15px; font-weight: 800; border-radius: var(--r-lg);
        border: none; cursor: pointer; color: #2a0a0a;
        background: linear-gradient(135deg, var(--fill-warn-bright), var(--warn-solid));
        box-shadow: 0 6px 18px rgba(245,158,11,0.35);
      }
      .nft-forge-start-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
      .nft-forge-result-actions { display: none; gap: var(--s-4); }
      .nft-forge-result-actions.active { display: flex; }
      .nft-forge-result-actions .home-btn { flex: 1; }
      .nft-forge-result-meta { display: none; margin-bottom: var(--s-5); }
      .nft-forge-result-meta.active { display: block; }
      .nft-forge-result-rarity-badge {
        display: inline-block; color: #1a0f0f; font-size: 11px; font-weight: 800;
        padding: var(--s-2) var(--s-6); border-radius: var(--r-pill); margin-bottom: var(--s-3);
        background: var(--rarity-color, #94a3b8);
      }
      .nft-forge-result-edition { font-size: 15px; font-weight: 800; color: var(--danger-soft); margin-bottom: var(--s-3); }
      .nft-forge-result-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
      .nft-forge-result-stat {
        font-size: 11px; font-weight: 700; color: var(--danger-line); background: rgba(239,68,68,0.15);
        padding: var(--s-1) var(--s-4); border-radius: var(--r-pill); border: 1px solid rgba(239,68,68,0.3);
      }
      .nft-forge-close-x {
        position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
        border: none; background: rgba(255,255,255,0.08); color: #fca5a5; font-size: 14px; cursor: pointer;
        display: flex; align-items: center; justify-content: center; z-index: 2;
      }

      .pg-box.pg-box-premium {
        background: var(--warn-tint);
        border: 4px solid #6b4423; border-radius: 0;
        clip-path: polygon(
          0 12px, 6px 12px, 6px 6px, 12px 6px, 12px 0,
          calc(100% - 12px) 0, calc(100% - 12px) 6px, calc(100% - 6px) 6px, calc(100% - 6px) 12px, 100% 12px,
          100% calc(100% - 12px), calc(100% - 6px) calc(100% - 12px), calc(100% - 6px) calc(100% - 6px), calc(100% - 12px) calc(100% - 6px), calc(100% - 12px) 100%,
          12px 100%, 12px calc(100% - 6px), 6px calc(100% - 6px), 6px calc(100% - 12px), 0 calc(100% - 12px)
        );
        box-shadow:
          inset 3px 3px 0 0 rgba(255,255,255,0.5),
          inset -3px -3px 0 0 rgba(0,0,0,0.22),
          8px 8px 0 0 rgba(60,35,10,0.25);
      }
      .pg-box.pg-box-premium .pg-head {
        background: #9b2226;
        border-bottom: 4px solid #4a0d0d;
        box-shadow: inset 2px 2px 0 0 rgba(255,255,255,0.22), inset -2px -2px 0 0 rgba(0,0,0,0.28);
        padding: var(--s-7) var(--s-8);
      }
      .pg-box.pg-box-premium .pg-title {
        color: var(--warn-soft); font-weight: 800; letter-spacing: 0.5px;
        text-shadow: 1px 1px 0 rgba(0,0,0,0.45);
      }
      .pg-box.pg-box-premium .pg-tag.info {
        background: #e8b23d; color: #4a2a08;
        border: 2px solid #7a4a1f; border-radius: 0; font-weight: 800;
        clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
        box-shadow: inset 1px 1px 0 0 rgba(255,255,255,0.6), 2px 2px 0 0 rgba(74,42,8,0.4);
      }
      .pg-box.pg-box-premium .pg-body {
        padding: var(--s-9) var(--s-9) var(--s-9);
        background-image: repeating-linear-gradient(45deg, rgba(107,68,35,0.05) 0 2px, transparent 2px 5px);
      }
      .pg-box.pg-box-premium .pg-disclosure summary { color: var(--warn-deep); font-weight: 700; }
      .pg-box.pg-box-premium .pg-note {
        color: #5c3510; background: rgba(139,90,43,0.12); border: 2px dashed #b8863f;
        border-radius: 0; padding: var(--s-4) var(--s-5);
      }
      .pg-box.pg-box-premium .pg-row {
        background: var(--warn-soft);
        border: 3px solid #b8863f; border-radius: 0;
        clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
        padding: var(--s-7); margin-bottom: var(--s-5);
        box-shadow: inset 2px 2px 0 0 rgba(255,255,255,0.65), inset -2px -2px 0 0 rgba(0,0,0,0.12);
      }
      .pg-box.pg-box-premium .pg-row:last-child { margin-bottom: 0; }
      .pg-box.pg-box-premium .pg-row-name { color: #4a2a08; font-weight: 800; text-shadow: 1px 1px 0 rgba(255,255,255,0.4); }
      .pg-box.pg-box-premium .pg-row-meta { color: #8a6a42; }
      .pg-box.pg-box-premium .pg-row-actions .capsule-btn {
        background: #e8b23d; color: #3a220a; border: 2px solid #6b4423;
        border-radius: 0; font-weight: 800;
        clip-path: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px));
        box-shadow: inset 2px 2px 0 0 rgba(255,255,255,0.55), inset -2px -2px 0 0 rgba(0,0,0,0.2), 0 4px 0 0 #6b4423;
        transition: transform 0.06s steps(1), box-shadow 0.06s steps(1);
      }
      .pg-box.pg-box-premium .pg-row-actions .capsule-btn:active {
        transform: translateY(4px);
        box-shadow: inset 2px 2px 0 0 rgba(0,0,0,0.15), 0 0 0 0 #6b4423;
      }
      
      .pg-box.pg-box-premium .pg-row-actions .capsule-btn.pg-btn-soon {
        background: #d8cdb4; color: #7a6c50; border-color: #a8987a;
        box-shadow: inset 2px 2px 0 0 rgba(255,255,255,0.35), inset -2px -2px 0 0 rgba(0,0,0,0.12), 0 4px 0 0 #a8987a;
        cursor: not-allowed;
      }
      .pg-box.pg-box-premium .pg-row-actions .capsule-btn.pg-btn-soon:active { transform: none; box-shadow: inset 2px 2px 0 0 rgba(255,255,255,0.35), inset -2px -2px 0 0 rgba(0,0,0,0.12), 0 4px 0 0 #a8987a; }
      .pg-box.pg-box-premium .pg-qty-input {
        background: var(--warn-soft); border: 2px solid #b8863f; border-radius: 0; color: #4a2a08;
        box-shadow: inset 2px 2px 0 0 rgba(0,0,0,0.08);
      }
      
      #gcExchangeCloseX {
        position: static; margin-left: var(--s-5); flex-shrink: 0;
        width: 28px; height: 28px;
        background: var(--warn-soft); border: 2px solid #4a0d0d; border-radius: 0;
        clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
        color: #6b1414; font-weight: 800;
        box-shadow: inset 1px 1px 0 0 rgba(255,255,255,0.7), 0 3px 0 0 #4a0d0d;
        transition: transform 0.06s steps(1), box-shadow 0.06s steps(1);
      }
      #gcExchangeCloseX:hover { background: var(--warn-soft); color: #4a0d0d; }
      #gcExchangeCloseX:active { transform: translateY(3px); box-shadow: 0 0 0 0 #4a0d0d; }
      
      .pg-box.pg-box-premium .pg-premium-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-6);
      }
      .pg-box.pg-box-premium .pg-premium-grid .pg-row {
        margin-bottom: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--s-5);
      }
      
      .pg-box.pg-box-premium .pg-premium-grid .pg-row-main { flex: 0 1 auto; }
      
      .pg-box.pg-box-premium .pg-premium-grid .pg-row-actions { width: 100%; flex: 0 0 auto; margin-top: auto; }
      .pg-box.pg-box-premium .pg-premium-grid .pg-row-actions .capsule-btn.pg-btn-lg {
        width: 100%; justify-content: center;
      }

      .rules-modal-scroll {
        max-height: 450px;
        overflow-y: auto;
      }

      .battle-result-modal {
        width: min(460px, 92vw) !important;
      }
      .battle-hp-row {
        display: flex;
        align-items: center;
        gap: var(--s-5);
        margin-bottom: var(--s-5);
      }
      .battle-side { flex: 1; min-width: 0; }
      .battle-side-label {
        font-size: 12px;
        color: var(--ink-5);
        margin-bottom: var(--s-2);
        display: flex;
        justify-content: space-between;
        gap: var(--s-3);
      }
      .battle-side-label span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .battle-vs { font-weight: 800; color: var(--ink-6); font-size: 13px; padding: 0 var(--s-1); }
      .hp-bar-track {
        width: 100%;
        height: 12px;
        border-radius: var(--r-pill);
        background: var(--surface-3);
        overflow: hidden;
        border: 1px solid var(--line-1);
      }
      .hp-bar-fill {
        height: 100%;
        border-radius: var(--r-pill);
        transition: width .35s ease;
      }
      .hp-bar-fill.me { background: linear-gradient(90deg, #34d399, #10b981); }
      .hp-bar-fill.enemy { background: linear-gradient(90deg, #f87171, var(--brand)); }
      .battle-round-indicator {
        text-align: center;
        font-size: 12px;
        color: var(--ink-6);
        margin-bottom: var(--s-4);
      }
      .battle-log-feed {
        min-height: 108px;
        max-height: 108px;
        overflow-y: auto;
        border: 1px solid var(--surface-4);
        border-radius: var(--r-md);
        padding: var(--s-4) var(--s-5);
        font-size: 12px;
        color: var(--ink-4);
        background: var(--surface-2);
        margin-bottom: var(--s-5);
      }
      .battle-log-feed .log-line { padding: var(--s-1) 0; }
      .battle-log-feed .log-line.crit { color: var(--accent-orange); font-weight: 700; }
      
      .battle-log-feed .log-line.skill {
        color: var(--rare-solid);
        font-weight: 800;
        background: var(--rare-soft);
        border-left: 3px solid #a855f7;
        padding: var(--s-2) var(--s-3);
        border-radius: var(--r-xs);
        margin: var(--s-2) 0;
      }
      .battle-log-feed .log-line.skill.crit { color: var(--danger-solid); border-left-color: var(--accent-orange); background: var(--warn-soft); }
      .battle-log-feed .log-line.stunned { color: var(--ink-5); font-style: italic; }
      .battle-skip-btn {
        display: block;
        margin: 0 auto 4px;
        font-size: 12px;
        color: var(--ink-6);
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: underline;
      }
      .battle-outcome-banner {
        text-align: center;
        font-size: 20px;
        font-weight: 800;
        margin: var(--s-3) 0 var(--s-5);
      }
      .battle-outcome-banner.win { color: var(--success-solid); }
      .battle-outcome-banner.lose { color: var(--danger-solid); }
      .battle-rewards-list { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-7); }
      .battle-reward-row {
        padding: var(--s-3) var(--s-5);
        border-radius: var(--r-md);
        background: var(--surface-2);
        border: 1px solid var(--line-1);
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: var(--s-3);
      }

      .battle-report-wave-round { }
      .battle-report-wave-title {
        font-weight: 800;
        font-size: 14px;
        margin-bottom: var(--s-5);
        text-align: center;
      }
      .battle-report-wave-round.win .battle-report-wave-title { color: var(--success-solid); }
      .battle-report-wave-round.lose .battle-report-wave-title { color: var(--danger-solid); }
      .battle-report-combat-round {
        border: 1px solid var(--line-1);
        border-radius: var(--r-lg);
        padding: var(--s-5) var(--s-6);
        margin-bottom: var(--s-5);
        background: var(--surface-1);
      }
      .battle-report-combat-round-title {
        font-weight: 700;
        font-size: 12px;
        color: var(--ink-5);
        margin-bottom: var(--s-3);
      }
      .battle-report-event {
        font-size: 13px;
        line-height: 1.7;
        padding: var(--s-2) 0;
        border-top: 1px dashed var(--surface-4);
      }
      .battle-report-event:first-child { border-top: none; }
      .battle-report-hp {
        font-size: 11px;
        color: var(--ink-6);
      }

      .invite-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        place-items: center;
        padding: var(--s-9);
        background: rgba(15, 23, 42, 0.52);
        backdrop-filter: blur(6px);
      }

      .invite-modal {
        width: min(760px, 100%);
        overflow: hidden;
        border: 1px solid rgba(56, 65, 90, 0.9);
        border-radius: var(--r-xl);
        background: linear-gradient(180deg, #222742 0%, #1a1e33 100%);
        box-shadow: var(--sh-4);
        color: var(--on-dark-1);
      }

      .invite-modal-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--s-6);
        padding: var(--s-8) var(--s-9);
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        background: rgba(255, 255, 255, 0.03);
      }

      .invite-modal-head strong {
        display: block;
        font-size: 18px;
        color: var(--on-solid);
      }

      .invite-modal-head span {
        display: block;
        margin-top: var(--s-2);
        color: var(--ink-6);
        font-size: 12px;
      }

      .invite-modal-close {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: var(--r-pill);
        background: rgba(255, 255, 255, 0.08);
        color: var(--primary-soft);
        font-size: 18px;
        cursor: pointer;
      }

      .invite-modal-body {
        padding: var(--s-9);
      }

      .invite-rule-line {
        margin-bottom: var(--s-6);
        color: var(--on-solid);
        font-size: 14px;
        font-weight: 700;
      }

      .invite-rule-list {
        margin: 0 0 var(--s-8);
        padding-left: 0;
        list-style: none;
        display: grid;
        gap: var(--s-5);
        color: var(--line-2);
        line-height: 1.7;
      }

      .invite-link-box {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--s-5);
        padding: var(--s-6);
        border: 1px solid rgba(96, 165, 250, 0.26);
        border-radius: var(--r-xl);
        background: rgba(30, 41, 59, 0.95);
      }

      .invite-link-input {
        min-width: 0;
        min-height: 42px;
        border: 1px solid rgba(96, 165, 250, 0.35);
        border-radius: var(--r-lg);
        padding: 0 var(--s-7);
        background: linear-gradient(180deg, #172554 0%, #1e3a8a 100%);
        color: var(--on-dark-1);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
      }

      .invite-copy-btn {
        min-height: 42px;
        border: 0;
        border-radius: var(--r-lg);
        padding: 0 var(--s-8);
        background: linear-gradient(135deg, var(--fill-info) 0%, var(--primary-solid) 100%);
        color: var(--on-solid);
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 12px 24px rgba(37, 99, 235, 0.28);
      }

      .invite-copy-btn:hover {
        transform: translateY(-1px);
      }

      .referral-log-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4);
      }
      
      .referral-claim-result {
        margin: var(--s-4) 0;
        border: 1px solid var(--primary-line);
        border-radius: var(--r-md);
        background: var(--primary-soft);
        padding: var(--s-4) var(--s-5);
      }
      .referral-claim-result-hd {
        font-size: 13px; font-weight: 800; color: var(--primary-text);
        margin-bottom: var(--s-3);
      }
      .referral-claim-result-row {
        display: flex; align-items: center; gap: var(--s-3);
        padding: 4px 0; font-size: 12.5px;
        border-top: 1px solid var(--line-1);
      }
      .referral-claim-result-row .nm { font-weight: 700; color: var(--ink-2); }
      .referral-claim-result-row .lv { color: var(--ink-5); font-size: 11.5px; }
      
      .referral-claim-result-row .amt {
        margin-left: auto; font-weight: 800; color: #C2410C;
        font-variant-numeric: tabular-nums;
      }
      .referral-claim-result-skip {
        margin-top: var(--s-3); font-size: 11.5px; color: var(--ink-5);
      }
      .invite-tip {
        margin-top: var(--s-6);
        color: #93c5fd;
        font-size: 12px;
      }

      .invite-modal-foot {
        padding: var(--s-7) var(--s-9) var(--s-9);
        border-top: 1px solid rgba(148, 163, 184, 0.16);
        color: var(--line-2);
        text-align: center;
        font-size: 14px;
      }

      .farm-tab {
        padding: var(--s-4) var(--s-8);
        border: 1.5px solid var(--line-1);
        border-radius: var(--r-pill);
        background: var(--surface-1);
        color: var(--ink-5);
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.18s;
      }
      .farm-tab.active {
        background: var(--success-soft);
        border-color: #86efac;
        color: var(--success-text);
        box-shadow: none;
      }

      .changelog-timeline {
        position: relative;
        padding-left: var(--s-2);
      }
      .changelog-timeline-item {
        position: relative;
        margin-left: var(--s-3);
        padding-left: var(--s-9);
        padding-bottom: var(--s-9);
        border-left: 2px solid rgba(220, 38, 38, 0.22);
      }
      .changelog-timeline-item:last-child {
        border-left-color: transparent;
        padding-bottom: 0;
      }
      .changelog-timeline-dot {
        position: absolute;
        left: -7px;
        top: 2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--danger-solid);
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
      }
      .changelog-timeline-date {
        font-weight: 800;
        font-size: 14px;
        color: var(--danger-solid);
        margin-bottom: var(--s-3);
        font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
      }
      .changelog-timeline-points {
        margin: 0;
        padding-left: var(--s-9);
        color: var(--ink-3);
        font-size: 13px;
        line-height: 1.7;
      }
      .changelog-timeline-points li {
        margin-bottom: var(--s-1);
      }

      .char-attr-tab-btn {
        padding: var(--s-4) var(--s-8);
        border: 1.5px solid var(--line-1);
        border-radius: var(--r-pill);
        background: var(--surface-1);
        color: var(--ink-5);
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.18s;
      }
      .char-attr-tab-btn.active {
        background: var(--success-soft);
        border-color: #86efac;
        color: var(--success-text);
        box-shadow: none;
      }

      .farm-bag-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--s-2);
        padding: var(--s-6);
        border: 1.5px solid var(--line-1);
        border-radius: var(--r-lg);
        background: var(--surface-1);
        min-width: 80px;
        text-align: center;
      }

      .farm-dog-icon { font-size: 56px; margin-bottom: var(--s-4); }
      .farm-dog-status { font-size: 13px; color: var(--ink-5); margin-bottom: var(--s-8); }
      .farm-dog-status strong { color: var(--ink-3); }

      .farm-tab.active {
        background: var(--surface-3);
        border-color: var(--line-2);
        color: var(--ink-3);
        box-shadow: none;
      }

      .farm-progress span {
        background: #94a3b8 !important;
        box-shadow: none !important;
      }

      .farm-shop-item,
      .farm-bag-item,
      .farm-shop-section,
      .farm-dog-panel {
        border-color: var(--surface-4) !important;
        background: var(--surface-1) !important;
        box-shadow: none !important;
      }

      .farm-guide-modal-backdrop {
        background: rgba(15, 23, 42, 0.32) !important;
        backdrop-filter: none !important;
      }

      .farm-guide-modal {
        border-color: var(--surface-4) !important;
        background: var(--surface-1) !important;
        box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12) !important;
        border-radius: var(--r-lg) !important;
      }

      .farm-guide-modal-close {
        background: var(--surface-3) !important;
        color: var(--ink-5) !important;
      }

      .farm-guide-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        place-items: center;
        padding: var(--s-9);
        background: rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(6px);
      }

      .farm-guide-modal {
        width: min(860px, calc(100vw - 32px));
        max-height: min(760px, calc(100vh - 48px));
        overflow: hidden;
        border: 1px solid rgba(199, 210, 254, 0.9);
        border-radius: var(--r-xl);
        background: linear-gradient(180deg, var(--on-solid) 0%, var(--surface-2) 100%);
        box-shadow: var(--sh-4);
      }

      .farm-guide-modal-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--s-6);
        padding: var(--s-9) var(--s-9);
        border-bottom: 1px solid var(--surface-4);
      }

      .farm-guide-modal-head h3 {
        margin: 0;
        color: var(--ink-1);
        font-size: 20px;
        font-weight: 900;
      }

      .farm-guide-modal-head p {
        margin: var(--s-2) 0 0;
        color: var(--ink-5);
        font-size: 12px;
      }

      .farm-guide-modal-close {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: var(--r-pill);
        background: var(--primary-soft);
        color: var(--ink-4);
        font-size: 20px;
        font-weight: 900;
        cursor: pointer;
      }

      .farm-guide-modal-scroll {
        max-height: 620px;
        overflow-y: auto;
        padding: 0 var(--s-9) var(--s-9);
      }

      .farm-guide-block {
        margin-top: var(--s-8);
        padding: var(--s-8);
        border: 1px solid var(--surface-4);
        border-radius: var(--r-xl);
        background: var(--surface-1);
      }

      .farm-guide-block h4 {
        margin: 0 0 var(--s-5);
        color: var(--ink-1);
        font-size: 15px;
        font-weight: 900;
      }

      .farm-guide-block p,
      .farm-guide-block li {
        margin: 0;
        color: var(--ink-4);
        font-size: 13px;
        line-height: 1.7;
      }

      .farm-guide-list {
        display: grid;
        gap: var(--s-5);
      }

      .farm-guide-table {
        display: grid;
        gap: var(--s-4);
      }

      .farm-guide-row {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr 0.8fr 1fr;
        gap: var(--s-5);
        padding: var(--s-5) var(--s-6);
        border-radius: var(--r-lg);
        background: var(--surface-2);
        color: var(--ink-3);
        font-size: 13px;
      }

      .farm-guide-row strong {
        color: var(--ink-1);
      }

      .farm-guide-note {
        padding: var(--s-6) var(--s-7);
        border-left: 4px solid #22c55e;
        background: var(--success-soft);
        color: #166534;
        border-radius: var(--r-lg);
        font-size: 13px;
        line-height: 1.65;
      }

      #pastureGrid {
        grid-auto-rows: 180px;
        align-items: stretch;
      }

      .plot-card-foot {
        flex: 0 0 auto;
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--s-2);
        padding-top: var(--s-2);
      }

      #pastureGrid .farm-progress {
        width: min(160px, 100%);
      }

      .farm-progress {
        width: min(160px, 100%);
        height: 4px;
        margin: 6px auto 0;
        overflow: hidden;
        border-radius: var(--r-pill);
        background: var(--color-green);
      }

      .farm-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--color-green-text);
        transition: width 1s linear;
      }

      .park-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--s-8);
      }

      .park-meta {
        margin-top: var(--s-2);
        color: var(--ink-6);
        font-size: 12px;
        line-height: 1.5;
      }

      .park-status {
        color: var(--ink-5);
        font-size: 12px;
        font-weight: 800;
      }

      .park-btn {
        min-height: 34px;
        padding: 0 var(--s-7);
        border: 1px solid var(--line-2);
        border-radius: var(--r-md);
        background: var(--danger-soft);
        color: #6b5542;
        font-size: 13px;
        font-weight: 800;
        box-shadow: none;
      }

      .park-btn.danger {
        background: var(--brand-soft);
        color: var(--warn-deep);
        border-color: var(--danger-line);
      }

      .park-btn.muted {
        background: var(--danger-soft);
        color: #78716c;
        border-color: var(--surface-4);
      }

      .park-btn:disabled {
        cursor: not-allowed;
        background: var(--surface-4);
      }

      .click-name {
        cursor: pointer;
        color: inherit;
        font-weight: 800;
      }
      .click-name:hover {
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      .home-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-8);
        
        margin-bottom: var(--s-6);
      }

      .home-icon {
        
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: var(--r-md);
        background: var(--danger-soft);
        font-size: 24px;
      }

      .home-capsule-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-7);
        align-items: start;
      }
      .capsule-box {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 268px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        box-shadow: var(--shadow-light);
        overflow: hidden;
      }
      .capsule-head {
        display: flex;
        align-items: center;
        gap: var(--s-3);
        
        flex-wrap: nowrap;
        min-height: 39px;
        padding: var(--s-4) var(--s-6);
        border-bottom: 1px solid var(--border-color);
        background: var(--surface-1);
      }
      .capsule-title {
        font-size: 14px;
        font-weight: 800;
        color: var(--text-main);
        white-space: nowrap;
      }
      .capsule-sub {
        font-size: 11px;
        color: var(--text-muted);
        white-space: nowrap;
      }
      .capsule-head-spacer { flex: 1 1 auto; }
      .capsule-btn {
        
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        line-height: 1;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        background: var(--surface-1);
        color: var(--ink-4);
        font: inherit;
        font-size: 11px;
        font-weight: 700;
        padding: 0 var(--s-5);
        cursor: pointer;
        white-space: nowrap;
      }
      .capsule-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--ink-2); }
      .capsule-btn:disabled { opacity: 0.45; cursor: not-allowed; }
      .capsule-btn.primary {
        border-color: var(--primary-line);
        background: var(--primary-soft);
        color: var(--primary-text);
      }
      .capsule-btn.primary:hover:not(:disabled) { background: var(--primary-soft); }
      .capsule-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 300px;
        overflow-y: auto;
        
        padding: var(--s-4) var(--s-6) var(--s-5);
      }
      .capsule-empty {
        padding: var(--s-8) var(--s-5);
        color: var(--text-muted);
        font-size: 12px;
        text-align: center;
        line-height: 1.6;
      }

      #homeDungeonBox .capsule-body { overflow-y: visible; }
      .cap-dgn-name { font-size: 14px; font-weight: 800; color: var(--ink-2); }
      .cap-dgn-line { margin-top: var(--s-2); font-size: 11px; color: var(--ink-5); line-height: 1.5; }
      .cap-dgn-stats {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-2) var(--s-5);
        margin-top: var(--s-2);
        font-size: 11px;
        color: var(--ink-4);
      }
      .cap-pill {
        display: inline-block;
        margin: var(--s-1) var(--s-2) 0 0;
        padding: var(--s-1) var(--s-4);
        border-radius: var(--r-pill);
        background: var(--surface-3);
        color: var(--ink-3);
        font-size: 11px;
        font-weight: 700;
      }
      
      .cap-dgn-warn {
        margin-top: var(--s-3);
        padding: var(--s-3) var(--s-4);
        border-radius: var(--radius-sm);
        background: var(--warn-tint);
        color: var(--warn-deep);
        font-size: 11px;
        line-height: 1.4;
      }

      .cap-tabs { display: flex; gap: var(--s-3); }
      .cap-tab-btn {
        border: 1px solid var(--border-color);
        border-radius: var(--r-pill);
        background: var(--surface-1);
        color: var(--ink-5);
        font: inherit;
        font-size: 11px;
        font-weight: 700;
        padding: var(--s-2) var(--s-6);
        cursor: pointer;
        white-space: nowrap;
      }
      .cap-tab-btn.active {
        border-color: var(--primary-line);
        background: var(--primary-soft);
        color: var(--primary-text);
      }
      .cap-log-row {
        padding: var(--s-3) var(--s-1);
        border-bottom: 1px dashed var(--surface-4);
        font-size: 12px;
        color: var(--ink-4);
        line-height: 1.5;
      }
      .cap-log-row:last-child { border-bottom: 0; }
      .cap-log-time { margin-top: var(--s-1); font-size: 10px; color: var(--ink-6); }
      .cap-total-row {
        display: flex;
        align-items: center;
        gap: var(--s-4);
        padding: var(--s-3) var(--s-1);
        border-bottom: 1px dashed var(--surface-4);
        font-size: 12px;
      }
      .cap-total-row:last-child { border-bottom: 0; }
      .cap-total-row .label { flex: 1 1 auto; min-width: 0; color: var(--ink-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .cap-total-row .value { flex: 0 0 auto; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; font-family: var(--font-mecha-num); }
      .cap-total-group {
        margin: var(--s-5) 0 var(--s-2);
        font-size: 11px;
        font-weight: 800;
        color: var(--ink-6);
        letter-spacing: 0.04em;
      }
      .cap-total-group:first-child { margin-top: 0; }

      .career-ach-card {
        border: 1px solid var(--surface-4);
        border-radius: var(--r-lg);
        padding: var(--s-5) var(--s-6);
        margin-bottom: var(--s-4);
        background: var(--surface-1);
      }
      .career-ach-card.is-maxed { background: var(--warn-soft); border-color: var(--warn-line); }
      .career-ach-head {
        display: flex;
        align-items: center;
        gap: var(--s-4);
      }
      .career-ach-icon { font-size: 16px; flex: 0 0 auto; }
      .career-ach-title { font-weight: 800; font-size: 13px; color: var(--ink-2); flex: 0 0 auto; }
      .career-ach-desc { font-size: 11px; color: var(--ink-6); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .career-ach-stars { flex: 0 0 auto; display: flex; gap: var(--s-1); font-size: 13px; letter-spacing: -1px; }
      .career-ach-star.is-lit { filter: none; }
      .career-ach-star.is-dim { opacity: 0.28; }
      .career-ach-progress-wrap {
        margin-top: var(--s-3);
        display: flex;
        align-items: center;
        gap: var(--s-4);
      }
      .career-ach-bar {
        flex: 1 1 auto;
        height: 7px;
        border-radius: var(--r-pill);
        background: var(--surface-4);
        overflow: hidden;
      }
      .career-ach-bar-fill {
        height: 100%;
        border-radius: var(--r-pill);
        background: linear-gradient(90deg, #818cf8, var(--fill-info));
        transition: width 0.3s ease;
      }
      .career-ach-bar-fill.is-claimable { background: linear-gradient(90deg, #34d399, #10b981); }
      .career-ach-progress-text {
        flex: 0 0 auto;
        font-size: 10px;
        color: var(--ink-6);
        font-variant-numeric: tabular-nums;
        font-family: var(--font-mecha-num);
      }
      .career-ach-foot {
        margin-top: var(--s-3);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-4);
      }
      .career-ach-next-reward { font-size: 11px; color: var(--ink-5); flex: 1 1 auto; min-width: 0; }
      .career-ach-claim-btn {
        flex: 0 0 auto;
        height: 24px;
        padding: 0 var(--s-5);
        border-radius: var(--r-pill);
        border: 1px solid var(--primary-line);
        background: var(--primary-soft, var(--primary-soft));
        color: var(--primary-text);
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
      }
      .career-ach-claim-btn:hover:not(:disabled) { background: var(--primary-soft); }
      .career-ach-claim-btn:disabled { opacity: 0.5; cursor: not-allowed; }
      .career-ach-maxed-tag { font-size: 11px; color: var(--warn-text); font-weight: 700; }
      
      .career-ach-claim-track-btn {
        border-color: var(--warn-line);
        background: var(--warn-soft);
        color: var(--warn-text);
      }
      .career-ach-claim-track-btn:hover:not(:disabled) { background: var(--warn-tint); }

      .claim-all-reward-rows {
        display: flex;
        flex-direction: column;
        gap: var(--s-3);
      }
      .claim-all-reward-row {
        display: flex;
        align-items: center;
        gap: var(--s-4);
        padding: var(--s-4) var(--s-5);
        border-radius: var(--r-md);
        background: var(--surface-2);
        font-size: 13px;
        color: var(--ink-3);
      }
      .claim-all-reward-row span { flex: 1 1 auto; }
      .claim-all-reward-row strong { color: var(--ink-1); font-variant-numeric: tabular-nums; }

      @media (max-width: 920px) {
        .home-capsule-grid { grid-template-columns: 1fr; }
        .capsule-box { min-height: 0; }
      }

      .cap-total-* 等)
         完全复用不改,只改这层作用域内的取色。
         四个数据源依旧全部沿用已有接口,零新增后端路由(见 renderHomeShowcaseBox/
         renderHomeLandBox/renderHomeDungeonBox/renderHomeRankBox 各自的头注释)。
         ============================================================ */
      .home-dashboard-light {
        --dash-bg: #F5F7FA; --dash-card: #FFFFFF;
        
      .dgn-idle-divider {
        height: 1px; margin: var(--s-6) 0 var(--s-5);
        background: linear-gradient(90deg, transparent, var(--line-1) 12%, var(--line-1) 88%, transparent);
      }
           .showcase-hud/.dgn-locked-section三处内部分隔线续24已改成与参考卡片(职业技能
           战士/刺客/法师卡片.pg-head/.pg-row)逐字相同的#eef0f3字面量，不再吃这个token，
           详见续24注释。 */
        --dash-border: #EEF0F2;
        --dash-text: #333333; --dash-muted: #6b7280;
      }
      
      .home-dashboard-light .capsule-box { background: var(--dash-card); border: none; box-shadow: var(--sh-4); }
      
      .home-dashboard-light .capsule-head { background: var(--on-solid); border-color: var(--surface-4); }
      .home-dashboard-light .capsule-title { color: #333333; font-weight: 800; }
      .home-dashboard-light .capsule-sub { color: var(--dash-muted); }
      .home-dashboard-light .capsule-body { color: var(--dash-text); }
      .home-dashboard-light .capsule-empty { color: var(--dash-muted); }
      .home-dashboard-light .capsule-btn { background: var(--surface-1); border-color: var(--dash-border); color: var(--ink-4); }
      .home-dashboard-light .capsule-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink-2); }
      
      .home-dashboard-light .capsule-btn.primary { background: var(--primary-soft); border-color: var(--rare-line); color: var(--primary-text); }
      .home-dashboard-light .capsule-btn.primary:hover:not(:disabled) { background: var(--primary-soft); }
      
      .home-dashboard-light .cap-tabs,
      .home-dashboard-light .cap-rank-subtabs {
        background: var(--surface-3);
        border-radius: var(--r-pill);
        padding: var(--s-2);
        gap: var(--s-1);
      }
      .home-dashboard-light .cap-tab-btn {
        border: 0;
        border-radius: var(--r-pill);
        background: transparent;
        color: var(--ink-5);
        padding: var(--s-3) var(--s-7);
        transition: background-color .2s ease, color .2s ease;
      }
      
      .home-dashboard-light .cap-rank-subtabs .cap-tab-btn { padding-left: var(--s-5); padding-right: var(--s-5); }
      .home-dashboard-light .cap-tab-btn:hover:not(.active) { color: var(--ink-2); }
      .home-dashboard-light .cap-tab-btn.active,
      .home-dashboard-light .cap-tab-btn.active:hover {
        background: #1e293b;
        border-color: transparent;
        color: var(--on-solid);
      }
      .home-dashboard-light .cap-pill { background: var(--surface-2); color: var(--ink-3); }
      .home-dashboard-light .cap-log-row, .home-dashboard-light .cap-total-row { border-color: var(--surface-4); color: var(--ink-4); }
      .home-dashboard-light .cap-total-row .value { color: var(--ink-2); }
      .home-dashboard-light .cap-total-group { color: var(--ink-6); }
      .home-dashboard-light .cap-log-time { color: var(--ink-6); }
      .home-dashboard-light .cap-dgn-name { color: var(--ink-2); }
      .home-dashboard-light .cap-dgn-line, .home-dashboard-light .cap-dgn-stats { color: var(--ink-5); }

      .home-dashboard-light .capsule-body { max-height: none; }

      .home-hero-checkin-entries .capsule-btn.primary {
        height: auto;
        background: var(--surface-1);
        border-color: var(--border-color);
        color: var(--ink-4);
        font-size: 13px;
        font-weight: 700;
        padding: var(--s-4) var(--s-9);
      }
      .home-hero-checkin-entries .capsule-btn.primary:hover:not(:disabled) { background: var(--surface-3); color: var(--ink-2); }

      .dash-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 260px auto auto; align-items: stretch; }
      .dash-grid > .capsule-box { height: 100%; min-height: 0; }
      
      #homeStatsBox { grid-column: 1 / -1; }

      #homeTowerBox .capsule-body > .capsule-sub { white-space: normal; }
      @media (max-width: 920px) { .dash-grid { grid-template-columns: 1fr; grid-template-rows: none; } .dash-grid > .capsule-box { height: auto; } #homeStatsBox { grid-column: auto; } #homeTowerBox { grid-column: auto; } }

      .showcase-body { display: flex; flex-direction: row; align-items: stretch; gap: var(--s-4); height: 100%; overflow-x: hidden; }
      .showcase-hud {
        flex: 0 0 30%; max-width: 30%; min-width: 0; display: flex; flex-direction: column;
        justify-content: center; gap: var(--s-5); padding-right: var(--s-4); border-right: 1px dashed var(--surface-4); 
      }
      .showcase-right { flex: 0 0 70%; max-width: 70%; min-width: 0; display: flex; align-items: center; justify-content: center; }
      
      .home-hud-bar { display: flex; flex-direction: column; gap: var(--s-2); }
      .home-hud-label {
        font-size: 10px; font-weight: 800; color: #6b4c14; display: flex; align-items: center; gap: var(--s-2);
        letter-spacing: .2px;
      }
      .home-hud-max-tag { font-size: 9px; }
      
      .home-hud-track {
        position: relative; height: 11px;
        clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
        background: #14100c; box-shadow: inset 0 0 6px rgba(0,0,0,.6);
        overflow: hidden;
      }
      .home-hud-fill {
        position: absolute; left: 0; top: 0; bottom: 0; min-width: 2px;
        background-size: 200% 100%; transition: width .5s ease;
      }
      
      .home-hud-fill::after {
        content: ""; position: absolute; inset: 0;
        background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 1.5px, transparent 1.5px 10px);
      }
      
      .home-hud-fill-lava { background-image: linear-gradient(90deg, #4a1003, #b22e00, #c97a2a, #b22e00, #4a1003); box-shadow: inset 0 0 5px rgba(178,46,0,.45); }
      .home-hud-fill-arcane { background-image: linear-gradient(90deg, #1c0a3d, #6d28d9, #b8a4e8, #6d28d9, #1c0a3d); box-shadow: inset 0 0 5px rgba(109,40,217,.45); }
      .home-hud-fill-aurum { background-image: linear-gradient(90deg, #4a3800, #a5810a, #cbb96e, #a5810a, #4a3800); box-shadow: inset 0 0 5px rgba(165,129,10,.45); }
      .home-hud-fill-verdant { background-image: linear-gradient(90deg, #032e22, #0b8a5f, #65c9a0, #0b8a5f, #032e22); box-shadow: inset 0 0 5px rgba(11,138,95,.45); }
      .home-hud-bar[data-tier="max"] .home-hud-fill { box-shadow: 0 0 7px 1px rgba(220,166,0,.55), inset 0 0 5px rgba(255,255,255,.4); }
      .home-hud-value {
        position: absolute; right: 5px; top: 50%; transform: translateY(-50%); z-index: 1;
        font-size: 9.5px; font-weight: 800; color: var(--on-solid); text-shadow: 0 0 3px #000, 0 0 3px #000;
        font-variant-numeric: tabular-nums;
      }

      .showcase-eq-grid {
        display: flex; flex-direction: row; align-items: stretch; gap: var(--s-3);
        width: 100%; max-width: 100%; height: 100%; overflow-x: auto; overflow-y: visible;
        scroll-snap-type: x proximity;
        
        padding-top: 8px;
        padding-bottom: var(--s-1);
      }
      .showcase-eq-grid > .showcase-slot { flex: 0 0 auto; scroll-snap-align: start; }
      
      .showcase-slot {
        position: relative; width: auto; height: var(--eq-tarot-card-h, 100%); aspect-ratio: 3 / 4;
        border-radius: var(--r-md); overflow: hidden; background: #1A1A1A; color: var(--on-solid);
        display: flex; align-items: center; justify-content: center;
      }
      
      .showcase-slot.is-filled { cursor: pointer; }
      
      .showcase-slot.is-empty {
        border: 1.5px dashed var(--line-2); background: #2b2f38; opacity: 0.6; font-size: 36px; 
      }
      
      .showcase-slot.is-locked {
        border: 1.5px dashed #475569; background: #23262d; opacity: 0.55; color: var(--ink-6);
        flex-direction: column; gap: var(--s-1); font-size: 9px; font-weight: 700;
      }

      .showcase-slot-bg { position: absolute; inset: 0; z-index: 0; background: #1F5C40; }
      .showcase-slot[data-slot="weapon"] .showcase-slot-bg { background: linear-gradient(160deg, #5c2626 0%, #221011 100%); }
      .showcase-slot[data-slot="armor"] .showcase-slot-bg { background: linear-gradient(160deg, #274768 0%, #101c2c 100%); }
      .showcase-slot[data-slot="gloves"] .showcase-slot-bg { background: linear-gradient(160deg, #5c3d22 0%, #24180d 100%); }
      .showcase-slot[data-slot="pants"] .showcase-slot-bg { background: linear-gradient(160deg, #2d3560 0%, #12172c 100%); }
      .showcase-slot[data-slot="shoes"] .showcase-slot-bg { background: linear-gradient(160deg, #35492a 0%, #151f10 100%); }
      
      .showcase-slot-bg::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(to top, var(--eq-rarity-glow, transparent) 0%, transparent 30%);
      }
      .showcase-slot[data-rarity="normal"] .showcase-slot-bg { --eq-rarity-glow: rgba(156,163,175,0.2); }
      .showcase-slot[data-rarity="good"] .showcase-slot-bg { --eq-rarity-glow: rgba(16,185,129,0.2); }
      .showcase-slot[data-rarity="rare"] .showcase-slot-bg { --eq-rarity-glow: rgba(59,130,246,0.2); }
      .showcase-slot[data-rarity="epic"] .showcase-slot-bg { --eq-rarity-glow: rgba(139,92,246,0.2); }
      .showcase-slot[data-rarity="legendary"] .showcase-slot-bg { --eq-rarity-glow: rgba(249,115,22,0.25); }
      
      .showcase-slot[data-rarity] { box-sizing: border-box; border: 2px solid transparent; }
      .showcase-slot[data-rarity="normal"] { border-color: #9CA3AF; }
      .showcase-slot[data-rarity="good"] { border-color: #34D399; box-shadow: 0 0 5px 1px rgba(52,211,153,0.5); }
      .showcase-slot[data-rarity="rare"] { border-color: #3B82F6; }
      .showcase-slot[data-rarity="epic"] { border-color: #8B5CF6; box-shadow: 0 0 6px 1px rgba(139,92,246,0.55); }
      .showcase-slot[data-rarity="legendary"] { border-color: #F97316; box-shadow: 0 0 8px 2px rgba(249,115,22,0.6); }

      .showcase-slot-mask {
        position: absolute; inset: 0; z-index: 2; pointer-events: none;
        background: linear-gradient(to bottom, rgba(26,26,26,0) 0%, rgba(26,26,26,0.15) 55%, #1A1A1A 100%);
      }
      
      .showcase-slot-icon {
        position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
        font-size: 75px; line-height: 1; opacity: 0.3; filter: blur(0.3px); pointer-events: none;
      }
      
      .showcase-slot-icon img.eq-weapon-tier-img { width: auto; height: 100%; object-fit: contain; }
      
      .showcase-slot-tier {
        position: absolute; top: 3px; left: 3px; z-index: 3; background: rgba(0,0,0,0.5);
        border-radius: var(--r-xs); padding: var(--s-1) var(--s-2); font-size: 8px; font-weight: 800; color: var(--on-solid); line-height: 1.3;
        border: 1px solid transparent;
      }
      .showcase-slot-tier[data-tier-band="t1t2"] { color: var(--on-solid); }
      .showcase-slot-tier[data-tier-band="t3t4"] { color: #93C5FD; }
      .showcase-slot-tier[data-tier-band="t5t6"] { color: #D8B4FE; }
      .showcase-slot-tier[data-tier-band="t7"] { color: #FDE047; border-color: #FDE047; }

      .showcase-slot-name {
        position: absolute; top: 4px; left: 26px; right: 42px; z-index: 3;
        font-size: 15px; font-weight: 800; color: var(--on-solid); line-height: 1.15; text-align: center;
        text-shadow: 0 1px 2px rgba(0,0,0,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        pointer-events: none;
      }
      
      .showcase-slot-hex { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; z-index: 3; }
      .showcase-slot-hex-outer, .showcase-slot-hex-inner {
        position: absolute; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      }
      .showcase-slot-hex-outer { inset: 0; }
      .showcase-slot-hex-inner {
        inset: 3px; background: rgba(15,15,15,0.78);
        display: flex; align-items: center; justify-content: center;
        font-size: 13px; font-weight: 900; color: var(--on-solid); text-shadow: 0 1px 1px rgba(0,0,0,0.6);
      }
      
      .showcase-slot-hex.band-e1 .showcase-slot-hex-outer { background: #10B981; }
      .showcase-slot-hex.band-e1 .showcase-slot-hex-inner { color: #10B981; }
      .showcase-slot-hex.band-e2 .showcase-slot-hex-outer { background: #3B82F6; }
      .showcase-slot-hex.band-e2 .showcase-slot-hex-inner { color: #3B82F6; }
      .showcase-slot-hex.band-e3 .showcase-slot-hex-outer { background: #8B5CF6; }
      .showcase-slot-hex.band-e3 .showcase-slot-hex-inner { color: #8B5CF6; }
      .showcase-slot-hex.band-e4 .showcase-slot-hex-outer { background: var(--accent-orange); }
      .showcase-slot-hex.band-e4 .showcase-slot-hex-inner { color: var(--accent-orange); }
      
      .showcase-slot-hex.band-e5 .showcase-slot-hex-outer { background: var(--brand); }
      .showcase-slot-hex.band-e5 .showcase-slot-hex-inner { color: var(--brand); }
      .showcase-slot-hex.band-e5 { animation: eqTarotHexBreathePulse 1.3s ease-in-out infinite; }
      @keyframes eqTarotHexBreathePulse {
        0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(239, 68, 68, 0)); }
        50% { transform: scale(1.14); filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.65)); }
      }
      
      .showcase-slot-hex.band-max .showcase-slot-hex-outer {
        background: linear-gradient(120deg, #7c5a0a 0%, #d4af37 25%, var(--warn-tint) 50%, #d4af37 75%, #7c5a0a 100%);
        background-size: 260% 260%;
        animation: eqTarotHexMaxSweep 2s linear infinite;
      }
      .showcase-slot-hex.band-max .showcase-slot-hex-inner { color: var(--warn-line); font-size: 12px; }
      @keyframes eqTarotHexMaxSweep {
        0% { background-position: 0% 50%; }
        100% { background-position: 200% 50%; }
      }

      .showcase-slot-stat {
        position: absolute; left: 4px; right: 4px; bottom: 3px; z-index: 3;
        font-size: 9px; color: var(--on-solid);
        text-shadow: 0 1px 2px rgba(0,0,0,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .showcase-slot-stat.has-lock { padding-left: var(--s-6); }
      
      .showcase-slot-sockets {
        position: absolute; left: 4px; right: 4px; bottom: 15px; z-index: 3;
        display: flex; gap: var(--s-2); pointer-events: none;
      }
      
      .showcase-slot-socket {
        width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
        display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.88); box-shadow: var(--sh-1);
        font-size: 9px; line-height: 1;
      }
      .showcase-slot-socket.is-locked {
        background: rgba(255,255,255,0.22); box-shadow: none;
        color: var(--line-2); font-size: 8px; font-weight: 900; opacity: 0.5;
      }
      .showcase-slot-socket.is-empty {
        background: rgba(42,42,42,0.92); border: 1px dashed var(--brand);
        box-shadow: var(--sh-1);
        animation: gemSocketEmptyBlink 1.6s ease-in-out infinite;
      }
      @keyframes gemSocketEmptyBlink {
        0%, 100% { opacity: 1; } 50% { opacity: 0.35; }
      }
      .showcase-slot-socket.is-filled {
        background: rgba(255,255,255,0.88); box-shadow: var(--sh-1);
      }
      
      .gem-mini-icon { width: 12px; height: 12px; display: block; }
      
      .showcase-slot-lock { position: absolute; bottom: 3px; left: 3px; z-index: 4; font-size: 8px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }

      .eq-lock-toggle {
        position: absolute; bottom: 3px; right: 3px; z-index: 5; width: 15px; height: 15px;
        display: flex; align-items: center; justify-content: center; border-radius: 50%;
        background: rgba(255,255,255,0.88); box-shadow: var(--sh-1);
        cursor: pointer;
      }
      .eq-lock-toggle .eq-lock-icon { width: 11px; height: 11px; display: block; }
      .eq-lock-toggle.is-locked { color: #D98C3D; }
      .eq-lock-toggle.is-unlocked { color: var(--ink-6); opacity: 0.8; }
      .eq-lock-toggle:hover { opacity: 1; box-shadow: var(--sh-2); }
      .showcase-slot-stat.has-equip-lock, .eq-tarot-stat.has-equip-lock { padding-right: var(--s-7); }

      .eq-favorite-toggle {
        position: absolute; bottom: 20px; right: 3px; z-index: 5; width: 15px; height: 15px;
        display: flex; align-items: center; justify-content: center; border-radius: 50%;
        background: rgba(255,255,255,0.88); box-shadow: var(--sh-1);
        cursor: pointer;
      }
      .eq-favorite-toggle .eq-favorite-icon { width: 12px; height: 12px; display: block; }
      .eq-favorite-toggle.is-favorite { color: #F5A623; }
      .eq-favorite-toggle:not(.is-favorite) { color: var(--ink-6); opacity: 0.8; }
      .eq-favorite-toggle:hover { opacity: 1; box-shadow: var(--sh-2); }

      .land-carousel-body { max-height: none; overflow: visible; padding: var(--s-4) var(--s-6) var(--s-5); height: 100%; display: flex; flex-direction: column; }
      
      .land-carousel { display: flex; gap: var(--s-5); overflow-x: auto; overflow-y: hidden; padding-bottom: var(--s-3); padding-top: var(--s-4); scroll-snap-type: x mandatory; flex: 0 0 auto; align-items: stretch; height: 100%; }
      
      .land-card {
        position: relative; flex: 0 0 auto; width: auto; height: 100%; aspect-ratio: 3 / 4;
        border-radius: var(--r-md); overflow: hidden; scroll-snap-align: start;
        box-shadow: var(--sh-2); background: #1A1A1A; color: var(--on-solid);
      }
      
      @media (max-width: 920px) {
        .land-carousel { height: auto; align-items: flex-start; }
        .land-card { height: 190px; }
      }
      
      .land-card-bg { position: absolute; inset: 0; z-index: 0; }
      .land-card-bg-emoji {
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        font-size: 92px; opacity: 0.28; z-index: 1; filter: blur(0.3px); line-height: 1; pointer-events: none;
      }
      .land-card-mask {
        position: absolute; inset: 0; z-index: 2; pointer-events: none;
        
        background:
          linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 40%),
          linear-gradient(to bottom, rgba(26,26,26,0) 0%, rgba(26,26,26,0.05) 45%, rgba(26,26,26,0.55) 72%, #1A1A1A 100%);
      }
      .land-card[data-terrain="forest"] .land-card-bg { background: linear-gradient(160deg, #3f7a4f 0%, #163a1f 100%); }
      .land-card[data-terrain="mine"] .land-card-bg { background: linear-gradient(160deg, #6b5f50 0%, #241f18 100%); }
      .land-card[data-terrain="grassland"] .land-card-bg { background: linear-gradient(160deg, #8a9c4a 0%, #333f1c 100%); }
      .land-card[data-terrain="riverside"] .land-card-bg { background: linear-gradient(160deg, #3d84a8 0%, #0f2e40 100%); }
      .land-card[data-terrain="lava"] .land-card-bg { background: linear-gradient(160deg, #b0512f 0%, #3a1408 100%); }
      .land-card[data-terrain="spirit_vein"] .land-card-bg { background: linear-gradient(160deg, #6d4fa8 0%, #23163d 100%); }
      
      .land-card-top-info { position: absolute; top: 8px; left: 9px; right: 44px; z-index: 3; }
      .land-card-name { font-size: 15px; font-weight: 800; color: var(--on-solid); line-height: 1.15; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }

      .land-card-coord { margin-top: var(--s-1); font-size: 9px; color: var(--on-solid); line-height: 1.3; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
      .land-card-id-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
      
      .land-card-plotid-badge {
        display: inline-flex; align-items: center; background: rgba(0,0,0,0.5);
        border-radius: var(--r-xs); padding: var(--s-1) var(--s-3); font-size: 10px; font-weight: 800;
        color: var(--on-solid); line-height: 1.2; white-space: nowrap;
      }
      
      .land-card-coord-text {
        display: inline-flex; align-items: center; background: rgba(0,0,0,0.5);
        border-radius: var(--r-xs); padding: var(--s-1) var(--s-3); font-size: 8px; font-weight: 700;
        color: var(--primary-soft); line-height: 1.2; white-space: nowrap;
      }

      .land-card-coord-row { display: flex; align-items: center; gap: var(--s-2); }
      .land-card-jump {
        position: static; flex: 0 0 auto; z-index: 3; border: 0; background: transparent;
        color: var(--on-solid); font-size: 10px; line-height: 1; padding: 0; cursor: pointer;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
      }
      .land-card-jump:hover { transform: scale(1.15); }
      
      .land-card-hex { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; z-index: 3; }
      .land-card-hex-outer, .land-card-hex-inner {
        position: absolute; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      }
      .land-card-hex-outer { inset: 0; }
      .land-card-hex-inner {
        inset: 3px; background: rgba(15,15,15,0.72);
        display: flex; align-items: center; justify-content: center;
        font-size: 13px; font-weight: 900; color: var(--on-solid); text-shadow: 0 1px 2px rgba(0,0,0,0.6);
        letter-spacing: -0.5px; white-space: nowrap;
      }
      
      .land-card-hex-inner.is-long { font-size: 10px; letter-spacing: -0.8px; }
      .land-card.land-card-compact .land-card-hex-inner.is-long { font-size: 8px; }
      .land-card-hex.tier-10 .land-card-hex-outer { background: linear-gradient(160deg, #f1f5f9, #94a3b8); }
      .land-card-hex.tier-30 .land-card-hex-outer { background: linear-gradient(160deg, #a5e6ff, #0e7fb0); }
      .land-card-hex.tier-50 .land-card-hex-outer { background: linear-gradient(160deg, #ffe8a3, #a3690f); }
      
      .land-card-icons { display: flex; flex-direction: row; align-items: center; gap: var(--s-3); }
      .land-card-icon-circle {
        width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.88);
        display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1;
        box-shadow: var(--sh-1); flex: 0 0 auto;
      }
      
      .land-card-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: var(--s-2) var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
      
      .land-card-bottom-stats { align-self: flex-start; font-size: 9px; color: var(--line-2); text-align: left; text-shadow: 0 1px 2px rgba(0,0,0,0.5); display: flex; gap: var(--s-3); }
      .land-card-rate, .land-card-store { white-space: nowrap; }
      .land-card-status { font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: var(--s-2); text-shadow: 0 1px 2px rgba(0,0,0,0.55); }
      .land-card-status.is-run { color: var(--on-solid); }
      .land-card-status.is-warn { color: #ff6b6b; animation: landCardBlink 1.1s ease-in-out infinite; }

      .land-card.waste-cleanup-card[data-terrain] .land-card-bg,
      .waste-cleanup-card .land-card-bg { background: linear-gradient(160deg, #4a4560, #26223a); }
      .waste-card-progress-bar { width: 100%; height: 5px; border-radius: var(--r-xs); background: rgba(255,255,255,0.22); overflow: hidden; }
      .waste-card-progress-fill { height: 100%; background: #ffb648; border-radius: var(--r-xs); transition: width 0.6s ease; }
      .waste-cleanup-card.is-ready .waste-card-progress-fill { background: #6ee787; }
      .waste-card-status { color: var(--warn-line); }
      .waste-card-status.is-ready { color: #6ee787; }
      .land-card.waste-cleanup-card.is-ready[data-terrain] .land-card-bg,
      .waste-cleanup-card.is-ready .land-card-bg { background: linear-gradient(160deg, #3f6b4a, #223a28); }
      
      .land-card-activity { display: inline-flex; align-items: center; gap: var(--s-1); }
      .land-card-activity-dot {
        width: 4px; height: 4px; border-radius: 1px; background: var(--brand); opacity: 0.28;
        animation: landCardActivityPulse 1.2s ease-in-out infinite;
      }
      .land-card-activity-dot:nth-child(1) { animation-delay: 0s; }
      .land-card-activity-dot:nth-child(2) { animation-delay: 0.15s; }
      .land-card-activity-dot:nth-child(3) { animation-delay: 0.3s; }
      .land-card-activity-dot:nth-child(4) { animation-delay: 0.45s; }
      @keyframes landCardActivityPulse { 0%, 100% { opacity: 0.28; } 40% { opacity: 1; } }
      @keyframes landCardBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
      @media (prefers-reduced-motion: reduce) {
        .land-card-activity-dot { animation: none; }
        .land-card-status.is-warn { animation: none; }
      }
      
      .land-card.is-offscreen .land-card-activity-dot { animation-play-state: paused; }
      .land-card.is-offscreen .land-card-status.is-warn { animation-play-state: paused; }
      .land-card.is-offscreen .land-card-bg-emoji { display: none; }
      .land-card.is-offscreen .land-card-bg { opacity: 0.5; }
      .land-card.is-offscreen .land-card-mask { background: #1A1A1A; }

      .dgn-locked-section { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--surface-4); } 
      .cap-pill.locked { color: var(--ink-6); opacity: 0.85; }
      .cap-pill.owned { color: var(--success-solid); }
      .dgn-forge-btn { margin-top: var(--s-3); width: 100%; text-align: center; }
      
      .cap-dgn-warn {
        margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm);
        background: var(--warn-tint); color: var(--warn-deep); font-size: 11px; line-height: 1.4;
        height: 44px; overflow-y: auto; word-break: break-word;
      }
      
      .cap-dgn-warn-link {
        display: inline; border: 0; background: transparent; padding: 0; margin: 0;
        font: inherit; font-size: inherit; font-weight: 800; color: var(--danger-text);
        text-decoration: underline; cursor: pointer;
      }
      .cap-dgn-warn .diagnosis-line { display: block; margin-top: var(--s-2); color: var(--danger-text); font-weight: 700; }

      .cap-rank-body { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
      .cap-rank-subtabs { display: flex; gap: var(--s-3); flex-wrap: wrap; flex: 0 0 auto; margin-bottom: var(--s-3); }
      .cap-rank-list-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
      .cap-rank-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
      .cap-rank-list-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-2) var(--s-2); font-size: 12px; border-bottom: 1px dashed var(--surface-4); }
      .cap-rank-list-row .medal { flex: 0 0 22px; text-align: center; }
      
      .cap-rank-list-row .who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-weight: 700; }
      .cap-rank-list-row .score { flex: 0 0 auto; color: var(--ink-6); font-variant-numeric: tabular-nums; font-family: var(--font-mecha-num); }
      .cap-rank-self-sticky {
        flex: 0 0 auto; position: sticky; bottom: 0;
        display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-2); padding: var(--s-3) var(--s-5);
        border-radius: var(--r-md); background: var(--warn-soft); color: #7c4a03; font-weight: 800; font-size: 12px;
        box-shadow: var(--sh-2);
      }
      .cap-rank-self-sticky .who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7c4a03; }
      .cap-rank-self-sticky .score { color: var(--warn-text); }

      .pg-box {
        display: flex;
        flex-direction: column;
        min-width: 0;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        box-shadow: var(--shadow-light);
        overflow: hidden;
      }
      .pg-box + .pg-box { margin-top: var(--s-6); }
      .pg-head {
        display: flex;
        align-items: center;
        gap: var(--s-4);
        flex-wrap: wrap;
        padding: var(--s-5) var(--s-7);
        border-bottom: 1px solid var(--border-color);
        background: var(--surface-1);
      }
      .pg-title { font-size: 14px; font-weight: 800; color: var(--text-main); white-space: nowrap; }
      .pg-sub { font-size: 11px; color: var(--text-muted); }
      .pg-spacer { flex: 1 1 auto; }
      .pg-body { padding: var(--s-6) var(--s-7) var(--s-7); }
      .pg-empty {
        padding: 26px var(--s-6);
        color: var(--text-muted);
        font-size: 12px;
        text-align: center;
        line-height: 1.7;
      }
      .pg-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--s-6);
        align-items: start;
      }
      .pg-grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
      .pg-grid.wide { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
      
      .pg-grid > .pg-box + .pg-box { margin-top: 0; }

      .view[data-panel="dungeon"] .pg-box {
        border: none;
        box-shadow: var(--sh-4);
      }

      .view[data-panel="character"] .pg-box,
      .view[data-panel="equipment"] .pg-box {
        border: none;
        box-shadow: var(--sh-4);
      }

      .view[data-panel="minigame"] .pg-box {
        border: none;
        box-shadow: var(--sh-4);
      }

      .view[data-panel="tower"] .pg-box {
        border: none;
        box-shadow: var(--sh-4);
      }

      .btn-solid-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--s-3);
        height: 44px;
        box-sizing: border-box;
        padding: 0 var(--s-9);
        border-radius: var(--r-md);
        border: 0;
        background: var(--primary-solid);
        color: var(--on-solid);
        font: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: filter .15s ease;
      }
      .btn-solid-cta:hover:not(:disabled) { filter: brightness(1.08); }
      .btn-solid-cta:disabled { opacity: .5; cursor: not-allowed; filter: none; }
      
      .btn-solid-cta.sm { height: 40px; padding: 0 var(--s-8); font-size: 13px; }
      
      .btn-solid-cta.xs { height: 32px; padding: 0 var(--s-7); font-size: 12px; }
      
      .btn-solid-cta.insufficient { opacity: .55; cursor: not-allowed; filter: none; }
      .btn-solid-cta.insufficient .btn-cta-deficit { opacity: .85; font-weight: 600; }
      .btn-solid-cta .btn-cta-deficit { margin-left: var(--s-1); }
      .btn-solid-cta.reward {
        background: linear-gradient(135deg, var(--warn-solid), var(--accent-orange));
        font-weight: 800;
        animation: ctaRewardBreathe 2.2s ease-in-out infinite;
      }
      .btn-solid-cta.reward:disabled { animation: none; }
      @keyframes ctaRewardBreathe {
        0%, 100% { box-shadow: 0 2px 8px rgba(249, 115, 22, .32); }
        50% { box-shadow: 0 2px 8px rgba(249, 115, 22, .32), 0 0 16px rgba(245, 158, 11, .55); }
      }

      .home-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--s-3);
        height: 32px;
        box-sizing: border-box;
        padding: 0 var(--s-8);
        border-radius: var(--r-sm);
        border: 1px solid transparent;
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
      }
      
      .home-btn + .home-btn { margin-left: var(--s-6); }
      
      .home-btn[style*="width:100%"] + .home-btn,
      .home-btn + .home-btn[style*="width:100%"],
      .home-btn[style*="width: 100%"] + .home-btn,
      .home-btn + .home-btn[style*="width: 100%"] { margin-left: 0; }
      .home-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
      
      .home-btn-primary {
        background-color: #1F2937;
        color: var(--on-solid);
        border-color: #1F2937;
        background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
      }
      .home-btn-primary:hover:not(:disabled) { background-color: var(--brand); border-color: var(--brand); }
      
      .home-btn-secondary {
        background-color: var(--surface-3);
        color: var(--ink-4);
        border-color: var(--surface-4);
      }
      .home-btn-secondary:hover:not(:disabled) { background-color: var(--surface-4); }
      
      .home-btn-danger {
        background-color: var(--danger-soft);
        color: var(--brand);
        border-color: #FCA5A5;
      }
      .home-btn-danger:hover:not(:disabled) { background-color: var(--brand); color: var(--on-solid); }
      
      .home-btn:disabled {
        background-color: var(--surface-3);
        background-image: none;
        color: var(--ink-6);
        border-color: var(--surface-4);
        cursor: not-allowed;
      }
      
      .home-btn-compact {
        height: 24px;
        padding: 0 var(--s-6);
        font-size: 12px;
      }
      .home-btn-compact svg { width: 12px; height: 12px; }

      .pg-subtabs {
        display: flex;
        gap: var(--s-1);
        flex-wrap: wrap;
        margin: var(--s-8) 0 var(--s-7);
        background: var(--surface-3);
        border-radius: var(--r-pill);
        padding: var(--s-2);
      }

      .pg-subtabs-wrap { position: relative; }
      .pg-subtabs-arrow {
        position: absolute; top: 50%; transform: translateY(-50%);
        z-index: 3; width: 26px; height: 26px; border-radius: var(--r-pill);
        border: 1px solid var(--pg-border, rgba(148,163,184,.35));
        background: var(--surface-1); color: var(--ink-4); font-size: 13px; line-height: 1;
        display: none; align-items: center; justify-content: center;
        cursor: pointer; padding: 0; box-shadow: var(--sh-2);
      }
      .pg-subtabs-arrow.prev { left: 2px; }
      .pg-subtabs-arrow.next { right: 2px; }
      .pg-subtabs-wrap.is-overflowing .pg-subtabs-arrow { display: flex; }
      .pg-subtabs-wrap.at-start .pg-subtabs-arrow.prev,
      .pg-subtabs-wrap.at-end   .pg-subtabs-arrow.next { display: none; }
      
      .pg-subtabs-wrap.is-overflowing::before,
      .pg-subtabs-wrap.is-overflowing::after {
        content: ""; position: absolute; top: 0; bottom: 0; width: 30px;
        pointer-events: none; z-index: 2;
      }
      .pg-subtabs-wrap.is-overflowing::before {
        left: 0; background: linear-gradient(90deg, var(--surface-3), rgba(238,241,245,0));
        border-radius: var(--r-pill) 0 0 var(--r-pill);
      }
      .pg-subtabs-wrap.is-overflowing::after {
        right: 0; background: linear-gradient(270deg, var(--surface-3), rgba(238,241,245,0));
        border-radius: 0 var(--r-pill) var(--r-pill) 0;
      }
      .pg-subtabs-wrap.at-start::before, .pg-subtabs-wrap.at-end::after { display: none; }

      @media (max-width: 920px) {
        
        .pg-subtabs {
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          
          scrollbar-width: none;
        }
        .pg-subtabs::-webkit-scrollbar { display: none; }
        .pg-subtabs > * { flex: 0 0 auto; }
        
        .pg-subtabs-wrap.is-overflowing .pg-subtabs { padding-left: 30px; padding-right: 30px; }
        .pg-subtabs-wrap.is-overflowing.at-start .pg-subtabs { padding-left: var(--s-2); }
        .pg-subtabs-wrap.is-overflowing.at-end .pg-subtabs { padding-right: var(--s-2); }
      }

      .pg-subtab-btn {
        position: relative;
        border: 0;
        border-radius: var(--r-pill);
        background: transparent;
        color: var(--ink-5);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        padding: var(--s-3) var(--s-8);
        cursor: pointer;
        white-space: nowrap;
        transition: background-color .2s ease, color .2s ease;
      }
      .pg-subtab-btn:hover { background: rgba(255, 255, 255, .7); color: var(--ink-2); }
      .pg-subtab-btn.active,
      .pg-subtab-btn.active:hover {
        background: #1e293b;
        color: var(--on-solid);
      }

      .tab-toggle-group {
        position: relative;
        display: flex;
        gap: var(--s-1);
        background: var(--surface-3);
        border-radius: var(--r-pill);
        padding: var(--s-2);
      }
      
      .tab-toggle-thumb {
        position: absolute;
        top: 4px;
        left: 4px;
        height: 32px;
        width: 0;
        background: #1e293b;
        border-radius: var(--r-pill);
        transition: transform .2s ease, width .2s ease, height .2s ease;
        z-index: 0;
        opacity: 0;
        pointer-events: none;
      }
      .tab-toggle-pill {
        position: relative;
        z-index: 1;
        border: 0;
        border-radius: var(--r-pill);
        background: transparent;
        color: var(--ink-5);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        padding: var(--s-3) var(--s-8);
        cursor: pointer;
        white-space: nowrap;
        transition: color .2s ease;
      }
      .tab-toggle-pill:hover { color: var(--ink-2); }
      .tab-toggle-pill.active, .tab-toggle-pill.active:hover { color: var(--on-solid); }

      .pg-hero {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--s-8);
        padding: var(--s-7) var(--s-8);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        box-shadow: var(--shadow-light);
      }
      .pg-hero-main {
        flex: 0 0 auto;
        min-width: 132px;
        padding-right: var(--s-8);
        border-right: 1px solid var(--border-color);
      }
      .pg-hero-label {
        font-size: 11px;
        font-weight: 800;
        color: var(--text-muted);
        letter-spacing: 0.06em;
      }
      .pg-hero-value {
        margin-top: var(--s-1);
        font-size: 30px;
        font-weight: 800;
        color: var(--warn-text);
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
      }
      .pg-hero-stats {
        flex: 1 1 320px;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
        gap: var(--s-5) var(--s-7);
      }
      .pg-stat { min-width: 0; }
      .pg-stat .k { font-size: 11px; color: var(--text-muted); }
      .pg-stat .v {
        margin-top: var(--s-1);
        font-size: 14px;
        font-weight: 800;
        color: var(--ink-2);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .pg-stat .v.good { color: var(--success-solid); }
      
      .tower-hero .pg-hero-main { min-width: 180px; }
      .tower-hero .tower-hero-sub { margin-top: var(--s-2); font-size: 11px; font-weight: 700; color: var(--text-muted); }
      .tower-hero .tower-hero-sub strong { color: var(--ink-3); font-variant-numeric: tabular-nums; }
      .tower-hero .pg-stat .v.is-out { color: var(--danger-solid); }
      
      .tower-hero .pg-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      @media (max-width: 880px) { .tower-hero .pg-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
      .pg-stat .v.muted { color: var(--ink-6); font-weight: 700; }
      .pg-hero-foot {
        flex: 1 1 100%;
        margin-top: var(--s-1);
        padding-top: var(--s-5);
        border-top: 1px dashed var(--surface-4);
        font-size: 11px;
        color: var(--ink-5);
        line-height: 1.7;
      }

      .pg-row {
        display: flex;
        gap: var(--s-5);
        align-items: flex-start;
        flex-wrap: wrap;
        padding: var(--s-5) var(--s-1);
        border-bottom: 1px dashed var(--surface-4);
      }
      .pg-row:last-child { border-bottom: 0; }
      .pg-row-main { flex: 1 1 220px; min-width: 0; }
      .pg-row-name { font-size: 13px; font-weight: 800; color: var(--ink-2); line-height: 1.5; }
      .pg-row-meta { margin-top: var(--s-2); font-size: 11px; color: var(--ink-5); line-height: 1.7; }
      .pg-row-meta.bad { color: var(--danger-solid); }
      
      .stat-lbar-row { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0; }
      .stat-lbar-label { flex: 0 0 auto; font-size: 11px; color: var(--ink-5); min-width: 44px; }
      .stat-lbar-track { flex: 1 1 auto; height: 6px; background: var(--line-1); border-radius: var(--r-xs); overflow: hidden; min-width: 40px; }
      .stat-lbar-fill { height: 100%; border-radius: var(--r-xs); transition: width 0.3s; }
      .stat-lbar-value { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--ink-2); min-width: 30px; text-align: right; }
      
      .stat-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px dashed var(--line-1); }
      .stat-row:last-child { border-bottom: none; }
      .stat-row-label { font-size: 12px; color: var(--ink-4); font-weight: 600; }
      .stat-row-right { display: flex; align-items: center; gap: var(--s-3); }
      .stat-row-value { font-size: 12px; font-weight: 800; color: var(--ink-2); }
      .stat-info-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; user-select: none;
        background: var(--primary-soft); color: var(--info); font-size: 10px; font-weight: 800; line-height: 1;
        cursor: help; transition: background .12s, color .12s;
      }
      .stat-info-icon:hover, .stat-info-icon.is-active { background: var(--fill-info); color: var(--on-solid); }
      
      .stat-row-source-tag {
        display: inline-flex; align-items: center; gap: var(--s-1); flex-shrink: 0;
        font-size: 10px; font-weight: 700; color: var(--ink-5);
        background: var(--surface-3); border-radius: var(--r-sm); padding: var(--s-1) var(--s-3); white-space: nowrap;
      }
      .stat-breakdown-pop {
        position: fixed; z-index: 3000; min-width: 148px;
        background: rgba(255,255,255,0.88);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(148,163,184,0.35);
        border-radius: var(--r-lg);
        box-shadow: var(--sh-3);
        padding: var(--s-4) var(--s-5);
        opacity: 0; visibility: hidden; transform: translateY(4px);
        transition: opacity .15s ease, transform .15s ease, visibility .15s;
        pointer-events: none;
      }
      .stat-breakdown-pop.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
      .stat-breakdown-pop-title { font-size: 11px; color: var(--ink-5); font-weight: 700; margin-bottom: var(--s-2); }
      .stat-breakdown-pop-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-7); font-size: 12px; color: var(--ink-2); padding: var(--s-1) 0; }
      .stat-breakdown-pop-item .k { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-4); }
      .stat-breakdown-pop-item .v { font-weight: 700; }
      .pg-row-actions { flex: 0 0 auto; display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
      .pg-row-actions.stack { flex-direction: column; align-items: stretch; min-width: 96px; }
      
      .pg-row-sockets { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
      .pg-row-socket {
        width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
        display: flex; align-items: center; justify-content: center;
        background: var(--surface-3); color: var(--ink-5); font-size: 8px; line-height: 1;
      }
      .pg-row-socket.is-locked { background: var(--surface-4); color: var(--ink-6); opacity: 0.7; }
      .pg-row-socket.is-empty { background: var(--surface-1); border: 1px dashed var(--brand); color: var(--brand); }
      .pg-row-socket.is-filled { background: var(--success-soft); color: var(--success-text); }

      .pg-tag {
        display: inline-block;
        padding: var(--s-1) var(--s-4);
        border-radius: var(--r-pill);
        background: var(--surface-3);
        color: var(--ink-4);
        font-size: 10px;
        font-weight: 800;
        vertical-align: middle;
      }
      .pg-tag.ok { background: var(--success-soft); color: var(--success-text); }
      .pg-tag.warn { background: var(--warn-tint); color: var(--warn-deep); }
      .pg-tag.bad { background: var(--brand-soft); color: var(--danger-text); }
      .pg-tag.info { background: var(--primary-soft); color: var(--primary-text); }

      .pg-bar { height: 5px; border-radius: var(--r-pill); background: var(--surface-4); overflow: hidden; }
      .pg-bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--fill-info); }

      .pg-note {
        padding: var(--s-4) var(--s-6);
        border-radius: var(--radius-sm);
        background: var(--surface-2);
        color: var(--ink-5);
        font-size: 11px;
        line-height: 1.7;
      }
      .pg-note.warn { background: var(--warn-tint); color: var(--warn-deep); }
      .pg-note.bad { background: var(--danger-soft); color: var(--danger-text); }
      .pg-note.good { background: var(--success-soft); color: #166534; }

      .pg-disclosure { margin-bottom: var(--s-5); }
      .pg-disclosure > summary {
        cursor: pointer; font-size: 12px; font-weight: 700; color: var(--info);
        list-style: none; display: inline-flex; align-items: center; gap: var(--s-2);
      }
      .pg-disclosure > summary::-webkit-details-marker { display: none; }
      .pg-disclosure > summary::before { content: "▸"; font-size: 10px; }
      .pg-disclosure[open] > summary::before { content: "▾"; }
      .pg-disclosure > .pg-note { margin-top: var(--s-3); }

      .pg-item { position: relative; padding-left: var(--s-7); }
      .pg-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        
        width: var(--pg-tier-w, 3px);
        border-radius: var(--r-pill);
        background: var(--pg-tier, var(--surface-4));
      }
      
      html.theme-dark .pg-item::before {
        background: var(--pg-tier-dark, var(--pg-tier, var(--surface-4)));
      }

      .pg-attr-row {
        display: grid;
        grid-template-columns: 62px 96px minmax(70px, 1fr) auto;
        gap: var(--s-5);
        align-items: center;
        padding: var(--s-5) var(--s-1);
        border-bottom: 1px dashed var(--surface-4);
      }
      .pg-attr-row:last-of-type { border-bottom: 0; }
      .pg-attr-name { font-size: 13px; font-weight: 800; color: var(--ink-2); }
      .pg-attr-num { font-size: 17px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; font-family: var(--font-mecha-num); }
      .pg-attr-num .add { color: var(--success-solid); }
      .pg-attr-num .cap { margin-left: var(--s-1); font-size: 11px; font-weight: 600; color: var(--ink-6); }
      .pg-attr-desc { grid-column: 1 / -1; margin-top: -var(--s-1); font-size: 11px; color: var(--ink-6); line-height: 1.6; }
      .pg-step {
        width: 28px;
        height: 28px;
        display: inline-grid;
        place-items: center;
        border: 1px solid var(--border-color);
        border-radius: var(--r-pill);
        background: var(--surface-1);
        color: var(--ink-4);
        font: inherit;
        font-size: 15px;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
      }

      .confirm-btn-row.eq-btn-stack { flex-direction: column; gap: var(--s-3); }
      .eq-btn-line { display: flex; gap: var(--s-3); width: 100%; }
      
      .eq-recipe-chain-note {
        margin-top: var(--s-4);
        padding: var(--s-4) var(--s-5);
        border-radius: var(--r-md);
        background: var(--surface-2);
        border: 1px dashed var(--line-1);
        font-size: 11.5px;
        line-height: 1.7;
        color: var(--ink-5);
      }
      .eq-recipe-chain-note b { color: var(--ink-3); font-weight: 800; }
      @media (max-width: 920px) {
        
        .eq-btn-line .home-btn { height: 44px; min-height: 44px; font-size: 14px; }
        
        .eq-btn-line .home-btn .btn-cta-deficit { font-size: 11px; }
      }

      .forest-map-box {
        margin: var(--s-5) 0;
        border: 1px solid var(--line-1);
        border-radius: var(--r-lg);
        background: var(--surface-1);
        overflow: hidden;
      }
      .forest-map-head {
        display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
        padding: var(--s-5) var(--s-6);
        border-bottom: 1px solid var(--line-1);
      }
      .forest-map-title { font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
      .forest-map-meta { font-size: 12px; color: var(--ink-5); }
      .forest-chest-hint { color: #C98A08; }
      
      .forest-chest-none { color: var(--ink-5); font-weight: 700; }
      .forest-map-stage {
        position: relative;
        
        height: 370px;
        
        background: radial-gradient(120% 90% at 50% 42%, #5A6048 0%, #464B39 55%, #3B4030 100%);
        overflow: hidden;
        cursor: grab;
        touch-action: pan-y;   
      }
      .forest-map-stage:active { cursor: grabbing; }
      #forestMapCanvas { display: block; width: 100%; height: 100%; }
      
      .forest-map-tip {
        position: absolute; left: 8px; right: 8px; bottom: 6px;
        text-align: center;
        pointer-events: none;   
      }
      .forest-map-tip span {
        display: inline-block;
        padding: 3px 10px; border-radius: 999px;
        background: rgba(255,255,255,.82);
        font-size: 11px; color: var(--ink-4);
      }
      
      .forest-open-fx {
        position: absolute; transform: translate(-50%, -50%);
        pointer-events: none; z-index: 2;
      }
      .forest-open-fx > span {
        position: absolute; left: 50%; top: 50%;
      }
      
      .forest-fx-chest {
        font-size: 26px; margin: -13px 0 0 -13px;
        animation: forestChestPop .5s ease-out forwards;
      }
      @keyframes forestChestPop {
        0%   { transform: rotate(0) scale(1);      opacity: 1; }
        15%  { transform: rotate(-12deg) scale(1.08); }
        30%  { transform: rotate(12deg) scale(1.08); }
        45%  { transform: rotate(-8deg) scale(1.14); }
        60%  { transform: rotate(0) scale(1.2);   opacity: 1; }
        100% { transform: rotate(0) scale(2.1);   opacity: 0; }
      }
      
      .forest-fx-ring {
        width: 18px; height: 18px; margin: -9px 0 0 -9px;
        border: 3px solid var(--fx); border-radius: 50%;
        animation: forestRing .85s cubic-bezier(.15,.75,.35,1) .42s forwards;
        opacity: 0;
      }
      .forest-fx-ring2 { animation-delay: .58s; border-width: 2px; }
      @keyframes forestRing {
        0%   { transform: scale(.4); opacity: .95; }
        100% { transform: scale(5.2); opacity: 0; }
      }
      
      .forest-fx-shard {
        width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
        border-radius: 2px; background: var(--fx);
        box-shadow: 0 0 6px var(--fx);
        opacity: 0;
        animation: forestShard .7s cubic-bezier(.2,.7,.3,1) calc(.42s + var(--d)) forwards;
      }
      @keyframes forestShard {
        0%   { transform: translate(0,0) scale(1) rotate(0);         opacity: 1; }
        100% { transform: translate(var(--dx), var(--dy)) scale(.3) rotate(180deg); opacity: 0; }
      }
      .forest-fx-key {
        font-size: 40px; margin: -20px 0 0 -20px;
        animation: forestKeyRise 1.25s cubic-bezier(.2,.9,.3,1) .48s forwards;
        filter: drop-shadow(0 0 10px var(--fx));
        opacity: 0;
      }
      @keyframes forestKeyRise {
        0%   { transform: translateY(4px) scale(.3);   opacity: 0; }
        22%  { transform: translateY(-16px) scale(1.35); opacity: 1; }
        62%  { transform: translateY(-34px) scale(1.05); opacity: 1; }
        100% { transform: translateY(-56px) scale(.95); opacity: 0; }
      }
      
      .forest-fx-label {
        transform: translateX(-50%); margin-top: 16px; white-space: nowrap;
        padding: 3px 10px; border-radius: 999px;
        background: var(--fx); color: #fff;
        font-size: 12.5px; font-weight: 800; letter-spacing: .2px;
        text-shadow: 0 1px 2px rgba(0,0,0,.35);
        box-shadow: 0 2px 8px rgba(0,0,0,.25);
        opacity: 0;
        animation: forestLabel 1.35s ease-out .5s forwards;
      }
      @keyframes forestLabel {
        0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.8); }
        18%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.06); }
        28%  { transform: translateX(-50%) translateY(0) scale(1); }
        78%  { opacity: 1; }
        100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.95); }
      }
      @media (prefers-reduced-motion: reduce) {
        
        .forest-fx-chest, .forest-fx-ring, .forest-fx-shard { animation-duration: .01s; }
        .forest-fx-key, .forest-fx-label { animation: forestReduced 1.2s ease-out .1s forwards; }
      }
      @keyframes forestReduced {
        0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; }
      }
      @media (max-width: 920px) {
        
        .forest-map-stage { height: 240px; }
        .forest-map-tip span { font-size: 10px; padding: 3px 8px; }
      }

      .pg-step-input {
        width: 46px;
        height: 28px;
        
        min-height: 28px;
        padding: 0 var(--s-2);
        border: 1px solid var(--border-color);
        border-radius: var(--r-2);
        background: var(--surface-1);
        color: var(--ink-2);
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        text-align: center;
        font-variant-numeric: tabular-nums;
        -moz-appearance: textfield;
      }
      .pg-step-input::-webkit-outer-spin-button,
      .pg-step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
      .pg-step-input:focus {
        outline: none;
        border-color: var(--primary-line);
        background: var(--primary-soft);
      }
      .pg-step-input::placeholder { color: var(--ink-6); font-weight: 600; }
      .pg-step:hover:not(:disabled) { background: var(--surface-3); color: var(--ink-2); }
      .pg-step:disabled { opacity: 0.35; cursor: not-allowed; }
      .pg-step.plus { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary-text); }
      .pg-step.plus:hover:not(:disabled) { background: var(--primary-soft); }

      .pg-row-actions .capsule-btn.pg-btn-lg {
        height: 40px;
        padding: 0 var(--s-9);
        font-size: 14px;
        border-radius: var(--radius-md, var(--r-lg));
      }

      .pg-qty-input::-webkit-outer-spin-button,
      .pg-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
      .pg-qty-input {
        -moz-appearance: textfield;
        appearance: textfield;
        width: 78px;
        padding: var(--s-3) var(--s-4);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        background: var(--surface-1);
        color: var(--ink-2);
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
      }
      .pg-qty-input:focus { outline: none; border-color: var(--primary-line); background: var(--surface-2); }

      .pg-kv {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--s-5);
        padding: var(--s-3) var(--s-1);
        border-bottom: 1px dashed var(--surface-4);
        font-size: 12px;
      }
      .pg-kv:last-child { border-bottom: 0; }

      .pg-qty-max {
        flex: 0 0 auto; padding: 6px 10px; border-radius: 8px; cursor: pointer;
        border: 1px solid var(--surface-4); background: var(--surface-2);
        color: var(--ink-4); font-size: 12px; font-weight: 700; line-height: 1.2;
        white-space: nowrap;
      }
      .pg-qty-max:hover:not(:disabled) { background: var(--surface-3); color: var(--ink-2); }
      .pg-qty-max:disabled { opacity: .45; cursor: not-allowed; }
      .pg-kv { flex-wrap: wrap; }
      .pg-kv .k { color: var(--ink-5); min-width: 0; white-space: nowrap; flex-shrink: 0; }
      
      .pg-kv .v.wrap { white-space: normal; text-align: right; line-height: 1.55; word-break: normal; overflow-wrap: anywhere; }
      .pg-kv .v { font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--font-mecha-num); }

      .mg-plot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-5); }   
      .mg-plot-card {
        display: flex;
        flex-direction: column;
        gap: var(--s-3);
        padding: var(--s-5) var(--s-6) var(--s-5);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--surface-1);
        min-width: 0;
        
        min-height: 210px;
      }
      .mg-plot-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
      .mg-plot-card-icon { font-size: 20px; line-height: 1; }
      .mg-plot-card-title { font-size: 13px; font-weight: 800; color: var(--text-main); line-height: 1.3; }
      .mg-plot-card-sub {
        font-size: 11px;
        color: var(--ink-5);
        line-height: 1.5;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        
        flex-shrink: 0;
      }
      .mg-plot-card-title { flex-shrink: 0; }
      .mg-plot-card-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-3);
        margin-top: var(--s-1);
        padding-top: var(--s-3);
        border-top: 1px dashed var(--surface-4);
        font-size: 10px;
        color: var(--ink-6);
        font-weight: 700;
      }
      .mg-plot-card-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-1); }
      .capsule-btn后,原紧凑尺寸覆盖同步改指向新class(不改.home-btn/.capsule-btn
         基础规格本身，只在这个巴掌大的卡片场景里覆盖高度/内边距/字号，并把.home-btn基础规则的
         12px相邻兄弟间距归零，换成父容器flex gap:4px统一控制，避免两套间距叠加撑爆窄卡)。 */
      .mg-plot-card-actions .home-btn,
      .mg-plot-card-actions .capsule-btn { height: auto; padding: var(--s-2) var(--s-4); font-size: 10px; }
      .mg-plot-card-actions .home-btn + .home-btn { margin-left: 0; }

      .mg-shop-tile { border: 2px solid var(--line-1); }
      .mg-shop-tile .eq-mat-tile-qty { display: flex; align-items: center; justify-content: center; gap: var(--s-1); }
      .mg-shop-tile .eq-mat-tile-qty .currency-icon-img { width: 12px; height: 12px; }
      .mg-shop-owned {
        position: absolute; top: 3px; left: 3px; font-size: 9px; font-weight: 800; color: var(--success-solid);
        background: rgba(255, 255, 255, 0.88); border-radius: var(--r-xs); padding: 0 var(--s-2); line-height: 1.5;
      }
      .mg-shop-tile.is-soldout { opacity: 0.45; cursor: not-allowed; }

      .mg-seed-pick-icon { font-size: 22px; line-height: 1; flex: 0 0 auto; margin-right: var(--s-1); }

      .eq-forge-row + .eq-forge-row { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px dashed var(--surface-4); }
      .eq-forge-row-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
      .eq-forge-row-icon { font-size: 16px; line-height: 1; }
      .eq-forge-row-label { font-size: 13px; font-weight: 800; color: var(--text-main); }
      .eq-forge-row-progress { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; font-family: var(--font-mecha-num); }
      .eq-forge-tiles { display: flex; gap: var(--s-4); flex-wrap: wrap; }
      
      .eq-forge-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--s-1);
        width: 52px;
        height: 52px;
        flex: 0 0 auto;
        border-radius: var(--r-lg);
        border: 1.5px solid var(--line-2);
        background: var(--surface-1);
        cursor: pointer;
        font: inherit;
        padding: 0;
        opacity: 0.5;
        filter: grayscale(0.4);
        transition: transform 0.1s ease;
      }
      .eq-forge-tile:hover { transform: translateY(-1px); }
      .eq-forge-tile-icon { font-size: 18px; line-height: 1; }
      .eq-forge-tile-tier { font-size: 9px; font-weight: 800; color: var(--ink-5); }
      
      .eq-forge-tile.is-craftable {
        opacity: 1;
        filter: none;
        border: 2px solid var(--success-solid);
        box-shadow: 0 0 0 2px #16a34a;
      }

      .eq-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s-4); }
      .eq-slot-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--s-2);
        height: 84px;
        border-radius: var(--r-lg);
        border: 1.5px solid var(--slot-color, var(--line-2));
        background: var(--surface-1);
        cursor: pointer;
        font: inherit;
        padding: var(--s-3) var(--s-2);
        text-align: center;
      }
      .eq-slot-tile.is-empty { border-style: dashed; background: var(--surface-1); }
      .eq-slot-tile-icon { font-size: 22px; line-height: 1; }
      .eq-slot-tile-plus { font-size: 20px; color: var(--line-2); font-weight: 800; }
      .eq-slot-tile-name {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-main);
        line-height: 1.3;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .eq-slot-tile.is-empty .eq-slot-tile-name { color: var(--text-muted); }

      .eq-bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s-4); }
      .eq-bag-tile { margin: 0 auto; }

      .eq-tarot-tile {
        position: relative; width: 100%; max-width: 84px; height: auto; aspect-ratio: 2.5 / 3.5;
        margin: 0 auto; border-radius: var(--r-md); overflow: hidden;
        background: #1A1A1A; color: var(--on-dark-1); display: flex; flex-direction: row;
        align-items: center; justify-content: center; padding: 0; gap: 0; border: 0; cursor: pointer;
      }
      
      .eq-tarot-bg { position: absolute; inset: 0; z-index: 0; background: #1F5C40; }
      
      .eq-tarot-tile[data-slot="weapon"] .eq-tarot-bg { background: linear-gradient(160deg, #5c2626 0%, #221011 100%); }
      .eq-tarot-tile[data-slot="armor"] .eq-tarot-bg { background: linear-gradient(160deg, #274768 0%, #101c2c 100%); }
      .eq-tarot-tile[data-slot="gloves"] .eq-tarot-bg { background: linear-gradient(160deg, #5c3d22 0%, #24180d 100%); }
      .eq-tarot-tile[data-slot="pants"] .eq-tarot-bg { background: linear-gradient(160deg, #2d3560 0%, #12172c 100%); }
      .eq-tarot-tile[data-slot="shoes"] .eq-tarot-bg { background: linear-gradient(160deg, #35492a 0%, #151f10 100%); }
      
      .eq-tarot-bg::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(to top, var(--eq-rarity-glow, transparent) 0%, transparent 30%);
      }
      .eq-tarot-tile[data-rarity="normal"] .eq-tarot-bg { --eq-rarity-glow: rgba(156,163,175,0.2); }
      .eq-tarot-tile[data-rarity="good"] .eq-tarot-bg { --eq-rarity-glow: rgba(16,185,129,0.2); }
      .eq-tarot-tile[data-rarity="rare"] .eq-tarot-bg { --eq-rarity-glow: rgba(59,130,246,0.2); }
      .eq-tarot-tile[data-rarity="epic"] .eq-tarot-bg { --eq-rarity-glow: rgba(139,92,246,0.2); }
      .eq-tarot-tile[data-rarity="legendary"] .eq-tarot-bg { --eq-rarity-glow: rgba(249,115,22,0.25); }
      
      .eq-tarot-tile[data-rarity] { box-sizing: border-box; border: 2px solid transparent; }
      .eq-tarot-tile[data-rarity="normal"] { border-color: #9CA3AF; }
      .eq-tarot-tile[data-rarity="good"] { border-color: #34D399; box-shadow: 0 0 5px 1px rgba(52,211,153,0.5); }
      .eq-tarot-tile[data-rarity="rare"] { border-color: #3B82F6; }
      .eq-tarot-tile[data-rarity="epic"] { border-color: #8B5CF6; box-shadow: 0 0 6px 1px rgba(139,92,246,0.55); }
      .eq-tarot-tile[data-rarity="legendary"] { border-color: #F97316; box-shadow: 0 0 8px 2px rgba(249,115,22,0.6); }
      
      .eq-tarot-mask {
        position: absolute; inset: 0; z-index: 2; pointer-events: none;
        background: linear-gradient(to bottom, rgba(26,26,26,0) 0%, rgba(26,26,26,0.15) 55%, #1A1A1A 100%);
      }
      
      .eq-tarot-icon {
        position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
        font-size: 50px; line-height: 1; opacity: 0.3; filter: blur(0.3px); pointer-events: none;
      }
      
      .eq-tarot-icon img.eq-weapon-tier-img { width: auto; height: 100%; object-fit: contain; }
      
      .eq-weapon-tier-inline-img { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; }
      
      .eq-tier-inline-emoji { font-size: 18px; line-height: 1; display: inline-block; vertical-align: -4px; }
      
      .eq-tarot-tier {
        position: absolute; top: 3px; left: 3px; z-index: 3; background: rgba(0,0,0,0.5);
        border-radius: var(--r-xs); padding: var(--s-1) var(--s-2); font-size: 8px; font-weight: 800; color: var(--on-solid); line-height: 1.3;
        border: 1px solid transparent;
      }
      .eq-tarot-tier[data-tier-band="t1t2"] { color: var(--on-solid); }
      .eq-tarot-tier[data-tier-band="t3t4"] { color: #93C5FD; }
      .eq-tarot-tier[data-tier-band="t5t6"] { color: #D8B4FE; }
      .eq-tarot-tier[data-tier-band="t7"] { color: #FDE047; border-color: #FDE047; }
      
      .eq-tarot-name {
        position: absolute; top: 4px; left: 24px; right: 26px; z-index: 3;
        font-size: 10px; font-weight: 800; color: var(--on-solid); line-height: 1.2; text-align: center;
        text-shadow: 0 1px 2px rgba(0,0,0,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        pointer-events: none;
      }
      .eq-tarot-hex { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; z-index: 3; }
      .eq-tarot-hex-outer, .eq-tarot-hex-inner {
        position: absolute; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      }
      .eq-tarot-hex-outer { inset: 0; }
      .eq-tarot-hex-inner {
        inset: 2px; background: rgba(15,15,15,0.78);
        display: flex; align-items: center; justify-content: center;
        font-size: 7px; font-weight: 900; color: var(--on-solid); text-shadow: 0 1px 1px rgba(0,0,0,0.6);
      }
      
      .eq-tarot-hex.band-e1 .eq-tarot-hex-outer { background: #10B981; }
      .eq-tarot-hex.band-e1 .eq-tarot-hex-inner { color: #10B981; }
      .eq-tarot-hex.band-e2 .eq-tarot-hex-outer { background: #3B82F6; }
      .eq-tarot-hex.band-e2 .eq-tarot-hex-inner { color: #3B82F6; }
      .eq-tarot-hex.band-e3 .eq-tarot-hex-outer { background: #8B5CF6; }
      .eq-tarot-hex.band-e3 .eq-tarot-hex-inner { color: #8B5CF6; }
      .eq-tarot-hex.band-e4 .eq-tarot-hex-outer { background: var(--accent-orange); }
      .eq-tarot-hex.band-e4 .eq-tarot-hex-inner { color: var(--accent-orange); }
      .eq-tarot-hex.band-e5 .eq-tarot-hex-outer { background: var(--brand); }
      .eq-tarot-hex.band-e5 .eq-tarot-hex-inner { color: var(--brand); }
      .eq-tarot-hex.band-e5 { animation: eqTarotHexBreathePulse 1.3s ease-in-out infinite; }
      .eq-tarot-hex.band-max .eq-tarot-hex-outer {
        background: linear-gradient(120deg, #7c5a0a 0%, #d4af37 25%, var(--warn-tint) 50%, #d4af37 75%, #7c5a0a 100%);
        background-size: 260% 260%;
        animation: eqTarotHexMaxSweep 2s linear infinite;
      }
      .eq-tarot-hex.band-max .eq-tarot-hex-inner { color: var(--warn-line); font-size: 6px; }
      
      .eq-tarot-stat {
        position: absolute; left: 4px; right: 4px; bottom: 3px; z-index: 3;
        font-size: 9px; color: var(--on-solid);
        text-shadow: 0 1px 2px rgba(0,0,0,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .eq-tarot-stat.has-lock { padding-left: var(--s-6); }
      
      .eq-tarot-lock { position: absolute; bottom: 3px; left: 3px; z-index: 4; font-size: 8px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }

      .tower-tarot-card {
        position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden;
        background: #1A1A1A; color: var(--on-dark-1); cursor: pointer; padding: 0; display: block; text-align: center;
        box-sizing: border-box; border: 2px solid transparent; font: inherit;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
      }
      .tower-tarot-card:disabled { cursor: not-allowed; filter: grayscale(0.4); opacity: 0.6; }
      .tower-tarot-card[data-orientation="upright"] { border-color: #C9A227; box-shadow: 0 0 8px 1px rgba(201,162,39,0.35); }
      .tower-tarot-card[data-orientation="reversed"] { border-color: var(--danger-solid); box-shadow: 0 0 8px 1px rgba(220,38,38,0.4); }
      
      .tower-tarot-card:not(:disabled):hover { transform: translateY(-5px) scale(1.03); }
      .tower-tarot-card[data-orientation="upright"]:not(:disabled):hover {
        box-shadow: 0 12px 24px rgba(201,162,39,0.4), 0 0 16px 2px rgba(96,165,250,0.35);
      }
      .tower-tarot-card[data-orientation="reversed"]:not(:disabled):hover {
        box-shadow: 0 12px 24px rgba(220,38,38,0.45), 0 0 16px 2px rgba(168,85,247,0.4);
      }
      
      @keyframes towerCardReveal {
        0% { transform: rotateY(88deg) scale(0.92); opacity: 0; }
        55% { opacity: 1; }
        100% { transform: rotateY(0deg) scale(1); opacity: 1; }
      }
      .tower-choice-grid.is-revealing .tower-tarot-card { animation: towerCardReveal 0.4s ease backwards; }
      .tower-choice-grid.is-revealing .tower-tarot-card:nth-child(2) { animation-delay: 0.12s; }
      .tower-choice-grid.is-revealing .tower-tarot-card:nth-child(3) { animation-delay: 0.24s; }
      .tower-tarot-bg { position: absolute; inset: 0; z-index: 0; }
      .tower-tarot-card[data-orientation="upright"] .tower-tarot-bg { background: linear-gradient(160deg, #1e3a5f 0%, #0d1626 100%); }
      .tower-tarot-card[data-orientation="reversed"] .tower-tarot-bg { background: linear-gradient(160deg, #4c1d3f 0%, #1c0a14 100%); }
      .tower-tarot-icon {
        position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
        font-size: 64px; line-height: 1; opacity: 0.3; filter: blur(0.3px); pointer-events: none;
      }
      .tower-tarot-mask {
        position: absolute; inset: 0; z-index: 2; pointer-events: none;
        background: linear-gradient(to bottom, rgba(26,26,26,0) 0%, rgba(26,26,26,0.2) 42%, rgba(26,26,26,0.94) 100%);
      }
      .tower-tarot-name {
        position: absolute; top: 8px; left: 6px; right: 6px; z-index: 3;
        font-size: 15px; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
      }
      .tower-tarot-orient {
        position: absolute; top: 31px; left: 50%; transform: translateX(-50%); z-index: 3;
        font-size: 10px; font-weight: 800; line-height: 1.3; padding: var(--s-1) var(--s-4); border-radius: var(--r-pill); pointer-events: none;
      }
      .tower-tarot-card[data-orientation="upright"] .tower-tarot-orient { background: rgba(201,162,39,0.92); color: #221a03; }
      .tower-tarot-card[data-orientation="reversed"] .tower-tarot-orient { background: rgba(220,38,38,0.92); color: var(--on-solid); }
      
      .tower-tarot-foot {
        position: absolute; left: 7px; right: 7px; bottom: 8px; z-index: 3;
        display: flex; flex-direction: column; gap: var(--s-2); pointer-events: none;
      }
      .tower-tarot-effect {
        font-size: 11px; line-height: 1.45; color: var(--on-dark-1); pointer-events: none;
      }
      .tower-tarot-cost { color: #F87171; font-weight: 700; }
      
      .tower-tarot-lv {
        position: absolute; top: 48px; left: 50%; transform: translateX(-50%); z-index: 3;
        font-size: 9px; font-weight: 800; line-height: 1.3; padding: var(--s-1) var(--s-4); border-radius: var(--r-pill);
        letter-spacing: 0.02em; pointer-events: none;
        background: rgba(15,23,42,0.72); color: var(--line-2); border: 1px solid rgba(148,163,184,0.45);
      }
      
      .tower-tarot-lv.is-upgrade {
        background: rgba(120,53,15,0.86); color: var(--warn-line); border-color: rgba(251,191,36,0.75);
      }
      .tower-tarot-card.mini .tower-tarot-lv { top: 34px; font-size: 8px; padding: 0 var(--s-3); }
      
      .tower-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); max-width: 620px; margin: var(--s-6) 0; perspective: 720px; }
      
      .tower-choice-grid.mini { gap: var(--s-5); max-width: 430px; margin: var(--s-4) 0; }
      .tower-tarot-card.mini .tower-tarot-icon { font-size: 42px; }
      .tower-tarot-card.mini .tower-tarot-name { font-size: 10px; top: 5px; left: 4px; right: 4px; }
      .tower-tarot-card.mini .tower-tarot-orient { top: 21px; font-size: 9px; padding: var(--s-1) var(--s-3); }
      .tower-tarot-card.mini .tower-tarot-foot { bottom: 5px; left: 5px; right: 5px; }
      .tower-tarot-card.mini .tower-tarot-effect { font-size: 9px; line-height: 1.35; }
      
      .tower-panel-title { font-size: 14px; font-weight: 800; color: var(--ink-2); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
      .tower-panel-title .home-btn { margin-left: auto; }
      .tower-main-box { display: flex; flex-direction: column; gap: var(--s-5); }
      .tower-progress-head { display: flex; gap: var(--s-9); align-items: flex-start; flex-wrap: wrap; }
      .tower-floor-label { font-size: 12px; color: var(--ink-5); }
      .tower-floor-big { font-size: 46px; font-weight: 800; line-height: 1.05; color: var(--ink-2); }
      .tower-floor-side { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: var(--s-4); }
      
      .tower-stage {
        position: relative; overflow: hidden; border-radius: var(--r-lg); padding: var(--s-7) var(--s-8) var(--s-6) var(--s-9);
        background: linear-gradient(180deg, #0b0f19 0%, #151c2c 55%, #1f2637 100%);
        border: 1px solid #2a3550; color: var(--on-dark-1);
        box-shadow: inset 0 -20px 34px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(15, 23, 42, 0.28);
      }
      .tower-stage::before {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; pointer-events: none;
        background: repeating-linear-gradient(180deg, rgba(210, 39, 48, 0.65) 0 3px, transparent 3px 15px);
        opacity: 0.55;
      }
      .tower-stage .tower-floor-label { color: var(--ink-6); }
      .tower-stage .tower-floor-big { color: var(--on-solid); text-shadow: 0 0 20px rgba(210, 39, 48, 0.4); }
      .tower-stage .capsule-sub { color: var(--ink-6); }
      .tower-stage .tower-hp-text { color: var(--ink-6); }
      .tower-stage.is-hit { animation: towerStageHit 0.3s ease; }
      @keyframes towerStageHit {
        0% { filter: brightness(1); }
        30% { filter: brightness(1.55); box-shadow: inset 0 0 40px rgba(210, 39, 48, 0.5); }
        100% { filter: brightness(1); }
      }
      .tower-stage.is-death { animation: towerStageShake 0.5s ease; }
      @keyframes towerStageShake {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(-6px); }
        40% { transform: translateX(5px); }
        60% { transform: translateX(-4px); }
        80% { transform: translateX(2px); }
      }
      
      .tower-stage.is-boss-floor {
        border-color: #C9A227;
        box-shadow: inset 0 -20px 34px rgba(0, 0, 0, 0.45), 0 0 30px 5px rgba(201, 162, 39, 0.4), 0 10px 24px rgba(15, 23, 42, 0.3);
      }
      .tower-stage.is-boss-floor .tower-floor-big { font-size: 60px; color: var(--on-dark-gold); text-shadow: 0 0 28px rgba(251, 191, 36, 0.6); }
      .tower-stage.is-boss-floor.is-hit { animation: towerStageBossHit 0.5s ease; }
      
      .tower-shop-stage {
        background: var(--on-solid);
        color: var(--ink-2);
      }
      .tower-shop-stage::before { display: none; }
      @keyframes towerStageBossHit {
        0% { filter: brightness(1); }
        35% { filter: brightness(1.9) saturate(1.3); box-shadow: inset 0 0 60px rgba(251, 191, 36, 0.65); }
        100% { filter: brightness(1); }
      }
      .tower-beat-line { font-size: 12.5px; color: var(--line-2); min-height: 18px; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
      .tower-beat-line b { color: var(--on-solid); }
      .tower-beat-result { font-weight: 800; }
      .tower-beat-result.is-win { color: #4ADE80; }
      .tower-beat-result.is-boss-win { color: var(--warn-bright); }
      .tower-beat-result.is-loss { color: #F87171; }
      
      .tower-hp-wrap { display: flex; align-items: center; gap: var(--s-4); min-width: 160px; flex: 1 1 auto; }
      .tower-hp-wrap .hud-stat-track { flex: 1 1 auto; min-width: 90px; }
      .tower-hp-wrap.big .hud-stat-track { height: 16px; }
      .tower-hp-num {
        position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
        font-size: 10px; font-weight: 800; color: var(--on-solid); letter-spacing: 0.3px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); pointer-events: none; white-space: nowrap;
      }
      .tower-hp-text { font-size: 11px; color: var(--ink-5); white-space: nowrap; }
      .tower-hp-fill { background-image: linear-gradient(90deg, #14532d, #16a34a, #4ade80, #16a34a, #14532d); background-size: 220% 100%; }
      .tower-hp-fill.is-low { background-image: linear-gradient(90deg, #4a1003, #b91c1c, #f87171, #b91c1c, #4a1003); }
      .tower-mod-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
      .tower-mod-chip {
        display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-4); border-radius: var(--r-pill);
        background: var(--info-soft); border: 1px solid var(--primary-line); color: #1e3a8a; font-size: 11px; font-weight: 700; cursor: help;
      }
      .tower-mod-chip i { font-style: normal; font-size: 10px; opacity: 0.75; }
      
      .tower-mod-chip .tower-mod-lv {
        font-style: normal; font-weight: 800; font-size: 10px; line-height: 1;
        min-width: 13px; text-align: center; padding: var(--s-1) var(--s-2); border-radius: var(--r-xs);
        color: currentColor; background: color-mix(in srgb, currentColor 14%, transparent);
        border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
      }
      .tower-mod-chip .tower-mod-lv.is-max { background: color-mix(in srgb, currentColor 30%, transparent); }
      .tower-mod-chip.is-reversed { background: var(--danger-soft); border-color: #FCA5A5; color: var(--danger-text); }
      
      .tower-note { font-size: 12px; color: var(--warn-deep); background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--r-md); padding: var(--s-3) var(--s-5); margin: var(--s-1) 0; }
      .tower-warn { font-size: 12px; color: var(--danger-text); }
      .tower-rules-strip {
        display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center;
        justify-content: space-between; margin: var(--s-3) 0 var(--s-1);
      }
      .tower-rules-strip > .capsule-sub { flex: 1 1 260px; min-width: 0; line-height: 1.5; }
      .tower-rules-strip > .help-step-go { flex: 0 0 auto; white-space: nowrap; }
      @media (max-width: 560px) { .tower-rules-strip > .help-step-go { flex: 1 1 100%; } }
      
      .tower-stats-panel {
        margin: var(--s-5) 0 var(--s-1); padding: var(--s-5) var(--s-6); border-radius: var(--r-lg);
        background: var(--surface-2); border: 1px solid var(--line-1);
      }
      .tower-stats-panel .tsp-title { font-size: 12px; font-weight: 800; color: var(--ink-3); margin-bottom: var(--s-4); }
      .tower-stats-panel .tsp-title .capsule-sub { font-weight: 600; margin-left: var(--s-2); }
      .tower-stats-panel .tsp-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: var(--s-4) var(--s-6);
      }
      .tower-stats-panel .tsp-cell { min-width: 0; }
      .tower-stats-panel .tsp-k { font-size: 11px; color: var(--ink-6); }
      .tower-stats-panel .tsp-v {
        font-size: 14px; font-weight: 800; color: var(--ink-2);
        font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .tower-stats-panel .tsp-delta { margin-left: var(--s-3); font-size: 11px; font-weight: 800; }
      .tower-stats-panel .tsp-delta.is-up { color: var(--success-solid); }
      .tower-stats-panel .tsp-delta.is-down { color: var(--danger-solid); }
      .tower-stats-panel .tsp-extra { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-3); }
      @media (max-width: 640px) {
        .tower-stats-panel .tsp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      
      .tower-delta-row { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-3); }
      .tower-delta {
        font-size: 10px; font-weight: 800; line-height: 1.5; padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
        font-variant-numeric: tabular-nums; white-space: nowrap;
      }
      
      .tower-delta.is-up { color: #86efac; background: rgba(22,163,74,.22); }
      .tower-delta.is-down { color: #fca5a5; background: rgba(220,38,38,.22); }
      .tower-delta.is-none { color: var(--line-2); background: rgba(148,163,184,.22); }
      .tower-delta-row.compact .tower-delta { font-size: 9px; padding: 0 var(--s-2); }
      
      .tower-stats-panel .tower-delta.is-up { color: #14532d; }
      .tower-stats-panel .tower-delta.is-down { color: #7f1d1d; }
      .tower-stats-panel .tower-delta.is-none { color: var(--ink-6); }
      
      html.theme-dark .tower-stats-panel .tower-delta.is-up { color: #86efac; }
      html.theme-dark .tower-stats-panel .tower-delta.is-down { color: #fca5a5; }
      html.theme-dark .tower-stats-panel .tower-delta.is-none { color: #cbd5e1; }

      .tower-reward-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: var(--s-4); margin: var(--s-1) 0 var(--s-1);
      }
      .tower-reward-cell {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1);
        padding: var(--s-5) var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--surface-2);
        border: 1px solid var(--line-1); border-top: 3px solid var(--line-2);
      }
      .tower-reward-cell .trc-icon { font-size: 15px; line-height: 1; }
      .tower-reward-cell .trc-value {
        font-size: 15px; font-weight: 900; line-height: 1.15; color: var(--ink-2);
        font-variant-numeric: tabular-nums; letter-spacing: -0.2px;
      }
      .tower-reward-cell .trc-label { font-size: 11px; font-weight: 700; color: var(--ink-5); }
      .tower-reward-cell.is-coins { background: var(--warn-soft); border-color: var(--warn-line); border-top-color: var(--warn-strong); }
      .tower-reward-cell.is-coins .trc-value { color: var(--warn-text); }
      .tower-reward-cell.is-white { background: var(--surface-2); border-color: var(--line-1); border-top-color: var(--line-3); }
      .tower-reward-cell.is-white .trc-value { color: var(--ink-4); }
      .tower-reward-cell.is-red { background: var(--danger-soft); border-color: var(--danger-line); border-top-color: var(--danger-solid); }
      .tower-reward-cell.is-red .trc-value { color: var(--danger-text); }
      .tower-reward-cell.is-black { background: var(--surface-3); border-color: var(--line-2); border-top-color: #334155; }
      .tower-reward-cell.is-black .trc-value { color: var(--ink-2); }
      .tower-reward-cell.is-tc { background: var(--warn-soft); border-color: var(--warn-line); border-top-color: #CA8A04; }
      .tower-reward-cell.is-tc .trc-value { color: #A16207; }
      
      .tower-shop-header { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-5); }
      .tower-shop-title { margin-bottom: 0; }
      .tower-shop-balance {
        margin-left: auto; font-size: 13px; font-weight: 700; color: var(--warn-deep);
        background: var(--warn-soft); border: 1px solid var(--warn-line);
        border-radius: var(--r-pill); padding: var(--s-2) var(--s-6);
      }
      
      .tower-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: var(--s-5); }
      .tower-shop-tile {
        position: relative; width: 100%; aspect-ratio: 1 / 1; padding: var(--s-4) var(--s-2) var(--s-9); margin: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
        border-radius: var(--r-lg); background: var(--surface-2);
        border: 1.5px solid var(--line-1); cursor: pointer; font: inherit; color: var(--ink-2);
        box-sizing: border-box; transition: transform 0.15s ease, border-color 0.15s ease;
      }
      .tower-shop-tile:hover { transform: translateY(-2px); border-color: #C9A227; }
      .tower-shop-tile-icon { font-size: 30px; line-height: 1; }
      .tower-shop-tile-name { font-size: 11px; font-weight: 800; line-height: 1.25; text-align: center; color: var(--ink-2); }
      .tower-shop-tile-price {
        position: absolute; left: 0; right: 0; bottom: 5px; text-align: center;
        font-size: 11px; font-weight: 800; color: var(--warn-text);
      }
      
      .tower-shop-tile.is-locked { opacity: 0.5; cursor: not-allowed; }
      .tower-shop-tile.is-locked:hover { transform: none; border-color: var(--line-1); }
      .tower-shop-tile-lock-badge { position: absolute; top: 4px; right: 4px; font-size: 12px; }
      .tower-shop-tile-owned-badge {
        position: absolute; top: 4px; left: 4px; font-size: 9px; font-weight: 800;
        background: rgba(74, 222, 128, 0.92); color: #052e16; border-radius: var(--r-pill); padding: var(--s-1) var(--s-3);
      }
      
      .tower-shop-choice-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-1) 0 var(--s-2); }
      .tower-shop-inline-btn { font-size: 12px; padding: var(--s-2) var(--s-5); height: auto; line-height: 1.6; }
      .tower-shop-inline-btn.mini { font-size: 11px; padding: var(--s-2) var(--s-4); }

      .tower-log-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-2); }
      .tower-log-head, .tower-log-row {
        display: grid; align-items: center; gap: var(--s-4);
        grid-template-columns: 52px 92px 44px minmax(0, 1fr) 86px 18px;
      }
      .tower-log-head {
        font-size: 10px; font-weight: 800; color: var(--ink-6); letter-spacing: 0.4px;
        padding: 0 var(--s-4) var(--s-2); border-bottom: 1px solid var(--line-1);
      }
      .tower-log-head > span { min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }
      .tower-log-head > span:nth-child(2), .tower-log-head > span:nth-child(3) { text-align: right; }
      .tower-log-head > span:nth-child(5) { text-align: right; }
      .tower-log-row {
        font-size: 12px; color: var(--ink-4);
        padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--surface-2); border-left: 3px solid var(--line-2);
      }
      .tower-log-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .tower-log-row .tower-log-cp, .tower-log-row .tower-log-rounds { text-align: right; font-variant-numeric: tabular-nums; }
      .tower-log-row .tower-log-cp.is-outmatched { color: var(--danger-solid); font-weight: 800; }
      .tower-log-row .tower-log-extra { color: var(--ink-6); font-size: 11px; }
      .tower-log-row .tower-log-act { text-align: right; }
      .tower-log-mycp {
        font-size: 11px; font-weight: 800; color: var(--ink-5); background: var(--surface-3);
        border: 1px solid var(--line-1); border-radius: var(--r-pill); padding: var(--s-1) var(--s-5); font-variant-numeric: tabular-nums;
      }
      @media (max-width: 640px) {
        
        .tower-log-head, .tower-log-row { gap: var(--s-3); grid-template-columns: 36px minmax(0, 1fr) 30px 58px 16px; }
        .tower-log-head { font-size: 9px; letter-spacing: 0; }
        .tower-log-head > span:nth-child(4) { display: none; }
        .tower-log-row { font-size: 11px; }
        .tower-log-row .tower-log-extra { order: 9; grid-column: 1 / -1; text-align: left; }
        .tower-log-row .tower-log-extra:empty { display: none; }
      }
      .tower-log-row .tower-log-floor { font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
      .tower-log-row.is-boss { background: linear-gradient(90deg, var(--warn-soft), var(--warn-soft)); border-left-color: #C9A227; border-radius: var(--r-sm); }
      .tower-log-row.is-boss .tower-log-floor { color: var(--warn-text); }
      .tower-log-row.is-loss { background: var(--danger-soft); border-left-color: var(--danger-solid); border-radius: var(--r-sm); }
      .tower-log-row.is-loss .tower-log-floor { color: var(--danger-text); }
      .tower-log-result { text-align: right; font-weight: 700; }
      
      .tower-log-replay-btn {
        border: 0; background: transparent; padding: 0 0 0 var(--s-1); margin: 0; cursor: pointer;
        font-size: 12px; line-height: 1; vertical-align: -1px; opacity: 0.75;
      }
      .tower-log-replay-btn:hover { opacity: 1; transform: scale(1.15); }

      .tower-log-event { font-size: 12px; font-weight: 700; color: var(--rare-solid); background: var(--rare-soft); border: 1px dashed var(--rare-line); border-radius: var(--r-sm); padding: var(--s-3) var(--s-5); }
      .tower-log-event.is-death {
        color: var(--on-solid); border: none; background: linear-gradient(90deg, #7F1D1D, var(--fill-danger) 45%, #7F1D1D);
        box-shadow: 0 3px 10px rgba(185, 28, 28, 0.3); font-size: 12.5px;
      }
      .tower-log-event.is-final { color: #FCA5A5; border: 1px solid #3f1d1d; background: #1A0F12; }
      .tower-log-event.is-start, .tower-log-event.is-cap { color: var(--ink-5); background: var(--surface-3); border: 1px dashed var(--line-2); }
      
      .tower-home-stats { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
      .tower-home-run-line { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; font-size: 13px; color: var(--ink-3); margin-bottom: var(--s-3); }
      .tower-home-floor { font-size: 24px; font-weight: 800; color: var(--ink-2); }

      @media (max-width: 640px) { .tower-choice-grid { gap: var(--s-4); } .tower-tarot-card .tower-tarot-effect { font-size: 9px; } }

      .eq-bag-capacity-head { font-size: 13px; font-weight: 700; color: var(--text-main); padding: var(--s-2) var(--s-1) var(--s-5); }
      .eq-bag-capacity-head.is-full { color: var(--danger-text); }
      .eq-bag-footer-actions { display: flex; gap: var(--s-4); margin-top: var(--s-6); }
      
      .eq-bag-footer-actions .capsule-btn, .eq-bag-footer-actions .home-btn { flex: 1; }
      
      .eq-bag-footer-actions .home-btn + .home-btn { margin-left: 0; }
      
      .eq-bag-footer-cost { font-size: 11px; font-weight: 700; opacity: .62; }
      
      .eq-bag-virtual-viewport { height: 460px; overflow-y: auto; position: relative; border-radius: var(--r-lg); }
      .eq-bag-virtual-spacer { position: relative; width: 100%; }
      .eq-bag-virtual-window { position: absolute; left: 0; right: 0; }
      .eq-bag-virtual-window .eq-bag-grid { margin-bottom: var(--s-5); }

      .eq-mailbox-entry-btn { position: relative; }
      .eq-mailbox-badge {
        position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 var(--s-2);
        border-radius: var(--r-pill); background: var(--brand); color: var(--on-solid); font-size: 11px; font-weight: 800;
        display: flex; align-items: center; justify-content: center; line-height: 1;
      }
      
      @media (max-width: 920px) {

        .topbar .brand {
          flex: 0 1 auto;
          min-width: 96px;          
          max-width: 40vw;
          overflow: hidden;
        }
        .topbar .brand > * { max-width: 100%; height: auto; }
        .topbar .top-actions { min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
        
        .topbar .user-chip {
          min-width: 0;
          max-width: 46vw;
        }
        .topbar .user-chip > * { min-width: 0; }
        
        .topbar #nickname {
          display: inline-block;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
        }

        .eq-bag-footer-actions {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: var(--s-3);
        }
        .eq-bag-footer-actions > * { width: 100%; min-height: 40px; }
        
        .eq-bag-footer-actions > #eqEquipBestBtn { grid-column: 1 / -1; }
        
        .eq-bag-footer-actions .home-btn {
          white-space: normal;
          flex-wrap: wrap;
          padding: var(--s-2) var(--s-4);
          line-height: 1.2;
        }
        .eq-bag-footer-actions .eq-bag-footer-cost { flex-basis: 100%; font-size: 10px; }

      }

      .eq-mailbox-item-row {
        display: flex; align-items: center; gap: var(--s-5); padding: var(--s-4); border: 1px solid var(--surface-4);
        border-radius: var(--r-lg); margin-bottom: var(--s-4);
      }
      .eq-mailbox-item-row .eq-mailbox-item-icon { font-size: 26px; }
      .eq-mailbox-item-row .eq-mailbox-item-info { flex: 1; font-size: 12px; color: var(--text-muted); }

      .eq-recipe-dual-slots { display: flex; gap: var(--s-5); margin: var(--s-5) 0; }
      
      #eqRecipeOverlay .confirm-box { max-height: 88vh; overflow-y: auto; }
      
      .eq-craft-range { font-variant-numeric: tabular-nums; }
      .eq-craft-range-mid { font-size: 10px; color: var(--text-muted); font-weight: 500; margin-left: var(--s-2); }

      .eq-recipe-slot {
        flex: 1; border-radius: var(--r-lg); border: 1.5px solid var(--line-2); background: var(--surface-1);
        padding: var(--s-4); text-align: center;
      }
      .eq-recipe-slot-main { border-color: var(--line-3); }
      .eq-recipe-slot-main.is-ready { border-color: var(--success-solid); box-shadow: 0 0 0 2px #16a34a33; }
      .eq-recipe-slot-main.is-locked { border-style: dashed; border-color: var(--line-2); background: var(--surface-2); }
      .eq-recipe-slot-label { font-size: 10px; font-weight: 800; color: var(--ink-5); margin-bottom: var(--s-2); }
      .eq-recipe-slot-body { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
      .eq-recipe-slot-icon { font-size: 22px; line-height: 1; }
      .eq-recipe-slot-text { font-size: 11px; font-weight: 700; color: var(--text-main); }
      .eq-recipe-slot-status { font-size: 10px; margin-top: var(--s-2); }
      .eq-recipe-slot-main.is-ready .eq-recipe-slot-status { color: var(--success-solid); font-weight: 800; }
      .eq-recipe-slot-main.is-locked .eq-recipe-slot-status { color: var(--danger-text); font-weight: 800; }

      .eq-mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 72px)); gap: var(--s-3); justify-content: flex-start; }
      .eq-mat-tile {
        position: relative; width: 72px; height: 72px; margin: 0 auto; padding: 0;
        display: flex; align-items: center; justify-content: center;
        border-radius: var(--r-lg); background: var(--surface-1); cursor: pointer; font: inherit;
      }
      .eq-mat-tile-icon { font-size: 43px; line-height: 1; }
      
      .eq-mat-famhead {
        display: flex; align-items: center; gap: var(--s-3);
        font-size: 12px; font-weight: 700; color: var(--ink-3);
        margin: var(--s-5) 0 var(--s-4); padding-left: var(--s-4);
        border-left: 3px solid var(--line-2);
      }
      .eq-mat-famhead:first-child { margin-top: 0; }
      .eq-mat-famcount {
        font-size: 10px; font-weight: 700; color: var(--text-muted);
        background: var(--surface-2); border-radius: var(--r-pill); padding: 0 var(--s-3);
      }
      .eq-mat-tile-name {
        position: absolute; top: 3px; right: 3px; max-width: 62%;
        font-size: 9px; font-weight: 700; color: var(--text-main);
        background: rgba(255, 255, 255, 0.88); border-radius: var(--r-xs); padding: 0 var(--s-2); line-height: 1.5;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      
      .eq-mat-tile-lock {
        position: absolute; top: 3px; left: 3px; font-size: 9px; line-height: 1.5;
        background: rgba(255, 255, 255, 0.88); border-radius: var(--r-xs); padding: 0 var(--s-2);
        display: flex; align-items: center; justify-content: center;
      }
      
      .eq-mat-tile-qty {
        position: absolute; right: 3px; bottom: 3px; left: auto; text-align: right;
        max-width: calc(100% - 6px);
        font-size: 11px; font-weight: 800; line-height: 1.45;
        color: var(--on-solid);
        background: rgba(15, 23, 42, 0.82);
        border-radius: var(--r-xs); padding: 0 var(--s-2);
        font-variant-numeric: tabular-nums;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      
      html.theme-dark .eq-mat-tile-qty {
        background: rgba(51, 65, 85, 0.95);
        box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.45);
      }
      
      .eq-mat-tile.is-untiered { border-style: dashed; }

      .ex-listing-icon {
        width: 40px; height: 40px; border-radius: var(--r-md); flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: 22px; line-height: 1; background: var(--surface-2); border: 1.5px solid var(--line-1);
      }

      .ex-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, 84px); gap: var(--s-4); justify-content: flex-start; }
      .ex-catalog-tile {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: var(--s-2); width: 84px; height: 92px; border-radius: var(--r-lg); border: 1.5px solid var(--line-1);
        background: var(--surface-1); cursor: pointer; font: inherit; padding: var(--s-4) var(--s-2) var(--s-3); text-align: center;
        transition: border-color .15s ease;
      }
      .ex-catalog-tile:hover { border-color: var(--line-3); }
      .ex-catalog-tile-name {
        
        font-size: 12px; font-weight: 700; color: var(--text-main); line-height: 1.3;
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }

      .ex-catalog-tile.is-empty { opacity: 1; background: var(--surface-2); }
      .ex-catalog-tile.is-empty .ex-listing-icon,
      .ex-catalog-tile.is-empty .eq-tarot-tile,
      .ex-catalog-tile.is-empty img,
      .ex-catalog-tile.is-empty .ex-catalog-tile-icon {
        opacity: .55; filter: grayscale(.6);
      }
      .ex-catalog-tile.is-empty .ex-catalog-tile-name { color: var(--ink-3); }
      .ex-catalog-tile.is-empty:hover { border-color: var(--line-3); background: var(--surface-1); }
      .ex-catalog-tile.is-empty:hover .ex-listing-icon,
      .ex-catalog-tile.is-empty:hover .ex-catalog-tile-icon { opacity: 1; filter: none; }
      .ex-catalog-tile-stock { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; }
      .ex-catalog-badge { font-size: 9px; font-weight: 800; border-radius: var(--r-pill); padding: var(--s-1) var(--s-3); line-height: 1.5; }
      
      .ex-catalog-badge { padding: 0 var(--s-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
      .ex-catalog-tile-stock { gap: var(--s-1); }
      .ex-catalog-badge.sell { background: var(--success-soft); color: var(--success-solid); }
      .ex-catalog-badge.buy { background: var(--danger-soft); color: var(--brand); }
      
      .ex-catalog-badge.is-empty-tag { background: var(--surface-3); color: var(--ink-5); }

      .ex-detail-row {
        display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-4); align-items: center;
        padding: var(--s-4) var(--s-2); border-bottom: 1px solid var(--surface-3); font-size: 12px;
      }
      .ex-detail-row:last-child { border-bottom: 0; }
      .ex-detail-row-head { font-size: 11px; font-weight: 800; color: var(--text-muted); border-bottom: 1px solid var(--line-1); }
      .ex-detail-row.is-mine { background: var(--surface-2); }

      .gem-inv-tile { flex-direction: column; gap: var(--s-1); border: 2px solid var(--line-1); }
      .gem-inv-tile.is-socketed { border-color: var(--success-solid); }
      .gem-inv-tile-label { position: absolute; left: 2px; right: 2px; bottom: 3px; text-align: center; font-size: 9px; font-weight: 800; color: var(--ink-2); }
      .gem-inv-tile .gem-mini-icon { width: 26px; height: 26px; margin-top: -var(--s-3); }
      
      .gem-inv-tile { position: relative; }
      .gem-inv-badge {
        position: absolute; top: 1px; right: 1px; font-size: 9px; line-height: 1;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
      }
      .gem-inv-badge.is-fav { top: 11px; }

      .gem-toggle-pill {
        flex: 1; padding: var(--s-2) var(--s-3); border: 1.5px solid var(--line-1); border-radius: var(--r-pill);
        background: var(--surface-1); color: var(--text-muted); font-size: 12px; font-weight: 700;
        cursor: pointer; transition: all 0.15s ease;
      }
      .gem-toggle-pill.is-on { border-color: #D98C3D; background: rgba(217,140,61,0.12); color: #D98C3D; }
      .gem-toggle-pill:hover { border-color: var(--info); }

      .gem-btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--s-3);
        height: 32px;
        box-sizing: border-box;
        padding: 0 var(--s-8);
        border-radius: var(--r-sm);
        border: 1px solid #1F2937;
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
        background-color: #1F2937;
        color: var(--on-solid);
        background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
      }
      .gem-btn-primary:hover:not(:disabled) { background-color: var(--brand); border-color: var(--brand); }
      .gem-btn-primary:disabled { background-color: #9CA3AF; border-color: var(--line-3); background-image: none; cursor: not-allowed; opacity: .7; }

      .gem-collider-row { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin: var(--s-7) 0 var(--s-3); }
      .gem-collider-slot {
        width: 84px; height: 84px; border-radius: var(--r-lg); background: #0f172a; border: 1.5px dashed #475569;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
        color: var(--on-dark-2); font-size: 10px; flex: 0 0 auto; cursor: pointer;
      }
      .gem-collider-slot.is-filled { border-style: solid; border-color: var(--accent-orange); background: #1c1408; }
      .gem-collider-slot .gem-mini-icon { width: 30px; height: 30px; }
      .gem-collider-slot-label { font-weight: 800; color: var(--warn-bright); }
      
      .gem-collider-beam {
        flex: 1 1 auto; height: 4px; min-width: 30px; border-radius: var(--r-xs);
        background: repeating-linear-gradient(90deg, var(--accent-orange) 0 8px, transparent 8px 16px);
        background-size: 200% 100%; animation: gemColliderBeamFlow 0.9s linear infinite;
      }
      @keyframes gemColliderBeamFlow { 0% { background-position: 0 0; } 100% { background-position: -32px 0; } }
      .gem-collider-rate { text-align: center; font-size: 13px; font-weight: 800; color: var(--accent-orange); margin: var(--s-2) 0 var(--s-5); }
      .gem-collider-rate .lv { color: #93C5FD; }
      .gem-fodder-picker-head { display: flex; align-items: center; justify-content: space-between; margin: var(--s-3) 0 var(--s-2); }
      .gem-fodder-picker-selectall {
        font-size: 11px; font-weight: 700; color: var(--accent-orange); background: rgba(249,115,22,0.1);
        border: 1px solid rgba(249,115,22,0.35); border-radius: var(--r-sm); padding: var(--s-1) var(--s-5); cursor: pointer;
      }
      .gem-fodder-picker-selectall:hover { background: rgba(249,115,22,0.2); }
      .gem-fodder-picker { max-height: 160px; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin: var(--s-3) 0 var(--s-5); }
      .gem-fodder-picker-tile {
        width: 100%; aspect-ratio: 1; border-radius: var(--r-md); background: var(--surface-1); border: 2px solid var(--line-1);
        display: flex; align-items: center; justify-content: center; cursor: pointer;
      }
      .gem-fodder-picker-tile.is-selected { border-color: var(--accent-orange); box-shadow: 0 0 0 2px rgba(249,115,22,0.3); }
      
      .gem-fodder-picker-tile.has-label { flex-direction: column; gap: var(--s-1); padding-bottom: var(--s-1); }
      .gem-fodder-picker-tile-label { font-size: 9px; font-weight: 700; color: var(--ink-5); line-height: 1; }

      .eq-detail-sockets { display: flex; gap: var(--s-4); margin: var(--s-5) 0; }
      .eq-detail-socket {
        width: 40px; height: 40px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: 16px; flex: 0 0 auto;
      }
      .eq-detail-socket.is-locked { background: rgba(0,0,0,0.08); box-shadow: inset 0 2px 4px rgba(0,0,0,0.25); color: var(--ink-6); cursor: default; }
      .eq-detail-socket.is-empty { background: #2A2A2A; border: 1px dashed var(--brand); box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); animation: gemSocketEmptyBlink 1.6s ease-in-out infinite; }
      .eq-detail-socket.is-filled { background: rgba(0,0,0,0.06); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }
      .eq-detail-socket .gem-mini-icon { width: 22px; height: 22px; }

      .eq-mat-usage-row {
        display: flex; align-items: center; gap: var(--s-5); width: 100%;
        padding: var(--s-4) var(--s-3); border-bottom: 1px dashed var(--surface-4); background: none; border-left: none;
        border-right: none; border-top: none; cursor: pointer; font: inherit; text-align: left;
      }
      .eq-mat-usage-row:last-child { border-bottom: 0; }
      .eq-mat-usage-row:hover { background: var(--surface-2); }
      .eq-mat-usage-row-icon { font-size: 20px; line-height: 1; width: 24px; text-align: center; flex-shrink: 0; }
      .eq-mat-usage-row-main { flex: 1; min-width: 0; }
      .eq-mat-usage-row-title { font-size: 12px; font-weight: 800; color: var(--text-main); }
      .eq-mat-usage-row-sub { font-size: 10.5px; color: var(--ink-5); margin-top: var(--s-1); }
      .eq-mat-usage-row-arrow { font-size: 13px; color: var(--ink-6); flex-shrink: 0; }
      .eq-mat-source-row {
        display: flex; align-items: center; gap: var(--s-5); padding: var(--s-4) var(--s-3); font-size: 12px;
      }
      .eq-mat-source-row-icon { font-size: 20px; line-height: 1; width: 24px; text-align: center; flex-shrink: 0; }
      
      button.eq-mat-source-jump {
        width: 100%; background: none; border: 0; font: inherit; text-align: left;
        cursor: pointer; border-radius: var(--r-sm);
      }
      button.eq-mat-source-jump:hover { background: var(--surface-2); }
      .eq-mat-source-row-arrow { margin-left: auto; color: var(--line-2); flex-shrink: 0; }

      .eq-act-groups .eq-act-wide { grid-column: 1 / -1; }
      .eq-act-groups .eq-act-sep {
        grid-column: 1 / -1;
        height: 1px;
        background: var(--line-1);
        margin: var(--s-1) 0;
        opacity: .7;
      }
      
      .eq-lock-mini {
        display: inline-flex; align-items: center; justify-content: center;
        width: 22px; height: 22px; padding: 0; margin-left: var(--s-2);
        border: 1px solid var(--line-1); border-radius: var(--r-sm); background: transparent;
        color: var(--ink-6); cursor: pointer; vertical-align: middle;
      }
      .eq-lock-mini:hover { border-color: #D98C3D; color: #D98C3D; }
      .eq-lock-mini.is-on { background: #D98C3D1f; border-color: #D98C3D; color: #D98C3D; }

      .eq-slot-detail-pane .pg-row-actions.stack {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--s-4);
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
      }
      .eq-slot-detail-pane .pg-row-actions.stack .home-btn {
        min-height: 32px;
        height: auto;
        white-space: normal;
        line-height: 1.3;
        padding: var(--s-3) var(--s-5);
        text-align: center;
        justify-content: center;
        min-width: 0;      
        overflow-wrap: anywhere;
      }
      
      .eq-slot-detail-pane .pg-row-actions.stack:not(.eq-act-groups) .home-btn:nth-child(3):last-child {
        grid-column: 1 / -1;
      }
      
      @media (max-width: 420px) {
        .eq-slot-detail-pane .pg-row-actions.stack { grid-template-columns: 1fr; }
        .eq-slot-detail-pane .pg-row-actions.stack:not(.eq-act-groups) .home-btn:nth-child(3):last-child { grid-column: auto; }
        
        .eq-slot-detail-pane .pg-row-actions.stack.eq-act-groups .eq-act-wide,
        .eq-slot-detail-pane .pg-row-actions.stack.eq-act-groups .eq-act-sep { grid-column: 1 / -1; }
      }
      
      .view[data-panel="equipment"] .pg-row-actions.stack { gap: var(--s-6); }
      
      .eq-slot-detail-pane { position: relative; width: 440px; text-align: left; }
      .eq-modal-close-x {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1.5px solid var(--line-1);
        background: var(--surface-1);
        color: var(--ink-6);
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        line-height: 1;
      }
      .eq-modal-close-x:hover { background: var(--surface-3); color: var(--ink-4); }

      .eq-reforge-bench { display: flex; gap: var(--s-6); align-items: stretch; flex-wrap: wrap; }
      .eq-reforge-main { flex: 1 1 340px; min-width: 0; }
      .eq-reforge-pool { flex: 0 1 240px; min-width: 200px; }
      .eq-reforge-cols { display: flex; gap: var(--s-4); align-items: flex-start; }
      .eq-reforge-col { flex: 1; min-width: 0; }
      .eq-reforge-col-head {
        text-align: center; font-size: 12px; font-weight: 700; padding: var(--s-3) var(--s-2);
        border-radius: var(--r-sm); margin-bottom: var(--s-3);
        background: var(--pg-chip-bg, rgba(148,163,184,.14)); color: var(--pg-text, inherit);
      }
      .eq-reforge-arrow { align-self: center; font-size: 18px; color: var(--brand); flex: 0 0 auto; padding: 0 var(--s-1); }
      
      .eq-reforge-slot {
        display: flex; align-items: center; gap: var(--s-3);
        min-height: 34px; padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3);
        border-radius: var(--r-sm); font-size: 12px;
        border: 1px solid var(--pg-border, rgba(148,163,184,.3));
        background: var(--pg-box-bg, rgba(148,163,184,.06));
      }
      
      .eq-reforge-slot.is-empty {
        
        text-align: left;
      }
      
      .eq-reforge-slot.is-empty .eq-reforge-slot-val { opacity: .35; font-weight: 400; }
      .eq-reforge-slot.is-empty .eq-reforge-slot-name,
      .eq-reforge-slot.is-empty .eq-reforge-slot-range { opacity: .6; }
      
      .eq-reforge-slot.is-empty .stat-lbar-fill { background: transparent; }

      .eq-reforge-slot.is-stacked {
        display: block; min-height: 0; padding: var(--s-4) var(--s-5);
      }
      .eq-reforge-slot-head { display: flex; align-items: center; gap: var(--s-2); }
      .eq-reforge-slot-name { flex: 1; min-width: 0; font-size: 11px; opacity: .85;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .eq-reforge-slot-valrow {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: var(--s-2); margin: var(--s-1) 0 var(--s-2);
      }
      .eq-reforge-slot-val { font-size: 14px; font-weight: 700; line-height: 1.25; }
      
      .eq-reforge-slot-range {
        font-size: 9px; color: var(--pg-muted, var(--ink-6)); white-space: nowrap; flex: 0 0 auto;
      }
      
      .eq-reforge-slot.is-stacked .stat-lbar-track { width: 100%; }
      .eq-reforge-slot.is-new { border-color: #059669; background: rgba(5,150,105,.10); }
      .eq-reforge-slot.is-locked { border-color: #D98C3D; background: rgba(217,140,61,.10); }

      .eq-reforge-lock {
        flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
        font-size: 13px; line-height: 1; padding: var(--s-1); border-radius: var(--r-xs); opacity: .45;
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 32px; min-height: 32px;
        -webkit-tap-highlight-color: rgba(220,38,38,.15);
      }
      @media (max-width: 720px) {
        .eq-reforge-lock { min-width: 44px; min-height: 44px; font-size: 17px; }
      }
      .eq-reforge-lock:hover { opacity: .8; }
      .eq-reforge-lock.is-on { opacity: 1; }
      .eq-reforge-lock:disabled { cursor: default; opacity: .2; }
      .eq-reforge-cost {
        display: flex; align-items: center; justify-content: center; gap: var(--s-4);
        margin: var(--s-5) 0 var(--s-4); padding: var(--s-4); border-radius: var(--r-sm);
        border: 1px solid var(--pg-border, rgba(148,163,184,.3));
        background: var(--pg-box-bg, rgba(148,163,184,.06)); font-size: 13px;
      }
      .eq-reforge-cost .eq-reforge-stone { font-size: 18px; }
      .eq-reforge-cost.is-short { border-color: var(--danger-solid); background: rgba(220,38,38,.08); }
      
      .eq-reforge-basestats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--s-4);
      }
      
      .eq-reforge-pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-3); }
      .eq-reforge-pool-line { display: flex; flex-direction: column; gap: 1px; font-size: 11px; padding: var(--s-2) var(--s-4);
        border-radius: var(--r-sm); background: var(--pg-box-bg, rgba(148,163,184,.08)); border: 1px solid var(--pg-border, rgba(148,163,184,.25)); }
      .eq-reforge-pool-line span { opacity: .75; }
      .eq-reforge-pool-line b { color: #059669; font-weight: 700; font-size: 13px; }
      .eq-reforge-pool-help { margin-top: var(--s-4); font-size: 11px; opacity: .85; }
      .eq-reforge-pool-help summary { cursor: pointer; font-weight: 700; }
      .eq-reforge-pool-help > div { margin-top: var(--s-2); line-height: 1.6; }
      
      .eq-reforge-bench { container-type: inline-size; }
      @container (max-width: 600px) { .eq-reforge-pool { flex: 1 1 100%; } }
      
      .bt-step { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: 1px dashed var(--pg-border, rgba(148,163,184,.3)); }
      .bt-step:last-of-type { border-bottom: 0; }
      .bt-step-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
      .bt-step-ic.ok { background: #16a34a; } .bt-step-ic.no { background: #dc2626; } .bt-step-ic.wait { background: #cbd5e1; color: #475569; }
      .bt-step-title { font-size: 13px; } .bt-step-sub { font-size: 11px; opacity: .7; margin-top: 1px; }
      .home-btn.bt-step-go { padding: 5px 12px; font-size: 12px; white-space: nowrap; }
      .bt-pick-title { font-weight: 700; margin: var(--s-5) 0 var(--s-3); font-size: 13px; }
      .bt-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-3); }
      button.bt-pick { font: inherit; text-align: left; cursor: pointer; width: auto; display: flex; flex-direction: column; gap: 2px;
        padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--pg-box-bg, #fff); border: 1px solid var(--pg-border, #e5e7eb); color: inherit; }
      button.bt-pick.is-sel { border: 2px solid #dc2626; background: rgba(220,38,38,.07); }
      .bt-pick-name { font-size: 12.5px; font-weight: 700; } .bt-pick-sub { font-size: 11px; opacity: .7; } .bt-pick-sub.bad { color: #b91c1c; opacity: 1; }
      .home-btn.bt-go { width: 100%; margin-top: var(--s-5); }
      .bt-all-nodes > summary { cursor: pointer; font-weight: 700; font-size: 13px; padding: var(--s-3) 0; }
      @media (max-width: 720px) {
        .eq-reforge-pool { flex: 1 1 100%; }
        .eq-reforge-slot { font-size: 11px; padding: var(--s-3) var(--s-3); }
      }
      .eq-forge-enhance-layout { display: flex; gap: var(--s-6); align-items: flex-start; flex-wrap: wrap; }
      .eq-forge-enhance-left { width: 300px; flex-shrink: 0; text-align: left; }
      .eq-forge-enhance-right { flex: 1; min-width: 260px; text-align: left; }
      @media (max-width: 720px) {
        .eq-forge-enhance-left { width: 100%; }
      }
      .eq-forge-enhance-right .eq-bag-grid { margin-top: var(--s-2); }
      .eq-forge-enhance-right .eq-tarot-tile.is-selected {
        outline: 2px solid #eb4747;
        outline-offset: 2px;
      }
      
      .eq-forge-enhance-right .gem-inv-tile.is-selected {
        outline: 2px solid #eb4747;
        outline-offset: 2px;
      }
      .eq-enhance-inline-title { font-size: 15px; font-weight: 800; color: var(--ink-1); margin-bottom: var(--s-5); }
      .eq-enhance-inline-body { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-6); }
      
      .eq-crystal-have {
        margin-left: var(--s-3); font-size: 11px; font-weight: 700;
        color: var(--text-muted); font-variant-numeric: tabular-nums;
      }
      .eq-crystal-have.is-short { color: var(--danger-solid); }

      .eq-enhance-toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-4);
        padding: var(--s-4) var(--s-5);
        border: 1.5px solid var(--line-1);
        border-radius: var(--r-lg);
        margin-bottom: var(--s-4);
        cursor: pointer;
        font-size: 12.5px;
        color: var(--text-main);
      }
      .eq-enhance-toggle-row.is-on { border-color: var(--info); background: var(--info-soft); }
      .eq-enhance-toggle-row .eq-enhance-toggle-switch {
        flex: 0 0 auto;
        width: 34px;
        height: 20px;
        border-radius: var(--r-pill);
        background: var(--surface-4);
        position: relative;
        transition: background 0.15s ease;
      }
      .eq-enhance-toggle-row.is-on .eq-enhance-toggle-switch { background: var(--fill-info); }
      .eq-enhance-toggle-row .eq-enhance-toggle-switch::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--surface-1);
        transition: left 0.15s ease;
      }
      .eq-enhance-toggle-row.is-on .eq-enhance-toggle-switch::after { left: 16px; }
      
      .eq-enhance-arrow.eq-enhance-arrow-mid { color: var(--warn-text); font-weight: 900; }
      .eq-enhance-arrow.eq-enhance-arrow-high { color: var(--danger-solid); font-weight: 900; }
      .eq-enhance-fail-warn-mid {
        color: var(--danger-solid); font-weight: 700; font-size: 12px; margin: -var(--s-1) 0 var(--s-5);
      }
      .eq-enhance-fail-warn-high {
        color: var(--danger-solid); font-weight: 800; font-size: 12.5px; margin: -var(--s-1) 0 var(--s-5);
        display: flex; align-items: center; gap: var(--s-3);
      }
      .eq-enhance-toggle-row.is-forced-highlight {
        border-color: var(--danger-solid);
        animation: eqEnhanceRedPulse 1.4s ease-in-out infinite;
      }
      .eq-enhance-toggle-row.is-forced-highlight.is-on { background: var(--danger-soft); }
      @keyframes eqEnhanceRedPulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
        50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12); }
      }
      
      .eq-enhance-resultbox {
        margin: 0 0 var(--s-5); padding: var(--s-5) var(--s-6); border-radius: var(--r-md);
        background: var(--success-soft); border: 1px solid #86efac;
      }
      .eq-enhance-resultbox.is-fail { background: var(--danger-soft); border-color: var(--danger-line); }
      .eq-enhance-resultbox-head { font-size: 13px; font-weight: 800; color: #166534; }
      .eq-enhance-resultbox.is-fail .eq-enhance-resultbox-head { color: var(--danger-text); }
      .eq-enhance-resultbox-level { font-weight: 800; margin-left: var(--s-2); }
      .eq-enhance-resultbox-body {
        display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-7); margin-top: var(--s-3); font-size: 12px; color: var(--ink-4);
      }
      .eq-enhance-resultbox-body b { color: var(--success-solid); }
      .eq-enhance-resultbox.is-fail .eq-enhance-resultbox-body b { color: var(--danger-text); }

      .pg-diff {
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        background: var(--surface-1);
        padding: var(--s-5) var(--s-6);
      }
      
      .pg-diff.locked {
        background: var(--surface-2);
        opacity: 0.55;
        filter: grayscale(0.65);
      }
      .pg-diff.locked .pg-diff-name { color: var(--ink-6); }
      .pg-diff.current { border-color: var(--primary-line); background: var(--primary-soft); }
      .pg-diff-name { font-size: 13px; font-weight: 800; color: var(--ink-2); }
      .pg-diff-line { margin-top: var(--s-2); font-size: 11px; color: var(--ink-5); line-height: 1.7; }
      .pg-diff-line.rare { color: var(--rare-solid); }

      @media (max-width: 560px) {
        .pg-grid, .pg-grid.two, .pg-grid.wide { grid-template-columns: 1fr; }
        .char-hud-layout { grid-template-columns: 1fr !important; }
        .pg-hero-main { border-right: 0; padding-right: 0; }
        
        .pg-attr-row {
          grid-template-columns: auto 1fr auto;
          grid-template-rows: auto auto auto;
          gap: var(--s-3) var(--s-4);
          padding: var(--s-5) var(--s-1);
        }
        
        .pg-attr-row > .pg-attr-name  { grid-area: 1 / 1 / 2 / 2; }
        .pg-attr-row > .pg-attr-num   { grid-area: 1 / 2 / 2 / 3; }
        .pg-attr-row > .pg-attr-steps { grid-area: 1 / 3 / 2 / 4; justify-self: end; }
        .pg-attr-row > .pg-bar        { grid-area: 2 / 1 / 3 / -1; }
        .pg-attr-row > .pg-attr-desc  { grid-area: 3 / 1 / 4 / -1; margin-top: 0; }
        
        .pg-attr-name, .pg-attr-num { min-width: 0; }
        
        .pg-attr-row .pg-step { width: 38px; height: 38px; font-size: 18px; }
        
        .pg-attr-row .pg-step-input { width: 54px; height: 38px; min-height: 38px; font-size: 15px; }
      }

      .char-hud-layout { grid-template-columns: 40fr 60fr; align-items: start; }
      
      @media (max-width: 1100px) {
        .char-hud-layout { grid-template-columns: 1fr; }
      }

      .hud-stat-bar { margin-bottom: var(--s-6); }
      .hud-stat-bar:last-of-type { margin-bottom: 0; }
      .hud-stat-label {
        font-size: 11px; font-weight: 800; color: #92620c; margin-bottom: var(--s-3);
        display: flex; align-items: center; gap: var(--s-3);
      }
      .hud-max-tag {
        font-size: 10px; font-weight: 800; color: var(--warn-text);
        background: var(--warn-tint); border: 1px solid var(--warn-solid); border-radius: var(--r-pill); padding: var(--s-1) var(--s-4);
      }
      
      .hud-stat-track {
        position: relative; height: 11px;
        clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
        background: #14100c;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, .55);
        overflow: hidden;
      }
      .hud-stat-fill {
        position: absolute; left: 0; top: 0; bottom: 0; min-width: 2px;
        background-size: 220% 100%;
        transition: width .5s ease;
      }
      
      .hud-stat-fill::after {
        content: ""; position: absolute; inset: 0;
        background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 1.5px, transparent 1.5px 10px);
      }
      
      .hud-fill-lava {
        background-image: linear-gradient(90deg, #4a1003, #b22e00, #c97a2a, #b22e00, #4a1003);
        animation: hudFlow 3s linear infinite;
      }
      
      .hud-fill-arcane {
        background-image: linear-gradient(90deg, #1c0a3d, #6d28d9, #b8a4e8, #6d28d9, #1c0a3d);
        animation: hudFlow 3s linear infinite;
      }
      
      .hud-fill-aurum {
        background-image: linear-gradient(90deg, #4a3800, #a5810a, #cbb96e, #a5810a, #4a3800);
        animation: hudFlow 3s linear infinite;
      }
      
      .hud-fill-verdant {
        background-image: linear-gradient(90deg, #032e22, #0b8a5f, #65c9a0, #0b8a5f, #032e22);
        animation: hudFlow 3s linear infinite;
      }
      @keyframes hudFlow {
        0% { background-position: 0% 0; }
        100% { background-position: 220% 0; }
      }
      
      .hud-stat-bar[data-tier="max"] .hud-stat-fill {
        animation: hudFlow 1.3s linear infinite, hudOverflowPulse 1.3s ease-in-out infinite;
        box-shadow: 0 0 9px 2px rgba(220, 166, 0, .55);
      }
      @keyframes hudOverflowPulse {
        0%, 100% { filter: brightness(1) saturate(1); }
        50% { filter: brightness(1.35) saturate(1.2); }
      }
      .hud-stat-value {
        position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
        font-size: 9.5px; font-weight: 800; color: var(--on-solid);
        text-shadow: 0 0 3px #000, 0 0 4px #000;
        font-variant-numeric: tabular-nums;
      }
      
      .hud-rank-tag {
        font-size: 10px; font-weight: 800; border-radius: var(--r-pill); padding: var(--s-1) var(--s-4); margin-left: var(--s-1);
      }
      .hud-rank-tag[data-tier="gold"] { color: var(--warn-text); background: var(--warn-tint); border: 1px solid var(--warn-solid); }
      .hud-rank-tag[data-tier="purple"] { color: var(--rare-text); background: var(--primary-soft); border: 1px solid #a78bfa; }
      .hud-rank-tag[data-tier="blue"] { color: var(--info); background: var(--primary-soft); border: 1px solid #60a5fa; }
      .hud-rank-tag[data-tier="gray"] { color: var(--ink-4); background: var(--surface-3); border: 1px solid var(--line-2); }
      .hud-rank-tag[data-tier="none"] { color: var(--ink-6); background: var(--surface-2); border: 1px dashed var(--line-2); }
      .hud-substat-grid {
        display: grid; grid-template-columns: repeat(2, 1fr);
        gap: var(--s-2) var(--s-7); margin-top: var(--s-7); padding-top: var(--s-6);
        border-top: 1px dashed var(--surface-4);
      }
      .hud-substat-item {
        display: flex; justify-content: space-between; align-items: baseline;
        font-size: 11px; padding: var(--s-2) 0;
      }
      .hud-substat-item .k { color: #8a7a5c; }
      .hud-substat-item .v { font-weight: 800; color: #333; font-variant-numeric: tabular-nums; font-family: var(--font-mecha-num); }

      .tutorial-mask {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        z-index: 10050;
      }
      .tutorial-highlight-hole {
        position: fixed;
        border-radius: var(--r-lg);
        box-shadow: 0 0 0 4px #fbbf24, 0 0 0 9999px rgba(15, 23, 42, 0.55);
        z-index: 10051;
        pointer-events: none;
        transition: all 0.2s ease;
      }
      .tutorial-tip-bubble {
        position: fixed;
        z-index: 10052;
        background: var(--surface-1);
        border-radius: var(--r-md);
        padding: var(--s-5) var(--s-7);
        font-size: 13px;
        color: var(--ink-2);
        box-shadow: var(--sh-3);
        max-width: 220px;
      }

      .next-step-guide-bar {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 3400;
        
        width: 300px;
        max-width: max(200px, calc(100vw - 40px));
        background: linear-gradient(135deg, #1f2937, #111827);
        color: var(--on-solid);
        border-radius: var(--r-lg);
        box-shadow: var(--sh-3);
        padding: var(--s-3) 24px var(--s-3) var(--s-4);
        display: none;
        align-items: center;
        gap: var(--s-3);
        cursor: default;
        animation: nextStepGuideIn 0.25s ease;
      }
      @keyframes nextStepGuideIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .next-step-guide-body {
        display: flex;
        
        align-items: center;
        gap: var(--s-3);
        cursor: pointer;
        flex: 1;
        min-width: 0;
      }
      .next-step-guide-icon { font-size: 14px; flex-shrink: 0; line-height: 1.45; }
      
      .next-step-guide-text {
        font-size: 12px;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
        
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .next-step-guide-arrow { color: var(--danger-solid); font-weight: 700; flex-shrink: 0; line-height: 1.45; }
      .next-step-guide-close {
        position: absolute;
        top: 2px;
        right: 6px;
        background: transparent;
        border: none;
        color: var(--ink-6);
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
        padding: var(--s-2);
      }
      .next-step-guide-close:hover { color: var(--on-solid); }
      @media (max-width: 920px) {
        
        .next-step-guide-bar {
          right: 10px;
          bottom: 10px;

          width: 260px;
          max-width: max(200px, min(260px, calc(100vw - 24px)));
          padding: var(--s-2) var(--s-8) var(--s-2) var(--s-4);
          gap: var(--s-2);
        }
        .next-step-guide-text { font-size: 11.5px; }
        .next-step-guide-icon { font-size: 13px; }
      }
      @media (max-width: 420px) {
        
        .next-step-guide-bar { max-width: max(180px, calc(100vw - 20px)); }
        .next-step-guide-text { font-size: 11px; }
      }
      
      @keyframes nextStepGuidePulse {
        0%, 100% { box-shadow: none; }
        50% { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.6); }
      }
      .next-step-guide-pulse { animation: nextStepGuidePulse 0.3s ease 2; }

      .coach-overlay {
        position: fixed;
        inset: 0;
        z-index: 9500;
        display: none;
        pointer-events: none;
      }
      .coach-overlay.open { display: block; pointer-events: auto; }
      .coach-spotlight {
        position: fixed;
        
        display: none;
        border-radius: var(--r-xl);
        box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.72);
        transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
        pointer-events: none;
        z-index: 1;
      }
      .coach-tooltip {
        position: fixed;
        z-index: 2;
        width: min(310px, 88vw);
        background: var(--surface-1);
        border-radius: var(--r-xl);
        padding: var(--s-9) var(--s-9) var(--s-7);
        box-shadow: var(--sh-4);
        transition: top .28s ease, left .28s ease;
      }
      .coach-tooltip-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 26px;
        height: 26px;
        border: none;
        border-radius: var(--r-pill);
        background: var(--surface-3);
        color: var(--ink-6);
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
      }
      .coach-tooltip-close:hover { background: var(--brand-soft); color: var(--danger-solid); }
      .coach-tooltip-title {
        font-size: 15px;
        font-weight: 800;
        color: var(--ink-1);
        margin: 0 24px var(--s-4) 0;
      }
      .coach-tooltip-text {
        font-size: 13px;
        line-height: 1.65;
        color: var(--ink-4);
        margin-bottom: var(--s-8);
        white-space: pre-line;
      }
      .coach-tooltip-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-5);
      }
      .coach-step-counter { font-size: 11px; color: var(--ink-6); font-weight: 800; letter-spacing: .02em; }
      .coach-tooltip-btns { display: flex; gap: var(--s-4); }
      .coach-btn {
        border: none;
        border-radius: var(--r-pill);
        padding: var(--s-4) var(--s-8);
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
      }
      .coach-btn-prev { background: var(--surface-3); color: var(--ink-4); }
      .coach-btn-prev:disabled { opacity: .4; cursor: not-allowed; }
      .coach-btn-next { background: var(--danger-solid); color: var(--on-solid); }
      
      .coach-btn-do { background: linear-gradient(135deg, var(--fill-info), var(--primary-solid)); color: var(--on-solid); }
      .coach-btn-do:disabled { opacity: .6; cursor: wait; }
      .coach-btn-next:hover { background: var(--fill-danger); }
      
      .coach-hotspot {
        position: fixed;
        z-index: 3;
        display: none;
        border-radius: var(--r-xl);
        cursor: pointer;
        pointer-events: auto;
        background: transparent;
        border: 2px solid rgba(248, 113, 113, 0.95);
        box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.28);
        animation: coachHotspotPulse 1.5s ease-in-out infinite;
        transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
      }
      .coach-hotspot.show { display: block; }
      @keyframes coachHotspotPulse {
        0%, 100% { box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.28); }
        50% { box-shadow: 0 0 0 10px rgba(248, 113, 113, 0.10); }
      }
      
      .coach-action-hint {
        font-size: 12px;
        font-weight: 800;
        color: var(--danger-solid);
        display: none;
      }
      .coach-action-hint.show { display: block; }

      @media (max-width: 920px) {
        .coach-tooltip {
          left: 12px !important;
          right: 12px;
          top: auto !important;
          bottom: calc(14px + env(safe-area-inset-bottom, 0px));
          width: auto !important;
          max-height: 52vh;
          overflow-y: auto;
          transform: none !important;
          padding: var(--s-8) var(--s-8) var(--s-6);
        }
        .coach-tooltip-text { margin-bottom: var(--s-6); }
        .coach-btn { padding: var(--s-5) var(--s-9); font-size: 13px; }
      }

      @media (prefers-reduced-motion: reduce) {
        .coach-spotlight, .coach-tooltip, .coach-hotspot { transition: none; }
        .coach-hotspot { animation: none; }
      }

      .wl-summary {
        max-width: 360px; margin: 14px auto 4px;
        text-align: left;
        border: 1px solid var(--line); border-radius: var(--r-md);
        padding: 12px 14px; background: var(--panel, #fff);
      }
      .wl-sum-hd { font-size: 12px; color: var(--fg-3, #94a3b8); margin-bottom: 8px; }
      .wl-sum-row {
        display: flex; align-items: baseline; gap: 10px;
        padding: 5px 0; font-size: 13px;
      }
      .wl-sum-row > span { flex: 1; min-width: 0; }
      .wl-sum-row > b {
        margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700;
        white-space: nowrap;
      }
      .wl-sum-row em { display: block; font-style: normal; font-size: 11px; color: var(--fg-3, #94a3b8); margin-top: 2px; }
      .wl-sum-row.dim { color: var(--fg-3, #94a3b8); }
      .wl-sum-row.total {
        margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line);
        font-size: 14px; font-weight: 700;
      }
      .wl-sum-tip { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: var(--fg-3, #94a3b8); }

      .tower-boosts {
        margin: var(--s-5) 0;
        padding: var(--s-6);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: var(--raised, rgba(127,127,127,.05));
      }
      .tb-title { font-size: 13px; font-weight: 700; margin-bottom: var(--s-5); }
      .tb-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--s-5);
      }
      .tb-card {
        display: flex; flex-direction: column; gap: 4px;
        padding: var(--s-5) var(--s-6);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: var(--panel, #fff);
      }
      
      .tb-card.on { border-color: var(--ok-line, #86efac); box-shadow: inset 3px 0 0 0 var(--ok, #22c55e); }
      .tb-card-hd { display: flex; align-items: center; gap: 6px; font-size: 13px; }
      .tb-ico { font-size: 15px; line-height: 1; }
      .tb-eff { font-size: 11.5px; color: var(--fg-3, #94a3b8); line-height: 1.5; }
      
      .tb-state {
        margin-top: auto; padding-top: var(--s-4);
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        font-size: 12px; min-height: 30px;
      }
      .tb-on { font-weight: 700; color: var(--ok-fg, #16a34a); }
      .tb-off { color: var(--fg-3, #94a3b8); }
      .tb-hint { color: var(--fg-3, #94a3b8); font-size: 11.5px; }

      .tb-buy {
        margin-left: auto; min-width: 72px; min-height: 26px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 12px; padding: 0 10px;
      }
      .tb-foot {
        margin-top: var(--s-5); font-size: 11.5px; line-height: 1.6;
        color: var(--fg-3, #94a3b8);
      }
      @media (max-width: 720px){
        .tb-grid { grid-template-columns: 1fr; }
      }

      .home-list,
      .task-list {
        display: grid;
        gap: var(--s-5);
      }
      
      .task-list button { min-width: 88px; justify-content: center; }

      .social-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--s-7);
      }

      .social-panel {
        display: grid;
        gap: var(--s-6);
        align-content: start;
      }

      .plot-drawer-backdrop {
        
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        justify-content: flex-start;
        background: rgba(15, 23, 42, 0.38);
        backdrop-filter: blur(4px);
        
        opacity: 0;
        transition: opacity 0.26s ease;
      }
      .plot-drawer-backdrop.open { opacity: 1; }

      .plot-drawer {
        width: min(340px, 92vw);
        max-width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-right: 1px solid var(--line-1);
        box-shadow: var(--sh-4);
        
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
      }
      .plot-drawer-backdrop.open .plot-drawer { transform: translateX(0); }

      @media (max-width: 560px) {
        .plot-drawer { width: 100%; border-right: 0; }
      }
      
      @media (prefers-reduced-motion: reduce) {
        .plot-drawer-backdrop, .plot-drawer { transition: none; }
      }

      .plot-drawer-hero {
        position: relative;
        flex-shrink: 0;
        height: 130px;
        background: linear-gradient(135deg, var(--surface-3), var(--surface-4));
        background-size: cover;
        background-position: center;
        display: grid;
        place-items: center;
        overflow: hidden;
      }
      .plot-drawer-hero-icon {
        font-size: 48px;
        line-height: 1;
        filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.22));
      }
      
      .plot-drawer-hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 72px;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.72));
        pointer-events: none;
      }
      .plot-drawer-hero-caption {
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 11px;
        z-index: 1;
        color: var(--on-solid);
      }
      .plot-drawer-hero-title {
        font-size: 17px;
        font-weight: 800;
        letter-spacing: 0.2px;
        text-shadow: 0 2px 10px rgba(15, 23, 42, 0.5);
      }
      .plot-drawer-hero-sub {
        margin-top: var(--s-2);
        font-size: 11px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.88);
        text-shadow: 0 2px 8px rgba(15, 23, 42, 0.5);
      }
      
      .plot-drawer-close {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: var(--r-pill);
        background: rgba(15, 23, 42, 0.55);
        color: var(--on-solid);
        font-size: 16px;
        cursor: pointer;
        backdrop-filter: blur(6px);
      }
      .plot-drawer-close:hover { background: rgba(15, 23, 42, 0.72); }
      
      .plot-drawer-price {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2;
        padding: var(--s-3) var(--s-6);
        border: 0;
        border-radius: var(--r-pill);
        background: rgba(255, 255, 255, 0.94);
        color: #b7791f;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        box-shadow: var(--sh-3);
        backdrop-filter: blur(6px);
      }
      .plot-drawer-price[disabled] { cursor: default; }

      .plot-drawer-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: var(--s-6) var(--s-7) var(--s-9);
      }

      .plot-drawer-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s-4);
        margin-bottom: var(--s-7);
      }
      .plot-drawer-fact {
        padding: var(--s-5) var(--s-6);
        border: 1px solid var(--line-1);
        border-radius: var(--r-lg);
        background: var(--surface-2);
        min-width: 0;
      }
      .plot-drawer-fact-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--ink-6);
        letter-spacing: 0.3px;
      }
      .plot-drawer-fact-value {
        margin-top: var(--s-2);
        font-size: 14px;
        font-weight: 700;
        color: var(--ink-1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .plot-drawer-fact.wide { grid-column: 1 / -1; }
      .plot-drawer-fact.wide .plot-drawer-fact-value { white-space: normal; }

      .plot-drawer-fact-idwrap { display: flex; flex-direction: column; }
      .plot-drawer-id-pill {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        margin-top: var(--s-2);
        padding: var(--s-2) var(--s-6);
        border-radius: var(--r-pill);
        border: 1px solid var(--warn-line);
        background: linear-gradient(135deg, var(--warn-soft), var(--warn-soft));
        color: #b7791f;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.3px;
      }
      .plot-drawer-id-pill-coord { color: #92702c; font-weight: 700; }

      .plot-drawer-section-title {
        margin: var(--s-8) 0 var(--s-4);
        font-size: 12px;
        font-weight: 800;
        color: var(--ink-6);
        letter-spacing: 1px;
      }

      .plot-settings-card {
        border: 1px solid var(--line-1);
        border-radius: var(--r-xl);
        background: var(--surface-1);
        padding: var(--s-7);
        margin-top: var(--s-5);
        box-shadow: var(--sh-1);
      }
      .plot-settings-card-head {
        display: flex;
        align-items: center;
        gap: var(--s-5);
      }
      .plot-settings-card-icon {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        border-radius: var(--r-lg);
        display: grid;
        place-items: center;
        font-size: 15px;
        background: var(--surface-3);
      }
      .plot-settings-card-icon.warn { background: var(--danger-soft); }
      .plot-settings-card-title-wrap { flex: 1; min-width: 0; }
      .plot-settings-card-title {
        font-size: 13.5px;
        font-weight: 800;
        color: var(--ink-1);
      }
      .plot-settings-card-desc {
        margin-top: var(--s-1);
        font-size: 11px;
        color: var(--ink-6);
        line-height: 1.5;
      }
      .plot-settings-card-body { margin-top: var(--s-6); }
      .plot-settings-status-pill {
        flex: 0 0 auto;
        padding: var(--s-2) var(--s-5);
        border-radius: var(--r-pill);
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
      }
      .plot-settings-status-pill.locked { background: var(--danger-soft); color: var(--danger-solid); }
      .plot-settings-status-pill.unlocked { background: var(--surface-3); color: var(--ink-5); }
      .plot-settings-input, .plot-settings-select {
        width: 100%;
        box-sizing: border-box;
        padding: var(--s-5) var(--s-6);
        border: 1px solid var(--line-1);
        border-radius: var(--r-lg);
        font: inherit;
        font-size: 13px;
        background: var(--surface-2);
        color: var(--ink-1);
        transition: border-color .15s ease, background .15s ease;
      }
      .plot-settings-input:focus, .plot-settings-select:focus {
        outline: none;
        border-color: var(--line-2);
        background: var(--surface-1);
      }
      .plot-settings-row { display: flex; gap: var(--s-4); }
      .plot-settings-select { margin-bottom: var(--s-5); }
      .plot-settings-file-label {
        display: flex;
        align-items: center;
        gap: var(--s-4);
        padding: var(--s-5) var(--s-6);
        border: 1px dashed var(--line-2);
        border-radius: var(--r-lg);
        background: var(--surface-2);
        font-size: 12px;
        color: var(--ink-5);
        cursor: pointer;
        transition: border-color .15s ease, color .15s ease;
      }
      .plot-settings-file-label:hover { border-color: var(--line-3); color: var(--ink-4); }
      .plot-settings-file-label input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
      .plot-settings-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .plot-settings-btn-row { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-5); }

      .plot-power-stats { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
      .plot-power-stat {
        flex: 1;
        min-width: 0;
        padding: var(--s-3) var(--s-1);
        border-radius: var(--r-md);
        background: var(--surface-2);
        text-align: center;
      }
      .plot-power-stat-label { font-size: 10px; color: var(--ink-6); font-weight: 700; }
      .plot-power-stat-value { margin-top: var(--s-1); font-size: 13px; font-weight: 800; color: var(--ink-1); }
      .plot-power-stat.na .plot-power-stat-value { color: var(--line-2); }
      .plot-status-note {
        margin-top: var(--s-5);
        padding: var(--s-4) var(--s-5);
        border-radius: var(--r-lg);
        background: var(--success-soft);
        color: var(--success-text);
        font-size: 12px;
        font-weight: 700;
        text-align: center;
      }

      .social-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: var(--s-4);
      }

      .social-list {
        display: grid;
        gap: var(--s-5);
      }

      .social-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-6);
        padding: var(--s-7);
        border: 1px solid var(--surface-4);
        border-radius: var(--r-md);
        background: var(--surface-1);
      }

      .social-row strong {
        display: block;
      }

      .social-meta {
        margin-top: var(--s-2);
        color: var(--ink-6);
        font-size: 12px;
      }

      .task-section {
        margin-top: var(--s-8);
      }

      .task-section h3 {
        margin-bottom: var(--s-5);
        font-size: 16px;
      }

      .task-tabs {
        display: flex;
        gap: var(--s-3);
        margin-bottom: var(--s-7);
        flex-wrap: wrap;
      }
      .task-tab-btn {
        border: 1px solid var(--border-color);
        background: var(--bg-card);
        color: var(--text-muted);
        border-radius: var(--r-pill);
        padding: var(--s-4) var(--s-8);
        font-size: 13px;
        font-weight: 700;
      }
      .task-tab-btn:hover { background: var(--bg-primary); }
      .task-tab-btn.active {
        background: var(--text-main);
        border-color: var(--text-main);
        
        color: var(--surface-1);
      }
      .tasks-single-col {
        display: flex;
        flex-direction: column;
      }

      .task-panel-card {
        flex: 1;
        min-width: 0;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        box-shadow: var(--shadow-light);
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      .task-panel-scroll {
        padding: var(--s-7);
        max-height: 560px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .task-panel-scroll::-webkit-scrollbar {
        width: 4px;
      }
      .task-panel-scroll::-webkit-scrollbar-track {
        background: transparent;
      }
      .task-panel-scroll::-webkit-scrollbar-thumb {
        background: var(--surface-4);
        border-radius: var(--r-pill);
      }
      .task-panel-scroll::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
      }

      .task-subsection {
        margin-top: var(--s-7);
      }

      .task-fixed-tag {
        display: inline-block;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.6;
        padding: 0 var(--s-3);
        border-radius: var(--r-pill);
        color: var(--ink-6);
        border: 1px solid rgba(148, 163, 184, 0.45);
        vertical-align: middle;
        margin-left: var(--s-2);
      }
      .task-bonus-bar {
        display: flex;
        align-items: center;
        gap: var(--s-5);
        flex-wrap: wrap;
        margin-bottom: var(--s-6);
        padding: var(--s-5) var(--s-6);
        border-radius: var(--r-lg);
        background: rgba(148, 163, 184, 0.10);
        border: 1px dashed rgba(148, 163, 184, 0.45);
      }
      .task-bonus-bar .task-bonus-text {
        font-size: 12px;
        font-weight: 700;
        color: var(--ink-5);
      }
      .task-bonus-bar.done {
        border-style: solid;
        border-color: rgba(34, 197, 94, 0.55);
        background: rgba(34, 197, 94, 0.10);
      }
      .task-bonus-bar .task-progress-wrap {
        flex: 1 1 160px;
      }

      .task-subsection-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--ink-6);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: var(--s-4);
        padding-left: var(--s-1);
      }

      @media (max-width: 900px) {

        .task-panel-scroll {
          max-height: 400px;
        }
      }
      @media (min-width: 901px) and (max-width: 1100px) {
        
      }

      @media (max-width: 760px) {
        
      }

      .sandbox-fullbleed-card {
        padding: 0;
        overflow: hidden;
        height: calc(100vh - 114px);
      }

      .sandbox-myplot-pointer {
        position: absolute;
        z-index: 14;
        display: none;
        align-items: center;
        gap: var(--s-3);
        padding: var(--s-4) var(--s-6) var(--s-4) var(--s-5);
        border-radius: var(--r-pill);
        background: rgba(220, 38, 38, 0.94);
        color: var(--on-solid);
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
        cursor: pointer;
        border: none;
        box-shadow: 0 6px 18px rgba(220, 38, 38, 0.38);
        animation: sandboxMyPlotPointerPulse 1.6s ease-in-out infinite;
        transform: translate(-50%, -50%);
      }
      .sandbox-myplot-pointer.show { display: inline-flex; }
      .sandbox-myplot-pointer-arrow { font-size: 14px; line-height: 1; display: inline-block; }
      @keyframes sandboxMyPlotPointerPulse {
        0%, 100% { box-shadow: 0 6px 18px rgba(220, 38, 38, 0.38); }
        50% { box-shadow: 0 6px 26px rgba(220, 38, 38, 0.62); }
      }
      @media (prefers-reduced-motion: reduce) {
        .sandbox-myplot-pointer { animation: none; }
      }

      .sandbox-map-wrap {
        position: relative;
        border: none;
        border-radius: 0;
        background: var(--surface-1);
        overflow: hidden;
        margin-bottom: 0;
        height: 100%;
      }

      .sandbox-map-topbar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 15;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-6);
        padding: var(--s-7) var(--s-9);
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(226, 232, 240, 0.7);
      }
      .sandbox-map-title {
        display: flex;
        align-items: center;
        gap: var(--s-5);
        min-width: 0;
      }
      .sandbox-map-title-icon {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: var(--r-md);
        background: rgba(255, 255, 255, 0.75);
        color: var(--text-main);
        flex: 0 0 auto;
      }

      .pixel-r-icon {
        display: grid;
        grid-template-columns: repeat(5, 3px);
        grid-template-rows: repeat(7, 3px);
        gap: var(--s-1);
        color: var(--danger-solid);
      }
      .pixel-r-cell {
        width: 3px;
        height: 3px;
        background: transparent;
      }
      .pixel-r-cell.on {
        background: currentColor;
      }
      .sandbox-map-title h2 {
        font-size: 20px;
        line-height: 1.2;
        margin: 0;
      }
      .sandbox-map-topbar-actions {
        display: flex;
        align-items: center;
        gap: var(--s-4);
        flex: 0 0 auto;
      }

      .sandbox-topbar-iconbtn {
        display: inline-flex;
        align-items: center;
        gap: var(--s-3);
        height: 38px;
        padding: 0 var(--s-7);
        border-radius: var(--r-lg);
        border: 1px solid rgba(226, 232, 240, 0.9);
        background: rgba(255, 255, 255, 0.85);
        color: var(--text-main);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: var(--sh-2);
        transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease,
          box-shadow 0.16s ease;
      }
      .sandbox-topbar-iconbtn .nav-icon {
        width: 16px;
        height: 16px;
        display: inline-flex;
        color: inherit;
      }
      .sandbox-topbar-iconbtn:hover {
        background: var(--surface-1);
        border-color: var(--line-2);
      }
      .sandbox-topbar-iconbtn.active {
        background: var(--primary, var(--primary-solid));
        border-color: var(--primary, var(--primary-solid));
        color: var(--on-solid);
        box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
      }
      .sandbox-topbar-iconbtn.active:hover {
        background: var(--primary, var(--primary-solid));
        border-color: var(--primary, var(--primary-solid));
      }

      button, [role="button"], .capsule-btn, .sandbox-map-zoombar, .sandbox-map-zoombar * {
        touch-action: manipulation;
      }
      .sandbox-map-zoombar {
        position: absolute;
        left: 16px;
        bottom: 16px;
        z-index: 15;
        display: flex;
        align-items: center;
        gap: var(--s-4);
        padding: var(--s-3) var(--s-5);
        border-radius: var(--r-pill);
        background: rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(226, 232, 240, 0.7);
        box-shadow: var(--sh-3);
      }
      .sandbox-zoom-circle-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid rgba(148, 163, 184, 0.5);
        background: rgba(255, 255, 255, 0.9);
        color: var(--text-main);
        font-size: 16px;
        line-height: 1;
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: background 0.15s, transform 0.1s;
      }
      .sandbox-zoom-circle-btn:hover {
        background: var(--surface-1);
      }
      .sandbox-zoom-circle-btn:active {
        transform: scale(0.92);
      }
      .sandbox-zoom-label {
        min-width: 38px;
        text-align: center;
        font-size: 12px;
        color: var(--text-sub, var(--ink-5));
        user-select: none;
      }

      .redbox-entry-overlay {
        position: absolute;
        inset: 0;
        z-index: 50;
        pointer-events: none;
        background: #000;
        opacity: 0;
        display: none;
      }
      .redbox-entry-overlay.playing {
        display: block;
        animation: redboxEntryOverlayFade 2600ms ease-in forwards;
      }
      .redbox-entry-overlay.playing::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          radial-gradient(1.6px 1.6px at 22% 32%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
          radial-gradient(1.6px 1.6px at 71% 21%, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
          radial-gradient(2.2px 2.2px at 50% 55%, rgba(255, 255, 255, 0.95) 50%, transparent 51%),
          radial-gradient(1.2px 1.2px at 36% 66%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
          radial-gradient(1.6px 1.6px at 80% 68%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
          radial-gradient(1.2px 1.2px at 61% 41%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
          radial-gradient(1.2px 1.2px at 30% 48%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
          radial-gradient(1.6px 1.6px at 63% 78%, rgba(255, 255, 255, 0.7) 50%, transparent 51%);
        animation: redboxEntryTwinkle 900ms ease-in-out infinite;
      }
      .redbox-entry-overlay.playing::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.95) 0%, rgba(236, 72, 153, 0.55) 32%, transparent 68%);
        opacity: 0;
        animation: redboxEntryFlash 2600ms ease-out forwards;
      }
      @keyframes redboxEntryTwinkle {
        0%, 100% { opacity: 0.35; }
        50% { opacity: 1; }
      }
      @keyframes redboxEntryFlash {
        0%, 38% { opacity: 0; }
        46% { opacity: 1; }
        62% { opacity: 0; }
        100% { opacity: 0; }
      }
      @keyframes redboxEntryOverlayFade {
        0%, 55% { opacity: 1; }
        100% { opacity: 0; }
      }
      #sandboxMapCanvas.redbox-entry-canvas-playing {
        animation: redboxEntryCanvasReveal 2600ms cubic-bezier(0.22, 0.68, 0.32, 1) forwards;
      }
      @keyframes redboxEntryCanvasReveal {
        0% { transform: scale(0.14); filter: grayscale(1) saturate(0) brightness(0.6); }
        55% { transform: scale(0.14); filter: grayscale(1) saturate(0) brightness(1.3); }
        80% { transform: scale(1.05); filter: grayscale(0.2) saturate(0.8) brightness(1.05); }
        100% { transform: scale(1); filter: grayscale(0) saturate(1) brightness(1); }
      }
      @media (prefers-reduced-motion: reduce) {
        
        .redbox-entry-overlay.playing {
          animation: none !important;
          display: none !important;
        }
        #sandboxMapCanvas.redbox-entry-canvas-playing {
          animation: none !important;
          transform: none !important;
          filter: none !important;
        }
      }

      .sandbox-myplots-panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 18;
        width: min(320px, 88vw);
        display: flex;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-left: 1px solid var(--border-color);
        box-shadow: var(--sh-4);
        transform: translateX(100%);
        transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
      }
      .sandbox-myplots-panel.open { transform: translateX(0); }
      @media (prefers-reduced-motion: reduce) {
        .sandbox-myplots-panel { transition: none; }
      }
      .sandbox-myplots-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--s-7) var(--s-7) var(--s-6);
        border-bottom: 1px solid var(--border-color);
        flex: 0 0 auto;
      }
      .sandbox-myplots-panel-header strong {
        font-size: 15px;
        color: var(--text-main);
      }
      .sandbox-myplots-panel-close {
        width: 28px;
        height: 28px;
        border: 1px solid var(--border-color);
        border-radius: var(--r-pill);
        background: var(--surface-1);
        color: var(--ink-5);
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
      }
      .sandbox-myplots-panel-close:hover { background: var(--surface-3); color: var(--ink-2); }
      .sandbox-myplots-list {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: var(--s-4) var(--s-5) var(--s-5);
      }
      
      .sandbox-myplots-row {
        display: flex;
        align-items: center;
        gap: var(--s-5);
        width: 100%;
        text-align: left;
        padding: var(--s-5) var(--s-6);
        margin-bottom: var(--s-4);
        border: none;
        border-left: 4px solid var(--line-3);
        border-radius: var(--r-lg);
        background: rgba(255, 255, 255, 0.55);
        box-shadow: var(--sh-2);
        font: inherit;
        color: var(--text-main);
        cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      }
      .sandbox-myplots-row:last-child { margin-bottom: 0; }
      .sandbox-myplots-row:hover {
        background: rgba(255, 255, 255, 0.8);
        transform: translateY(-1px);
        box-shadow: var(--sh-3);
      }
      .sandbox-myplots-row.tier-10 { border-left-color: #94a3b8; }
      .sandbox-myplots-row.tier-30 { border-left-color: #0e7fb0; }
      .sandbox-myplots-row.tier-50 { border-left-color: #a3690f; }
      .sandbox-myplots-row-icon {
        width: 32px;
        height: 32px;
        border-radius: var(--r-md);
        display: grid;
        place-items: center;
        background: var(--surface-1);
        box-shadow: var(--sh-1);
        flex: 0 0 auto;
        font-size: 16px;
      }
      .sandbox-myplots-row-main { flex: 1 1 auto; min-width: 0; }
      .sandbox-myplots-row-name {
        font-size: 13px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
      }
      .sandbox-myplots-row-sub {
        font-size: 11px;
        color: var(--ink-6);
        margin-top: var(--s-1);
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
      }
      .sandbox-myplots-row-price {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 20px;
        padding: 0 var(--s-3);
        border-radius: var(--r-pill);
        background: rgba(15, 15, 15, 0.72);
        color: var(--on-solid);
        font-size: 10px;
        font-weight: 800;
      }

      .sandbox-mycleanups-section { margin-bottom: var(--s-5); }
      .sandbox-mycleanups-title {
        font-size: 11px;
        font-weight: 700;
        color: var(--warn-text);
        padding: var(--s-1) var(--s-2) var(--s-3);
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
      }
      .sandbox-mycleanup-row {
        display: flex;
        flex-direction: column;
        gap: var(--s-2);
        width: 100%;
        text-align: left;
        padding: var(--s-5) var(--s-6);
        margin-bottom: var(--s-4);
        border: none;
        border-left: 4px solid var(--warn-strong);
        border-radius: var(--r-lg);
        background: rgba(255, 251, 235, 0.72);
        box-shadow: var(--sh-2);
        font: inherit;
        color: var(--text-main);
        cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      }
      .sandbox-mycleanup-row:hover {
        background: rgba(255, 251, 235, 0.92);
        transform: translateY(-1px);
        box-shadow: var(--sh-3);
      }
      .sandbox-mycleanup-row-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-4);
      }
      .sandbox-mycleanup-row-name {
        font-size: 13px;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
      }
      .sandbox-mycleanup-row-eta {
        flex: 0 0 auto;
        font-size: 10px;
        font-weight: 800;
        color: var(--warn-text);
      }
      .sandbox-mycleanup-row-track {
        width: 100%;
        height: 6px;
        border-radius: var(--r-pill);
        background: rgba(217, 119, 6, 0.18);
        overflow: hidden;
      }
      .sandbox-mycleanup-row-fill {
        height: 100%;
        border-radius: var(--r-pill);
        background: linear-gradient(90deg, var(--warn-solid), var(--fill-warn-strong));
        transition: width .3s ease;
      }
      .sandbox-mycleanup-row-pct {
        font-size: 10px;
        color: var(--warn-deep);
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
      }

      @media (max-width: 1279px) {
        
      }

      .sandbox-map-zoom {
        display: flex;
        align-items: center;
        gap: var(--s-4);
        flex: 0 0 auto;
      }

      .sandbox-map-zoom .capsule-btn {
        min-width: 32px;
        padding: 0 var(--s-5);
      }

      .sandbox-map-zoom .nav-icon {
        color: var(--ink-4);
      }

      .sandbox-map-scroll {
        position: relative;
        min-height: 560px;
        height: 100%;
        overflow: hidden;
        background: var(--surface-3);
      }
      #sandboxMapCanvas {
        display: block;
        width: 100%;
        height: 100%;
        cursor: grab;
        touch-action: none;
      }
      .sandbox-map-scroll.dragging #sandboxMapCanvas {
        cursor: grabbing;
      }
      
      .sandbox-map-tooltip {
        position: absolute;
        display: none;
        pointer-events: none;
        z-index: 20;
        max-width: 240px;
        padding: var(--s-3) var(--s-5);
        border-radius: var(--r-sm);
        background: rgba(15, 23, 42, 0.92);
        color: var(--on-solid);
        font-size: 11px;
        line-height: 1.6;
        white-space: pre-line;
      }

      .land-hud {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        
        margin-left: auto;
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-light);
        color: var(--text-main);
        font-size: 12px;
        overflow: hidden;
      }
      .land-hud-bar {
        display: flex;
        align-items: center;
        gap: var(--s-5);
        flex-wrap: wrap;
        padding: var(--s-3) var(--s-5);
      }
      .land-hud-stat {
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        white-space: nowrap;
        color: var(--ink-5);
      }
      .land-hud-stat strong { color: var(--text-main); font-size: 13px; font-weight: 800; }
      .land-hud-spacer { flex: 1 1 auto; }
      .land-hud-btn {
        border: 1px solid var(--border-color);
        background: var(--surface-1);
        color: var(--ink-4);
        border-radius: var(--radius-sm);
        padding: var(--s-2) var(--s-5);
        font: inherit;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
      }
      .land-hud-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--ink-2); }
      .land-hud-btn:disabled { opacity: 0.45; cursor: not-allowed; }
      .land-hud-btn.primary {
        border-color: var(--primary-line);
        background: var(--primary-soft);
        color: var(--primary-text);
      }
      .land-hud-btn.primary:hover:not(:disabled) { background: var(--primary-soft); }

      .wk-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        border-radius: var(--r-xs);
        border: 1px solid currentColor;
        background: var(--surface-1);
        vertical-align: -3px;
        font-size: 11px;
        line-height: 1;
      }
      .wk-badge.is-working { color: var(--success-solid); background: transparent; border-color: transparent; font-size: 13px; }
      .wk-badge.is-hungry { color: var(--warn-strong); background: var(--warn-soft); border-color: var(--warn-line); }
      .wk-badge.is-ready { color: var(--danger-solid); background: var(--danger-soft); border-color: var(--danger-line); }
      .wk-badge.is-ready { animation: wkBadgePulse 1.5s ease-in-out infinite; }
      @keyframes wkBadgePulse {
        0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
        50% { opacity: 0.62; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0); }
      }
      
      @media (prefers-reduced-motion: reduce) {
        .wk-badge { animation: none !important; }
      }
      .wk-badge-legend { display: inline-flex; align-items: center; gap: var(--s-2); }

      .land-hud-float {
        position: absolute;
        left: 50%;
        top: 18px;
        transform: translateX(-50%);
        z-index: 26;
        pointer-events: none;
        padding: var(--s-4) var(--s-8);
        border-radius: var(--r-pill);
        background: rgba(22, 163, 74, 0.92);
        color: var(--on-solid);
        font-size: 14px;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        animation: landHudFloatUp 1.8s ease-out forwards;
      }
      @keyframes landHudFloatUp {
        0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.92); }
        18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
        70% { opacity: 1; transform: translateX(-50%) translateY(-26px) scale(1); }
        100% { opacity: 0; transform: translateX(-50%) translateY(-52px) scale(1); }
      }
      @media (max-width: 760px) {
        .land-hud { font-size: 11px; }
        
      }

      body.sandbox-fullscreen-mode .topbar {
        padding: var(--s-2) var(--s-7);
      }
      
      body.sandbox-fullscreen-mode .pixel-logo {
        transform: scale(0.72);
        transform-origin: left center;
      }
      body.sandbox-fullscreen-mode .brand-title span,
      body.sandbox-fullscreen-mode .clock,
      body.sandbox-fullscreen-mode .online-pill {
        display: none;
      }
      body.sandbox-fullscreen-mode .shell {
        
        grid-template-columns: 58px minmax(0, 1fr);
      }
      body.sandbox-fullscreen-mode .sidebar {
        padding: var(--s-5) var(--s-3);
        gap: var(--s-4);
      }
      body.sandbox-fullscreen-mode .nav-item {
        justify-content: center;
        padding: var(--s-5) var(--s-2);
        gap: 0;
      }
      body.sandbox-fullscreen-mode .nav-label,
      body.sandbox-fullscreen-mode .side-note {
        display: none;
      }
      body.sandbox-fullscreen-mode .content {
        padding: var(--s-5);
      }
      body.sandbox-fullscreen-mode .content-inner {
        width: 100%;
      }
      body.sandbox-fullscreen-mode .section-title p {
        display: none;
      }

      body.sidebar-collapsed .shell {
        
        grid-template-columns: 58px minmax(0, 1fr);
      }
      body.sidebar-collapsed .sidebar {
        padding: var(--s-7) var(--s-3) var(--s-9);
        gap: var(--s-5);
      }
      body.sidebar-collapsed .nav-item {
        justify-content: center;
        padding: var(--s-5) var(--s-2);
        gap: 0;
      }
      body.sidebar-collapsed .nav-label,
      body.sidebar-collapsed .side-note {
        display: none;
      }
      body.sandbox-fullscreen-mode .sandbox-map-scroll {
        max-height: calc(100vh - 200px);
        min-height: calc(100vh - 200px);
      }
      #sandboxMapFullscreenBtn {
        margin-left: var(--s-4);
      }

      .sandbox-map-tile {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border: 1px solid var(--line-1);
        border-radius: var(--r-sm);
        background-color: var(--surface-1);
        background-size: cover;
        background-position: center;
        color: var(--ink-6);
        font-size: 22px;
        cursor: pointer;
      }

      .sandbox-map-tile.tier-small {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        max-width: 50px;
        max-height: 50px;
        background-image: linear-gradient(160deg, #5c2626 0%, #221011 100%);
        background-color: #221011;
        border-color: #7a3a3a;
      }

      .sandbox-map-tile.tier-medium {
        width: 105px;
        height: 105px;
        min-width: 105px;
        min-height: 105px;
        max-width: 105px;
        max-height: 105px;
        font-size: 32px;
        background-image: none;
        background-color: #dbeafe;
        border-color: #93c5fd;
      }

      .sandbox-map-tile.tier-large {
        width: 215px;
        height: 215px;
        min-width: 215px;
        min-height: 215px;
        max-width: 215px;
        max-height: 215px;
        font-size: 56px;
        background-image: none;
        background-color: #fdedc4;
        border-color: #e0b94a;
      }

      .sandbox-map-tile:hover {
        outline: 2px solid #4338ca;
        outline-offset: -2px;
      }

      .sandbox-map-tile.owned-mine {
        outline: 3px solid #f59e0b;
        outline-offset: -3px;
        box-shadow: 0 0 0 1px #fff inset, 0 0 6px rgba(245, 158, 11, 0.6);
        z-index: 1;
      }
      .sandbox-map-tile.owned-mine::after {
        content: "★";
        position: absolute;
        top: 2px;
        right: 2px;
        font-size: 11px;
        color: var(--warn-solid);
        text-shadow: 0 0 2px #fff, 0 0 2px #fff;
      }
      .sandbox-map-tile.owned-other {
        outline: 2px solid #64748b;
        outline-offset: -2px;
        opacity: 0.92;
      }
      
      .sandbox-map-tile.ascended {
        outline: 3px solid #ffd700 !important;
        box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.75), 0 0 0 1px #fff inset;
        z-index: 2;
        animation: ascendedGlowPulse 2s ease-in-out infinite;
      }
      .sandbox-map-tile.ascended::before {
        content: "✨";
        position: absolute;
        top: 2px;
        left: 2px;
        font-size: 12px;
        text-shadow: 0 0 3px #fff, 0 0 3px #fff;
        z-index: 3;
      }
      @keyframes ascendedGlowPulse {
        0%, 100% { box-shadow: 0 0 8px 2px rgba(255, 215, 0, 0.6), 0 0 0 1px #fff inset; }
        50% { box-shadow: 0 0 14px 5px rgba(255, 215, 0, 0.9), 0 0 0 1px #fff inset; }
      }

      .sandbox-map-scroll {
        cursor: grab;
      }
      .sandbox-map-scroll.dragging {
        cursor: grabbing;
        user-select: none;
      }
      
      .sandbox-map-tile.jump-highlight {
        outline: 4px solid #f59e0b !important;
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.45);
        z-index: 5;
        animation: jumpHighlightPulse 0.6s ease-in-out 3;
      }
      @keyframes jumpHighlightPulse {
        0%, 100% { filter: brightness(1); }
        50% { filter: brightness(1.35); }
      }

      .home-row,
      .message-row,
      .task-row {
        padding: var(--s-6) var(--s-7);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        background: var(--bg-card);
      }

      .message-row,
      .task-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-6);
      }

      .task-row.claimable {
        border-color: var(--border-color);
        border-left: 3px solid var(--color-green-text);
        background: var(--bg-card);
        box-shadow: none;
      }

      .task-row.claimed {
        opacity: 0.55;
        background: var(--bg-primary);
      }

      .task-row-stack {
        display: block !important;
      }

      .task-row-top {
        margin-bottom: var(--s-5);
      }

      .task-row-top strong {
        display: block;
        font-size: 14px;
        margin-bottom: var(--s-2);
      }

      .task-row-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-5);
      }

      .task-progress-wrap {
        display: flex;
        flex-direction: column;
        gap: var(--s-2);
        flex: 1;
        min-width: 0;
      }

      .task-progress-text {
        font-size: 11px;
        color: var(--ink-6);
      }

      .home-scroll-box::-webkit-scrollbar,
      .history-modal-list::-webkit-scrollbar {
        width: 7px;
      }

      .home-scroll-box::-webkit-scrollbar-track,
      .history-modal-list::-webkit-scrollbar-track {
        border-radius: var(--r-pill);
        background: var(--surface-3);
      }

      .home-scroll-box::-webkit-scrollbar-thumb,
      .history-modal-list::-webkit-scrollbar-thumb {
        border-radius: var(--r-pill);
        background: linear-gradient(180deg, #c4b5fd, #60a5fa);
      }

      .home-click-title {
        display: inline-flex;
        align-items: center;
        gap: var(--s-4);
        border: 0;
        background: transparent;
        color: var(--ink-1);
        font-size: 16px;
        font-weight: 900;
        cursor: pointer;
        transition: color 0.2s ease;
        padding: 0;
      }

      .home-click-title:hover {
        color: var(--info);
      }

      .home-click-title .view-all {
        color: var(--ink-6);
        font-size: 12px;
        font-weight: 800;
      }

      .history-modal {
        width: min(760px, calc(100vw - 32px));
        max-height: min(760px, calc(100vh - 48px));
        overflow: hidden;
        border-radius: var(--r-xl);
        background: var(--surface-1);
        box-shadow: var(--sh-4);
      }

      .history-modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-6);
        padding: var(--s-9) var(--s-9);
        border-bottom: 1px solid var(--surface-4);
        background: linear-gradient(135deg, var(--surface-2), var(--on-solid));
      }

      .history-modal-head h3 {
        margin: 0;
        color: var(--ink-1);
        font-size: 20px;
        font-weight: 900;
      }

      .history-modal-close {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: var(--r-pill);
        background: var(--surface-3);
        color: var(--ink-4);
        font-size: 20px;
        font-weight: 900;
        cursor: pointer;
      }

      .history-modal-list {
        display: grid;
        gap: var(--s-5);
        max-height: 590px;
        overflow-y: auto;
        padding: var(--s-8) var(--s-9) var(--s-9);
      }

      .house-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: grid;
        place-items: center;
        padding: var(--s-9);
        background: rgba(15, 23, 42, 0.38);
        backdrop-filter: blur(8px);
      }

      .task-progress {
        width: 100%;
        height: 9px;
        overflow: hidden;
        border-radius: var(--r-pill);
        background: var(--line-1);
      }

      .task-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--fill-info), #22c55e);
      }

      @media (max-width: 920px) {
        
        .app {
          height: auto;
          min-height: 100vh;
          overflow: visible;
          grid-template-rows: auto minmax(0, 1fr);
        }

        .topbar {
          min-height: 62px;
          align-items: center;
          flex-direction: row;
          padding: 0 var(--s-8);
        }

        .clock {
          display: none;
        }

        .shell {
          grid-template-columns: 1fr;
          align-content: start;
        }

        .app {
          grid-template-columns: minmax(0, 1fr);
        }

        .shell {
          grid-template-columns: 58px minmax(0, 1fr);
          align-items: start;
          
          min-width: 0;
        }

        .sidebar {
          position: sticky;
          top: 0;
          z-index: 5;
          display: block;
          border-right: 1px solid rgba(220, 38, 38, 0.15);
          border-bottom: 0;
          
          overflow-x: hidden;
          overflow-y: auto;
          
          max-height: calc(100vh - var(--topbar-h, 62px));
          padding: var(--s-3) var(--s-2) var(--s-5);
          white-space: normal;
          -webkit-overflow-scrolling: touch;
        }
        .sidebar::-webkit-scrollbar { width: 0; }

        .sidebar .nav-list {
          display: flex;
          flex-direction: column;
          gap: var(--s-1);
        }

        .sidebar .nav-item {
          width: 100%;
          flex: 0 0 auto;
          min-height: 0;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: var(--s-1);
          padding: var(--s-3) var(--s-1);
          border-radius: var(--r-lg);
          font-size: 9px;
          line-height: 1.15;
          text-align: center;
        }
        .sidebar .nav-item .nav-icon { width: 19px; height: 19px; }
        .sidebar .nav-item .nav-label {
          display: block; width: 100%;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        
        .sidebar .side-note { display: none; }

        .content { min-width: 0; }

        .capsule-head {
          flex-wrap: wrap;
          row-gap: var(--s-3);
        }
        
        .pg-row-actions,
        .home-hero-checkin-entries,
        .eq-bag-footer-actions {
          flex-wrap: wrap;
        }

        .home-hero-checkin-entries .capsule-btn.primary {
          padding: var(--s-3) var(--s-6);
          font-size: 12px;
        }

        .side-note {
          display: none;
        }

        .sidebar-collapse-btn {
          display: none;
        }

        .content {
          padding: var(--s-9) var(--s-7);
        }

        .sandbox-fullbleed-card {
          height: auto;
        }
        .sandbox-map-wrap {
          height: auto;
        }
        .sandbox-map-scroll {
          height: 70vh;
          min-height: 420px;
        }

        .stats-grid,
        .shop-grid,
        .farm-grid,
        .func-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .checkin-draw {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .draw-card {
          height: 230px;
        }

        .home-stats-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

      }

      @media (max-width: 560px) {
        .brand-title {
          display: block;
        }

        .service {
          display: none;
        }

        .clock,
        .online-pill,
        .account-pill,
        .currency-readout,
        .vip-pill {
          display: none;
        }

        .login-card {
          padding: var(--s-9);
        }

        .stats-grid,
        .shop-grid,
        .farm-grid,
        .park-layout,
        .park-market,
        .home-hero,
        .func-grid {
          grid-template-columns: 1fr;
        }

        .home-stats-grid {
          grid-template-columns: 1fr;
        }

        .checkin-draw {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .home-hero,
        .message-row,
        .task-row,
        .home-form {
          align-items: stretch;
          flex-direction: column;
        }

        .nav-item {
          min-height: 26px;
          padding: var(--s-2) var(--s-4);
          gap: var(--s-2);
          font-size: 11px;
        }

        .nav-item .nav-icon {
          width: 14px;
          height: 14px;
        }

        .home-hero-checkin-entries {
          gap: var(--s-3) !important;
        }

        .home-hero-checkin-entries .capsule-btn.primary {
          padding: var(--s-3) var(--s-5);
          font-size: 11px;
        }
      }

      .theme-toggle-btn {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        background: var(--surface-2);
        padding: 0;
        box-shadow: 0 0 8px rgba(210, 39, 48, 0.6);
        position: relative;
        transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      }
      @keyframes themeTogglePulse {
        0%, 100% { box-shadow: 0 0 8px rgba(210, 39, 48, 0.6); }
        50% { box-shadow: 0 0 14px 2px rgba(210, 39, 48, 0.85); }
      }
      .theme-toggle-screen { stroke: #dc2626; fill: none; }
      .theme-toggle-base { stroke: #dc2626; }
      .theme-toggle-dot { fill: #D22730; transition: fill 0.3s ease; }
      
      html.theme-terminal .theme-toggle-btn {
        box-shadow: none;
        animation: none;
        border-color: var(--surface-4);
        background: var(--on-solid);
      }
      html.theme-terminal .theme-toggle-screen,
      html.theme-terminal .theme-toggle-base { stroke: #6B7280; }
      html.theme-terminal .theme-toggle-dot { fill: #6B7280; }

      html.theme-terminal {
        --bg-primary: #F8F9FA;
        --bg-card: #FFFFFF;
        --border-color: #E5E7EB;
        --line: #E5E7EB;
        --text-main: #111827;
        --text-muted: #6B7280;
        --card: #FFFFFF;
        --panel: #FFFFFF;
        --bg: #F8F9FA;
        --text: #111827;
        --muted: #6B7280;
        
        --sidebar-red-deep: #F8F9FA;
        --sidebar-red-light: #FFFFFF;
        --sidebar-fg: #111827;
        --sidebar-fg-muted: #6B7280;
        --sidebar-icon: #4B5563;       
        --content-dark: #F8F9FA;
      }
      
      html.theme-terminal .home-dashboard-light {
        --dash-bg: #F8F9FA;
        --dash-card: #FFFFFF;
        --dash-border: #E5E7EB;
        --dash-text: #111827;
        --dash-muted: #6B7280;
      }

      html.theme-terminal .card,
      html.theme-terminal .pg-box,
      html.theme-terminal .home-dashboard-light .capsule-box {
        border: 1px solid var(--surface-4) !important;
        box-shadow: 0 2px 6px rgba(107, 114, 128, 0.18) !important;
      }
      html.theme-terminal .topbar {
        background: var(--on-solid);
        border-bottom: 1px solid var(--surface-4);
      }
      html.theme-terminal .clock {
        background: var(--on-solid);
        border-color: var(--surface-4);
        color: var(--ink-4);
      }
      
      html.theme-terminal .sandbox-map-wrap {
        background: var(--on-solid);
        border-color: var(--surface-4);
      }
      html.theme-terminal .sandbox-map-scroll {
        background: var(--surface-2);
      }
      
      html.theme-terminal #sandboxMapCanvas {
        filter: grayscale(100%);
        transition: filter 0.3s ease;
      }

      html.theme-terminal .section-title h2,
      html.theme-terminal .pg-hero-value,
      html.theme-terminal .tower-floor-big,
      html.theme-terminal .showcase-slot-tier,
      html.theme-terminal .eq-tarot-tier,
      html.theme-terminal .sandbox-map-title h2 {
        color: var(--brand) !important;
      }

      html.theme-terminal .showcase-slot,
      html.theme-terminal .eq-tarot-tile,
      html.theme-terminal .land-card,
      html.theme-terminal .furnace-item-card,
      html.theme-terminal .currency-icon-yuanbao,
      html.theme-terminal .currency-icon-coins {
        filter: grayscale(100%);
        transition: filter 0.3s ease;
      }
      
      html.theme-terminal .home-hud-fill,
      html.theme-terminal .hud-stat-fill {
        filter: grayscale(100%);
        transition: filter 0.3s ease;
      }

      html.theme-terminal .pg-bar > span,
      html.theme-terminal .hp-bar-fill,
      html.theme-terminal .sub-exp-fill,
      html.theme-terminal .exp-bar > span,
      html.theme-terminal .land-hud-satiety > span {
        filter: grayscale(100%);
        transition: filter 0.3s ease;
      }

      html.theme-terminal .pixel-logo,
      html.theme-terminal .pixel-cell.on {
        filter: none !important;
      }

      html.theme-terminal .currency-icon-tongbao,
      html.theme-terminal .home-btn-danger,
      html.theme-terminal .confirm-ok {
        filter: grayscale(100%);
        transition: filter 0.3s ease;
      }

      html.theme-terminal .hud-mid-box {
        filter: grayscale(100%);
        transition: filter 0.3s ease;
      }

      html.theme-terminal .name-card-regular,
      html.theme-terminal .name-card-premium {
        filter: grayscale(100%);
        transition: filter 0.3s ease;
      }

      html.theme-terminal .pixel-r-icon {
        filter: grayscale(100%);
        transition: filter 0.3s ease;
      }

      html.theme-terminal .redbox-visual-wrap {
        filter: grayscale(100%);
        transition: filter 0.3s ease;
      }

      html.theme-terminal .avatar-picker-emoji,
      html.theme-terminal .avatar-gacha-emoji,
      html.theme-terminal .mbox-item-icon,
      html.theme-terminal .mbox-slot-tile-icon,
      html.theme-terminal .farm-shop-item .item-icon,
      html.theme-terminal .farm-dog-icon,
      html.theme-terminal .farm-emoji,
      html.theme-terminal .bag-item-icon,
      html.theme-terminal .mg-plot-card-icon,
      html.theme-terminal .mg-seed-pick-icon,
      html.theme-terminal .mc-tier-icon,
      html.theme-terminal .eq-slot-tile-icon,
      html.theme-terminal .eq-recipe-slot-icon,
      html.theme-terminal .eq-mat-tile-icon,
      html.theme-terminal .eq-mat-usage-row-icon,
      html.theme-terminal .eq-mat-source-row-icon,
      html.theme-terminal .tower-tarot-icon,
      html.theme-terminal .confirm-icon,
      html.theme-terminal .dropdown-avatar-mini {
        filter: grayscale(100%);
        transition: filter 0.3s ease;
      }

      html.theme-terminal .tower-shop-tile-icon,
      html.theme-terminal .chat-level-icons,
      html.theme-terminal .chat-vip-icon,
      html.theme-terminal .qq-level-icons,
      html.theme-terminal .land-card-icon-circle,
      html.theme-terminal .land-card-icons,
      html.theme-terminal .plot-drawer-hero-icon,
      html.theme-terminal .eq-lock-icon,
      html.theme-terminal .currency-icon-img,
      html.theme-terminal .furnace-icon-flame,
      html.theme-terminal .gem-mini-icon,
      html.theme-terminal .draw-icon,
      html.theme-terminal .home-icon,
      html.theme-terminal .ex-listing-icon,
      html.theme-terminal .profile-rename-icon,
      html.theme-terminal .toast-icon,
      html.theme-terminal .corner-toast-icon,
      html.theme-terminal .big-icon {
        filter: grayscale(100%);
        transition: filter 0.3s ease;
      }

      html.theme-terminal .tt-dyncolor {
        color: var(--ink-4) !important;
      }
      
      html.theme-terminal .tt-dyncolor-box {
        filter: grayscale(100%);
        transition: filter 0.3s ease;
      }

      html.theme-terminal .tt-dynbar {
        filter: grayscale(100%);
      }

      html.theme-terminal .home-btn-primary:hover:not(:disabled),
      html.theme-terminal .gem-btn-primary:hover:not(:disabled) {
        background-color: #111827;
        border-color: #111827;
      }
      html.theme-terminal .home-btn-danger:hover:not(:disabled) {
        background-color: #374151;
        color: var(--on-solid);
      }

      html.theme-terminal .nav-item.active {
        background: #111827;
      }

      .eq-quality-tag {
        display: none;
        margin-left: var(--s-2);
        font-size: 0.9em;
        font-weight: 700;
        color: var(--ink-4);
      }
      html.theme-terminal .eq-quality-tag {
        display: inline;
        
        color: var(--ink-4);
      }

      body,
      .card,
      .pg-box,
      .sidebar,
      .topbar,
      .clock,
      .section-title h2,
      .pg-hero-value {
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      }
      .showcase-slot,
      .eq-tarot-tile,
      .land-card,
      .furnace-item-card,
      .currency-icon-img {
        transition: filter 0.3s ease;
      }

      .header-wallet-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid var(--border-color);
        background: var(--bg-card);
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.2s ease, border-color 0.2s ease;
      }
      .header-wallet-btn:hover {
        border-color: var(--danger-solid);
        background: var(--danger-soft);
      }
      .header-wallet-btn svg { display: block; }

      .wallet-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.35);
        z-index: 900;
        display: flex;
        justify-content: flex-end;
      }
      .wallet-drawer {
        width: min(360px, 92vw);
        
        margin-top: 62px;
        height: calc(100vh - 62px);
        background: var(--bg-card, var(--surface-1));
        box-shadow: var(--sh-3);
        display: flex;
        flex-direction: column;
        animation: walletDrawerSlideIn 0.22s ease-out;
      }
      @keyframes walletDrawerSlideIn {
        from { transform: translateX(100%); }
        to { transform: translateX(0); }
      }
      .wallet-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--s-7) var(--s-8);
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
      }
      .wallet-drawer-tabs {
        display: flex;
        gap: 0;
        padding: 0 var(--s-8);
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
      }
      .wallet-drawer-tab {
        flex: 1;
        text-align: center;
        padding: var(--s-5) 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--ink-6);
        cursor: pointer;
        border-bottom: 2px solid transparent;
      }
      .wallet-drawer-tab.active {
        color: var(--danger-solid);
        border-bottom-color: var(--danger-solid);
      }
      .wallet-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: var(--s-7) var(--s-8);
      }
      .wallet-token-row {
        display: flex;
        align-items: center;
        gap: var(--s-6);
        padding: var(--s-6);
        border: 1px solid var(--border-color);
        border-radius: var(--r-lg);
        margin-bottom: var(--s-5);
      }
      
      .wallet-token-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: var(--danger-soft);
      }
      .wallet-token-icon .currency-icon-img--lg { margin-right: 0; }
      .wallet-token-info { flex: 1; min-width: 0; }
      .wallet-token-name { font-size: 13px; font-weight: 700; color: var(--ink-2); }
      .wallet-token-sub { font-size: 11px; color: var(--ink-6); margin-top: var(--s-1); }
      .wallet-token-balance { font-size: 15px; font-weight: 700; color: var(--ink-2); text-align: right; }
      .wallet-action-row {
        display: flex;
        gap: var(--s-4);
        margin: var(--s-6) 0 var(--s-8);
      }
      .wallet-action-btn {
        flex: 1;
        padding: var(--s-5) 0;
        border-radius: var(--r-lg);
        border: 1px solid var(--border-color);
        background: var(--bg-card);
        font-size: 12px;
        font-weight: 700;
        color: var(--ink-3);
        cursor: pointer;
        text-align: center;
      }
      .wallet-action-btn.primary {
        background: var(--danger-solid);
        color: var(--on-solid);
        border-color: var(--danger-solid);
      }
      .wallet-nft-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-5);
      }
      .wallet-nft-tile {
        border: 1px solid var(--border-color);
        border-radius: var(--r-lg);
        padding: var(--s-5) var(--s-3);
        text-align: center;
        cursor: pointer;
        background: var(--bg-card);
      }
      .wallet-nft-tile:hover { border-color: var(--danger-solid); }
      .wallet-nft-thumb {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: var(--r-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin-bottom: var(--s-3);
      }
      .wallet-nft-name { font-size: 11px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .wallet-nft-sub { font-size: 10px; color: var(--ink-6); margin-top: var(--s-1); }
      .wallet-section-title { font-size: 12px; font-weight: 700; color: var(--ink-5); margin: var(--s-2) 0 var(--s-4); }

      .wallet-nft-thumb[data-terrain] {
        position: relative;
        overflow: hidden;
        color: #fff;
      }
      .wallet-nft-thumb[data-terrain="forest"] { background: linear-gradient(160deg, #3f7a4f 0%, #163a1f 100%); }
      .wallet-nft-thumb[data-terrain="mine"] { background: linear-gradient(160deg, #6b5f50 0%, #241f18 100%); }
      .wallet-nft-thumb[data-terrain="grassland"] { background: linear-gradient(160deg, #8a9c4a 0%, #333f1c 100%); }
      .wallet-nft-thumb[data-terrain="riverside"] { background: linear-gradient(160deg, #3d84a8 0%, #0f2e40 100%); }
      .wallet-nft-thumb[data-terrain="lava"] { background: linear-gradient(160deg, #b0512f 0%, #3a1408 100%); }
      .wallet-nft-thumb[data-terrain="spirit_vein"] { background: linear-gradient(160deg, #6d4fa8 0%, #23163d 100%); }
      
      .wallet-nft-thumb[data-terrain="unknown"] { background: linear-gradient(160deg, #64748b 0%, #1e293b 100%); }
      .wallet-nft-thumb-status-dot {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        box-shadow: 0 0 0 1.5px rgba(255,255,255,.55);
      }
      .wallet-nft-thumb-status-dot.is-active { background: #22c55e; }
      .wallet-nft-thumb-status-dot.is-stored { background: #94a3b8; }

      .fin-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 950;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--s-8);
      }
      .fin-modal {
        
        width: min(440px, 100%);
        max-height: 88vh;
        overflow-y: auto;
        background: var(--surface-1);
        border-radius: var(--r-xl);
        padding: var(--s-9);
        box-shadow: var(--sh-4);
      }
      
      .fin-target-row {
        display: flex;
        align-items: center;
        gap: var(--s-4);
      }
      .fin-target-check-btn {
        flex-shrink: 0;
        border: none;
        border-radius: var(--r-lg);
        padding: var(--s-5) var(--s-7);
        font-size: 12px;
        font-weight: 700;
        color: var(--on-solid);
        background: linear-gradient(135deg, var(--danger-solid), var(--accent-orange));
        cursor: pointer;
      }
      .fin-target-check-btn:disabled { background: var(--surface-4); cursor: not-allowed; }
      .fin-target-result {
        margin-top: var(--s-4);
        border-radius: var(--r-lg);
        padding: var(--s-4) var(--s-5);
        font-size: 12px;
        line-height: 1.6;
      }
      .fin-target-result.error {
        background: var(--danger-soft);
        color: var(--danger-solid);
        border: 1px solid var(--danger-line);
      }
      .fin-target-result.ok {
        background: var(--success-soft);
        color: #166534;
        border: 1px solid var(--success-line);
        display: flex;
        align-items: center;
        gap: var(--s-4);
      }
      
      .fin-target-result.ok .fin-target-avatar .dropdown-avatar-mini {
        width: 28px; height: 28px; font-size: 15px;
      }
      .fin-target-result.ok .fin-target-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--success-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
      }
      .fin-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--s-7);
        gap: var(--s-4);
      }
      .fin-tabs {
        display: flex;
        background: var(--surface-3);
        border-radius: var(--r-pill);
        padding: var(--s-2);
        flex: 1;
        min-width: 0;
      }
      .fin-tab-btn {
        flex: 1;
        border: none;
        background: transparent;
        border-radius: var(--r-pill);
        padding: var(--s-4) var(--s-2);
        font-size: 12px;
        font-weight: 700;
        color: var(--ink-5);
        cursor: pointer;
        white-space: nowrap;
      }
      .fin-tab-btn.active {
        background: var(--surface-1);
        color: var(--danger-solid);
        box-shadow: var(--sh-2);
      }
      .fin-history-btn {
        flex-shrink: 0;
        border: 1px solid var(--line-1);
        background: var(--surface-1);
        border-radius: var(--r-pill);
        padding: var(--s-4) var(--s-5);
        font-size: 11px;
        font-weight: 700;
        color: var(--ink-5);
        cursor: pointer;
      }
      .fin-history-btn:hover { border-color: var(--danger-solid); color: var(--danger-solid); }
      .fin-close-btn {
        flex-shrink: 0;
        border: none;
        background: transparent;
        font-size: 20px;
        line-height: 1;
        color: var(--ink-6);
        cursor: pointer;
        padding: var(--s-2) var(--s-1);
      }
      .fin-card {
        border: 1px solid var(--line-1);
        border-radius: var(--r-xl);
        padding: var(--s-5) var(--s-6);
        background: var(--surface-2);
      }
      .fin-card + .fin-card { margin-top: var(--s-5); }
      .fin-card-label-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 11px;
        color: var(--ink-6);
        margin-bottom: var(--s-3);
      }
      .fin-card-label-row .fin-balance {
        cursor: pointer;
        text-decoration: underline dotted;
      }
      .fin-card-main {
        display: flex;
        align-items: center;
        gap: var(--s-4);
      }
      .fin-currency-btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: var(--s-2);
        border: 1px solid var(--line-1);
        background: var(--surface-1);
        border-radius: var(--r-pill);
        padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3);
        font-size: 13px;
        font-weight: 700;
        color: var(--ink-2);
        cursor: pointer;
      }
      .fin-currency-btn:disabled {
        cursor: not-allowed;
        opacity: 0.55;
      }
      .fin-currency-btn .fin-currency-caret { font-size: 10px; color: var(--ink-6); }
      .fin-amount-input {
        flex: 1;
        min-width: 0;
        border: none;
        background: transparent;
        outline: none;
        text-align: right;
        font-size: 19px;
        font-weight: 800;
        color: var(--ink-2);
        font-family: inherit;
      }
      .fin-amount-input::placeholder { color: var(--line-2); }
      .fin-amount-input:read-only { color: var(--ink-5); }
      .fin-max-chip {
        flex-shrink: 0;
        border: none;
        background: var(--brand-soft);
        color: var(--danger-solid);
        font-size: 11px;
        font-weight: 700;
        border-radius: var(--r-pill);
        padding: var(--s-2) var(--s-4);
        cursor: pointer;
      }
      .fin-swap-mid {
        display: flex;
        justify-content: center;
        margin: -var(--s-3) 0;
        position: relative;
        z-index: 2;
      }
      .fin-swap-arrow-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 3px solid var(--surface-1);
        background: var(--surface-3);
        color: var(--ink-5);
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .fin-swap-arrow-btn:hover { background: var(--danger-line); color: var(--danger-solid); }
      .fin-info-block {
        font-size: 12px;
        color: var(--ink-5);
        line-height: 1.9;
        margin: var(--s-6) 0 var(--s-7);
        padding: 0 var(--s-1);
      }
      .fin-info-row { display: flex; justify-content: space-between; }
      .fin-info-row span:last-child { color: var(--ink-2); font-weight: 600; }
      .fin-submit-btn {
        width: 100%;
        border: none;
        border-radius: var(--r-lg);
        padding: var(--s-6) 0;
        font-size: 15px;
        font-weight: 800;
        color: var(--on-solid);
        background: linear-gradient(135deg, var(--danger-solid), var(--accent-orange));
        cursor: pointer;
      }
      .fin-submit-btn:disabled {
        background: var(--surface-4);
        cursor: not-allowed;
      }
      .fin-note {
        font-size: 11px;
        color: var(--ink-6);
        line-height: 1.7;
        margin-top: var(--s-5);
      }
      
      .fin-buy-qr-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--s-4);
        padding: var(--s-7) var(--s-5);
        border: 1px solid var(--line-1);
        border-radius: var(--r-xl);
        background: var(--surface-2);
      }
      .fin-buy-qr-img {
        width: 180px;
        height: 180px;
        object-fit: contain;
        border-radius: var(--r-lg);
        border: 1px solid var(--line-1);
        background: var(--surface-1);
      }
      .fin-buy-qr-hint {
        font-size: 12px;
        color: var(--danger-solid);
        font-weight: 700;
        text-align: center;
      }

      .fin-buy-tier-title {
        font-size: 12px;
        color: var(--ink-5);
        font-weight: 700;
        margin: var(--s-6) 0 var(--s-3);
      }

      .fin-currency-menu {
        position: absolute;
        
        z-index: 960;
        background: var(--surface-1);
        border: 1px solid var(--line-1);
        border-radius: var(--r-lg);
        box-shadow: var(--sh-3);
        padding: var(--s-3);
        min-width: 150px;
      }
      .fin-currency-menu-item {
        display: flex;
        align-items: center;
        gap: var(--s-4);
        width: 100%;
        border: none;
        background: transparent;
        text-align: left;
        padding: var(--s-4) var(--s-4);
        border-radius: var(--r-md);
        font-size: 13px;
        font-weight: 600;
        color: var(--ink-2);
        cursor: pointer;
      }
      .fin-currency-menu-item:hover { background: var(--surface-3); }
      .fin-currency-menu-item:disabled { color: var(--line-2); cursor: not-allowed; }
      .fin-currency-menu-item .fin-menu-tag {
        margin-left: auto;
        font-size: 10px;
        color: var(--accent-orange);
        font-weight: 700;
      }
      .fin-history-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--s-4) 0;
        border-bottom: 1px solid var(--surface-3);
        font-size: 12px;
      }
      .fin-history-item:last-child { border-bottom: none; }
      .fin-history-dir { font-weight: 700; }
      .fin-history-dir.out { color: var(--danger-solid); }
      .fin-history-dir.in { color: var(--success-solid); }
      .fin-history-meta { color: var(--ink-6); font-size: 11px; margin-top: var(--s-1); }

      html.theme-terminal .shell,
      html.theme-terminal .topbar > *:not(.brand),
      html.theme-terminal > body > .rules-modal-backdrop,
      
      html.theme-terminal body > #toastContainer > *,
      html.theme-terminal body > #notifyContainer > *,
      html.theme-terminal body > .corner-toast-container,
      html.theme-terminal body > .next-step-guide-bar,
      html.theme-terminal body > .lottery-entry-btn,
      html.theme-terminal body > .confirm-overlay,
      html.theme-terminal body > [class*="-modal"],
      html.theme-terminal body > [class*="-backdrop"] {
        filter: grayscale(1);
        
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
      
      html.theme-terminal .topbar .brand,
      html.theme-terminal .topbar .brand * {
        filter: none;
      }

      .sandbox-map-capsule-stack,
      .capsule-head-btns { display: contents; }

      @media (max-width: 920px) {
        
        .topbar .profile-trigger-avatar,
        .topbar #nickname .pname-titles { display: none; }
        
        .topbar .profile-trigger { padding: 0 var(--s-5); gap: var(--s-3); }

        .dropdown-menu {
          width: min(360px, calc(100vw - 16px));
          max-width: calc(100vw - 16px);
        }
        .dropdown-menu, .dropdown-menu * { min-width: 0; }
        .dd-mini-head { flex-wrap: wrap; }
        .dd-mini-head-info { min-width: 0; flex: 1 1 auto; }
        .dd-mini-head-info strong { display: block; overflow-wrap: anywhere; }
        .dd-id-pill { overflow-wrap: anywhere; }

        .home-btn-extra { display: none; }
        
        .capsule-head .home-btn-compact { flex: 0 0 auto; white-space: nowrap; }
        
        .capsule-head-btns {
          display: flex;
          flex: 0 0 auto;
          align-items: center;
          gap: var(--s-3);
        }

        .sandbox-map-title h2 { display: none; }

        .sandbox-map-topbar-actions { align-items: stretch; gap: var(--s-3); }
      }

      .pg-subtabs-wrap.is-plain.is-overflowing::before {
        background: linear-gradient(90deg, var(--bg-card, var(--on-solid)), rgba(255,255,255,0));
        border-radius: 0;
      }
      .pg-subtabs-wrap.is-plain.is-overflowing::after {
        background: linear-gradient(270deg, var(--bg-card, var(--on-solid)), rgba(255,255,255,0));
        border-radius: 0;
      }
      
      .pg-subtabs-wrap.is-plain { margin-bottom: var(--s-7); }
      .pg-subtabs-wrap.is-plain > .task-tabs { margin-bottom: 0; }

      @media (max-width: 920px) {
        .subtab-strip {
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          
          scrollbar-width: none;
        }
        .subtab-strip::-webkit-scrollbar { display: none; }
        .subtab-strip > * { flex: 0 0 auto; }
        .pg-subtabs-wrap.is-overflowing .subtab-strip { padding-left: 30px; padding-right: 30px; }
        .pg-subtabs-wrap.is-overflowing.at-start .subtab-strip { padding-left: var(--s-2); }
        .pg-subtabs-wrap.is-overflowing.at-end .subtab-strip { padding-right: var(--s-2); }
        
        .pg-subtabs-wrap.is-overflowing > .tab-toggle-group { padding-top: var(--s-2); padding-bottom: var(--s-2); }
      }

      .section-title-info {
        display: none;
        width: 18px; height: 18px; margin-left: var(--s-4); padding: 0;
        vertical-align: middle;
        border: 1.5px solid var(--text-muted, var(--line-3));
        border-radius: var(--r-pill);
        background: transparent;
        color: var(--text-muted, var(--ink-6));
        font-size: 12px; font-weight: 900; line-height: 15px;
        text-align: center; cursor: pointer;
        flex: 0 0 auto;
      }
      
      .section-title.desc-open .section-title-info {
        border-color: var(--text-main, #1e293b);
        color: var(--text-main, var(--ink-2));
      }

      @media (max-width: 920px) {
        .section-title-info { display: inline-block; }
        
        .section-title.desc-open .section-title-desc { display: block; }
        .section-title[data-info-ready="1"] .section-title-desc { display: none; }
        .section-title.desc-open .section-title-desc { display: block; }
        
        .section-title[data-info-ready="1"]:not(.desc-open) .big-icon { align-self: center; }
        .section-title { margin-bottom: var(--s-7); }
      }

      .pg-hero-foot.pg-hero-actions {
        display: flex;
        gap: var(--s-5);
        flex-wrap: wrap;
      }

      @media (max-width: 920px) {
        
        .pg-hero { gap: var(--s-6); padding: var(--s-6) var(--s-7); }
        .pg-hero-main {
          flex: 1 1 100%;
          padding-bottom: var(--s-5);
          border-bottom: 1px solid var(--border-color);
        }
        .pg-hero-value { font-size: 26px; }
        
        .pg-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
        .pg-hero-stats .pg-stat .k { font-size: 10px; line-height: 1.35; }
        .pg-hero-foot.pg-hero-actions > * { flex: 1 1 auto; }
      }

      .sandbox-myplots-summary {
        margin: 0 0 var(--s-5);
        padding: var(--s-6) var(--s-7);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg, var(--r-lg));
        background: var(--bg-card, var(--surface-1));
        box-shadow: var(--shadow-light);
      }
      .sandbox-myplots-sum-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--s-5);
      }
      .sandbox-myplots-sum-label {
        font-size: 11px;
        font-weight: 800;
        color: var(--text-muted);
        letter-spacing: 0.06em;
      }
      .sandbox-myplots-sum-total {
        font-size: 26px;
        font-weight: 800;
        line-height: 1.1;
        color: var(--warn-text);
        font-variant-numeric: tabular-nums;
      }
      .sandbox-myplots-sum-mats {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-2) var(--s-3);
        margin-top: var(--s-4);
      }
      .sandbox-myplots-sum-mat {
        padding: var(--s-1) var(--s-4);
        border-radius: var(--r-pill);
        background: rgba(148, 163, 184, 0.14);
        font-size: 11px;
        color: var(--text-main);
        font-variant-numeric: tabular-nums;
      }
      .sandbox-myplots-sum-empty { font-size: 11px; color: var(--text-muted); }
      .sandbox-myplots-sum-sub {
        margin-top: var(--s-4);
        font-size: 11px;
        color: var(--text-muted);
      }
      .sandbox-myplots-sum-actions {
        display: flex;
        gap: var(--s-4);
        margin-top: var(--s-5);
      }
      .sandbox-myplots-sum-actions > * { flex: 1 1 0; min-width: 0; justify-content: center; }

      .home-hero-checkin-entries .capsule-btn.primary.has-pending {
        background: var(--warn-soft);
        border-color: var(--warn-solid);
        color: var(--warn-deep);
      }
      .home-hero-checkin-entries .capsule-btn.primary.has-pending:hover:not(:disabled) {
        background: var(--warn-tint);
        color: var(--warn-deep);
      }
      
      .home-hero-checkin-entries .capsule-btn.primary.has-pending b {
        margin-left: var(--s-1);
        padding: 0 var(--s-3);
        border-radius: var(--r-pill);
        background: var(--warn-solid);
        color: var(--on-warn);
        font-size: 11px;
        font-variant-numeric: tabular-nums;
      }

      .fm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--s-7); }
      .fm-glass {
        position:relative; border-radius:var(--r-xl); padding:var(--s-7) var(--s-8);
        background:linear-gradient(158deg, rgba(255,255,255,.92), rgba(252,250,248,.72));
        border: 1px solid rgba(255,255,255,.95);
        box-shadow:0 10px 28px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.95),
                   0 0 0 1px rgba(148,163,184,.14);
        backdrop-filter:blur(12px) saturate(1.35); -webkit-backdrop-filter:blur(12px) saturate(1.35);
      }
      
      .nav-item[data-view="pet"] { display: none !important; }
      
      html.pet-backend-ready .nav-item[data-view="pet"] { display: flex !important; }

      .rift-board-tabs {
        display: flex; gap: var(--s-3); padding: 0 var(--s-8); border-bottom: 1px solid var(--line-1);
      }
      .rift-board-tabs .pg-subtab-btn { border-radius: var(--r-md) var(--r-md) 0 0; }
      .rift-record-mine {
        margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
        background: var(--primary-soft); font-size: 12.5px; color: var(--text-main);
      }
      
      .rift-record-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
      .rift-record-pager {
        display: flex; align-items: center; justify-content: center; gap: var(--s-6); margin-top: var(--s-5);
      }
      .rift-record-pager .home-btn { padding: var(--s-2) var(--s-6); font-size: 12px; }

      .eq-bag-count {
        display: inline-block; min-width: 16px; padding: 0 var(--s-3); margin-left: var(--s-2);
        border-radius: var(--r-pill); font-size: 10.5px; font-weight: 800; line-height: 16px;
        background: var(--surface-3); color: var(--text-muted);
        font-variant-numeric: tabular-nums;
      }
      .pg-subtab-btn.active .eq-bag-count { background: var(--primary-soft); color: var(--primary); }

      .city-foe-tag {
        display: inline-block; margin-left: var(--s-3); padding: var(--s-1) var(--s-4);
        border-radius: var(--r-pill); font-size: 11px; font-weight: 700;
        background: var(--surface-3); border: 1px solid var(--line-1); color: var(--text-main);
      }
      .city-foe-desc { font-size: 11.5px; color: var(--text-muted); margin: var(--s-2) 0 var(--s-1); }

      html.theme-dark .home-dashboard-light .capsule-head {
        background: var(--surface-2); border-color: var(--line-1);
      }
      html.theme-dark .home-dashboard-light .capsule-title { color: var(--text-main); }
      html.theme-dark .home-dashboard-light .capsule-btn:hover:not(:disabled) {
        background: var(--surface-3); color: var(--text-main);
      }
      
      html.theme-dark .chat-channel-tab.active {
        background: var(--surface-3); border-color: var(--line-1); color: var(--text-main);
      }
      
      html.theme-dark .home-hud-label { color: var(--warn-bright); }
      html.theme-dark .hud-stat-label { color: #fbbf24; }
      
      html.theme-dark .cap-pill.locked { color: var(--text-muted); opacity: 1; }

      html.theme-dark .chat-message { background: var(--surface-1); border-color: var(--line-1); }
      html.theme-dark .chat-message.self { background: #2b3350; border-color: #3c4670; }
      html.theme-dark .chat-messages { border-color: var(--line-1); }
      
      html.theme-dark .home-dashboard-light .cap-pill { background: var(--surface-3); color: var(--ink-3); }
      
      html.theme-dark .cap-rank-self-sticky { background: #3a2c14; color: #f5c877; }
      html.theme-dark .cap-rank-self-sticky .who { color: #f5c877; }
      html.theme-dark .cap-rank-self-sticky .score { color: #fbbf24; }
      
      html.theme-dark .capsule-btn.primary { color: var(--primary-line); }
      html.theme-dark .home-dashboard-light .capsule-btn.primary:hover:not(:disabled) { background: #38406a; }
      
      html.theme-dark .section-title .big-icon { background: var(--surface-3); }
      
      html.theme-dark .sandbox-topbar-iconbtn { background: rgba(35, 40, 48, 0.85); border-color: var(--line-1); }
      html.theme-dark .sandbox-zoom-circle-btn, html.theme-dark .sandbox-zoom-label { background: var(--surface-1); color: var(--ink-2); }
      
      html.theme-dark .tower-shop-tile { background: var(--surface-3); border-color: var(--line-1); }
      html.theme-dark .tower-shop-header, html.theme-dark .tower-shop-title { color: var(--ink-2); }
      
      html.theme-dark .tower-stats-panel { background: var(--surface-3); border-color: var(--line-1); }
      html.theme-dark .tower-log-row { background: var(--surface-3); }
      html.theme-dark .tower-log-mycp { background: var(--surface-1); border-color: var(--line-1); }
      html.theme-dark .tower-reward-cell { background: var(--surface-3); border-color: var(--line-1); }
      html.theme-dark .tower-reward-cell .trc-value { color: var(--ink-1); }
      
      html.theme-dark .sandbox-myplots-panel { background: rgba(28, 32, 39, 0.92); border-color: var(--line-1); }
      html.theme-dark .pg-box.tower-shop-stage { background: var(--surface-1); }

      .chip-card .cc-eff {
        font-size: 10px; line-height: 1.35; font-weight: 700; margin-top: var(--s-1);
        color: var(--warn-text); text-align: center; padding: 0 var(--s-2); word-break: break-word;
      }
      .chip-card.adv .cc-eff { color: var(--warn-solid); }
      html.theme-dark .chip-card .cc-eff { color: #fbbf24; }

      .pet-feed-explain {
        font-size: 12px; line-height: 1.6; color: var(--ink-4);
        background: var(--surface-3); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5);
      }
      .pet-feed-explain b { color: var(--ink-2); }
      .pet-feed-explain .pet-guide-btn { margin-top: var(--s-3); margin-left: 0; display: inline-flex; }
      
      .btn-solid-cta.reward { color: #4a2c02; }

      html.theme-dark .fm-glass {
        background: linear-gradient(158deg, var(--surface-1), var(--surface-2));
        border-color: var(--line-1);
        box-shadow: 0 10px 28px rgba(0,0,0,.38),
                    inset 0 1px 0 rgba(255,255,255,.05),
                    0 0 0 1px rgba(255,255,255,.04);
      }
      
      html.theme-dark .fm-chip { background: rgba(255,255,255,.07); border-color: var(--line-1); }
      html.theme-dark .fm-chip.ok { background: rgba(22,163,74,.18); border-color: rgba(74,222,128,.42); color: #4ade80; }
      
      html.theme-dark .fm-chip.lack { background: rgba(220,38,38,.18); border-color: rgba(248,113,113,.42); color: #fca5a5; }
      
      html.theme-dark .fm-cargo { border-bottom-color: rgba(148,163,184,.24); }
      html.theme-dark .fm-cargo-bar { background: rgba(255,255,255,.11); }
      
      html.theme-dark .fm-cargo-act input { background: var(--surface-2); color: var(--text-main); }
      
      .fm-buff-note { color: var(--warn-deep); }
      html.theme-dark .fm-buff-note { color: #fb923c; }
      
      html.theme-dark .fm-pot {
        background: linear-gradient(165deg, var(--surface-1), var(--surface-2));
        border-color: var(--line-1);
        box-shadow: 0 8px 22px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
      }
      html.theme-dark .fm-pot-sub { color: var(--text-muted); }
      
      html.theme-dark .home-btn:disabled {
        background-color: rgba(255,255,255,.06);
        color: var(--text-muted);
        border-color: var(--line-1);
      }

      .fm-chip {
        display:inline-flex; align-items:center; gap:var(--s-3); font-size:12px; font-weight:600;
        padding:var(--s-2) var(--s-5); border-radius:var(--r-pill); background: rgba(255,255,255,.75);
        border: 1px solid rgba(148,163,184,.28); color: var(--ink-3);
        font-variant-numeric:tabular-nums;
      }
      .fm-chip.ok { border-color: rgba(22,163,74,.35); background: rgba(240,253,244,.9); color: var(--success-text); }
      .fm-chip.lack { border-color: rgba(220,38,38,.35); background: rgba(254,242,242,.9); color: var(--danger-text); }
      .fm-chip .ic { font-size:14px; line-height:1; }

      .fm-ticket { padding-top:var(--s-9); overflow:hidden; display:flex; flex-direction:column; }
      .fm-ticket::before {
        content:""; position:absolute; left:0; right:0; top:0; height:10px;
        background:radial-gradient(circle at 8px -3px, transparent 7px, rgba(148,163,184,.20) 7.5px, transparent 8.5px);
        background-size:16px 10px; background-repeat:repeat-x; opacity:.9;
      }
      .fm-ticket-head { display:flex; align-items:center; gap:var(--s-5); margin-bottom:var(--s-4); }
      .fm-ticket-face {
        width:44px; height:44px; flex:0 0 auto; border-radius:50%;
        display:grid; place-items:center; font-size:24px;
        background:radial-gradient(circle at 32% 28%, var(--on-solid) 0%, var(--surface-3) 55%, var(--surface-4) 100%);
        box-shadow:inset 0 -2px 5px rgba(15,23,42,.10), 0 3px 8px rgba(15,23,42,.10);
      }
      .fm-ticket-name { font-size:13.5px; font-weight:800; color: var(--ink-2); }
      .fm-ticket-line { font-size:11.5px; color: var(--ink-6); margin-top:var(--s-1); }
      .fm-ribbon {
        position:absolute; top:12px; right:-32px; transform:rotate(38deg);
        width:110px; text-align:center; font-size:10.5px; font-weight:800; letter-spacing:.12em;
        padding:var(--s-2) 0; color: var(--ink-4); background:linear-gradient(180deg,var(--surface-3),var(--surface-4));
        box-shadow:var(--sh-2);
      }
      .fm-ticket.tier-elite  .fm-ribbon { color: #fff; background:linear-gradient(180deg,#8b5cf6,#6d28d9); }
      .fm-ticket.tier-legend .fm-ribbon {
        color: #7c2d12; background:linear-gradient(105deg,#fcd34d 30%,#fff7d6 50%,#f59e0b 70%);
        background-size:220% 100%; animation:fmShimmer 2.6s linear infinite;
      }
      .fm-ticket.tier-elite  { box-shadow:0 10px 28px rgba(109,40,217,.16), inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(139,92,246,.28); }
      .fm-ticket.tier-legend { box-shadow:0 10px 30px rgba(217,119,6,.20), inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(245,158,11,.40); }
      @keyframes fmShimmer { from { background-position:0 0; } to { background-position:220% 0; } }
      
      .fm-ticket-reqs { display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; align-content:flex-start; }
      .fm-ticket-reward { font-size:12.5px; color: var(--ink-4); margin-top:var(--s-5); display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; min-height:20px; }
      .fm-ticket-foot { display:flex; gap:var(--s-4); margin-top:var(--s-4); }
      .fm-ticket-foot .home-btn { flex:1; min-width:0; }
      .fm-ticket-timer { font-size:11px; color: var(--ink-6); font-variant-numeric:tabular-nums; }

      .fm-rent-box { margin-bottom:var(--s-7); }
      .fm-rent-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-5); }
      .fm-rent-row { display:flex; align-items:center; gap:var(--s-4); padding:var(--s-4) 0; border-top:1px solid var(--line-soft, rgba(15,23,42,.07)); flex-wrap:nowrap; }
      .fm-rent-row:first-of-type { border-top:0; }
      
      .fm-rent-name { flex:none; font-size:13px; font-weight:600; color:var(--text-main); white-space:nowrap; }
      .fm-rent-left { flex:1; min-width:0; text-align:right; font-size:11.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
      .fm-rent-btn { width:84px; flex:none; padding-left:0; padding-right:0; text-align:center; }
      
      @media (max-width: 560px) {
        .fm-rent-row { display:grid; grid-template-columns:1fr auto; grid-template-areas:"name btn" "left btn"; column-gap:var(--s-4); align-items:center; }
        .fm-rent-name { grid-area:name; }
        .fm-rent-left { grid-area:left; text-align:left; }
        .fm-rent-btn  { grid-area:btn; }
      }

      .fm-stove-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--s-7); margin-bottom:var(--s-7); }
      .fm-pot {
        position:relative; border-radius:var(--r-xl); padding:var(--s-8) var(--s-5) var(--s-6); text-align:center;
        background:linear-gradient(165deg, rgba(255,255,255,.9), rgba(248,246,243,.7));
        border: 1px solid rgba(255,255,255,.9); box-shadow:0 8px 22px rgba(15,23,42,.08), inset 0 1px 0 var(--surface-1);
      }
      .fm-pot-ring {
        width:74px; height:74px; margin:0 auto 8px; border-radius:50%;
        display:grid; place-items:center; font-size:30px; position:relative;
        background:
          radial-gradient(circle at 50% 42%, var(--on-solid) 0 54%, transparent 55%),
          conic-gradient(from 210deg, var(--fill-warn-deep), var(--fill-warn-strong) 25%, var(--fill-warn-bright) 50%, var(--fill-warn-strong) 75%, var(--fill-warn-deep));
        box-shadow:inset 0 2px 6px rgba(120,53,15,.35), 0 4px 12px rgba(120,53,15,.22);
      }
      .fm-pot.is-idle .fm-pot-ring {
        background:radial-gradient(circle at 50% 42%, var(--on-solid) 0 54%, transparent 55%),
                   conic-gradient(var(--surface-4), var(--surface-4), var(--surface-4));
        box-shadow:inset 0 2px 6px rgba(100,116,139,.18);
      }
      .fm-pot.is-idle .fm-pot-ring::after {
        content:""; position:absolute; inset:6px; border-radius:50%; border: 2px dashed var(--line-2);
      }
      .fm-pot.is-ready .fm-pot-ring { animation:fmReady 1.6s ease-in-out infinite; }
      @keyframes fmReady {
        0%,100% { box-shadow:inset 0 2px 6px rgba(120,53,15,.35), 0 0 0 0 rgba(245,158,11,.55); }
        55%     { box-shadow:inset 0 2px 6px rgba(120,53,15,.35), 0 0 0 12px rgba(245,158,11,0); }
      }
      .fm-steam { position:absolute; left:50%; top:-4px; width:0; height:0; pointer-events:none; }
      .fm-steam i {
        position:absolute; bottom:0; left:-4px; width:8px; height:8px; border-radius:50%;
        background: rgba(255,255,255,.9); filter:blur(2.5px); opacity:0;
        animation:fmSteam 2.4s ease-out infinite;
      }
      .fm-steam i:nth-child(2) { left:-12px; animation-delay:.8s; }
      .fm-steam i:nth-child(3) { left:5px;  animation-delay:1.5s; }
      @keyframes fmSteam {
        0% { transform:translateY(0) scale(.7); opacity:0; }
        25% { opacity:.85; }
        100% { transform:translateY(-30px) scale(1.7); opacity:0; }
      }
      .fm-pot-name { font-size:12.5px; font-weight:800; color: var(--ink-3); }
      .fm-pot-sub { font-size:11px; color: var(--ink-6); margin-top:var(--s-1); font-variant-numeric:tabular-nums; }
      
      .fm-recipe-tier { font-size:10.5px; font-weight:800; letter-spacing:.08em; color: var(--warn-text); }
      .fm-buff-pill {
        display:inline-flex; align-items:center; gap:var(--s-3); font-size:12px; font-weight:700;
        color: var(--warn-deep); background:linear-gradient(120deg,var(--warn-soft),var(--warn-tint)); border: 1px solid #fdba74;
        border-radius:var(--r-pill); padding:var(--s-2) var(--s-6);
      }

      .fm-store-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s-7); margin-bottom:var(--s-7); }
      .fm-store-card { display:flex; gap:var(--s-7); align-items:stretch; }
      .fm-building { flex:0 0 64px; position:relative; align-self:center; }
      .fm-silo-body {
        height:96px; border-radius:var(--r-xl) var(--r-xl) var(--r-md) var(--r-md); overflow:hidden; position:relative;
        background:linear-gradient(90deg,var(--danger-soft) 0%, var(--on-solid) 30%, var(--warn-soft) 55%, #d9d0c0 100%);
        box-shadow:inset -6px 0 10px rgba(120,90,40,.12), inset 4px 0 8px rgba(255,255,255,.7), 0 6px 14px rgba(15,23,42,.12);
      }
      .fm-silo-cap {
        height:20px; margin:0 -var(--s-3) -var(--s-4); border-radius:50% 50% 0 0 / 100% 100% 0 0; position:relative; z-index:2;
        background:linear-gradient(180deg,#c2410c,var(--fill-warn-deep)); box-shadow:inset 0 3px 5px rgba(255,255,255,.28);
      }
      .fm-silo-fill {
        position:absolute; left:0; right:0; bottom:0; height:calc(var(--fill,0)*1%);
        background:repeating-linear-gradient(-45deg, var(--fill-warn-bright) 0 6px, var(--warn-solid) 6px 12px);
        box-shadow:inset 0 3px 6px rgba(146,64,14,.35); transition:height .6s ease;
      }
      .fm-silo-fill::before { content:""; position:absolute; left:0; right:0; top:-3px; height:4px;
        background: var(--warn-line); border-radius:50%; }
      .fm-barn-roof {
        height:24px; position:relative; z-index:2; margin:0 -var(--s-4) -var(--s-3);
        clip-path:polygon(0 100%, 50% 0, 100% 100%);
        background:linear-gradient(180deg,var(--danger-solid),var(--fill-danger));
      }
      .fm-barn-body {
        height:78px; border-radius:var(--r-sm) var(--r-sm) var(--r-md) var(--r-md); overflow:hidden; position:relative;
        background:linear-gradient(90deg,var(--warn-soft) 0%, var(--warn-soft) 40%, var(--warn-soft) 100%);
        box-shadow:inset -5px 0 9px rgba(120,90,40,.14), 0 6px 14px rgba(15,23,42,.12);
      }
      .fm-barn-door { position:absolute; left:50%; bottom:0; transform:translateX(-50%);
        width:26px; height:30px; border-radius:var(--r-md) var(--r-md) 0 0; background:linear-gradient(180deg,#a16207,#854d0e);
        box-shadow:inset 0 2px 3px rgba(255,255,255,.25); }
      .fm-store-main { flex:1; min-width:0; display:flex; flex-direction:column; }
      .fm-store-top { display:flex; align-items:baseline; gap:var(--s-4); }
      .fm-store-name { font-size:14px; font-weight:800; color: var(--ink-2); }
      .fm-store-num { margin-left:auto; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
      .fm-store-bar { height:9px; border-radius:var(--r-pill); background: rgba(148,163,184,.20); overflow:hidden; margin:var(--s-4) 0 var(--s-2); }
      .fm-store-bar i { display:block; height:100%; border-radius:var(--r-pill);
        background:linear-gradient(90deg,var(--fill-warn-bright),var(--warn-solid)); transition:width .6s ease; }
      .fm-store-bar.is-full i { background:linear-gradient(90deg,#f87171,var(--danger-solid)); }
      .fm-store-cost { font-size:11.5px; color: var(--ink-5); display:flex; flex-wrap:wrap; gap:var(--s-3); margin:var(--s-3) 0 var(--s-4); }
      
      .up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-top: 0; }
      @media (max-width: 420px) { .up-grid { grid-template-columns: 1fr; } }
      .up-slot { border: 1px solid var(--line-1); border-radius: var(--r-md); padding: var(--s-6);
        display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; background: var(--surface-1); }
      html.theme-dark .up-slot { background: var(--surface-2); }
      .up-slot-head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
      .up-slot-ic { flex: none; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--surface-3);
        display: grid; place-items: center; font-size: 14px; }
      .up-slot-name { font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
      .up-slot-lv { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 800; color: var(--ink-5); font-variant-numeric: tabular-nums; }
      .up-slot-effect { font-size: 13px; color: var(--ink-4); display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
      .up-slot-effect b, .up-slot-effect .new { color: var(--ink-2); font-weight: 800; font-variant-numeric: tabular-nums; }
      .up-slot-effect .new { color: var(--success-solid); }
      .up-slot-effect .arrow { color: var(--ink-6); }
      .up-slot-btn { margin-top: auto; flex: none; }

      .fm-ship { overflow:hidden; padding-bottom:var(--s-9); }
      .fm-ship::after {
        content:""; position:absolute; left:-8px; right:-8px; bottom:-14px; height:26px;
        background:radial-gradient(circle at 10px -6px, transparent 11px, rgba(14,165,233,.28) 11.5px, rgba(56,189,248,.16) 16px, transparent 17px);
        background-size:36px 26px; background-repeat:repeat-x;
      }
      
      .fm-cargo { display:flex; align-items:center; flex-wrap:wrap; column-gap:var(--s-5); row-gap:var(--s-3);
        padding:var(--s-4) 0; border-bottom: 1px dashed rgba(148,163,184,.30); }
      .fm-cargo:last-of-type { border-bottom: 0; }
      .fm-cargo-ic { width:34px; height:34px; flex:0 0 auto; border-radius:var(--r-md); display:grid; place-items:center; font-size:18px;
        background:linear-gradient(160deg,var(--warn-tint),var(--warn-line)); box-shadow:inset 0 -2px 4px rgba(146,64,14,.18); }
      .fm-cargo.done .fm-cargo-ic { background:linear-gradient(160deg,var(--success-soft),var(--success-line)); }
      
      .fm-cargo-main { flex:1 0 150px; min-width:0; }
      .fm-cargo-name { font-size:12.5px; font-weight:700; color: var(--ink-3); display:flex; justify-content:space-between; gap:var(--s-4); }
      
      .fm-cargo-name > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .fm-cargo-name > span:last-child { flex:0 0 auto; }
      .fm-cargo-bar { height:7px; border-radius:var(--r-pill); background: rgba(148,163,184,.18); overflow:hidden; margin-top:var(--s-2); }
      .fm-cargo-bar i { display:block; height:100%; background:linear-gradient(90deg,#38bdf8,#0ea5e9); border-radius:var(--r-pill); transition:width .5s ease; }
      .fm-cargo.done .fm-cargo-bar i { background:linear-gradient(90deg,#4ade80,var(--success-solid)); }
      .fm-cargo-act { display:flex; align-items:center; justify-content:flex-end; gap:var(--s-3); flex:0 0 auto; margin-left:auto; }
      .fm-cargo-act input { text-align:center; }
      .fm-cargo-act input { width:56px; padding:var(--s-2) var(--s-3); border: 1px solid var(--line-1); border-radius:var(--r-md); font-size:12px; }
      
      .fm-cargo-gain { font-variant-numeric: tabular-nums; color:var(--warn-text); font-weight:800; }
      .fm-cargo-warn { font-size:11.5px; line-height:1.5; color:var(--warn-deep); background:var(--warn-soft);
        border:1px solid var(--warn-line); border-radius:var(--r-md); padding:var(--s-3) var(--s-4); margin:var(--s-1) 0 var(--s-3); }
      .fm-quota { display:flex; flex-wrap:wrap; gap:var(--s-5); font-size:11.5px; color: var(--ink-5); margin-top:var(--s-4); }
      .fm-quota b { font-variant-numeric:tabular-nums; }

      .fm-empty { text-align:center; color: var(--ink-6); font-size:13px; padding:26px var(--s-5); }
      .fm-section-note { font-size:12px; color: var(--ink-6); margin:var(--s-1) 0 var(--s-6); }

      @media (max-width:640px) {
        .fm-grid { grid-template-columns:1fr; }
        .fm-stove-row { grid-template-columns:repeat(3,1fr); }
        .fm-pot-ring { width:60px; height:60px; font-size:24px; }
        .fm-store-row { grid-template-columns:1fr; }
      }
      @media (prefers-reduced-motion: reduce) {
        .fm-steam i, .fm-pot.is-ready .fm-pot-ring, .fm-ticket.tier-legend .fm-ribbon { animation:none; }
      }

      .fm-tip-wrap { position:relative; display:inline-flex; vertical-align:2px; margin:0 var(--s-2) 0 var(--s-3); }
      .fm-tip { width:15px; height:15px; border-radius:50%; border: none; cursor:pointer; padding:0; flex:none;
        background: var(--fill-warn-bright); color: var(--warn-deep); font-size:10px; font-weight:900; line-height:15px; text-align:center;
        font-family:inherit; box-shadow:0 1px 2px rgba(120,53,15,.25); }
      .fm-tip:hover { background: var(--warn-solid); }
      .fm-tip-pop { display:none; position:absolute; bottom:calc(100% + 8px); left:-8px; z-index:60;
        width:min(270px,72vw); padding:var(--s-5) var(--s-6); border-radius:var(--r-lg);
        background: rgba(30,41,59,.96); color: var(--on-dark-1); font-size:12px; font-weight:500; line-height:1.7;
        text-align:left; white-space:normal; box-shadow:var(--sh-3); }
      .fm-tip-pop::after { content:""; position:absolute; top:100%; left:var(--fm-arrow,14px);
        border: 6px solid transparent; border-top-color: rgba(30,41,59,.96); }
      .fm-tip-wrap:hover .fm-tip-pop, .fm-tip-wrap.open .fm-tip-pop { display:block; }

      .fm-chip.is-clickable, .fm-cargo-ic.is-clickable, .pg-diff-line.is-clickable { cursor: pointer; }
      .fm-chip.is-clickable:hover { filter: brightness(0.97); }
      .fm-cargo-ic.is-clickable:hover, .pg-diff-line.is-clickable:hover { opacity: 0.78; }

      .exp-mini { margin-top: var(--s-2); }
      .exp-mini-bar {
        height: 3px; border-radius: var(--r-pill); background: rgba(148,163,184,.28); overflow: hidden;
      }
      .exp-mini-bar > i {
        display: block; height: 100%; border-radius: var(--r-pill);
        background: linear-gradient(90deg, #34d399, #10b981);
      }
      .exp-mini-txt { margin-top: var(--s-2); font-size: 10px; color: var(--ink-6); font-weight: 600; }

      .eq-group-head {
        display: flex; align-items: center; gap: var(--s-3);
        margin: var(--s-7) 0 var(--s-4); font-size: 12px; font-weight: 800;
        color: var(--text-main, var(--ink-3)); letter-spacing: .02em;
      }
      .eq-group-head:first-child { margin-top: var(--s-1); }
      .eq-group-head::after {
        content: ""; flex: 1; height: 1px;
        background: linear-gradient(90deg, rgba(148,163,184,.35), transparent);
      }
      .eq-group-count {
        flex: 0 0 auto; min-width: 18px; padding: 0 var(--s-3);
        border-radius: var(--r-pill); background: rgba(148,163,184,.18);
        font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
        color: var(--ink-5);
      }

      .eq-mailbox-item-row.is-recycle {
        border-left: 3px solid var(--warn-solid);
        background: rgba(245, 158, 11, .06);
        
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "icon info" "btns btns";
        align-items: center; gap: var(--s-3) var(--s-5);
        padding: var(--s-5) var(--s-5) var(--s-5) var(--s-4); border-radius: var(--r-md);
      }
      .eq-mailbox-item-row.is-recycle .eq-mailbox-item-icon { grid-area: icon; }
      .eq-mailbox-item-row.is-recycle .eq-mailbox-item-info { grid-area: info; min-width: 0; line-height: 1.6; }
      .eq-mailbox-item-row.is-recycle > span:last-child {
        grid-area: btns; display: flex; gap: var(--s-4); justify-content: stretch;
      }
      .eq-mailbox-item-row.is-recycle > span:last-child .home-btn {
        flex: 1; min-width: 0; white-space: nowrap;
      }

.rift-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-6);
  padding:var(--s-7) var(--s-8);border-radius:var(--r-lg);margin-bottom:var(--s-5);
  background:linear-gradient(135deg,#1b2233,#2a3350);color:var(--on-dark-1);border:1px solid #33405f}
.rift-mutation{display:flex;align-items:center;gap:var(--s-6);min-width:0}
.rift-mut-icon{font-size:30px;line-height:1;flex:0 0 auto}
.rift-mut-name{font-weight:800;font-size:15px}
.rift-mut-desc{font-size:12.5px;opacity:.82;margin-top:var(--s-1)}
.rift-head-right{display:flex;align-items:center;gap:var(--s-7);flex-wrap:wrap;margin-left:auto}
.rift-kv{text-align:right;font-size:12px;opacity:.85;line-height:1.35}
.rift-kv b{display:block;font-size:17px;color:var(--warn-line);font-weight:800}
.rift-note{font-size:12.5px;color:var(--muted,var(--ink-5));margin:0 var(--s-1) var(--s-7);line-height:1.6}

.rift-run-*/.rift-reward-strip)随之删除 ---- */
.rift-dim{color:var(--muted,var(--ink-6));font-size:12px}

.rift-status{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap;padding:var(--s-6) var(--s-7);border-radius:var(--r-lg);
  background:var(--surface2,var(--surface-3));border:1px solid var(--line,var(--surface-4))}
.rift-layer{display:flex;align-items:baseline;gap:var(--s-2);flex:0 0 auto}
.rift-layer-n{font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.rift-layer-t{font-size:13px;color:var(--muted,var(--ink-5))}
.rift-boss-tag{margin-left:var(--s-4);font-size:10.5px;font-weight:800;letter-spacing:.1em;
  background:#7f1d1d;color:var(--on-dark-danger);padding:var(--s-1) var(--s-4);border-radius:var(--r-2xl);align-self:center}
.rift-bars{flex:1 1 210px;min-width:0;display:flex;flex-direction:column;gap:var(--s-3)}
.rift-bar-row{display:flex;align-items:center;gap:var(--s-4);font-size:12px;white-space:nowrap}
.rift-bar-row>span:first-child{flex:0 0 54px;color:var(--muted,var(--ink-5))}
.rift-bar{position:relative;flex:1 1 auto;height:16px;border-radius:var(--r-md);background:rgba(120,130,150,.22);overflow:hidden;min-width:0}
.rift-bar i{display:block;height:100%;border-radius:var(--r-md);transition:width .25s ease}
.rift-bar.hp i{background:linear-gradient(90deg,var(--danger-solid),#f87171)}
.rift-bar.st i{background:linear-gradient(90deg,#0284c7,#38bdf8)}
.rift-bar.mon i{background:linear-gradient(90deg,#7c2d12,var(--accent-orange))}
.rift-bar em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:10.5px;font-weight:700;color:var(--on-solid);text-shadow:0 1px 2px rgba(0,0,0,.55);
  font-variant-numeric:tabular-nums}
.rift-panel-stats{display:flex;gap:var(--s-6);flex-wrap:wrap;font-size:12px;color:var(--muted,var(--ink-5))}
.rift-panel-stats b{color:var(--ink,var(--ink-1));font-variant-numeric:tabular-nums}
.rift-bag{display:flex;gap:var(--s-7);flex-wrap:wrap;padding:var(--s-4) var(--s-7);font-size:12.5px;color:var(--muted,var(--ink-5))}
.rift-bag b{color:var(--ink,var(--ink-1))}
.rift-bag .rift-dim{margin-left:auto}

.rift-stage{margin:var(--s-6) 0}
.rift-stage-title{font-size:14px;font-weight:700;margin-bottom:var(--s-6);text-align:center;line-height:1.7}
.rift-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-5)}
.rift-acts-camp{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
.rift-act{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-7) var(--s-5);border-radius:var(--r-lg);
  border:1px solid var(--line,var(--surface-4));background:var(--surface,var(--on-solid));cursor:pointer;
  font-size:14px;font-weight:700;color:var(--ink,var(--ink-1));transition:transform .12s,box-shadow .12s,border-color .12s}
.rift-act em{font-style:normal;font-size:11px;font-weight:400;color:var(--muted,var(--ink-6))}
.rift-act:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--sh-3);border-color:var(--line-3)}
.rift-act:disabled{opacity:.45;cursor:not-allowed}
.rift-act.atk{border-color:#fca5a5;background:linear-gradient(180deg,var(--danger-soft),var(--surface,var(--on-solid)))}
.rift-act.go{border-color:#93c5fd;background:linear-gradient(180deg,var(--info-soft),var(--surface,var(--on-solid)))}
.rift-act.quit{border-color:var(--line-2)}
.rift-alloc{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s-5)}
.rift-alloc-btn{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-8) var(--s-5);border-radius:var(--r-lg);
  border:1px solid #c4b5fd;background:linear-gradient(180deg,var(--rare-soft),var(--surface,var(--on-solid)));cursor:pointer;
  font-size:14px;color:var(--ink,var(--ink-1));transition:transform .12s,box-shadow .12s}
.rift-alloc-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px rgba(109,40,217,.16)}
.rift-alloc-btn:disabled{opacity:.5;cursor:not-allowed}
.rift-alloc-icon{font-size:24px;line-height:1}
.rift-alloc-btn em{font-style:normal;font-size:11px;color:var(--rare-solid);font-weight:700}

.rift-monster{padding:var(--s-7);border-radius:var(--r-lg);margin-bottom:var(--s-7);
  border:1px solid #fdba74;background:linear-gradient(180deg,var(--warn-soft),var(--surface,var(--on-solid)))}
.rift-monster.boss{border-color:#f87171;background:linear-gradient(180deg,var(--danger-soft),var(--surface,var(--on-solid)))}
.rift-mon-name{font-size:16px;font-weight:800;margin-bottom:var(--s-4)}

.rift-end{text-align:center;padding:24px var(--s-6)}
.rift-end-icon{font-size:46px;line-height:1}
.rift-end-title{font-size:19px;font-weight:800;margin:var(--s-3) 0 var(--s-1)}
.rift-end-score{font-size:40px;font-weight:800;color:#c2410c;margin:var(--s-7) 0 var(--s-2);font-variant-numeric:tabular-nums}
.rift-end-score span{font-size:15px;color:var(--muted,var(--ink-6));font-weight:400}

.rift-log{max-height:230px;overflow-y:auto;border:1px solid var(--line,var(--surface-4));border-radius:var(--r-lg);padding:var(--s-2) 0;
  background:var(--surface2,var(--surface-2))}
.rift-log-row{display:flex;gap:var(--s-4);align-items:baseline;padding:var(--s-3) var(--s-6);font-size:12.5px;line-height:1.6;
  border-bottom:1px solid rgba(120,130,150,.10)}
.rift-log-row:last-child{border-bottom:none}
.rift-log-row>span:first-child{flex:0 0 auto}
.rift-log-row em{font-style:normal;flex:0 0 34px;font-size:10.5px;color:var(--muted,var(--ink-6));font-variant-numeric:tabular-nums}

.rift-board-row{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-5) var(--s-5);border-radius:var(--r-md);font-size:13px}

.rank-avatar{display:inline-flex;flex:0 0 auto;line-height:0}
.rank-avatar .dropdown-avatar-mini{width:32px;height:32px;font-size:17px;cursor:pointer}

.cap-rank-list-row .rank-avatar .dropdown-avatar-mini{width:20px;height:20px;font-size:11px;border-width:1px}

.fsh-rankrow .rank-avatar .dropdown-avatar-mini{width:22px;height:22px;font-size:12px}
.rift-board-row:nth-child(even){background:var(--surface2,var(--surface-2))}
.rift-board-row.me{background:var(--warn-tint);font-weight:700}
.rift-board-rank{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;background:var(--surface2,var(--surface-3));color:var(--muted,var(--ink-5))}
.rift-board-rank.r1{background:var(--warn-line);color:var(--warn-deep)}
.rift-board-rank.r2{background:var(--surface-4);color:var(--ink-4)}
.rift-board-rank.r3{background:#fed7aa;color:var(--warn-deep)}
.rift-board-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rift-board-name em{font-style:normal;display:block;font-size:10.5px;color:var(--muted,var(--ink-6));font-weight:400}
.rift-board-score{flex:0 0 auto;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.rift-board-score em{font-style:normal;display:block;font-size:10.5px;color:var(--muted,var(--ink-6));font-weight:400}
.rift-board-prize{flex:0 0 60px;text-align:right;font-size:11.5px;color:var(--rare-solid)}.rift-board-prize .prize-void{color:var(--muted,#94a3b8);font-weight:400;opacity:.75}

html.theme-dark .rift-note,html.theme-dark .rift-dim,
html.theme-dark .rift-lobby-sub,html.theme-dark .rift-panel-stats,html.theme-dark .rift-bag{color:var(--ink-6)}
html.theme-dark .rift-status,html.theme-dark .rift-run-head{background:#1e293b;border-color:#334155}
html.theme-dark .rift-run-list,html.theme-dark .rift-log,html.theme-dark .rift-act{border-color:#334155}
html.theme-dark .rift-act{background:#1e293b;color:#e2e8f0}
html.theme-dark .rift-act.atk{background:linear-gradient(180deg,#3b1f22,#1e293b);border-color:#7f1d1d}
html.theme-dark .rift-act.go{background:linear-gradient(180deg,#1e2a44,#1e293b);border-color:#1e40af}
html.theme-dark .rift-alloc-btn{background:linear-gradient(180deg,#2a2144,#1e293b);border-color:#5b21b6;color:#e2e8f0}
html.theme-dark .rift-alloc-btn em{color:#c4b5fd}
html.theme-dark .rift-monster{background:linear-gradient(180deg,#33240f,#1e293b);border-color:#9a3412}
html.theme-dark .rift-monster.boss{background:linear-gradient(180deg,#3b1f22,#1e293b);border-color:#b91c1c}
html.theme-dark .rift-log{background:#172033}
html.theme-dark .rift-panel-stats b,html.theme-dark .rift-bag b{color:#e2e8f0}
html.theme-dark .rift-board-row:nth-child(even){background:#1e293b}
html.theme-dark .rift-board-row.me{background:#3f320f}
html.theme-dark .rift-board-rank{background:#334155;color:#cbd5e1}
html.theme-dark .rift-end-score,html.theme-dark .rift-run-row b{color:#fb923c}

.mj{--mj-accent:#4f46e5;--mj-accent-2:#7c3aed}
.mj.mj-wl{--mj-accent:#b45309;--mj-accent-2:#dc2626}
.mj-hero{text-align:center;padding:22px var(--s-8) var(--s-7)}
.mj-badge{width:62px;height:62px;margin:0 auto var(--s-4);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:32px;line-height:1;background:linear-gradient(145deg,var(--mj-accent),var(--mj-accent-2));
  box-shadow:0 4px 14px rgba(60,80,140,.30)}
.mj-name{font-size:22px;font-weight:800;letter-spacing:.04em}
.mj-pitch{font-size:13px;color:var(--muted,var(--ink-5));margin:var(--s-4) auto var(--s-8);line-height:1.8;max-width:430px}
.mj-pitch .mj-help{color:var(--mj-accent);border-bottom:1px dashed;cursor:pointer}
.mj-go{width:min(300px,90%);height:42px;margin:0 auto;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r-md);font-size:15px;font-weight:500;color:#fff;cursor:pointer;
  background:linear-gradient(90deg,var(--mj-accent),var(--mj-accent-2))}
.mj-go.is-done{background:var(--surface-3);color:var(--muted,var(--ink-5));font-weight:400;cursor:default}
.mj-buy{margin-top:var(--s-5);font-size:12px;color:var(--muted,var(--ink-6))}
.mj-buy button{background:none;border:0;padding:0;font:inherit;color:#b45309;border-bottom:1px dashed #b45309;cursor:pointer}
.mj-buy.is-out{color:var(--muted,var(--ink-6))}
.mj-runs{margin-top:var(--s-6);font-size:12px;color:var(--muted,var(--ink-5))}
.mj-run{display:inline-flex;align-items:center;gap:4px;margin:0 var(--s-2);padding:var(--s-1) var(--s-4);
  border-radius:var(--r-2xl);background:var(--surface-3)}
.mj-run i{font-style:normal;color:var(--muted,var(--ink-6))}
.mj-run b{color:#c2410c}

.mj-board{margin:0 var(--s-8) var(--s-9);border-top:1px solid var(--line,var(--surface-4));padding-top:var(--s-7)}
.mj-board-hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-size:13px;font-weight:700;margin:0 var(--s-2) var(--s-6)}
.mj-board-hd>span{white-space:nowrap}
.mj-board-hd em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted,var(--ink-6));margin-left:auto}
.mj-board-skel{height:132px;border-radius:var(--r-lg);background:var(--surface-3)}
.mj-board-ft{margin-top:var(--s-5);font-size:11.5px;color:var(--muted,var(--ink-6));text-align:center}
.mj-podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:var(--s-4);align-items:end;margin-bottom:var(--s-5)}
.mj-pod{position:relative;border:1px solid var(--line,var(--surface-4));border-radius:var(--r-lg);
  padding:var(--s-6) var(--s-3) var(--s-5);text-align:center;background:var(--surface-3)}
.mj-pod.p1{padding-top:var(--s-8);border-color:#fcd34d;background:linear-gradient(180deg,#fffbeb,var(--surface-3))}
.mj-pod.me{box-shadow:inset 0 0 0 2px #dc2626}
.mj-pod-rank{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;
  font-size:11px;font-weight:800;color:#fff;background:#94a3b8;display:flex;align-items:center;justify-content:center}
.mj-pod.p1 .mj-pod-rank{background:#d97706;width:23px;height:23px;font-size:12px}
.mj-pod.p3 .mj-pod-rank{background:#b45309}
.mj-pod .rank-avatar{display:flex;justify-content:center;margin:0 0 var(--s-2)}
.mj-pod-name{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mj-pod-score{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.mj-pod-score em{font-style:normal;display:block;font-size:10.5px;font-weight:400;color:var(--muted,var(--ink-6))}
.mj-pod-void{font-size:12px;color:var(--muted,var(--ink-6));padding:var(--s-6) 0}
.mj-row{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-3) var(--s-5);border-radius:var(--r-md);font-size:12.5px}
.mj-row:nth-child(even){background:var(--surface-3)}
.mj-row.me{background:var(--warn-soft);box-shadow:inset 3px 0 0 #dc2626}
.mj-row-rank{flex:0 0 22px;text-align:center;font-weight:700;color:var(--muted,var(--ink-6));font-variant-numeric:tabular-nums}
.mj-row-name{flex:1 1 auto;min-width:3.6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mj-row-score{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}
.mj-row-score em{font-style:normal;font-size:10.5px;font-weight:400;color:var(--muted,var(--ink-6));margin-left:3px}
.mj-rw{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:3px;min-width:64px;
  font-size:12px;font-weight:700;color:var(--rare-solid);font-variant-numeric:tabular-nums}
.mj-pod .mj-rw{flex-wrap:wrap;justify-content:center;margin-top:var(--s-2)}
.mj-pod .mj-rw i{flex:1 0 100%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mj-rw i{font-style:normal;font-weight:400;font-size:11px;color:var(--muted,var(--ink-6))}
.mj-rw i.is-void{opacity:.75}
@media (max-width:520px){
  .mj-hero{padding:18px var(--s-6) var(--s-6)}
  .mj-board{margin-left:var(--s-6);margin-right:var(--s-6)}
  .mj-pod{padding-left:2px;padding-right:2px}
  .mj-pod-name{font-size:11.5px}
  .mj-row{gap:var(--s-3);padding-left:var(--s-3);padding-right:var(--s-3)}
  .mj-row-rank{flex:0 0 16px}
  .mj-rw{min-width:52px}
  .mj-board-hd em{margin-left:0;flex:1 0 100%}
}
html.theme-dark .mj-go.is-done,html.theme-dark .mj-run,html.theme-dark .mj-board-skel,
html.theme-dark .mj-row:nth-child(even),html.theme-dark .mj-pod{background:#1e293b}
html.theme-dark .mj-pod{border-color:#334155}
html.theme-dark .mj-pod.p1{background:linear-gradient(180deg,#3b2f10,#1e293b);border-color:#a16207}
html.theme-dark .mj-board{border-top-color:#334155}
html.theme-dark .mj-row.me{background:#3f320f}
html.theme-dark .mj-buy button{color:#fbbf24;border-bottom-color:#fbbf24}
html.theme-dark .mj-run b{color:#fb923c}

.ex-cost-hint{font-size:11px;color:#a16207;background:#fffbeb;border:1px solid #fde68a;
  border-radius:8px;padding:6px 9px;margin-bottom:10px;line-height:1.6}
.ex-cost-hint b{font-variant-numeric:tabular-nums}
.ex-cost-use{margin-left:6px;border:1px solid #f59e0b;background:#fff;color:#b45309;
  font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:6px;cursor:pointer;vertical-align:1px}
.ex-cost-use:hover{background:#f59e0b;color:#fff}
html.theme-dark .ex-cost-use{background:transparent;color:#fbbf24}
html.theme-dark .ex-cost-hint{background:#422f0c;border-color:#78500f;color:#fbbf24}

#versionUpdateBar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:10060;
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-pill,999px);
  background:#0f172a;color:#fff;font-size:13px;box-shadow:0 10px 30px rgba(15,23,42,.35);
  max-width:calc(100vw - 24px)}
#versionUpdateBar button{border:0;cursor:pointer;font-size:12.5px;font-weight:700;border-radius:8px}
#versionUpdateBtn{background:#22c55e;color:#fff;padding:6px 14px}
#versionUpdateBtn:hover{background:#16a34a}
#versionUpdateLater{background:transparent;color:#94a3b8;padding:4px 6px;font-size:14px}
#versionUpdateLater:hover{color:#fff}
@media (max-width:560px){ #versionUpdateBar{font-size:12px;padding:8px 12px;bottom:12px} }

.ex-chart{border:1px solid var(--line-1);border-radius:var(--r-lg);padding:var(--s-6) var(--s-7);margin-bottom:var(--s-6);background:var(--surface-1)}
.ex-chart:empty{display:none}
.ex-chart-head{display:flex;align-items:baseline;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-4);font-size:12px;color:var(--ink-5)}
.ex-chart-head b{font-size:13px;color:var(--ink-8)}
.ex-chart-legend{font-size:10.5px;color:var(--ink-4)}
.ex-chart-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-right:3px}
.ex-chart-svg{width:100%;height:auto;display:block;overflow:visible}
.ex-pt{cursor:pointer}
.ex-pt:hover{r:5}
.ex-chart-foot{display:flex;gap:var(--s-7);flex-wrap:wrap;font-size:11px;color:var(--ink-5);margin-top:var(--s-4)}
.ex-chart-foot b{color:var(--ink-8);font-variant-numeric:tabular-nums}
.ex-chart-empty{font-size:11.5px;color:var(--ink-4);padding:var(--s-5) 0;text-align:center}
#exChartTip{position:fixed;pointer-events:none;background:#0f172a;color:#fff;font-size:11px;padding:7px 10px;
  border-radius:8px;opacity:0;transition:opacity .1s;z-index:10050;line-height:1.65;white-space:normal;max-width:min(280px,calc(100vw - 16px));
  box-shadow:0 6px 20px rgba(15,23,42,.3)}

.ex-eqd-box{width:360px;max-width:92vw;text-align:left;border-left:4px solid var(--tier,#94a3b8)}
.ex-eqd-name{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-5);font-size:16px}
.ex-eqd-name b{font-size:16px}
.ex-eqd-meta{font-size:11.5px;color:var(--ink-5);margin-top:var(--s-3)}
.ex-eqd-sec{font-size:11.5px;color:var(--ink-5);margin:var(--s-6) 0 var(--s-3)}
.ex-eqd-price{display:flex;align-items:center;justify-content:space-between;margin:var(--s-6) 0 var(--s-5);
  padding-top:var(--s-5);border-top:1px dashed var(--line-1);font-size:12.5px}
.ex-eqd-price b{font-size:17px;font-weight:800;color:#b45309;display:flex;align-items:center;gap:var(--s-2)}

.ex-hist{border:1px solid var(--line-1);border-radius:var(--r-md);margin-top:var(--s-5);overflow:hidden}
.ex-hist>summary{cursor:pointer;padding:var(--s-4) var(--s-5);font-size:12px;font-weight:700;
  background:var(--surface-2);list-style:revert}
.ex-hist>summary:hover{background:var(--surface-3)}
.ex-hist-body{max-height:114px;overflow-y:auto;background:#1e2140}
.ex-hist-row{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;align-items:center;gap:var(--s-3);
  padding:var(--s-4) var(--s-5);font-size:11px;font-family:ui-monospace,Menlo,monospace;border-bottom:1px solid #2d3160}
.ex-hist-row:last-child{border-bottom:0}
.ex-hist-who{color:#cbd5e1}
.ex-hist-pr{color:#fbbf24;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.ex-hist-dt{color:#94a3b8;text-align:right;font-size:10px}
.ex-hist-empty{padding:var(--s-6);text-align:center;font-size:11.5px;color:#94a3b8}
html.theme-dark .ex-chart{background:#1e293b;border-color:#334155}

.ex-kind-tabs{display:flex;gap:var(--s-3);margin-bottom:var(--s-5);flex-wrap:wrap}
.ex-kind-tab{padding:var(--s-3) var(--s-6);border:1px solid var(--line-1);border-radius:var(--r-pill);
  background:var(--surface-1);color:var(--ink-5);font-size:13px;font-weight:700;cursor:pointer;line-height:1.6}
.ex-kind-tab:hover{border-color:var(--line-3)}
.ex-kind-tab.is-on{background:var(--ink-8,#0f172a);border-color:var(--ink-8,#0f172a);color:#fff}
.ex-eq-chiprow{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;width:100%}
.ex-eq-chiplabel{font-size:11.5px;color:var(--ink-4);min-width:38px}
.ex-eq-chip{padding:var(--s-1) var(--s-4);border:1px solid var(--line-1);border-radius:var(--r-pill);
  background:var(--surface-1);color:var(--ink-5);font-size:11.5px;font-weight:700;cursor:pointer;line-height:1.7;white-space:nowrap}
.ex-eq-chip:hover{border-color:var(--line-3)}
.ex-eq-chip.is-on{background:var(--ink-8,#0f172a);border-color:var(--ink-8,#0f172a);color:#fff}
.ex-eq-card-top{width:100%;background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.ex-eq-more{font-size:11px;color:var(--ink-4);white-space:nowrap;align-self:center}
.ex-eq-card-top:hover .ex-eq-more{color:var(--ink-6)}
.ex-eq-cp{display:flex;align-items:center;gap:var(--s-2);font-size:11.5px;color:var(--ink-4)}
.ex-eq-cp-v{font-size:14px;font-weight:800;color:#b45309;font-variant-numeric:tabular-nums}
.ex-eq-cp-v.is-na{color:var(--ink-3)}
.ex-eq-note{font-size:11px;color:var(--ink-4);margin-top:var(--s-5);line-height:1.6}
.ex-catalog-fold{margin-top:var(--s-4)}
.ex-catalog-fold>summary{cursor:pointer;font-size:12px;color:var(--ink-4);padding:var(--s-3) 0;list-style:revert}
.ex-catalog-fold>summary:hover{color:var(--ink-6)}
.ex-catalog-fold>.ex-catalog-grid{margin-top:var(--s-4)}
.ex-tier-block{border-left:3px solid var(--tier-hex,#94a3b8);padding-left:var(--s-5);margin-bottom:var(--s-6)}
.ex-tier-block.is-quiet{opacity:.72}
.ex-tier-head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);font-size:13px}
.ex-tier-dot{width:9px;height:9px;border-radius:50%;background:var(--tier-hex,#94a3b8);flex:none}
.ex-tier-count{font-size:11px;color:var(--ink-4)}

.ex-tier-block .ex-eq-grid{margin:var(--s-4) 0}
.ex-eq-jump-row{display:flex;justify-content:flex-end;margin-bottom:var(--s-5)}
.ex-eq-jump{font-size:12px}

.ex-eqd-sec{font-size:11px;font-weight:800;color:var(--ink-4);letter-spacing:.06em;margin:var(--s-5) 0 var(--s-3)}

html.theme-dark .ex-kind-tab{background:#1e293b;border-color:#334155;color:#cbd5e1}
html.theme-dark .ex-kind-tab.is-on{background:#e2e8f0;border-color:#e2e8f0;color:#0f172a}
html.theme-dark .ex-eq-chip{background:#0f172a;border-color:#334155;color:#cbd5e1}
html.theme-dark .ex-eq-chip.is-on{background:#e2e8f0;border-color:#e2e8f0;color:#0f172a}
html.theme-dark .ex-eq-cp-v,html.theme-dark .ex-eqd-cp b{color:#fbbf24}

.ex-eq-filters{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;margin-bottom:var(--s-6);
  padding:var(--s-5) var(--s-6);border:1px solid var(--line,var(--line-1));border-radius:var(--r-lg);background:var(--surface2,var(--surface-2))}
.ex-eq-filters label{display:flex;align-items:center;gap:var(--s-3);font-size:12.5px;color:var(--muted,var(--ink-5));white-space:nowrap}
.ex-eq-filters select{padding:var(--s-3) var(--s-4);border:1px solid var(--line,var(--line-1));border-radius:var(--r-md);font-size:12.5px;
  background:var(--surface,var(--on-solid));color:var(--ink,var(--ink-1))}
.ex-eq-count{font-size:12.5px;color:var(--muted,var(--ink-6));margin:0 var(--s-1) var(--s-4)}
.ex-eq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-5)}
.ex-eq-card{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-6);border:1px solid var(--line-1);border-left-width:3px;
  border-radius:var(--r-lg);background:var(--surface,var(--on-solid))}
.ex-eq-card-top{display:flex;align-items:center;gap:var(--s-5);min-width:0}
.ex-eq-card-name{min-width:0;flex:1}
.ex-eq-card-name b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-eq-tags{display:flex;gap:var(--s-3);margin-top:var(--s-2)}
.ex-eq-tags em{font-style:normal;font-size:10.5px;font-weight:800;padding:var(--s-1) var(--s-3);border-radius:var(--r-2xl);
  background:var(--surface-3);color:var(--ink-5)}
.ex-eq-tags em.ex-eq-enh{background:var(--warn-tint);color:var(--warn-text)}
.ex-eq-affixes{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.ex-eq-affixes span{font-size:10.5px;padding:var(--s-1) var(--s-3);border-radius:var(--r-sm);background:var(--surface-3);color:var(--ink-5)}
.ex-eq-card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:auto;
  padding-top:var(--s-4);border-top:1px dashed var(--line,var(--line-1))}
.ex-eq-price{font-size:15px;font-weight:800;color:#c2410c;display:flex;align-items:center;gap:var(--s-2);
  font-variant-numeric:tabular-nums}
html.theme-dark .ex-eq-filters{background:#1e293b;border-color:#334155}
html.theme-dark .ex-eq-filters select{background:#0f172a;border-color:#334155;color:#e2e8f0}
html.theme-dark .ex-eq-card{background:#1e293b;border-color:#334155}
html.theme-dark .ex-eq-tags em,html.theme-dark .ex-eq-affixes span{background:#334155;color:#cbd5e1}
html.theme-dark .ex-eq-tags em.ex-eq-enh{background:#422f0c;color:#fbbf24}
html.theme-dark .ex-eq-price{color:#fb923c}

.rift-board-end{display:inline-block;font-style:normal;font-size:10px;padding:0 var(--s-3);border-radius:var(--r-2xl);
  background:var(--surface2,var(--surface-3));color:var(--muted,var(--ink-6));margin-left:var(--s-2);white-space:nowrap}
.rift-board-end.good{background:var(--success-soft);color:var(--success-text)}
.rift-scoring{margin:0 0 var(--s-6);border:1px solid var(--line,var(--line-1));border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface2,var(--surface-2))}
.rift-scoring summary{cursor:pointer;padding:var(--s-5) var(--s-6);font-size:12.5px;font-weight:700;list-style:none}
.rift-scoring summary::-webkit-details-marker{display:none}
.rift-scoring summary::before{content:"▸ ";color:var(--muted,var(--ink-6))}
.rift-scoring[open] summary::before{content:"▾ "}
.rift-scoring-body{padding:var(--s-1) var(--s-6) var(--s-6);font-size:12px;line-height:1.75}
.rift-scoring-formula{padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4);border-radius:var(--r-md);background:var(--surface,var(--on-solid));
  border:1px dashed var(--line,var(--line-1));font-size:12.5px}
.rift-scoring-row{display:flex;justify-content:space-between;gap:var(--s-5);padding:var(--s-1) 0}
.rift-scoring-row>span{color:var(--muted,var(--ink-5));flex:0 0 auto}
.rift-scoring-row b{font-weight:700;text-align:right}
.rift-scoring-row b.good{color:var(--success-text)}
.rift-scoring-row b.bad{color:var(--danger-text)}
.rift-scoring-note{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px dashed var(--line,var(--line-1));
  color:var(--muted,var(--ink-5));line-height:1.8}
html.theme-dark .rift-scoring{background:#172033;border-color:#334155}
html.theme-dark .rift-scoring-formula{background:#0f172a;border-color:#334155}
html.theme-dark .rift-board-end{background:#334155;color:#cbd5e1}
html.theme-dark .rift-board-end.good{background:#14331f;color:#6ee7a8}
html.theme-dark .rift-scoring-row b.good{color:#6ee7a8}
html.theme-dark .rift-scoring-row b.bad{color:#f87171}

.box-rank-tabs{display:flex;gap:var(--s-3);padding:var(--s-5) var(--s-8) 0}
.box-rank-tab{flex:1;padding:var(--s-4) var(--s-5);border-radius:var(--r-md);border:1px solid var(--line,var(--line-1));
  background:var(--surface,var(--on-solid));font-size:13px;font-weight:700;cursor:pointer;color:var(--muted,var(--ink-5))}
.box-rank-tab.active{background:#1e293b;color:var(--on-solid);border-color:#1e293b}
.box-rank-prizes{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-bottom:var(--s-5)}
.box-rank-prizes span{font-size:11.5px;padding:var(--s-2) var(--s-5);border-radius:var(--r-2xl);background:var(--surface2,var(--surface-3));color:var(--muted,var(--ink-5))}
.box-rank-prizes b{color:var(--warn-text)}
.box-rank-mine{font-size:12.5px;padding:var(--s-4) var(--s-6);border-radius:var(--r-md);background:var(--warn-tint);color:var(--warn-deep);margin-bottom:var(--s-5)}
.box-rank-row{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-5) var(--s-5);border-radius:var(--r-md);font-size:13px}
.box-rank-row:nth-child(even){background:var(--surface2,var(--surface-2))}
.box-rank-row.me{background:var(--warn-tint);font-weight:700}
.box-rank-no{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;background:var(--surface2,var(--surface-3));color:var(--muted,var(--ink-5))}
.box-rank-no.r1{background:var(--warn-line);color:var(--warn-deep)}
.box-rank-no.r2{background:var(--surface-4);color:var(--ink-4)}
.box-rank-no.r3{background:#fed7aa;color:var(--warn-deep)}
.box-rank-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.box-rank-name em{font-style:normal;display:block;font-size:10.5px;color:var(--muted,var(--ink-6));font-weight:400}
.box-rank-num{flex:0 0 auto;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.box-rank-num em{font-style:normal;display:block;font-size:10.5px;color:var(--muted,var(--ink-6));font-weight:400;white-space:nowrap}
.box-rank-prize{flex:0 0 78px;text-align:right;font-size:11px;color:var(--warn-text)}

.rank-scroll{
  --rank-row-h:48px;
  --rank-rows:7;
  max-height:max(180px, min(calc(var(--rank-row-h) * var(--rank-rows) + 10px), 46vh));
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}

.rank-scroll.rows-tall{--rank-row-h:62px}
.rank-scroll::-webkit-scrollbar{width:6px}
.rank-scroll::-webkit-scrollbar-thumb{background:var(--border,var(--surface-4));border-radius:var(--r-xs)}
html.theme-dark .rank-scroll::-webkit-scrollbar-thumb{background:#475569}

.mg-stock{display:inline-block;margin-left:var(--s-3);padding:0 var(--s-3);border-radius:var(--r-pill);
  font-size:10.5px;font-weight:700;background:var(--surface2,var(--surface-3));color:var(--muted,var(--ink-5));
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mg-stock.low{background:var(--warn-tint);color:var(--warn-text)}
.mg-stock.none{background:var(--brand-soft);color:var(--danger-solid)}
html.theme-dark .mg-stock{background:#334155;color:#cbd5e1}
html.theme-dark .mg-stock.low{background:#3f320f;color:#fbbf24}
html.theme-dark .mg-stock.none{background:#4c1d1d;color:#fca5a5}
html.theme-dark .box-rank-tab{background:#1e293b;border-color:#334155;color:#94a3b8}
html.theme-dark .box-rank-tab.active{background:#f1f5f9;color:#0f172a;border-color:#f1f5f9}
html.theme-dark .box-rank-row:nth-child(even){background:#1e293b}
html.theme-dark .box-rank-row.me,html.theme-dark .box-rank-mine{background:#3f320f;color:#fbbf24}
html.theme-dark .box-rank-no{background:#334155;color:#cbd5e1}
html.theme-dark .box-rank-prizes span{background:#334155;color:#cbd5e1}

.invite-rank-note{font-size:11.5px;color:var(--muted,var(--ink-6));padding:0 var(--s-1) var(--s-4);line-height:1.7}
.invite-rank-row{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-5) var(--s-5);border-radius:var(--r-md);font-size:13px}
.invite-rank-row:nth-child(even){background:var(--surface2,var(--surface-2))}
.invite-rank-row.me{background:var(--warn-tint);font-weight:700}
.invite-rank-no{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;background:var(--surface2,var(--surface-3));color:var(--muted,var(--ink-5))}
.invite-rank-no.r1{background:var(--warn-line);color:var(--warn-deep)}
.invite-rank-no.r2{background:var(--surface-4);color:var(--ink-4)}
.invite-rank-no.r3{background:#fed7aa;color:var(--warn-deep)}
.invite-rank-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:none;border:none;padding:0;text-align:left;font:inherit;color:var(--info);cursor:pointer}
.invite-rank-name:hover{text-decoration:underline}
.invite-rank-num{flex:0 0 auto;font-weight:800;font-variant-numeric:tabular-nums}
.invite-rank-num em{font-style:normal;font-size:11px;color:var(--muted,var(--ink-6));font-weight:400;margin-left:var(--s-1)}
.invite-rank-bonus{flex:0 0 70px;text-align:right;font-size:11.5px;color:var(--danger-solid)}
html.theme-dark .invite-rank-row:nth-child(even){background:#1e293b}
html.theme-dark .invite-rank-row.me{background:#3f320f;color:#fbbf24}
html.theme-dark .invite-rank-no{background:#334155;color:#cbd5e1}
html.theme-dark .invite-rank-name{color:#60a5fa}

.cc-warn-block{background:var(--surface2,var(--surface-2));border-radius:var(--r-lg);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-6)}
.cc-warn-title{font-size:12.5px;font-weight:800;color:var(--text-main,var(--ink-3));margin-bottom:var(--s-4)}
.cc-warn-chips{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.cc-warn-chip{display:inline-block;padding:var(--s-2) var(--s-5);border-radius:var(--r-pill);font-size:11.5px;
  background:var(--surface-1,var(--on-solid));border:1px solid var(--border,var(--line-1));color:var(--text-main,var(--ink-4))}
.cc-warn-chip b{font-variant-numeric:tabular-nums}
.cc-warn-list{margin:0;padding-left:var(--s-9);font-size:12.5px;line-height:1.75;color:var(--text-main,var(--ink-4))}
.cc-warn-list li{margin-bottom:var(--s-2)}
.cc-warn-list b.ok{color:var(--success-text)}
.cc-warn-list b.bad{color:var(--danger-text)}
html.theme-dark .cc-warn-block{background:#1e293b}
html.theme-dark .cc-warn-title{color:#e2e8f0}
html.theme-dark .cc-warn-chip{background:#0f172a;border-color:#334155;color:#cbd5e1}
html.theme-dark .cc-warn-list{color:#cbd5e1}
html.theme-dark .cc-warn-list b.ok{color:#4ade80}
html.theme-dark .cc-warn-list b.bad{color:#fca5a5}

.vs-hero{display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:stretch;margin-bottom:var(--s-2)}
.vs-cp{flex:1 1 220px;min-width:200px;display:flex;flex-direction:column;gap:var(--s-1);
  padding:var(--s-7) var(--s-9);border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--surface2,var(--danger-soft)),var(--surface-1,var(--on-solid)));
  border:1px solid var(--border,var(--danger-line))}
.vs-cp-k{font-size:12px;color:var(--muted,var(--ink-6));letter-spacing:.04em}
.vs-cp-v{font-size:34px;line-height:1.1;font-weight:800;color:var(--danger-solid);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.vs-cp-sub{font-size:12px;color:var(--muted,var(--ink-6))}
.vs-feats{flex:2 1 320px;display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:var(--s-4)}
.vs-feat{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-5) var(--s-6);border-radius:var(--r-lg);
  background:var(--surface2,var(--surface-2));border:1px solid var(--border,var(--line-1))}
.vs-feat-k{font-size:11.5px;color:var(--muted,var(--ink-6));white-space:nowrap}
.vs-feat b{font-size:16px;font-variant-numeric:tabular-nums;color:var(--text-main,var(--ink-3))}

.vs-card-row{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.vs-empty{font-size:13px;color:var(--muted,var(--ink-6));padding:var(--s-5) var(--s-1)}

.vs-eq-card{position:relative;width:92px;min-height:118px;border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);
  padding:var(--s-5) var(--s-3) var(--s-4);
  background:linear-gradient(160deg,color-mix(in srgb,var(--eq-color) 18%,transparent) 0%,
             var(--surface2,var(--surface-2)) 100%);
  border:1.5px solid var(--eq-color);box-shadow:var(--sh-1)}
.vs-eq-tier{position:absolute;top:5px;left:6px;font-size:10px;font-weight:800;
  padding:var(--s-1) var(--s-3);border-radius:var(--r-xs);background:var(--eq-color);color:var(--on-solid);line-height:1.5}
.vs-eq-enh{position:absolute;top:5px;right:6px;font-size:10px;font-weight:800;
  padding:var(--s-1) var(--s-3);border-radius:var(--r-xs);background:#0f172a;color:var(--warn-bright);line-height:1.5;
  font-variant-numeric:tabular-nums}
.vs-eq-icon{font-size:30px;line-height:1.2;margin-top:var(--s-3)}
.vs-eq-name{font-size:12px;font-weight:700;text-align:center;line-height:1.3;
  color:var(--text-main,var(--ink-2))}
.vs-eq-cat{font-size:10.5px;color:var(--muted,var(--ink-6))}

.vs-land-card{width:92px;min-height:118px;border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);
  padding:var(--s-5) var(--s-3);color:var(--on-dark-success);
  background:linear-gradient(160deg,#3b5a3f 0%,#1b2a1d 100%);
  border:1.5px solid rgba(255,255,255,.14)}
.vs-land-card[data-terrain="mine"]{background:linear-gradient(160deg,#4b5563 0%,#1f2937 100%)}
.vs-land-card[data-terrain="grassland"]{background:linear-gradient(160deg,#6b7f3a 0%,#33401b 100%)}
.vs-land-card[data-terrain="riverside"]{background:linear-gradient(160deg,#3a6b7f 0%,#1b3440 100%)}
.vs-land-card[data-terrain="lava"]{background:linear-gradient(160deg,#7f3a3a 0%,#401b1b 100%)}
.vs-land-card[data-terrain="spirit_vein"]{background:linear-gradient(160deg,#5b3a7f 0%,#2c1b40 100%)}
.vs-land-icon{font-size:28px;line-height:1.2}
.vs-land-name{font-size:12.5px;font-weight:700}
.vs-land-meta{font-size:10px;opacity:.72;font-variant-numeric:tabular-nums}
.vs-land-worker{font-size:10px;opacity:.72;text-align:center;line-height:1.3}

.vs-mg-row{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.vs-mg-cell{flex:1 1 130px;display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-5) var(--s-7);
  border-radius:var(--r-lg);background:var(--surface2,var(--surface-2));border:1px solid var(--border,var(--line-1))}
.vs-mg-cell span{font-size:11.5px;color:var(--muted,var(--ink-6))}
.vs-mg-cell b{font-size:16px;color:var(--text-main,var(--ink-3))}

html.theme-dark .vs-cp{background:linear-gradient(135deg,#3f2020,#1e293b);border-color:#7f1d1d}
html.theme-dark .vs-cp-v{color:#f87171}
html.theme-dark .vs-feat,
html.theme-dark .vs-mg-cell{background:#1e293b;border-color:#334155}
html.theme-dark .vs-feat b,
html.theme-dark .vs-mg-cell b{color:#e2e8f0}
html.theme-dark .vs-eq-card{background:linear-gradient(160deg,color-mix(in srgb,var(--eq-color) 26%,transparent) 0%,#1e293b 100%)}
html.theme-dark .vs-eq-name{color:#e2e8f0}

@media (max-width:520px){
  .vs-eq-card,.vs-land-card{width:calc(33.333% - 7px);min-width:82px}
  .vs-cp-v{font-size:28px}
}

.vs-nft-card{position:relative;width:92px;min-height:118px;border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-4) var(--s-3);
  background:linear-gradient(160deg,color-mix(in srgb,var(--nft-color) 20%,transparent) 0%,
             var(--surface2,var(--surface-2)) 100%);
  border:1.5px solid var(--nft-color);box-shadow:var(--sh-1)}
.vs-nft-art{width:100%;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  background:color-mix(in srgb,var(--nft-color) 12%,var(--surface-1,var(--on-solid)))}
.vs-nft-art img{width:100%;height:100%;object-fit:cover;display:block}
.vs-nft-no{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--text-main,var(--ink-2))}
.vs-nft-rarity{font-size:10.5px;font-weight:700}
.vs-nft-worn{position:absolute;top:5px;right:5px;z-index:1;font-size:9.5px;font-weight:700;
  padding:var(--s-1) var(--s-3);border-radius:var(--r-xs);background:#0f172a;color:var(--warn-bright);line-height:1.55}

.vs-land-token{position:absolute;top:5px;left:6px;font-size:9.5px;font-weight:700;
  padding:var(--s-1) var(--s-3);border-radius:var(--r-xs);line-height:1.55;
  background:rgba(255,255,255,.16);color:var(--info-soft);font-variant-numeric:tabular-nums}
.vs-land-card{position:relative}

html.theme-dark .vs-nft-card{background:linear-gradient(160deg,color-mix(in srgb,var(--nft-color) 28%,transparent) 0%,#1e293b 100%)}
html.theme-dark .vs-nft-art{background:color-mix(in srgb,var(--nft-color) 18%,#0f172a)}
html.theme-dark .vs-nft-no{color:#e2e8f0}

@media (max-width:520px){
  .vs-nft-card{width:calc(33.333% - 7px);min-width:82px}
}

.vs-social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--s-6);margin-top:var(--s-6)}
.vs-social-list{display:flex;flex-direction:column;gap:var(--s-1)}
.vs-social-row{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-4) var(--s-1);
  border-bottom:1px solid var(--line-soft,var(--info-soft));font-size:13px}
.vs-social-row:last-child{border-bottom:0}
.vs-social-time{margin-left:auto;font-size:11.5px;color:var(--muted,var(--ink-6));
  white-space:nowrap;font-variant-numeric:tabular-nums}

.vs-msg-list{gap:0}
.vs-msg-row{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5) var(--s-1);
  border-bottom:1px solid var(--line-soft,var(--info-soft))}
.vs-msg-row:last-child{border-bottom:0}
.vs-msg-head{display:flex;align-items:baseline;gap:var(--s-5);font-size:13px}
.vs-msg-text{font-size:12.5px;line-height:1.65;color:var(--text-main,var(--ink-4));
  overflow-wrap:anywhere}
.vs-msg-form{display:flex;gap:var(--s-4);margin-bottom:var(--s-5)}
.vs-msg-form input{flex:1;min-width:0;padding:var(--s-4) var(--s-6);border-radius:var(--r-md);
  border:1px solid var(--border,var(--line-2));background:var(--surface-1,var(--on-solid));
  color:var(--text-main,var(--ink-2));font-size:13px}
.vs-msg-form input:focus-visible{outline:2px solid var(--brand,#dc2626);outline-offset:1px}

html.theme-dark .vs-social-row,
html.theme-dark .vs-msg-row{border-bottom-color:#273040}
html.theme-dark .vs-msg-text{color:#cbd5e1}
html.theme-dark .vs-msg-form input{background:#0f172a;border-color:#334155;color:#e2e8f0}

.user-line{display:inline-flex;align-items:center;gap:var(--s-4);min-width:0}
.user-line .dropdown-avatar-mini{flex:0 0 auto}
.user-line-text{min-width:0;font-weight:inherit}
.user-line-text .social-meta{display:block;font-weight:400;margin-top:var(--s-1)}

.sb-overlay{position:fixed;inset:0;background:rgba(2,6,23,.72);z-index:9998;
  display:flex;align-items:center;justify-content:center;padding:var(--s-8);}
.sb-modal{width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:#0f172a;color:var(--on-dark-1);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-4);border:1px solid #1e293b;}
.sb-head{display:flex;justify-content:space-between;align-items:center;
  padding:var(--s-6) var(--s-8);background:#111c33;border-bottom:1px solid #1e293b;}
.sb-title{font-weight:800;font-size:15px;}
.sb-round{font-size:12px;color:var(--ink-6);font-variant-numeric:tabular-nums;}
.sb-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s-5);align-items:center;padding:var(--s-7) var(--s-8);}
.sb-side{min-width:0;}
.sb-side-right{text-align:right;}
.sb-name{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-npc{font-size:10px;color:var(--ink-6);border:1px solid #334155;border-radius:var(--r-xs);padding:0 var(--s-2);}
.sb-cp{font-size:11px;color:var(--ink-6);margin:var(--s-1) 0 var(--s-3);font-variant-numeric:tabular-nums;}
.sb-hp{height:9px;border-radius:var(--r-xs);background:#1e293b;overflow:hidden;}
.sb-hp-fill{height:100%;transition:width .32s ease;}
.sb-hp-a{background:linear-gradient(90deg,#38bdf8,#0ea5e9);}
.sb-hp-d{background:linear-gradient(90deg,#f87171,var(--brand));}
.sb-hpnum{font-size:11px;color:var(--line-2);margin-top:var(--s-2);font-variant-numeric:tabular-nums;}
.sb-vs-mark{font-weight:900;color:var(--ink-5);font-size:13px;letter-spacing:1px;}
.sb-log{flex:1;overflow-y:auto;padding:var(--s-4) var(--s-8) var(--s-6);font-size:13px;line-height:1.65;
  min-height:150px;max-height:42vh;}
.sb-line{padding:var(--s-2) 0;border-bottom:1px solid rgba(30,41,59,.55);}
.sb-line:last-child{border-bottom:0;}
.sb-a{color:#bae6fd;}
.sb-d{color:var(--danger-line);}
.sb-opening{color:#fcd34d;font-weight:600;}
.sb-dmg{font-style:normal;font-weight:800;color:var(--warn-bright);font-variant-numeric:tabular-nums;}
.sb-crit{color:var(--accent-orange);}
.sb-heal{color:#4ade80;}
.sb-skill{color:#c4b5fd;}
.sb-result{margin-top:var(--s-4);padding:var(--s-5);border-radius:var(--r-md);background:#111c33;
  border:1px solid #1e293b;color:var(--on-dark-1);font-weight:600;line-height:1.7;}
.sb-foot{display:flex;gap:var(--s-4);justify-content:flex-end;padding:var(--s-5) var(--s-8);
  border-top:1px solid #1e293b;background:#0b1426;}
@media (max-width:520px){
  .sb-vs{grid-template-columns:1fr auto 1fr;gap:var(--s-3);padding:var(--s-6);}
  .sb-log{font-size:12px;max-height:38vh;}
}

.wb-boss-head{display:flex;gap:var(--s-7);align-items:center;padding:var(--s-7);border-radius:var(--r-lg);
  background:linear-gradient(135deg,#1e293b 0%,#334155 100%);color:var(--on-dark-1);margin-bottom:var(--s-6)}
.wb-boss-icon{font-size:52px;line-height:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.wb-boss-name{font-size:18px;font-weight:800}
.wb-boss-mech{font-size:12.5px;color:var(--line-2);margin-top:var(--s-2)}
.wb-record{font-size:11.5px;color:var(--warn-bright);margin-top:var(--s-3)}
.wb-layer-box{padding:var(--s-6);border:1px solid var(--line-1,var(--line-1));border-radius:var(--r-lg);
  background:var(--surface-1,var(--on-solid));margin-bottom:var(--s-6)}
.wb-layer-title{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:var(--s-3);font-size:13px;margin-bottom:var(--s-4)}
.wb-layer-num{font-size:20px;color:var(--danger-solid)}
.wb-layer-bar{position:relative;height:22px;border-radius:var(--r-lg);background:var(--surface-3,var(--surface-3));
  overflow:hidden;border:1px solid var(--line-1,var(--line-1))}
.wb-layer-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-lg);
  background:linear-gradient(90deg,var(--danger-solid),var(--accent-orange));transition:width .5s}
.wb-layer-bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;color:var(--text-main,var(--ink-1));text-shadow:0 0 3px rgba(255,255,255,.7)}
.wb-chests{display:flex;gap:var(--s-4);margin-top:var(--s-5);flex-wrap:wrap}
.wb-chest{flex:1 1 140px;min-width:0;padding:var(--s-4) var(--s-5);border-radius:var(--r-md);font-size:11.5px;
  background:var(--surface-2,var(--surface-2));border:1px dashed var(--line-1,var(--line-1));color:var(--muted,var(--ink-5))}
.wb-chest.cur{border-style:solid;border-color:var(--warn-solid);background:var(--warn-soft);color:var(--warn-deep)}
.wb-chest b{display:block;margin-bottom:var(--s-1)}
.wb-me{padding:var(--s-6);border:1px solid var(--line-1,var(--line-1));border-radius:var(--r-lg);background:var(--surface-1,var(--on-solid))}
.wb-me-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-bottom:var(--s-5)}
.wb-actions{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-5)}
.wb-actions .home-btn{flex:1 1 160px}
.wb-ms-list{display:grid;gap:var(--s-3);margin-bottom:var(--s-4)}
.wb-ms{display:flex;justify-content:space-between;font-size:12px;padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);
  background:var(--surface-2,var(--surface-2));color:var(--muted,var(--ink-5))}
.wb-ms.done{background:var(--success-soft);color:#166534}
html.theme-dark .wb-layer-box,html.theme-dark .wb-me{background:#0f172a;border-color:#334155}
html.theme-dark .wb-layer-bar{background:#1e293b;border-color:#334155}
html.theme-dark .wb-layer-bar span{color:#f1f5f9;text-shadow:0 0 3px rgba(0,0,0,.7)}
html.theme-dark .wb-chest{background:#1e293b;border-color:#334155;color:#94a3b8}
html.theme-dark .wb-chest.cur{background:#3f320f;border-color:#f59e0b;color:#fbbf24}
html.theme-dark .wb-ms{background:#1e293b;color:#94a3b8}
html.theme-dark .wb-ms.done{background:#14532d33;color:#4ade80}

.pet-dim{color:var(--ink-3,var(--ink-6));font-weight:400}

.pet-section-title{font-weight:700;font-size:15px;margin:var(--s-9) 0 var(--s-5)}

.pet-stat{display:flex;align-items:baseline;gap:var(--s-3);font-size:12.5px}
.pet-stat .k{color:var(--ink-3,var(--ink-6));min-width:32px}
.pet-stat .v{font-weight:700;font-variant-numeric:tabular-nums}
.pet-stat .up{color:var(--success-solid);font-size:11px;font-weight:700}

.pet-feed-legend{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-4)}
.pet-feed-chip{font-size:12.5px;padding:var(--s-2) var(--s-6);border-radius:var(--r-pill);
  background:var(--surface-2,var(--surface-3));border:1px solid var(--line,var(--line-1))}

.pet-shop-card{background:var(--surface,var(--on-solid));border:1px solid var(--line,var(--line-1));
  border-radius:var(--r-xl);padding:var(--s-8);text-align:center;display:flex;flex-direction:column;gap:var(--s-3)}
.pet-shop-card.owned{opacity:.62}

.pet-feed-row{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-3) 0;
  border-bottom:1px solid var(--line,var(--info-soft))}
.pet-feed-name{flex:1;font-size:13px}
.pet-feed-input{width:110px;padding:var(--s-3) var(--s-5);border:1px solid var(--line,var(--line-1));
  border-radius:var(--r-md);font-size:13px;text-align:right;font-variant-numeric:tabular-nums;
  background:var(--surface,var(--on-solid));color:var(--ink-1,var(--ink-1))}
.pet-feed-total{margin-top:var(--s-5);font-size:13.5px;text-align:right}
.pet-feed-total b{font-size:19px;color:var(--brand,var(--danger-solid));font-variant-numeric:tabular-nums}

@media (max-width:560px){

}

.pet-sec { font-size: 14px; margin: var(--s-9) 0 var(--s-4); color: var(--text); }

.pet-hint {
  font-size: 12px; color: var(--muted); line-height: 1.7;
  background: var(--surface-2); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); margin: var(--s-5) 0;
}

.pet-box-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--s-5); margin-bottom: var(--s-3);
}

.pet-box-cell {
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5) var(--s-3);
  text-align: center; background: var(--surface);
}

.pb-label { font-size: 12px; color: var(--muted); }
.pb-count { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pb-merge {
  margin-top: var(--s-3); font-size: 11px; padding: var(--s-1) var(--s-4); border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); cursor: pointer;
}
.pb-merge:hover { background: var(--surface-3); }

.pet-chip-list { display: flex; flex-direction: column; gap: var(--s-3); }

.den-member {
  display: flex; align-items: center; gap: var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-6); background: var(--surface); font-size: 13px;
}
.den-member.me { border-color: var(--accent, var(--brand)); }

.idle-head {
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--s-7) var(--s-8); margin-bottom: var(--s-7); background: var(--surface);
}
.idle-head-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: var(--s-4); }
.idle-head-state {
  font-size: 11px; font-weight: 500; padding: var(--s-1) var(--s-4); border-radius: var(--r-pill);
  background: rgba(34,197,94,.16); color: var(--success-solid);
}
.idle-head-meta { font-size: 12px; color: var(--muted); margin-top: var(--s-3); line-height: 1.8; }
.idle-warn { color: var(--warn-solid); margin-left: var(--s-3); }

.idle-gains { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: var(--s-5) 0 var(--s-1); }
.idle-pill {
  font-size: 12px; padding: var(--s-2) var(--s-5); border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.idle-gain-empty { font-size: 12px; color: var(--muted); margin: var(--s-5) 0 var(--s-1); }

.home-btn-danger {
  background: transparent; color: var(--brand); border: 1px solid rgba(239,68,68,.45);
}
.home-btn-danger:hover { background: rgba(239,68,68,.08); }

.den-pick {
  display: flex; align-items: center; gap: var(--s-5); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-6); background: var(--surface); font-size: 13px;
}
.den-pick.on { border-color: var(--brand); background: rgba(239,68,68,.05); }
.den-pick.off { opacity: .5; cursor: not-allowed; }

#homePetBox .hp-block { padding: var(--s-4) 0; border-bottom: 1px solid var(--border); }
#homePetBox .hp-block:last-of-type { border-bottom: 0; }
#homePetBox .hp-block.idle { opacity: .6; }
#homePetBox .hp-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; font-size: 13px; }
#homePetBox .hp-tag { font-weight: 600; flex: 0 0 auto; }
#homePetBox .hp-state {
  font-size: 10.5px; padding: var(--s-1) var(--s-4); border-radius: var(--r-pill);
  background: rgba(34,197,94,.16); color: var(--success-solid);
}
#homePetBox .hp-meta { font-size: 11.5px; color: var(--muted); margin-left: auto; }
#homePetBox .hp-pills { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
#homePetBox .hp-pill {
  font-size: 11.5px; padding: var(--s-2) var(--s-5); border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
#homePetBox .hp-empty { font-size: 11.5px; color: var(--muted); margin-top: var(--s-3); }

#homePetBox .hp-next {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3); padding-top: var(--s-3);
  
  border-top: 1px dashed var(--line-1);
}
#homePetBox .hp-next-t { font-size: 11px; color: var(--muted); margin-right: var(--s-2); }
#homePetBox .hp-pill.sm {
  font-size: 10.5px; padding: 1px var(--s-4); opacity: .9;
  background: transparent;
}

#homePetBox .hp-pill.dim { color: var(--muted); background: transparent; }

.den-pick input[type="checkbox"] {
  width: 16px; height: 16px; min-width: 16px; min-height: 16px;
  flex: 0 0 auto; margin: 0; padding: 0;
  appearance: auto; -webkit-appearance: checkbox;
  accent-color: #ef4444;
}

.idle-mats .idle-pill { font-size: 11px; padding: var(--s-2) var(--s-4); }

.pet-box-cell{
  --c: #94a3b8;
  position: relative; border-radius: var(--r-lg); padding: var(--s-6) var(--s-4) var(--s-5);
  text-align: center; overflow: hidden;
  background: #1A1A1A; color: var(--on-solid);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  
}

.pet-box-cell::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--c) 42%, #101216) 0%,
    color-mix(in srgb, var(--c) 10%, #0b0d11) 100%);
}
.pet-box-cell > *{ position: relative; z-index: 1; }

.pb-merge-pop{
  position:absolute; left:50%; top:38%; transform:translateX(-50%);
  font-size:20px; font-weight:900; pointer-events:none; z-index:3;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
  animation:pbMergePop 1.4s cubic-bezier(.2,.9,.3,1) forwards;
}
.pb-merge-pop.gain{ color:#34D399; }
.pb-merge-pop.lose{ color:#F87171; }
@keyframes pbMergePop{
  0%   { opacity:0; transform:translateX(-50%) translateY(10px) scale(.6); }
  18%  { opacity:1; transform:translateX(-50%) translateY(-4px) scale(1.25); }
  35%  { transform:translateX(-50%) translateY(-10px) scale(1); }
  100% { opacity:0; transform:translateX(-50%) translateY(-34px) scale(.95); }
}

.pet-box-cell.pb-merge-gain{ animation:pbMergeGain 1s ease-out; }
@keyframes pbMergeGain{
  0%,100%{ box-shadow:none; }
  25%    { box-shadow:0 0 0 3px rgba(52,211,153,.75), 0 0 18px rgba(52,211,153,.5); }
}
.pet-box-cell.pb-merge-lose{ animation:pbMergeLose .5s ease-out; }
@keyframes pbMergeLose{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-4px);} 40%{ transform:translateX(4px);}
  60%{ transform:translateX(-3px);} 80%{ transform:translateX(2px);}
}
@media (prefers-reduced-motion: reduce){
  .pb-merge-pop{ animation-duration:.01s; }
  .pet-box-cell.pb-merge-gain, .pet-box-cell.pb-merge-lose{ animation:none; }
}
.pet-box-cell.has{
  box-shadow: 0 4px 16px color-mix(in srgb, var(--c) 26%, transparent); }

.pet-box-cell:not(.has) .pb-art,
.pet-box-cell:not(.has) .pb-count,
.pet-box-cell:not(.has) .pb-label{ opacity: .45; }
.pet-box-cell.c-white  { --c: #cbd5e1; }
.pet-box-cell.c-green  { --c: #22c55e; }
.pet-box-cell.c-blue   { --c: #3b82f6; }
.pet-box-cell.c-purple { --c: #a855f7; }
.pet-box-cell.c-orange { --c: #f97316; }

.pet-box-cell .pb-label{ font-size: 12px; color: rgba(255,255,255,.66); margin-top: var(--s-3); }
.pet-box-cell .pb-count{ font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--on-solid); text-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); }
.pet-box-cell .pb-merge{ margin-top: var(--s-3); }

.chip-box { width: 460px; max-width: 94vw; text-align: left; }
.chip-loading { padding: 28px; text-align: center; color: var(--muted); font-size: 13px; }

.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--s-4); margin: var(--s-6) 0; }

.chip-bonus { font-size: 12px; color: var(--text); background: var(--surface-2);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-6); line-height: 1.7; }
.chip-bonus.dim { color: var(--muted); }
.chip-note { font-size: 12px; color: var(--muted); margin-top: var(--s-4); line-height: 1.7; }
.chip-note.warn { color: var(--warn-text); background: rgba(245,158,11,.12);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-6); }
.chip-sub { font-size: 13px; margin: var(--s-7) 0 var(--s-3); }
.chip-bag { max-height: 190px; overflow-y: auto; }

.pet-box-cell { transition: transform .12s ease, box-shadow .12s ease; }
.pet-box-cell.openable { cursor: pointer; }
.pet-box-cell.openable:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--c) 38%, transparent);
  border-color: color-mix(in srgb, var(--c) 70%, transparent);
}
.pet-box-cell.openable:hover .pa-svg { transform: scale(1.08) rotate(-2deg); }
.pet-box-cell.openable:active { transform: translateY(-1px) scale(.98); }
.pet-box-cell.openable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--c) 80%, transparent); outline-offset: 2px;
}

.pa-svg { width: 62px; height: 62px; transition: transform .15s ease; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges; }
.pet-box-cell .pb-art { height: 62px; display: grid; place-items: center; }
.pb-open-hint { font-size: 10px; color: color-mix(in srgb, var(--c) 78%, var(--on-solid)); margin-top: var(--s-1); }
.pb-open-hint.lack { color: var(--warn-solid); }
.pb-acts { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; margin-top: var(--s-3); }
.pb-acts:empty { display: none; }
.pet-box-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s-6); }

@media (prefers-reduced-motion: reduce) {
  .pet-box-cell, .pa-svg { transition: none; }
  .pet-box-cell.openable:hover { transform: none; }
  .pet-box-cell.openable:hover .pa-svg { transform: none; }
}

.pet-tile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--s-7); margin-bottom: var(--s-3);
}
.pet-tile {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: #1A1A1A; color: var(--on-solid); min-height: 268px;
  box-shadow: var(--sh-3);
}

.pt-bg { position: absolute; inset: 0; z-index: 0; }
.pet-tile[data-role="tank"]     .pt-bg { background: linear-gradient(160deg,#4b5563 0%,#141821 100%); }
.pet-tile[data-role="dps"]      .pt-bg { background: linear-gradient(160deg,#7c2d12 0%,#1b0d08 100%); }
.pet-tile[data-role="assassin"] .pt-bg { background: linear-gradient(160deg,#3b0764 0%,#120a1c 100%); }
.pet-tile[data-role="swift"]    .pt-bg { background: linear-gradient(160deg,#0e7490 0%,#08191f 100%); }
.pet-tile[data-role="drain"]    .pt-bg { background: linear-gradient(160deg,#14532d 0%,#07160d 100%); }
.pet-tile[data-role="support"]  .pt-bg { background: linear-gradient(160deg,#854d0e 0%,#1d1305 100%); }
.pet-tile[data-role="balance"]  .pt-bg { background: linear-gradient(160deg,#334155 0%,#0e1420 100%); }

.pt-emoji {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 128px; opacity: .28; z-index: 1; filter: blur(.3px);
  line-height: 1; pointer-events: none; transform: translateY(-14px);
}

.pt-mask { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,.72) 46%, rgba(26,26,26,.96) 100%); }

.pt-inner { position: relative; z-index: 3; padding: var(--s-6) var(--s-7) var(--s-7);
  display: flex; flex-direction: column; height: 100%; min-height: 268px; }
.pt-head { display: flex; align-items: center; gap: var(--s-4); }
.pt-name { font-size: 16px; font-weight: 700; }
.pt-role { font-size: 11px; padding: var(--s-1) var(--s-4); border-radius: var(--r-pill);
  background: rgba(255,255,255,.16); color: rgba(255,255,255,.9); }

.pt-cp { margin-top: auto; display: flex; align-items: baseline; gap: var(--s-3); }
.pt-cp .k { font-size: 11px; color: rgba(255,255,255,.6); }
.pt-cp .v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pt-cp .mult { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.62); }

.pt-exp { margin-top: var(--s-4); }
.pt-exp-bar { height: 5px; border-radius: var(--r-xs); background: rgba(255,255,255,.16); overflow: hidden; }
.pt-exp-bar i { display: block; height: 100%; border-radius: var(--r-xs);
  background: linear-gradient(90deg,var(--fill-warn-bright),var(--warn-solid)); }
.pt-exp-txt { font-size: 10px; color: rgba(255,255,255,.6); margin-top: var(--s-2); }

.pt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-6); margin-top: var(--s-5); }
.pt-stats > div { display: flex; justify-content: space-between; font-size: 12px; }
.pt-stats span { color: rgba(255,255,255,.6); }
.pt-stats b { font-variant-numeric: tabular-nums; }

.pt-skill { margin-top: var(--s-5); font-size: 11px; line-height: 1.6; color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.09); border-radius: var(--r-md); padding: var(--s-3) var(--s-5); }
.pt-skill b { color: var(--warn-line); }

.pt-acts { display: flex; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }
.pt-btn { flex: 1 1 auto; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); cursor: pointer;
  font-size: 12px; border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.1); color: var(--on-solid); }
.pt-btn:hover { background: rgba(255,255,255,.18); }
.pt-btn.primary { background: var(--brand); border-color: var(--brand); }
.pt-btn.primary:hover { background: var(--danger-solid); }

.pet-tile.shop.owned { filter: saturate(.55); opacity: .72; }

.cap-rank-unit { font-style: normal; font-size: 10px; color: var(--muted); margin-left: var(--s-2); font-weight: 400; }

.tv-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-6); align-items: start;
}

.tv-col { padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--surface-2); }
.tv-col-head { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-4); }
.tv-col-title { font-size: 13px; font-weight: 700; }

.tv-boss-name { display: flex; align-items: flex-start; gap: var(--s-5); margin-bottom: var(--s-4); }
.tvb-icon { font-size: 26px; line-height: 1; }
.tv-boss-name b { font-size: 14px; }
.tvb-mech { line-height: 1.5; }
.tv-boss-layer { display: flex; align-items: baseline; gap: var(--s-5); flex-wrap: wrap; font-size: 13px; }

.tv-hp {
  position: relative; height: 18px; border-radius: var(--r-pill); margin: var(--s-4) 0 var(--s-5);
  background: var(--surface-3); overflow: hidden;
}
.tv-hp > i {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: linear-gradient(90deg, var(--accent-orange), var(--brand));
}
.tv-hp > span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
html.theme-dark .tv-hp > span { color: #fff; }

.tv-boss-strip {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-4) var(--s-6); margin-bottom: var(--s-5);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2);
  font-size: 13px;
}
.tv-boss-strip .tvb-icon { font-size: 18px; }
.tv-boss-strip .capsule-btn { margin-left: auto; }

.pt-own {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  font-size: 10px; font-weight: 700; padding: var(--s-2) var(--s-5); border-radius: var(--r-pill);
  background: rgba(34,197,94,.92); color: var(--on-solid); letter-spacing: .3px;
  box-shadow: 0 2px 8px rgba(34,197,94,.35);
}

.pt-price {
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  flex-wrap: wrap; width: 100%;
}
.pt-price.owned {
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
}
.pt-price .pp-num {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.82);
  font-variant-numeric: tabular-nums;
}

.pt-price .pp-off {
  font-size: 10px; font-weight: 700; padding: var(--s-1) var(--s-4); border-radius: var(--r-pill);
  background: rgba(239,68,68,.9); color: var(--on-solid); letter-spacing: .3px;
}

.pt-price.sale-line { margin-top: var(--s-3); }

.pt-btn.primary.buy {
  background: linear-gradient(160deg,var(--warn-solid),var(--fill-warn-text)); border-color: var(--warn-solid); color: var(--on-warn);
  font-variant-numeric: tabular-nums;
}
.pt-btn.primary.buy:hover:not(:disabled) { background: linear-gradient(160deg,var(--fill-warn-bright),var(--fill-warn-strong)); }
.pt-btn.primary.buy:disabled { cursor: default; opacity: .5; }
.pt-btn.primary.buy s { opacity: .6; margin-right: var(--s-1); font-weight: 400; }
.pt-btn.primary.buy .pt-lack { font-style: normal; font-size: 10px; opacity: .85; margin-left: var(--s-2); }

.tower-shop-stage .pet-tile-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tower-shop-stage .pet-box-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.tower-shop-stage .pet-box-cell .pb-acts { grid-template-columns: 1fr; }

.tnt-overlay{ align-items:center; justify-content:center; }
.tnt-box{
  width:min(380px, 92vw); border-radius:20px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, #241a2e 0%, #14121b 45%, #0d0c12 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04) inset;
  padding:22px 20px 18px; color:var(--on-dark-1);
}
.tnt-head{ display:flex; align-items:center; margin-bottom:16px; }
.tnt-title{ font-size:16px; font-weight:800; letter-spacing:.5px; }
.tnt-x{
  margin-left:auto; background:transparent; border:none; color:var(--on-dark-3);
  font-size:22px; line-height:1; cursor:pointer; padding:0 2px;
}
.tnt-x:hover{ color:var(--on-dark-1); }

.tnt-now{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.tnt-now-label{ font-size:11.5px; color:var(--on-dark-3); }
.tnt-now-num{ font-size:30px; font-weight:800; color:var(--on-dark-gold);
  font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.5px; }
.tnt-now-tier{ margin-left:auto; font-size:13px; font-weight:800; }

.tnt-prog{ margin-bottom:14px; }
.tnt-prog-bar{
  height:5px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden;
}
.tnt-prog-bar > i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#f59e0b,#fbbf24);
  box-shadow:0 0 10px rgba(245,158,11,.55);
}
.tnt-prog-txt{ margin-top:7px; font-size:11.5px; color:var(--on-dark-2); }
.tnt-maxed{ margin-bottom:14px; }

.tnt-list{ display:flex; flex-direction:column; gap:5px; }
.tnt-row{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:11px;
  background:rgba(255,255,255,.035); border:1px solid transparent;
}

.tnt-row:not(.got){ opacity:.85; }
.tnt-row.got{ background:rgba(255,255,255,.07); }

.tnt-row.cur{
  border-color:rgba(245,158,11,.55);
  background:linear-gradient(90deg, rgba(245,158,11,.16), rgba(245,158,11,.04));
}
.tnt-min{
  min-width:38px; font-size:12px; font-weight:700; color:var(--on-dark-3);
  font-variant-numeric:tabular-nums; text-align:right;
}

.tnt-sample{ flex:1; font-size:14px; font-weight:800; letter-spacing:.3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tnt-state{ font-size:11px; color:var(--on-dark-3); font-variant-numeric:tabular-nums; flex-shrink:0; }
.tnt-row.got .tnt-state{ color:#86efac; }
.tnt-row.cur .tnt-state{ color:var(--on-dark-gold); font-weight:700; }

.mg-box{ max-width:400px; }
.mg-rule{ display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 0 6px; font-size:14px; color:var(--on-dark-2, #d8cfcc); }
.mg-rule .mg-from, .mg-rule .mg-to{ font-weight:700; color:var(--on-dark-1, #f6f0ee); }
.mg-arrow{ opacity:.55; }
.mg-rate{ text-align:center; font-size:13px; color:var(--on-dark-2, #d8cfcc); padding-bottom:12px; }
.mg-rate b{ color:#4ade80; font-size:15px; }
.mg-warn{ display:block; margin-top:3px; font-size:12px; color:#fbbf24; }
.mg-qty{ display:flex; align-items:center; gap:8px; padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.mg-qty-label{ font-size:13px; color:var(--on-dark-3, #9d908c); margin-right:auto; }
.mg-step{ width:30px; height:30px; border-radius:6px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:var(--on-dark-1, #f6f0ee); font-size:16px; cursor:pointer; }
.mg-step:hover{ background:rgba(255,255,255,.12); }
.mg-input{ width:64px; height:30px; text-align:center; border-radius:6px;
  border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25);
  color:var(--on-dark-1, #f6f0ee); font-size:14px; font-variant-numeric:tabular-nums; }
.mg-max{ height:30px; padding:0 10px; border-radius:6px; border:1px solid rgba(255,255,255,.18);
  background:transparent; color:var(--on-dark-2, #d8cfcc); font-size:12px; cursor:pointer; white-space:nowrap; }
.mg-max:hover{ background:rgba(255,255,255,.08); }
.mg-sum{ padding:12px 16px; display:flex; flex-direction:column; gap:7px; }
.mg-sum-row{ display:flex; align-items:baseline; gap:8px; font-size:13px; }
.mg-sum-row span{ color:var(--on-dark-3, #9d908c); min-width:56px; }
.mg-sum-row b{ color:var(--on-dark-1, #f6f0ee); font-variant-numeric:tabular-nums; }
.mg-sum-row em{ font-style:normal; color:var(--on-dark-3, #9d908c); font-size:12px; margin-left:auto; }

.tnt-foot{ margin-top:14px; font-size:11px; color:var(--on-dark-3); text-align:center; }

.tnt-sample.tnt-c-green  { color:#4ade80; text-shadow:0 0 10px rgba(74,222,128,.45); }
.tnt-sample.tnt-c-blue   { color:#60a5fa; text-shadow:0 0 10px rgba(96,165,250,.45); }
.tnt-sample.tnt-c-purple { color:#c084fc; text-shadow:0 0 10px rgba(192,132,252,.45); }
.tnt-sample.tnt-c-orange { color:#fbbf24; text-shadow:0 0 10px rgba(251,191,36,.45); }
.tnt-sample.tnt-c-red    { color:#f87171; text-shadow:0 0 10px rgba(248,113,113,.45); }

.tnt-sample.tnt-c-rainbow, .tnt-now-tier.is-rainbow, .tnt-prog-txt b.is-rainbow{
  background:linear-gradient(90deg,#f87171,#fbbf24,#4ade80,#60a5fa,#c084fc,#f87171);
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:tipRainbow 6s linear infinite;
}

.tipname-green  { color:#22c55e; text-shadow:0 0 6px rgba(34,197,94,.35); }
.tipname-blue   { color:#3b82f6; text-shadow:0 0 6px rgba(59,130,246,.35); }
.tipname-purple { color:#a855f7; text-shadow:0 0 7px rgba(168,85,247,.40); }
.tipname-orange { color:#f59e0b; text-shadow:0 0 8px rgba(245,158,11,.45); }
.tipname-red    { color:#ef4444; text-shadow:0 0 9px rgba(239,68,68,.5); }

.tipname-rainbow{ color:#f472b6; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .tipname-rainbow{
    background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#a855f7,#ef4444);
    background-size:300% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:tipRainbow 6s linear infinite;
  }
}
@keyframes tipRainbow{ to{ background-position:300% 0; } }
@media (prefers-reduced-motion: reduce){ .tipname-rainbow{ animation:none; } }

.tip-balance{
  display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap;
  padding:var(--s-5) var(--s-6); border-radius:var(--r-lg);
  background:linear-gradient(135deg, #2a1417, #1a1013); border:1px solid #5b2026;
}
.tip-balance .tb-label{ font-size:12px; color:var(--on-dark-3); display:block; }
.tip-balance .tb-num{ font-size:26px; font-weight:800; color:var(--on-dark-gold);
  font-variant-numeric:tabular-nums; line-height:1.2; }

.tip-balance .tb-side{
  margin-left:auto; font-size:12px; color:var(--on-dark-2); text-align:right;
  background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:var(--r-md);
  padding:var(--s-2) var(--s-4); cursor:pointer; line-height:1.5;
}
.tip-balance .tb-side:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.32); }
.tip-balance .tb-more{ color:var(--on-dark-3); }
.tip-balance .tb-tier.is-rainbow{
  background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#a855f7,#ef4444);
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:tipRainbow 6s linear infinite;
}
.tip-balance .tb-tier{ display:block; margin-top:2px; font-weight:700; }
.tip-tiers{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:var(--s-3); margin-top:var(--s-3); padding-top:9px; }
.tip-tier{
  
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:var(--s-3) var(--s-3); border-radius:var(--r-md); cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink-1);
  font-size:13px; transition:border-color .12s, background .12s;
}
.tip-tier:hover:not(.off){ border-color:var(--warn-line); background:var(--warn-soft); }

.tip-tier.off{ opacity:.45; cursor:not-allowed; }
.tip-tier .tt-pts{ font-weight:700; font-size:12px; color:var(--ink-3); }

.tip-tier .tt-arrow{ display:none; }
.tip-tier .tt-tb{ color:var(--danger-text); font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }

.tip-tier{ position:relative; }
.tip-tier .tt-bonus{ color:var(--success-text); font-weight:800; margin-left:2px; }
.tip-tier .tt-badge{
  
  position:absolute; top:-7px; right:6px; z-index:1;
  padding:1px 6px; border-radius:999px;
  font-size:11px; font-weight:800; line-height:1.5; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  
  color:#fff; background:var(--danger-solid); border:1px solid var(--surface-1);
}

.tip-tier.off .tt-badge{ opacity:.7; }

.den-next-round{
  display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  margin-top:var(--s-3); padding:var(--s-3) var(--s-4);
  border:1px dashed var(--line-2); border-radius:var(--r-md);
  background:var(--surface-2); font-size:12px; color:var(--ink-3);
}
.den-next-round .dnr-left{ color:var(--ink-1); font-variant-numeric:tabular-nums; }
.den-next-round .dnr-gain{ margin-left:auto; color:var(--success-text); }
@media (max-width:520px){ .den-next-round .dnr-gain{ margin-left:0; width:100%; } }

.den-room-list { display: flex; flex-direction: column; gap: var(--s-4); }

.dr-cp { color: var(--muted); font-variant-numeric: tabular-nums; }
.dr-cp.bad { color: var(--brand); }
.dr-tag { font-size: 11px; padding: var(--s-1) var(--s-4); border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--muted); font-weight: 400; }
.dr-tag.run { background: rgba(34,197,94,.16); color: var(--success-solid); }
html.theme-dark .dr-tag.run { color: #86efac; }

.den-lobby-bar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin: var(--s-3) 0 var(--s-4); }
.dlb-sort { font-size: 12px; color: var(--muted); }
.dlb-filter {
  margin-left: auto; padding: var(--s-2) var(--s-5); border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 12px;
}
.dlb-filter.on { background: var(--brand); border-color: var(--brand); color: var(--on-solid); }

.chat-message.system.den-invite {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.den-invite .di-text { flex: 1 1 auto; min-width: 0; }
.den-invite .di-join {
  flex: 0 0 auto; padding: var(--s-2) var(--s-4); border-radius: var(--r-md); cursor: pointer;
  border: 1px solid transparent; background: var(--fill-primary); color: var(--on-dark-1);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.den-invite .di-join:disabled { opacity: .55; cursor: default; }

.den-room-box { border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-6); background: var(--card); }
.den-room-head { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding-bottom: var(--s-5); margin-bottom: var(--s-5); border-bottom: 1px solid var(--border); }
.drh-title { font-size: 14px; font-weight: 700; }

.den-seat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s-4); }
.den-seat {
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6);
  background: var(--surface-2); display: flex; flex-direction: column; gap: var(--s-3); min-height: 118px;
}
.den-seat.me { border-color: var(--brand); box-shadow: 0 0 0 1px rgba(239,68,68,.25); }
.den-seat.ready { background: color-mix(in srgb, #22c55e 8%, var(--surface-2)); }
.den-seat.gone  { background: color-mix(in srgb, #3b82f6 8%, var(--surface-2)); }
.den-seat.empty {
  border-style: dashed; align-items: center; justify-content: center; gap: var(--s-1);
  background: transparent; color: var(--muted);
}
.ds-plus { font-size: 26px; line-height: 1; color: var(--muted); }

.ds-name { font-size: 13px; }

.ds-dim { color: var(--muted); font-size: 12px; }
.ds-dim.sm { font-size: 11px; opacity: .8; }
.den-seat .pt-btn { margin-top: auto; flex: 0 0 auto; font-size: 12px; padding: var(--s-3) var(--s-4); }

.pt-btn.danger { border-color: rgba(239,68,68,.5); color: var(--brand); background: transparent; }
.pt-btn.danger:hover { background: rgba(239,68,68,.1); }

.confirm-box.room-box, .confirm-box.denpick-box { width: min(460px, 94vw); }
.room-preset { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.room-p {
  display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-5) var(--s-3); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); color: var(--text);
}
.room-p b { font-size: 13px; }
.room-p i { font-style: normal; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.room-p.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--card)); }
.room-custom { display: flex; align-items: center; gap: var(--s-5); margin: var(--s-6) 0; }
.room-custom label { font-size: 13px; color: var(--muted); flex: 0 0 auto; }
.room-custom input {
  flex: 1 1 auto; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-variant-numeric: tabular-nums;
}

.confirm-title .dp-n { float: right; font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.pet-pick-grid.modal {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  max-height: 46vh; overflow-y: auto; padding: var(--s-1);
}
.pet-pick-grid.modal .pet-pick-tile { cursor: pointer; }
.pet-pick-grid.modal .pet-pick-tile.off { opacity: .4; cursor: default; }

.den-seat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pet-pick-tile.slot { position: relative; min-height: 104px; }
.pet-pick-tile.slot.me { box-shadow: 0 0 0 2px #ef4444; }
.pet-pick-tile.slot.gone { opacity: .82; }

.ppt-owner {
  position: absolute; left: 6px; bottom: 6px; z-index: 3;
  font-size: 10px; padding: var(--s-1) var(--s-4); border-radius: var(--r-pill);
  background: rgba(0,0,0,.5); color: rgba(255,255,255,.85); backdrop-filter: blur(2px);
}
.ppt-owner.me { background: rgba(239,68,68,.85); color: var(--on-solid); }
.ppt-gone { position: absolute; top: 6px; right: 6px; z-index: 3; font-size: 13px; }

.pet-pick-tile.slot.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1);
  border: 1px dashed var(--border); background: transparent; color: var(--muted);
  box-shadow: none;
}
.pet-pick-tile.slot.empty.can { border-color: rgba(239,68,68,.55); cursor: pointer; }
.pet-pick-tile.slot.empty.can:hover { background: rgba(239,68,68,.06); }

.den-member-pills { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
.dmp {
  display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2);
  font-size: 12px;
}
.dmp.ready { border-color: rgba(34,197,94,.45); background: color-mix(in srgb, #22c55e 10%, var(--surface-2)); }
.dmp.gone  { border-color: rgba(59,130,246,.45); background: color-mix(in srgb, #3b82f6 10%, var(--surface-2)); }
.dmp i { font-style: normal; color: var(--muted); font-size: 11px; }
.dmp-lead { color: var(--warn-text) !important; }
html.theme-dark .dmp-lead { color: #fbbf24 !important; }
.dmp-n { font-variant-numeric: tabular-nums; }
.dmp-kick {
  border: 0; background: transparent; cursor: pointer; color: var(--brand);
  font-size: 12px; padding: 0 var(--s-1); line-height: 1;
}
.dmp-kick:hover { color: var(--danger-text); }

.conquest-subtabs {
  margin: 0; border-radius: 0 0 var(--r-xl) var(--r-xl);
  border: 1px solid var(--border); border-top: 0;
  padding: var(--s-5) var(--s-7);
}
.conquest-pane { margin-top: var(--s-7); }

.pet-feed-tip { margin-top: var(--s-3); font-size: 12px; color: var(--muted); text-align: right; }
.pet-feed-tip.ok { color: var(--success-solid); }
html.theme-dark .pet-feed-tip.ok { color: #86efac; }

.room-cap { display: flex; align-items: center; gap: var(--s-5); margin: 0 0 var(--s-6); }
.room-cap label { font-size: 13px; color: var(--muted); flex: 0 0 auto; }
.room-cap-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); flex: 1 1 auto; }

.dlog-total {
  font-size: 12px; padding: var(--s-4) var(--s-6); border-radius: var(--r-md); margin-bottom: var(--s-5);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.dlog-total b { color: var(--text); font-variant-numeric: tabular-nums; }
.dlog-list { display: flex; flex-direction: column; gap: var(--s-4); }
.dlog-row { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); background: var(--card); }
.dlog-head { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; font-size: 12px; }
.dlog-when { color: var(--muted); }
.dlog-reason { font-weight: 600; }

.dlog-depth { margin-left: auto; color: var(--warn-strong); font-variant-numeric: tabular-nums; }
html.theme-dark .dlog-depth { color: #fbbf24; }
.dlog-gain { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.dlog-note { margin-top: var(--s-3); font-size: 11px; color: var(--muted); }

.confirm-box.chip-detail-box { width: min(460px, 94vw); text-align: left; max-height: 86vh; overflow-y: auto; }
.chip-card[data-chip-detail] { cursor: pointer; }
.chip-d-head { display: flex; align-items: center; gap: var(--s-6); margin-bottom: var(--s-6); }
.chip-d-icon { font-size: 34px; line-height: 1; }
.chip-d-sub { font-size: 12px; color: var(--muted); margin-top: var(--s-2); }

.chip-d-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.chip-d-tier {
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6);
  background: var(--surface-2);
}
.chip-d-tier.adv { border-color: rgba(245,158,11,.5);
  background: color-mix(in srgb, var(--warn-solid) 9%, var(--surface-2)); }

.chip-d-tier.on { box-shadow: 0 0 0 2px rgba(239,68,68,.45); }
.cdt-head { font-size: 13px; font-weight: 700; display: flex; align-items: center; }
.chip-d-tier.adv .cdt-head { color: var(--warn-text); }
html.theme-dark .chip-d-tier.adv .cdt-head { color: #fbbf24; }
.cdt-n { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.cdt-eff { margin: var(--s-3) 0 0; padding-left: var(--s-8); font-size: 12px; line-height: 1.7; }
.cdt-none { margin-top: var(--s-3); font-size: 12px; color: var(--muted); }
.chip-d-h4 { margin: var(--s-7) 0 var(--s-3); font-size: 13px; }
.chip-d-odds { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cdt-odd {
  display: inline-flex; align-items: baseline; gap: var(--s-2); padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2);
  font-size: 12px;
}
.cdt-odd b { font-variant-numeric: tabular-nums; }
.cdt-odd i { font-style: normal; font-size: 10px; color: var(--muted); }
.chip-d-note { font-size: 12px; line-height: 1.75; color: var(--muted); }
.chip-d-note b { color: var(--text); }

.nav-badge {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 var(--s-3);
  border-radius: var(--r-pill); background: var(--brand); color: var(--on-solid);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgba(239,68,68,.18);
  animation: navBadgePop .25s ease-out;
}
@keyframes navBadgePop {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.nav-item.active .nav-badge { background: var(--on-solid); color: var(--brand); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .nav-badge { animation: none; } }

.pet-sec-count { float: right; font-size: 12px; color: var(--muted);
  font-weight: 400; font-variant-numeric: tabular-nums; }

.ppt-check {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: var(--on-solid);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

.chip-box { width: 620px; max-width: 95vw; }
.chip-layout { display: grid; grid-template-columns: 168px 1fr; gap: var(--s-7); margin-bottom: var(--s-2); }
@media (max-width: 620px) { .chip-layout { grid-template-columns: 1fr; } }

.chip-portrait { position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: #1A1A1A; color: var(--on-solid); min-height: 232px; }
.chip-portrait .cp-bg { position: absolute; inset: 0; z-index: 0; }
.chip-portrait[data-role="tank"]     .cp-bg { background: linear-gradient(160deg,#4b5563 0%,#141821 100%); }
.chip-portrait[data-role="dps"]      .cp-bg { background: linear-gradient(160deg,#7c2d12 0%,#1b0d08 100%); }
.chip-portrait[data-role="assassin"] .cp-bg { background: linear-gradient(160deg,#3b0764 0%,#120a1c 100%); }
.chip-portrait[data-role="swift"]    .cp-bg { background: linear-gradient(160deg,#0e7490 0%,#08191f 100%); }
.chip-portrait[data-role="drain"]    .cp-bg { background: linear-gradient(160deg,#14532d 0%,#07160d 100%); }
.chip-portrait[data-role="support"]  .cp-bg { background: linear-gradient(160deg,#854d0e 0%,#1d1305 100%); }
.chip-portrait[data-role="balance"]  .cp-bg { background: linear-gradient(160deg,#334155 0%,#0e1420 100%); }
.cp-emoji { position: absolute; inset: 0; display: flex; align-items: flex-start;
  justify-content: center; padding-top: var(--s-7); font-size: 84px; opacity: .32; z-index: 1;
  filter: blur(.3px); line-height: 1; pointer-events: none; }
.cp-mask { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,.7) 42%, rgba(26,26,26,.97) 100%); }
.cp-inner { position: relative; z-index: 3; padding: var(--s-5) var(--s-6) var(--s-6);
  display: flex; flex-direction: column; height: 100%; min-height: 232px; }
.cp-name { font-size: 15px; font-weight: 700; margin-top: auto; }
.cp-sub { font-size: 11px; color: rgba(255,255,255,.62); }
.cp-cp { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: var(--s-3); }
.cp-cp span { font-size: 10px; font-weight: 400; color: rgba(255,255,255,.55); margin-left: var(--s-3); }
.cp-stats { margin-top: var(--s-4); display: grid; gap: var(--s-1); }
.cp-stats > div { display: flex; justify-content: space-between; font-size: 11.5px; }
.cp-stats span { color: rgba(255,255,255,.6); }
.cp-stats b { font-variant-numeric: tabular-nums; }

.chip-right { display: flex; flex-direction: column; }
.chip-right-head { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-4); }
.chip-right-head b { font-size: 14px; }
.chip-right-head .ch-slots { margin-left: auto; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.chip-right .chip-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); margin: 0 0 var(--s-5); }

.pet-guide-line { line-height: 1.6; }
.pet-guide-btn { margin-left: var(--s-3); height: 24px; padding: 0 var(--s-5); font-size: 11px; vertical-align: 1px; }
.idle-head-title .pet-guide-btn { margin-left: var(--s-4); }
.pb-acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.pb-act {
  font-size: 11px; padding: var(--s-3) 0; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 24%, rgba(255,255,255,.06));
  color: var(--on-solid); font-variant-numeric: tabular-nums;
}
.pb-act:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 45%, rgba(255,255,255,.1)); }
.pb-act:disabled { opacity: .35; cursor: default; }
.pb-act.ghost { border-color: transparent; background: transparent; cursor: default; opacity: .3; }

.pb-act:not(:disabled) {
  background: color-mix(in srgb, var(--c) 16%, rgba(0,0,0,.62));
  border-color: color-mix(in srgb, var(--c) 92%, transparent);
  color: color-mix(in srgb, var(--c) 82%, #fff 18%);
  font-weight: 700;
  
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent),
              0 2px 8px color-mix(in srgb, var(--c) 26%, transparent);
}
.pb-act:not(:disabled):hover {
  background: color-mix(in srgb, var(--c) 30%, rgba(0,0,0,.55));
  color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent),
              0 3px 12px color-mix(in srgb, var(--c) 38%, transparent);
}
.pb-act:not(:disabled):active { transform: translateY(1px); box-shadow: none; }

.pb-act.ghost:not(:disabled) {
  background: transparent; border-color: transparent; box-shadow: none;
  color: inherit; font-weight: normal;
}

.pb-act.buy {
  grid-column: 1 / -1;
  background: linear-gradient(160deg,var(--warn-solid),var(--fill-warn-text));
  border-color: var(--warn-solid);
  color: var(--on-warn); font-weight: 700;
}
.pb-act.buy::before { content: "🏅 "; }
.pb-act.buy:hover:not(:disabled) { background: linear-gradient(160deg,var(--fill-warn-bright),var(--fill-warn-strong)); }
.pb-act.buy:disabled { opacity: .5; cursor: default; }
.pb-act.buy .pb-lack { font-style: normal; font-size: 10px; opacity: .85; margin-left: var(--s-2); }

.pet-sec-coin {
  float: right; font-size: 12px; font-weight: 600; color: var(--warn-strong);
  font-variant-numeric: tabular-nums;
}
html.theme-dark .pet-sec-coin { color: #fbbf24; }

.confirm-box.shop-box { width: min(360px, 92vw); }
.shop-line { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; padding: var(--s-3) 0; border-bottom: 1px dashed var(--border); }
.shop-line b { font-variant-numeric: tabular-nums; }
.shop-qty { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s-3); margin: var(--s-6) 0 var(--s-4); }

.shop-qty { --c: #f59e0b; }
.shop-qty input {
  padding: var(--s-4) var(--s-4); border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 14px; text-align: center;
  font-variant-numeric: tabular-nums; width: 100%;
}
.shop-total { font-size: 13px; color: var(--muted); text-align: right; }
.shop-total b { color: var(--warn-strong); font-variant-numeric: tabular-nums; }
.shop-warn { margin-top: var(--s-4); font-size: 12px; color: var(--warn-text); }
.pet-box-cell .pb-count { font-size: 22px; }
.pet-box-cell .pb-label { font-size: 12px; }

.pet-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: var(--s-5);
}
.pet-pick-tile {
  position: relative; display: block; height: 116px; border-radius: var(--r-lg);
  overflow: hidden; background: #1A1A1A; color: var(--on-solid); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pet-pick-tile input { position: absolute; opacity: 0; pointer-events: none; }
.pet-pick-tile:hover:not(.off) { transform: translateY(-2px); }
.pet-pick-tile.on { box-shadow: 0 0 0 2px #ef4444, 0 6px 16px rgba(239,68,68,.3); }
.pet-pick-tile.off { opacity: .45; cursor: not-allowed; }

.ppt-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.pet-pick-tile[data-role="tank"]     .ppt-bg { background: linear-gradient(160deg,#4b5563 0%,#141821 100%); }
.pet-pick-tile[data-role="dps"]      .ppt-bg { background: linear-gradient(160deg,#7c2d12 0%,#1b0d08 100%); }
.pet-pick-tile[data-role="assassin"] .ppt-bg { background: linear-gradient(160deg,#3b0764 0%,#120a1c 100%); }
.pet-pick-tile[data-role="swift"]    .ppt-bg { background: linear-gradient(160deg,#0e7490 0%,#08191f 100%); }
.pet-pick-tile[data-role="drain"]    .ppt-bg { background: linear-gradient(160deg,#14532d 0%,#07160d 100%); }
.pet-pick-tile[data-role="support"]  .ppt-bg { background: linear-gradient(160deg,#854d0e 0%,#1d1305 100%); }
.pet-pick-tile[data-role="balance"]  .ppt-bg { background: linear-gradient(160deg,#334155 0%,#0e1420 100%); }
.ppt-emoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 64px; opacity: .3; z-index: 1; filter: blur(.3px); line-height: 1; pointer-events: none; }
.ppt-mask { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,.68) 44%, rgba(26,26,26,.96) 100%); }
.ppt-inner { position: relative; z-index: 3; display: flex; flex-direction: column;
  height: 100%; padding: var(--s-5) var(--s-6) var(--s-5); }
.ppt-top { display: flex; align-items: center; gap: var(--s-3); }
.ppt-name { font-size: 13px; font-weight: 700; }
.ppt-role { font-size: 10px; padding: 0 var(--s-3); border-radius: var(--r-pill); background: rgba(255,255,255,.17); }
.ppt-cp { margin-top: auto; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ppt-cp i { font-size: 9px; font-style: normal; font-weight: 400;
  color: rgba(255,255,255,.55); margin-left: var(--s-2); }
.ppt-lv { font-size: 10px; color: rgba(255,255,255,.6); }
.ppt-check {
  position: absolute; top: 7px; right: 8px; z-index: 4;
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; background: rgba(255,255,255,.16); color: transparent;
  border: 1px solid rgba(255,255,255,.3);
}
.pet-pick-tile.on .ppt-check { background: var(--brand); border-color: var(--brand); color: var(--on-solid); }

@media (prefers-reduced-motion: reduce) {
  .pet-pick-tile { transition: none; }
  .pet-pick-tile:hover:not(.off) { transform: none; }
}

.bxo-cards {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: center;
  margin-top: var(--s-7); max-height: 320px; overflow-y: auto; padding: var(--s-1);
}

.pet-lobby-btns { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-5); }
.pet-lobby-btns .pt-btn,
.den-party-list .pt-btn,
.den-party-box .pt-btn {
  flex: 0 0 auto; white-space: nowrap; min-width: 88px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
}
.pet-lobby-btns .pt-btn:hover:not(:disabled),
.den-party-list .pt-btn:hover:not(:disabled),
.den-party-box .pt-btn:hover:not(:disabled) { background: var(--surface-3); }
.pet-lobby-btns .pt-btn.primary,
.den-party-box .pt-btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-solid); }
.pet-lobby-btns .pt-btn:disabled,
.den-party-list .pt-btn:disabled,
.den-party-box .pt-btn:disabled { opacity: .45; cursor: default; }

.pt-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.pt-chip {
  width: 22px; height: 22px; border-radius: var(--r-sm); display: grid; place-items: center;
  font-size: 12px; line-height: 1; flex: 0 0 auto;
}
.pt-chip.basic { background: rgba(148,163,184,.34); border: 1px solid rgba(203,213,225,.5); }
.pt-chip.advanced {
  background: linear-gradient(160deg, rgba(245,158,11,.55), rgba(180,83,9,.4));
  border: 1px solid rgba(253,230,138,.8);
  box-shadow: 0 0 7px rgba(245,158,11,.5);
}
.pt-chip.empty { background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.28); }

.pet-pick-tile.forest { cursor: default; }
.pet-pick-tile.forest.working { box-shadow: 0 0 0 1px rgba(34,197,94,.55); }
.ppt-act {
  position: absolute; right: 8px; bottom: 8px; z-index: 4;
  font-size: 11px; padding: var(--s-2) var(--s-5); border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.14); color: var(--on-solid);
}
.ppt-act:hover { background: rgba(255,255,255,.26); }
.ppt-act.go { background: var(--brand); border-color: var(--brand); }
.ppt-act.go:hover { background: var(--danger-solid); }

.chip-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: var(--s-4);
}
.chip-card-grid.slots { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }

.chip-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: #171a21; color: var(--on-solid); padding: var(--s-5) var(--s-3) var(--s-4);
  border: 1px solid rgba(255,255,255,.14); text-align: center;
  aspect-ratio: 2.6 / 3.4;
  display: flex; flex-direction: column; justify-content: flex-end;
}

.chip-card .cc-bg { position: absolute; inset: 0; z-index: 0; }
.chip-card .cc-bg { background: linear-gradient(160deg, #414b5a 0%, #12151b 100%); }
.chip-card.adv .cc-bg { background: linear-gradient(160deg, #7c5310 0%, #1a1206 100%); }
.chip-card.innate .cc-bg { background: linear-gradient(160deg, #8a6516 0%, #1d1405 100%); }

.chip-card .cc-mark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 52px; opacity: .18; z-index: 1; pointer-events: none; line-height: 1;
}

.chip-card .cc-body { position: relative; z-index: 2; }
.chip-card .cc-ic { font-size: 21px; line-height: 1.1; }
.chip-card .cc-nm { font-size: 11.5px; font-weight: 600; margin-top: var(--s-2); }
.chip-card .cc-tier { font-size: 9.5px; color: rgba(255,255,255,.5); letter-spacing: .06em; margin-top: var(--s-1); }
.chip-card .cc-slot { font-size: 9px; color: rgba(255,255,255,.38); margin-top: var(--s-1); }
.chip-card.adv { border-color: rgba(245,158,11,.7); box-shadow: 0 0 14px rgba(245,158,11,.32); }
.chip-card.adv .cc-nm { color: var(--on-dark-gold); }
.chip-card.adv .cc-tier { color: var(--warn-bright); }
.chip-card.innate { border: 2px solid var(--warn-solid); box-shadow: 0 0 16px rgba(245,158,11,.42); }
.chip-card.innate .cc-nm { color: var(--on-dark-gold); }
.chip-card.innate .cc-tier { color: var(--warn-bright); font-weight: 600; }
.chip-card .cc-star { position: absolute; top: 4px; left: 5px; z-index: 3; font-size: 10px; color: var(--warn-bright); }
.chip-card .cc-n {
  position: absolute; top: -4px; right: -3px; z-index: 3;
  min-width: 19px; padding: 0 var(--s-3); height: 18px; line-height: 18px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700; background: var(--brand); color: var(--on-solid);
  font-variant-numeric: tabular-nums;
}

.chip-card.empty {
  background: transparent; border: 1px dashed rgba(148,163,184,.45);
  color: var(--muted); box-shadow: none;
}
.chip-card.empty .cc-ic { color: var(--muted); font-weight: 300; }
.chip-card.empty .cc-nm { color: var(--muted); font-weight: 400; }
.chip-card.dim { opacity: .42; }

.chip-card .cc-act {
  position: relative; z-index: 3; margin-top: var(--s-4); display: block; width: 100%;
  font-size: 10.5px; padding: var(--s-2) 0; border-radius: var(--r-sm); text-align: center;
  border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.12); color: var(--on-solid);
}
.chip-card .cc-act.go { cursor: pointer; }
.chip-card .cc-act.go:hover { background: rgba(255,255,255,.24); }
.chip-card.adv .cc-act.go { background: rgba(245,158,11,.34); border-color: rgba(245,158,11,.6); }
.chip-card.adv .cc-act.go:hover { background: rgba(245,158,11,.5); }
.chip-card .cc-act.done { color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }

.bxo-cards.chip-card-grid { justify-content: center; max-width: 460px; margin: 14px auto 0; }

#homePetBox .hp-pets { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
#homePetBox .hp-pet {
  --c: #334155;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-5) var(--s-2) var(--s-3); border-radius: var(--r-pill); font-size: 11px; color: var(--on-solid);
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 45%, #0b0d11));
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
}
#homePetBox .hp-pet i { font-style: normal; font-size: 13px; line-height: 1; }
#homePetBox .hp-pet b { font-weight: 600; }
#homePetBox .hp-pet[data-role="tank"]     { --c: #4b5563; }
#homePetBox .hp-pet[data-role="dps"]      { --c: #7c2d12; }
#homePetBox .hp-pet[data-role="assassin"] { --c: #3b0764; }
#homePetBox .hp-pet[data-role="swift"]    { --c: #0e7490; }
#homePetBox .hp-pet[data-role="drain"]    { --c: #14532d; }
#homePetBox .hp-pet[data-role="support"]  { --c: #854d0e; }
#homePetBox .hp-pet[data-role="balance"]  { --c: #334155; }

.pet-feed-segs { display: flex; gap: 2px; background: var(--surface-2, #f1f3f7); border-radius: var(--r-md); padding: 3px; margin: 2px 0 6px; }
.pet-feed-seg { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink-5); font: inherit; font-size: 12px; padding: 5px 2px; border-radius: calc(var(--r-md) - 3px); cursor: pointer; white-space: nowrap; }
.pet-feed-seg i { font-style: normal; font-size: 10.5px; opacity: .75; }
.pet-feed-seg.on { background: var(--surface-1, #fff); color: var(--ink-1); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.pet-feed-group { max-height: 236px; overflow-y: auto; }
.pet-feed-gnote { font-size: 11px; color: var(--ink-5); margin: 2px 2px 4px; }
.pet-feed-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.pet-feed-row + .pet-feed-row { border-top: 1px solid var(--line-1); }
.pet-feed-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet-feed-ctl .pet-feed-input { width: 76px; }
.pet-feed-ctl .pet-feed-max { font-size: 11px; padding: 3px 8px; }
html.theme-dark .pet-feed-segs { background: rgba(255,255,255,.06); }
html.theme-dark .pet-feed-seg.on { background: rgba(255,255,255,.12); }

.pet-feed-float { font-size: 10.5px; font-weight: 600; color: var(--fill-warn-deep, #92400e); background: var(--warn-soft, #fff4e0); border-radius: 999px; padding: 0 6px; margin-left: 4px; vertical-align: 1px; }
.pet-feed-about { font-style: normal; margin-right: -3px; }
.pet-feed-floatnote { display: block; font-style: normal; font-size: 11px; color: var(--ink-5); margin-top: 2px; }
html.theme-dark .pet-feed-float { color: #f5a524; background: rgba(245,165,36,.16); }

.mg-swap { margin-top: 12px; border: 1px solid var(--line-1); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface-1); }
.mg-swap-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mg-swap-head small { color: var(--ink-5); font-size: 11.5px; }
.mg-swap-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.mg-swap-row select { max-width: 150px; }
.mg-swap-row #mgSwapQty { width: 92px; }
.mg-swap-quote { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.mg-swap-quote b { color: var(--ink-1); }

.pet-feed-row { align-items: center; }
.pet-feed-row.none { opacity: .45; }
.pet-feed-have { font-size: 11px; color: var(--muted); margin-left: var(--s-3); }
.pet-feed-have b { color: var(--text); font-variant-numeric: tabular-nums; }
.pet-feed-ctl { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.pet-feed-ctl .pet-feed-input { width: 88px; }
.pet-feed-max {
  font-size: 11px; padding: var(--s-3) var(--s-5); border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  white-space: nowrap; flex: 0 0 auto;
}
.pet-feed-max:hover:not(:disabled) { background: var(--surface-3); }
.pet-feed-max:disabled { opacity: .4; cursor: default; }
.pet-feed-max.all { background: var(--brand); border-color: var(--brand); color: var(--on-solid); }
.pet-feed-max.all:hover { background: var(--danger-solid); }
.pet-feed-total { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }

.home-act-row,
.cap-dgn-actions,
#homePetBox .hp-actions,
.tower-actions,
.idle-actions {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: var(--s-4); margin-top: var(--s-5);
}

.home-act-row > .home-btn,
.cap-dgn-actions > .home-btn,
#homePetBox .hp-actions > .home-btn,
.tower-actions > .home-btn,
.idle-actions > .home-btn {
  flex: 1 1 0; min-width: 104px;
}

.home-act-row > .tower-warn,
.tower-actions > .tower-warn,
.cap-dgn-actions > .cap-dgn-warn,
.idle-actions > .idle-warn { flex: 1 1 100%; }

.tower-net-cap{
  display:block; margin:var(--s-3) 0 var(--s-2); font-size:10px; letter-spacing:.3px;
  color:rgba(255,255,255,.62); text-align:center;
}
.tower-conv-note{
  margin:var(--s-5) 0 var(--s-1); padding:var(--s-4) var(--s-6); border-radius:var(--r-lg); font-size:12px; line-height:1.65;
  color:#8a5a00; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.32);
}
html.theme-dark .tower-conv-note{
  color:#fcd34d; background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.34);
}

.log-line.dodged{ color:#0e7490; font-style:italic; }
html.theme-dark .log-line.dodged{ color:#67e8f9; }

.rift-relic-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4);
}
.rift-relic-card{
  display:flex; flex-direction:column; gap:var(--s-2); align-items:center; text-align:center;
  padding:var(--s-6) var(--s-4); border-radius:var(--r-lg); cursor:pointer;
  background:var(--surface-1); border:1px solid var(--line-2); box-shadow:var(--sh-2);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.rift-relic-card:hover:not(:disabled){ transform:translateY(-2px); box-shadow:var(--sh-3); }
.rift-relic-card:disabled{ opacity:.55; cursor:default; }
.rift-relic-card.r2{ border-color:var(--primary-line); }
.rift-relic-card.r3{ border-color:var(--rare-line); box-shadow:var(--sh-3); }
.rift-relic-card .rr-icon{ font-size:26px; line-height:1; }
.rift-relic-card .rr-name{ font-weight:700; font-size:14px; color:var(--ink-1); }
.rift-relic-card .rr-name em{
  font-style:normal; margin-left:var(--s-1); font-size:11px; font-weight:600;
  color:var(--warn-text); background:var(--warn-soft); border-radius:var(--r-pill); padding:1px var(--s-2);
}
.rift-relic-card .rr-desc{ font-size:12px; line-height:1.55; color:var(--ink-3); }
.rift-relic-card .rr-cost{ font-size:11px; color:var(--danger-text); }
.rift-relic-card .rr-nocost{ font-size:11px; color:var(--ink-5); }

.rift-relic-owned{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2);
  margin:var(--s-4) 0 0; padding:var(--s-3) var(--s-4);
  background:var(--surface-2); border:1px solid var(--line-1); border-radius:var(--r-lg);
}
.rift-relic-owned-t{ font-size:12px; font-weight:700; color:var(--ink-4); margin-right:var(--s-1); }
.rift-relic-chip{
  display:inline-flex; align-items:center; gap:var(--s-1); cursor:default;
  font-size:12px; padding:2px var(--s-3); border-radius:var(--r-pill);
  background:var(--surface-1); border:1px solid var(--line-2); color:var(--ink-2);
}
.rift-relic-chip.r2{ border-color:var(--primary-line); }
.rift-relic-chip.r3{ border-color:var(--rare-line); color:var(--rare-text); }
.rift-relic-chip em{ font-style:normal; font-weight:700; color:var(--warn-text); }

@media (max-width: 640px){
  .rift-relic-grid{ grid-template-columns:1fr; }
  .rift-relic-card{ flex-direction:row; text-align:left; align-items:flex-start; }
  .rift-relic-card .rr-icon{ font-size:22px; }
}

.pt-equips { display: flex; gap: 5px; margin-top: 7px; }
.pt-eq {
  position: relative; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; font-size: 13px;
  background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.2);
  opacity: .45;
}
.pt-eq.on {
  opacity: 1; border-style: solid; border-color: rgba(56,189,248,.6);
  background: rgba(56,189,248,.16);
}
.pt-eq > i {
  position: absolute; right: -3px; bottom: -3px; font-style: normal;
  font-size: 8px; font-weight: 700; padding: 0 3px; border-radius: 4px;
  background: #0ea5e9; color: #fff;
}

.eq-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  max-width: 760px;
}
.eq-slot {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 8px;
  background: var(--surface-2); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 108px;
}
.eq-slot.empty { border-style: dashed; opacity: .7; }
.eq-slot.on { border-color: rgba(14,165,233,.5); background: color-mix(in srgb, #0ea5e9 8%, var(--surface-2)); }

.eq-slot .pt-btn { margin-top: auto; font-size: 11px; padding: 4px 8px; }

.land-card-status.is-low{ color: var(--warn-text); }
html.theme-dark .land-card-status.is-low{ color: var(--warn-text); }

.mail-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-3) var(--s-4); margin-bottom:var(--s-4);
  background:var(--warn-soft); border:1px solid var(--warn-line); border-radius:var(--r-lg);
}
.mail-toolbar-t{ font-size:13px; font-weight:700; color:var(--warn-text); }

.mail-item{
  border:1px solid var(--line-1); border-radius:var(--r-lg);
  padding:var(--s-5); margin-bottom:var(--s-4); background:var(--surface-1);
}
.mail-item.is-claimed{ opacity:.62; }
.mail-item-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4); }
.mail-item-title{ font-size:14px; color:var(--ink-1); }
.mail-item-time{ font-size:12px; color:var(--ink-5); white-space:nowrap; }
.mail-item-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); margin-top:var(--s-3); flex-wrap:wrap;
}
.mail-item-reward{ font-size:13px; color:var(--ink-3); }
.mail-item-more{ margin-top:var(--s-3); }
.mail-item-more summary{
  cursor:pointer; font-size:12px; color:var(--ink-5); list-style:none;
  padding:var(--s-1) 0; user-select:none;
}
.mail-item-more summary::-webkit-details-marker{ display:none; }
.mail-item-more summary::before{ content:"▸ "; }
.mail-item-more[open] summary::before{ content:"▾ "; }
.mail-item-more summary:hover{ color:var(--ink-3); }
.mail-item-more p{
  margin:var(--s-2) 0 0; font-size:13px; line-height:1.7; color:var(--ink-3);
  white-space:pre-wrap;
}
@media (max-width: 640px){
  .mail-item-foot{ align-items:flex-start; flex-direction:column; }
}

.den-room-card.off{ opacity:.6; }
.den-room-head{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-3); margin-bottom:var(--s-3);
}
.drc-title{ font-size:14px; color:var(--ink-1); }
.drc-meta{ font-size:12px; color:var(--ink-4); }
.den-seat-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(112px, 1fr)); gap:var(--s-2);
}
.den-seat{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-1);
  min-height:58px; padding:var(--s-2); border-radius:var(--r-md); text-align:center;
}

.den-seat.taken{ background:var(--surface-2); border:1px solid var(--line-2); }
.den-seat.taken.me{ border-color:var(--primary-line); background:var(--primary-soft); }
.den-seat.empty{ border:1px dashed var(--line-3); }
.ds-name{ font-size:12px; font-weight:700; color:var(--ink-2); max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.den-seat.empty .ds-name{ color:var(--ink-5); font-weight:400; }
.ds-tag{ font-size:11px; color:var(--ink-5); }

.ds-pet{ font-size:13px; font-weight:700; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-petmeta{ font-size:11px; color:var(--ink-5); font-variant-numeric:tabular-nums; }
.ds-owner{ font-size:11px; color:var(--ink-6); margin-top:auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.drc-depth{ font-size:12px; font-weight:700; color:var(--warn-text);
  background:rgba(245,158,11,.15); border-radius:var(--r-pill);
  padding:1px 8px; font-variant-numeric:tabular-nums; }
html.theme-dark .drc-depth{ color:#fbbf24; }
.ds-join{
  font-size:11px; font-weight:700; cursor:pointer; padding:2px var(--s-3);
  border-radius:var(--r-pill); border:1px solid var(--primary-line);
  background:var(--primary-soft); color:var(--primary-text);
}
.ds-join:disabled{ cursor:default; opacity:.5; border-color:var(--line-2);
  background:var(--surface-3); color:var(--ink-5); }
.ds-join:hover:not(:disabled){ background:var(--primary-solid); color:var(--on-solid); }

.pet-hub-subtabs{ margin-bottom:var(--s-4); }

.nsg-count{
  flex-shrink:0; margin-left:var(--s-2); font-size:10px; color:var(--on-dark-3);
  font-variant-numeric:tabular-nums;
}

.rift-act.auto{ border-color: var(--primary-line); }
.rift-act.auto:hover:not(:disabled){ background: var(--primary-soft); }

.waste-card-hazard{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.06) 0 10px, transparent 10px 22px);
}

.waste-cleanup-card.is-ready .waste-card-hazard{
  background:repeating-linear-gradient(135deg,
    rgba(110,231,135,.12) 0 10px, transparent 10px 22px);
}

.rr-stack{
  display:block; margin-top:var(--s-2); padding-top:var(--s-2);
  border-top:1px dashed var(--line-1); font-size:11px; line-height:1.7;
}
.rr-stack > em{ font-style:normal; color:var(--ink-5); margin-right:var(--s-1); }
.rr-stack-row{ display:block; color:var(--ink-4); }
.rr-stack-row b{ color:var(--ink-3); font-weight:600; }
.rr-stack-row b.to{ color:var(--success-text); font-weight:700; }

.raid-formation { display: flex; flex-direction: column; gap: 10px; }
.raid-line {
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  padding: 8px;
}

.raid-line-front { border-color: var(--warn-line); }
.raid-line-tag {
  font-size: 12px; font-weight: 700; margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.raid-line-tag span { font-weight: 400; font-size: 11px; color: var(--text-muted); }

.raid-line-front .raid-line-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-items: stretch; }
.raid-line-back .raid-line-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: stretch; }
.raid-formation-hint { font-size: 12px; color: var(--primary-text); margin-top: 6px; min-height: 18px; }

.raid-card {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden; cursor: pointer;
  border: 1px solid var(--border-color);
  border-left-width: 3px;
  border-radius: 12px;
  background: var(--surface-1);
  
  min-height: 176px;
}
.raid-card.is-self { border-left-color: #22c55e; }
.raid-card.is-clone { border-left-color: #6366f1; }
.raid-card.is-robot { border-left-color: #94a3b8; }

.raid-card.is-picked { box-shadow: inset 0 0 0 2px var(--primary-line); }
.raid-card-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: .14;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}
.raid-card-bgimg { width: 100%; height: 100%; object-fit: cover; }
.raid-card-bgemo { font-size: 64px; line-height: 1; }
.raid-card-body {
  position: relative;
  display: flex; flex-direction: column;
  gap: 2px; padding: 8px 9px; flex: 1; min-width: 0;
}
.raid-card-head { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.raid-card-ico { font-size: 14px; line-height: 1; }
.raid-card-cls { color: var(--text-muted); font-weight: 600; }
.raid-card-title { font-size: 14px; font-weight: 800; line-height: 1.3; }
.raid-card-sub {
  font-size: 11px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.raid-card-stats { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; }
.raid-card-stat {
  display: flex; justify-content: space-between; gap: 4px;
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  
  white-space: nowrap;
}
.raid-card-stat b { color: var(--text-main); font-weight: 700; }

.raid-card-actions { margin-top: auto; padding-top: 8px; }
.raid-card-btn { display: block; width: 100%; padding: 3px 6px; font-size: 12px; }

.raid-card-btn-ghost { visibility: hidden; pointer-events: none; }
.raid-card-btn-ghost::after { content: "占"; }

.raid-friends-head { font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.raid-friends { display: flex; flex-direction: column; gap: 4px; border-radius: 8px; }
.raid-friends.flash { box-shadow: 0 0 0 2px var(--primary-line); transition: box-shadow .3s; }
.raid-friend {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 8px;
  font-size: 13px;
}
.raid-friend-name { font-weight: 600; }
.raid-friend-id { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  
  .raid-line-back .raid-line-cards { grid-template-columns: repeat(2, 1fr); }
  .raid-line-back .raid-line-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  
  .raid-card-stats { grid-template-columns: 1fr; }
  .raid-card-bgemo { font-size: 52px; }
}

.raid-rp-speeds { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.raid-rp-spd { padding: 2px 10px; font-size: 12px; }
.raid-rp-spd.on { background: var(--primary-soft); border-color: var(--primary-line); }
.raid-rp-side {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
}
.raid-rp-vs {
  text-align: center; font-weight: 700; font-size: 12px;
  color: var(--text-muted); margin: 8px 0; letter-spacing: 2px;
}
.raid-rp-unit {
  position: relative; overflow: hidden;
  border: 1px solid var(--border-color); border-radius: 8px;
  padding: 6px 8px; background: var(--bg-card);
}
.raid-rp-unit.team { border-left: 3px solid #22c55e; }
.raid-rp-unit.mon { border-left: 3px solid #ef4444; }
.raid-rp-unit.dead { opacity: .38; }

.raid-rp-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; opacity: .16; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
}
.raid-rp-inner { position: relative; }
.raid-rp-hd { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.raid-rp-nm { font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raid-rp-sp { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.raid-rp-hp, .raid-rp-atb {
  position: relative; height: 14px; border-radius: 4px;
  background: var(--surface-2); overflow: hidden; margin-top: 4px;
}
.raid-rp-hp .f { height: 100%; background: #22c55e; }

.raid-rp-atb { height: 10px; }
.raid-rp-atb .f { height: 100%; background: #8b5cf6; }
.raid-rp-atb .f.ready { background: #f59e0b; }
.raid-rp-hp .t, .raid-rp-atb .t {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  font-variant-numeric: tabular-nums;
}
.raid-rp-pops { position: absolute; inset: 0; pointer-events: none; }
.raid-rp-pop {
  position: absolute; top: 6px;
  font-size: 12px; font-weight: 700;
  animation: raidPop .9s ease-out forwards;
}
.raid-rp-pop.dmg { color: #fca5a5; }
.raid-rp-pop.crit { color: #fbbf24; font-size: 14px; }
.raid-rp-pop.sub { color: #c4b5fd; font-size: 11px; }
.raid-rp-pop.heal { color: #86efac; }
@keyframes raidPop {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-26px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .raid-rp-pop { animation-duration: .01ms; }
}

.raid-battle-box .raid-rp-pop, .raid-replay-modal .raid-rp-pop {
  font-size: 14px; line-height: 1.2; padding: 1px 5px; border-radius: 4px;
  background: rgba(15, 23, 42, .72);
  animation: raidPop889 1.5s ease-out forwards;
}
.raid-battle-box .raid-rp-pop.crit, .raid-replay-modal .raid-rp-pop.crit { font-size: 16px; }
.raid-battle-box .raid-rp-pop.sub, .raid-replay-modal .raid-rp-pop.sub { font-size: 12px; }
@keyframes raidPop889 {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(-14px); opacity: 1; }
  100% { transform: translateY(-24px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .raid-battle-box .raid-rp-pop, .raid-replay-modal .raid-rp-pop { animation-duration: .01ms; }
}

#raidFxLayer { position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden; }
#raidFxLayer > div { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.raid-comet {
  --k: #f59e0b;
  width: 44px; height: 5px; margin: -2.5px 0 0 -40px; border-radius: 3px;
  transform-origin: 40px 50%;   
  background: linear-gradient(90deg, transparent, var(--k) 55%, #fff);
  box-shadow: 0 0 10px var(--k), 0 0 3px var(--k);
}
.raid-comet.skill { --k: #8b5cf6; width: 58px; height: 8px; margin: -4px 0 0 -54px; transform-origin: 54px 50%; }
.raid-comet.mon { --k: #ef4444; }
.raid-spark { --k: #f59e0b; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--k); }
.raid-spark.skill { --k: #8b5cf6; }
.raid-spark.mon { --k: #ef4444; }

.raid-rp-front { flex: none; font-size: 13px; line-height: 1; cursor: help; }
.raid-rp-unit.team.front { border-top: 3px solid #f59e0b; }

@media (max-width: 520px) { .raid-rp-unit.team.front .raid-rp-sp { display: none; } }

:root{
  --rp-tick: #dce3ea;
  --rp-cls-warrior:#ea580c; --rp-cls-assassin:#9333ea; --rp-cls-mage:#0284c7;
  --rp-cls-tank:#475569;    --rp-cls-paladin:#ca8a04;
}
html.theme-dark{
  --rp-tick: #1b232c;
  
  --rp-cls-warrior:#fb923c; --rp-cls-assassin:#c084fc; --rp-cls-mage:#38bdf8;
  --rp-cls-tank:#94a3b8;    --rp-cls-paladin:#facc15;
}
.raid-rp-unit.cls-warrior{ --cls: var(--rp-cls-warrior); }
.raid-rp-unit.cls-assassin{ --cls: var(--rp-cls-assassin); }
.raid-rp-unit.cls-mage{ --cls: var(--rp-cls-mage); }
.raid-rp-unit.cls-tank{ --cls: var(--rp-cls-tank); }
.raid-rp-unit.cls-paladin{ --cls: var(--rp-cls-paladin); }

.raid-rp-unit.team[class*="cls-"]{ border-left-color: transparent; }
.raid-rp-unit[class*="cls-"]::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--cls, #22c55e);
}

.raid-rp-cls{
  flex:none; width:16px; height:16px; border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; line-height:1;
  color: var(--cls, var(--text-muted));
  background: color-mix(in srgb, var(--cls, #94a3b8) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--cls, #94a3b8) 38%, transparent);
}

.raid-rp-hp{
  height: 12px;
  background: repeating-linear-gradient(90deg,
    var(--surface-2) 0 19%, var(--rp-tick) 19% 20%);
}
.raid-rp-hp .f{ background: linear-gradient(180deg, #34d399, #16a34a); }
.raid-rp-unit.mon .raid-rp-hp .f{ background: linear-gradient(180deg, #f87171, #dc2626); }

.raid-rp-atb{ height: 6px; margin-top: 5px; }
.raid-rp-atb .t{ display: none; }

.raid-rp-foot{ display:flex; align-items:center; gap:6px; margin-top:6px; min-height:17px; }
.raid-rp-foot .raid-rp-sp{ margin-left:auto; font-size:11px; }
.raid-rp-skill{
  display:inline-flex; font-size:10px; font-weight:700; line-height:1.5;
  padding:1px 7px; border-radius:999px; white-space:nowrap;
  max-width:72%; overflow:hidden; text-overflow:ellipsis;
  background: color-mix(in srgb, #8b5cf6 14%, transparent);
  color:#7c3aed; border:1px solid color-mix(in srgb, #8b5cf6 34%, transparent);
}
html.theme-dark .raid-rp-skill{ color:#c4b5fd; }

.raid-rp-skill.idle{
  background: var(--surface-2); color: var(--text-muted); border-color: var(--border-color);
}

.raid-rp-unit .rb-hire-left,
.raid-rp-unit .raid-rp-seat{
  position:absolute; top:0; right:0; z-index:2; margin-left:0;
  display:inline-flex; align-items:center; gap:2px;
  border-radius:0 0 0 7px; padding:1px 6px;
  font-size:9.5px; font-weight:800; line-height:1.35;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.raid-rp-unit .rb-hire-left.is-btn::after{ font-size:8px; margin-left:0; }
.raid-rp-unit .rb-hire-left.is-btn:active{ transform:none; filter:brightness(1.06); }

.raid-rp-seat{
  background: var(--surface-2); color: var(--text-muted);
  border:1px solid var(--border-color); border-top:0; border-right:0;
}
.raid-rp-seat.robot{ opacity:.85; }

.raid-rp-unit.hired .raid-rp-hd{ padding-right: 72px; }
.raid-rp-unit.seated .raid-rp-hd{ padding-right: 44px; }

.raid-rp-unit.hired .raid-rp-pop,
.raid-rp-unit.seated .raid-rp-pop{ top: 22px; }

.cc-refund { border-left: 3px solid var(--success-solid, #16a34a); }
.cc-refund-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 0; font-size: 13px;
  
  font-variant-numeric: tabular-nums;
}
.cc-refund-row b { color: var(--success-text); }
.cc-refund-note {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--border-color);
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
}

.raid-floor-list {
  display: flex; gap: 6px; margin-top: 8px;
  overflow-x: auto; padding-bottom: 4px;
  
  padding-top: 10px;
}
.raid-floor-warn {
  margin-top: 8px; padding: 6px 8px; border-radius: 8px;
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  font-size: 12px; line-height: 1.6;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.raid-battle-box { margin-bottom: 10px; }

.raid-battle-box .raid-rp-side {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px;
}
.raid-battle-box .raid-rp-unit { min-height: 78px; }

@media (max-width: 560px) {
  .raid-battle-box .raid-rp-side { grid-template-columns: repeat(2, 1fr); }
}

.raid-replay-modal { width: min(880px, 94vw); max-width: none; }
.raid-replay-modal .raid-rp-side { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.raid-replay-modal .raid-rp-unit { min-height: 96px; }
.raid-replay-modal .raid-rp-bg { opacity: .2; }
.raid-replay-modal .raid-rp-bgemo, .raid-replay-modal .raid-rp-unit .raid-rp-bg { font-size: 62px; }
@media (max-width: 560px) {
  .raid-replay-modal .raid-rp-side { grid-template-columns: repeat(2, 1fr); }
}

.raid-earn .pg-row b { font-size: 15px; }

.raid-recent { display: inline-flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.raid-recent i { font-style: normal; width: 18px; height: 18px; border-radius: 5px; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; background: var(--success-soft, #f0fdf4); color: var(--success-text, #15803d); }
.raid-recent i.l { background: var(--danger-soft, #fef2f2); color: var(--danger-text, #b91c1c); }
.raid-pop { display: inline-block; animation: raidPop .5s ease; }
@keyframes raidPop { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .raid-pop { animation: none; } }
.raid-round-now { font-size: 12px; font-weight: 700; margin-left: 6px; }
.raid-round-last { font-size: 11.5px; font-weight: 700; margin-left: 6px; padding: 1px 8px; border-radius: 99px; }
.raid-round-last:empty { display: none; }
.raid-round-last.w { background: var(--success-soft, #f0fdf4); color: var(--success-text, #15803d); }
.raid-round-last.l { background: var(--danger-soft, #fef2f2); color: var(--danger-text, #b91c1c); }
#raidBattleClock.is-loss { color: var(--danger-text, #b91c1c); }

.raid-card-tough { margin-left: auto; font-size: 10.5px; line-height: 1; padding: 2px 6px; border-radius: 99px;
  background: var(--surface-3, #f1f5f9); color: var(--ink-5, #64748b); white-space: nowrap; }
.raid-card-tough.top { background: var(--success-soft, #f0fdf4); color: var(--success-text, #15803d); }
.raid-def-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 8px 11px;
  border-radius: 9px; font-size: 13px; background: var(--warn-soft, #fffbeb); color: var(--warn-text, #b45309); }
.raid-def-line b { font-size: 15px; }
.raid-def-line .home-btn { margin-left: auto; }
.raid-def-line.ok { background: var(--success-soft, #f0fdf4); color: var(--success-text, #15803d); }

.raid-auto-btn { padding: 2px 10px; font-size: 12px; }
.raid-auto-btn.on { border-color: var(--success-solid); color: var(--success-text); }

.raid-rp-unit { transition: box-shadow .12s; }
.raid-rp-unit.acting { box-shadow: inset 0 0 0 2px var(--warn-solid); }
@media (prefers-reduced-motion: reduce) { .raid-rp-unit { transition: none; } }

.raid-battle-idle .pg-body { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.raid-rp-totals { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.raid-rp-total { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.raid-rp-total > span { flex: 0 0 30px; color: var(--text-muted); }
.raid-rp-total .b {
  flex: 1 1 auto; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border-color);
}
.raid-rp-total .b > i { display: block; height: 100%; width: 100%; transition: width .18s linear; }
.raid-rp-total.foe .b > i { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.raid-rp-total.mine .b > i { background: linear-gradient(90deg, #15803d, #22c55e); }
.raid-rp-total > b {
  flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--text-muted); min-width: 92px; text-align: right;
}
.raid-rp-unit.hurt { box-shadow: inset 0 0 0 2px var(--danger-solid), inset 0 0 18px rgba(239, 68, 68, .35); }
@media (prefers-reduced-motion: reduce) {
  .raid-rp-total .b > i { transition: none; }

.raid-rp-total.rage .b { height: 5px; border-radius: 3px; }
.raid-rp-total.rage .b > i { width: 0%; background: linear-gradient(90deg, #f59e0b, #ef4444); }
.raid-rp-total.rage > span { color: #b45309; }
.raid-rp-total.rage > b { min-width: 52px; }
.raid-rp-total.rage .b > i.full {
  background: linear-gradient(90deg, #fbbf24, #f97316);
  box-shadow: 0 0 6px 1px rgba(249,115,22,.75);
}
}

.raid-wiz-nav {
  display: flex; gap: 6px; padding: 10px 12px 0;
  overflow-x: auto; scrollbar-width: none;
}
.raid-wiz-nav::-webkit-scrollbar { display: none; }
.raid-wiz-tab {
  flex: 1 1 0; min-width: 118px;
  display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto;
  gap: 0 8px; align-items: center; text-align: left;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  color: var(--text-muted); font: inherit;
  border-bottom: 2px solid var(--border-color);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.raid-wiz-tab:hover { background: var(--surface-2); }
.raid-wiz-n {
  grid-row: 1 / span 2; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-style: normal;
  font-size: 12px; font-weight: 800;
  background: var(--surface-2); color: var(--text-muted);
}
.raid-wiz-t { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.raid-wiz-s {
  font-size: 11px; line-height: 1.4; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.raid-wiz-tab.done .raid-wiz-n { background: var(--success-solid); color: #fff; }
.raid-wiz-tab.done .raid-wiz-t { color: var(--color-green-text, var(--text-muted)); }

.raid-wiz-tab.on {
  border-bottom-color: var(--primary-solid);
  background: var(--primary-soft);
  border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.raid-wiz-tab.on .raid-wiz-n { background: var(--primary-solid); color: #fff; }
.raid-wiz-tab.on .raid-wiz-t { color: var(--primary-text); }

.raid-step-body { padding-top: 12px; }
.raid-step-lead {
  font-size: 12px; line-height: 1.7; color: var(--text-muted); margin-bottom: 10px;
}
.raid-step-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.raid-wiz-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px; border-top: 1px solid var(--border-color); margin-top: 4px;
}

.raid-fc {
  flex: 0 0 auto; width: 84px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  position: relative; padding: 10px 6px 8px;
  border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--bg-card); cursor: pointer; font: inherit;
  transition: border-color .12s, transform .12s;
}
.raid-fc:hover { border-color: var(--primary-line); transform: translateY(-1px); }
.raid-fc-n {
  font-size: 22px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink-1, inherit);
}
.raid-fc-u { font-size: 10px; color: var(--text-muted); margin-top: -2px; }
.raid-fc-bar {
  width: 100%; height: 4px; border-radius: 2px; margin-top: 6px;
  background: var(--surface-2); overflow: hidden;
}
.raid-fc-bar > i { display: block; height: 100%; }
.raid-fc-rate, .raid-fc-gold {
  font-size: 10px; font-variant-numeric: tabular-nums; color: var(--text-muted);
}

.raid-fc.hi  .raid-fc-bar > i { background: var(--success-solid); }
.raid-fc.mid .raid-fc-bar > i { background: var(--warn-solid); }
.raid-fc.lo  .raid-fc-bar > i { background: var(--danger-solid); }
.raid-fc.lo .raid-fc-n { color: var(--text-muted); }

.raid-fc.on {
  border-color: var(--primary-solid); border-width: 2px; padding: 9px 5px 7px;
  background: var(--primary-soft);
}
.raid-fc.on .raid-fc-n { color: var(--primary-text); }
.raid-fc-rec {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: 9px; font-weight: 700; line-height: 1;
  padding: 2px 6px; border-radius: 6px; white-space: nowrap;
  background: var(--success-solid); color: #fff;
}

.raid-confirm {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin-bottom: 12px;
}
.raid-cf {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border-color);
}
.raid-cf > span { font-size: 11px; color: var(--text-muted); flex: 0 0 auto; }
.raid-cf > b { font-size: 13px; margin-left: auto; text-align: right; }
.raid-go { width: 100%; padding: 12px; font-size: 15px; font-weight: 700; }

@media (max-width: 560px) {
  
  .raid-wiz-nav { padding: 10px 8px 0; gap: 4px; }
  .raid-wiz-tab { min-width: 0; padding: 8px 6px; gap: 0 6px; }
  .raid-wiz-s { display: none; }
  .raid-wiz-t { font-size: 12px; }
  .raid-fc { width: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .raid-fc { transition: none; }
  .raid-fc:hover { transform: none; }
}

.raid-round-tag {
  display: inline-flex; align-items: center; padding: 2px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--primary-solid); color: #fff;
}

.raid-log {
  display: flex; gap: 4px; margin-bottom: 8px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.raid-log::-webkit-scrollbar { display: none; }
.raid-log-i {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  min-width: 38px; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--border-color); background: var(--surface-2);
  line-height: 1.2;
}
.raid-log-i > b { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.raid-log-i > i { font-size: 9px; font-style: normal; color: var(--text-muted); }

.raid-log-i.win  { border-left: 3px solid var(--success-solid); }
.raid-log-i.lose { border-left: 3px solid var(--danger-solid); }
.raid-log-i.lose > b { color: var(--text-muted); }

.raid-extra-row { align-items: flex-start; }
.raid-extras { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 70%; }

.raid-supply-bar { height: 4px; margin: 8px 0 2px; border-radius: 999px;
  background: var(--line-1); overflow: hidden; }
.raid-supply-bar > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa, #2563eb); transition: width .3s ease; }
.raid-supply-cost { flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }

.raid-supply-lack { color: #dc2626; }

.eq-trace { margin-top: 10px; border-top: 1px dashed var(--line-1); padding-top: 10px; }
.eq-trace > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 8px; background: #f8f9fb; border: 1px solid #eceff3; border-radius: 9px; padding: 9px 12px; font-size: 13px; }
.eq-trace > summary::-webkit-details-marker { display: none; }
.eq-trace > summary::before { content: "▶"; color: #9ca3af; font-size: 10px; flex: none; }
.eq-trace[open] > summary::before { content: "▼"; }
.eq-trace-sum { color: #4b5563; }
.eq-trace-sum em { color: #9ca3af; font-style: normal; margin-left: 4px; }
.eq-trace-body { padding: 10px 4px 2px; }
.eq-trace-who { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: #fff; border: 1px solid #eceff3; border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.eq-trace-av { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex: none;
  
  display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; }

.eq-trace-av > * { width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; margin: 0; min-width: 0; }
.eq-trace-av img, .eq-trace-av svg { width: 100%; height: 100%; display: block; }
.eq-trace-nm { display: flex; flex-direction: column; line-height: 1.3; }
.eq-trace-nm em { color: #9ca3af; font-style: normal; font-size: 11px; }
.eq-trace-go { margin-left: auto; color: #9ca3af; font-size: 12px; flex: none; }
.eq-trace-sec { font-weight: 700; color: #374151; font-size: 12px; margin: 12px 0 4px; }
.eq-trace-t { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px; }
.eq-trace-dt { color: #9ca3af; white-space: nowrap; }
.eq-trace-empty { color: #9ca3af; font-size: 13px; padding: 2px 0; }

.ex-eqd-gems { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ex-eqd-gem { font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: #ede9fe; color: #5b21b6; font-weight: 600; }

.hire-btn.renew { background: #2563eb; border-color: #2563eb; }
.hire-btn.renew:hover { background: #1d4ed8; border-color: #1d4ed8; }

.title-picker-hint { font-size: 11.5px; line-height: 1.6; color: var(--text-muted); margin: 6px 0 8px; }
.title-picker-row .tp-check { flex: 0 0 auto; margin-right: 6px; font-size: 14px; }
.title-picker-row .tp-name { flex: 1 1 auto; }
.title-picker-row.is-blocked { opacity: .45; cursor: not-allowed; }

.idle-pill.box-pill { border: 1px solid transparent; font-weight: 600; }

.buf-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border-color);
}
.buf-row:last-of-type { border-bottom: 0; }

.buf-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }

.buf-src { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.buf-side { flex: 0 0 auto; text-align: right; }
.buf-pct { font-weight: 800; font-size: 16px; color: var(--success-text); }
.buf-left { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.buf-foot { font-size: 11.5px; line-height: 1.7; color: var(--text-muted); margin-top: 12px; }

.buf-row { flex-direction: column; align-items: stretch; gap: 6px; }
.buf-count {
  margin-left: 6px; font-size: 11px; font-weight: 600;
  color: var(--text-muted); background: var(--surface-2);
  border-radius: 999px; padding: 1px 8px;
}
.buf-plot {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 8px; background: var(--surface-2);
}
.buf-plot-main { flex: 1 1 auto; min-width: 0; }
.buf-plot-where { font-size: 12.5px; font-weight: 600; }

.buf-nominal {
  font-size: 10.5px; color: var(--text-muted); margin-top: 1px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.ik-sell-open{ margin: 6px 0 8px; }
.ik-sell-open .home-btn{ width: 100%; }
.ik-sell{
  border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--surface-2); padding: 10px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.ik-sell-row{ display: flex; gap: 8px; }
.ik-sell-row label{
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted);
}
.ik-sell-input{
  flex: 1; min-width: 0; width: 100%;
  padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 8px;
  background: var(--bg-card); color: var(--text-main);
  font: inherit; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums;
}
.ik-sell-meta{ font-size: 11.5px; line-height: 1.8; color: var(--text-muted); }
.ik-sell-meta b{ color: var(--text-main); font-variant-numeric: tabular-nums; }
.ik-sell-bad{ color: var(--danger-text, #b91c1c); font-weight: 700; }
.ik-sell-act{ display: flex; gap: 8px; }
.ik-sell-act .home-btn{ flex: 1; }

.wk-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(236px,1fr)); gap:10px; }
.wk-card{
  display:flex; flex-direction:column; gap:7px; min-width:0;
  border:1px solid var(--border-color); border-radius:10px;
  background:var(--bg-card); padding:10px 11px;
}
.wk-top{ display:flex; align-items:center; gap:6px; }
.wk-name{ font-weight:700; font-size:13.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-tier{ font-size:10px; font-weight:800; padding:1px 7px; border-radius:999px; white-space:nowrap; }
.wk-tier.t1{ color:#0e7490; background:rgba(14,116,144,.12); border:1px solid rgba(14,116,144,.3); }
.wk-tier.t2{ color:#a16207; background:rgba(161,98,7,.14); border:1px solid rgba(161,98,7,.32); }
html.theme-dark .wk-tier.t1{ color:#67e8f9; }
html.theme-dark .wk-tier.t2{ color:#fcd34d; }
.wk-facts{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.wk-fact{
  font-size:11px; font-weight:700; padding:1px 7px; border-radius:6px;
  background:var(--surface-2); color:var(--text-muted); white-space:nowrap;
}
.wk-fact.hi{ color:var(--success-text); background:var(--success-soft, rgba(22,163,74,.12)); }
.wk-mats{ display:flex; flex-wrap:wrap; gap:5px; }

.wk-mat{
  display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  font-size:11px; padding:2px 7px; border-radius:6px; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--border-color); color:var(--text-main);
  font-variant-numeric:tabular-nums; font-family:inherit;
}
.wk-mat:hover{ filter:brightness(1.06); }
.wk-mat small{ color:var(--text-muted); font-size:10px; }
.wk-mat.coin{ cursor:default; }

.wk-mat.lack{ color:var(--danger-text, #b91c1c); border-color:rgba(185,28,28,.4); background:rgba(185,28,28,.08); }
.wk-mat.lack small{ color:inherit; opacity:.8; }

.lbp-fee{
  display:flex; align-items:baseline; gap:6px; margin-top:3px;
  font-size:11px; font-weight:700; color:var(--primary-text, #1d4ed8);
  font-variant-numeric:tabular-nums;
}
.lbp-fee em{ font-style:normal; font-weight:400; font-size:10.5px; color:var(--text-muted); }
.lbp-fee.bad{ color:var(--danger-text, #b91c1c); }

.wk-foot{
  display:flex; align-items:center; gap:6px; flex-wrap:nowrap;
  margin-top:auto; padding-top:6px; border-top:1px dashed var(--border-color);
}
.wk-have{
  font-size:11px; color:var(--text-muted); margin-right:auto;
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wk-foot .pg-qty-input{ width:40px; padding:3px 4px; text-align:center; flex:none; }
.wk-foot .home-btn{ padding:4px 10px; font-size:12px; white-space:nowrap; flex:none; }
@media (max-width: 560px){
  .wk-grid{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
}

.buf-pct.cut { color: var(--warn-solid, #d97706); }
.buf-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.buf-title { display: flex; align-items: center; gap: 6px; }

.buf-title .buf-why { margin-left: auto; }

.buf-why {
  border: 0; background: transparent; cursor: pointer; padding: 0 2px;
  font: inherit; font-size: 11px; color: var(--warn-solid, #d97706);
}
.buf-why:hover { filter: brightness(1.15); }
.buf-why:focus-visible { outline: 2px solid var(--warn-solid, #d97706); outline-offset: 1px; border-radius: 4px; }

.invite-rule-list .invite-rule-sub {
  margin-top: 6px; font-size: 12px; line-height: 1.6; opacity: .75;
}

.fshop-bal {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 12px; border-radius: 12px;
  background: var(--fill-subtle, rgba(127,127,127,.10));
  border: 1px solid var(--border-soft, rgba(127,127,127,.20));
}
.fshop-bal-label { font-weight: 700; color: var(--text-2, #6b7280); }
.fshop-bal-num {
  font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--color-green-text, #16a34a); font-variant-numeric: tabular-nums;
}
.fshop-bal-hint { color: var(--text-muted, #9aa0a6); font-size: 12px; margin-left: auto; }
.fshop-note { margin: 0 0 12px; }
.fshop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.fshop-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border-soft, rgba(127,127,127,.20));
  background: var(--card-bg, rgba(127,127,127,.05));
}
.fshop-item-top { display: flex; align-items: baseline; gap: 8px; }
.fshop-item-name { font-weight: 700; }
.fshop-item-cost {
  margin-left: auto; font-weight: 800; white-space: nowrap;
  color: var(--color-green-text, #16a34a); font-variant-numeric: tabular-nums;
}
.fshop-item-desc { font-size: 12px; color: var(--text-2, #6b7280); line-height: 1.5; }

.fshop-item-act { margin-top: auto; padding-top: 4px; }
.fshop-item-act > button,
.fshop-item-act > .fshop-soon {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 34px; box-sizing: border-box; text-align: center;
}

.tower-stage-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 14px;
  align-items: start;
}
.tower-stage-arena { min-width: 0; }
.tower-stage-log {
  min-width: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border-soft, rgba(127,127,127,.20));
  border-radius: 10px;
  background: var(--fill-subtle, rgba(127,127,127,.06));
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.75;
}
.tsl-line {
  color: var(--text-2, #6b7280);
  padding: 1px 0;
  border-bottom: 1px dashed transparent;
}

.tsl-line.tsl-floor {
  color: var(--text-muted, #9aa0a6);
  text-align: center; font-weight: 700; letter-spacing: .06em;
  margin: 4px 0 2px; border-bottom: 1px solid var(--border-soft, rgba(127,127,127,.18));
  padding-bottom: 3px;
}

.tsl-rage {
  height: 4px; border-radius: 3px; margin-top: 3px; overflow: hidden;
  background: var(--fill-subtle, rgba(127,127,127,.18));
}
.tsl-rage .f {
  height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  transition: width .12s linear;
}

.tsl-rage .f.full {
  background: linear-gradient(90deg, #fbbf24, #f97316);
  box-shadow: 0 0 6px 1px rgba(249,115,22,.75);
  animation: tslRagePulse .7s ease-in-out infinite;
}
@keyframes tslRagePulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

.tower-stage-arena .raid-rp-unit.crit-hit {
  animation: tslCritShake .42s cubic-bezier(.36,.07,.19,.97);
  box-shadow: 0 0 0 2px rgba(220,38,38,.55), 0 0 14px 2px rgba(220,38,38,.35);
}
@keyframes tslCritShake {
  0%,100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  80% { transform: translateX(-1px); }
}

.tower-stage-arena .raid-rp-unit.skilling {
  box-shadow: 0 0 0 2px rgba(124,58,237,.6), 0 0 16px 3px rgba(124,58,237,.4);
}

.tower-stage-arena .raid-rp-pop.crit {
  color: #dc2626; font-weight: 900; font-size: 17px;
  text-shadow: 0 1px 0 #fff, 0 0 8px rgba(220,38,38,.6);
}
.tower-stage-arena .raid-rp-pop.heal   { color: #16a34a; font-weight: 800; }
.tower-stage-arena .raid-rp-pop.skill  { color: #7c3aed; font-weight: 800; font-size: 13px; }
.tower-stage-arena .raid-rp-pop.shield { color: #0284c7; font-weight: 700; }
.tower-stage-arena .raid-rp-pop.dot    { color: #ea580c; font-weight: 700; }
.tower-stage-arena .raid-rp-pop.eff    { color: #b45309; font-weight: 700; font-size: 12px; }

.tsl-line.skill  { color: #7c3aed; font-weight: 700; }
.tsl-line.extra  { color: #b45309; }
.tsl-line.dot    { color: #ea580c; }
.tsl-heal   { color: #16a34a; font-weight: 700; }
.tsl-shield { color: #0284c7; font-weight: 700; }
.tsl-eff    { color: #b45309; font-weight: 700; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tower-stage-arena .raid-rp-pop.crit { color: #f87171; text-shadow: 0 0 8px rgba(248,113,113,.7); }
  :root:not([data-theme="light"]) .tower-stage-arena .raid-rp-pop.heal { color: #4ade80; }
  :root:not([data-theme="light"]) .tower-stage-arena .raid-rp-pop.skill { color: #c4b5fd; }
  :root:not([data-theme="light"]) .tsl-line.skill { color: #c4b5fd; }
  :root:not([data-theme="light"]) .tsl-heal { color: #4ade80; }
  :root:not([data-theme="light"]) .tsl-shield { color: #7dd3fc; }
  :root:not([data-theme="light"]) .tsl-line.dot,
  :root:not([data-theme="light"]) .tsl-eff { color: #fdba74; }
}
:root[data-theme="dark"] .tower-stage-arena .raid-rp-pop.crit { color: #f87171; text-shadow: 0 0 8px rgba(248,113,113,.7); }
:root[data-theme="dark"] .tower-stage-arena .raid-rp-pop.heal { color: #4ade80; }
:root[data-theme="dark"] .tower-stage-arena .raid-rp-pop.skill { color: #c4b5fd; }
:root[data-theme="dark"] .tsl-line.skill { color: #c4b5fd; }
:root[data-theme="dark"] .tsl-heal { color: #4ade80; }
:root[data-theme="dark"] .tsl-shield { color: #7dd3fc; }
:root[data-theme="dark"] .tsl-line.dot,
:root[data-theme="dark"] .tsl-eff { color: #fdba74; }
@media (prefers-reduced-motion: reduce) {
  .tower-stage-arena .raid-rp-unit.crit-hit { animation: none; }
  .tsl-rage .f.full { animation: none; }
}

.tsl-line.crit { color: var(--danger-text, #dc2626); font-weight: 700; }
.tsl-line.miss { color: var(--fill-info, #2563eb); }
@media (max-width: 820px) {
  .tower-stage-body { grid-template-columns: minmax(0, 1fr); }
  .tower-stage-log { max-height: 170px; }
}

.tower-stage-arena .raid-rp-side {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.tower-stage-arena .raid-rp-unit {
  flex: 0 1 340px;
  max-width: 340px;
}

@media (max-width: 560px) {
  .tower-stage-arena .raid-rp-unit { flex: 1 1 auto; max-width: none; }
}

.tower-stage-body .raid-round-tag { margin-left: 8px; }

.stat-comp-row.stat-comp-note { align-items: flex-start; }
.stat-comp-note .scr-sub {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  background: var(--fill-subtle, rgba(127,127,127,.12)); color: var(--text-2, #6b7280);
}
.stat-comp-note .scr-note {
  font-size: 12px; line-height: 1.7; color: var(--text-2, #6b7280); flex: 1;
}
.stat-comp-note .scr-dim { color: var(--text-muted, #9aa0a6); }

.fshop-item-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fshop-limit {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  color: var(--text-2, #6b7280);
  background: var(--fill-subtle, rgba(127,127,127,.12));
}

.fshop-limit.unlimited { color: var(--color-green-text, #16a34a); }
.fshop-ladder {
  font-size: 11px; color: var(--text-muted, #9aa0a6);
  font-variant-numeric: tabular-nums;
}

.fshop-item.soon { opacity: .82; }
.fshop-soon {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: var(--text-muted, #9aa0a6);
  background: var(--fill-subtle, rgba(127,127,127,.12));
  border: 1px dashed var(--border-soft, rgba(127,127,127,.28));
}
@media (max-width: 640px) {
  .fshop-bal-hint { margin-left: 0; flex-basis: 100%; }
  .fshop-grid { grid-template-columns: 1fr; }
}

.tnt-use {
  border: 1px solid var(--border-soft, rgba(255,255,255,.22));
  background: transparent; color: var(--text-1, #e8e8ea);
  border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight: 700; line-height: 1.4;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.tnt-use:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.42); }

.tnt-use.on {
  background: var(--fill-info, #2563eb); border-color: transparent; color: #fff;
}
.tnt-use.on:hover { background: var(--danger-solid, #dc2626); }
.tnt-use.on:hover::after { content: " ×"; }
.tnt-use:disabled { opacity: .5; cursor: default; }
.tnt-now-off { color: var(--text-muted, #9aa0a6); font-weight: 700; }

.tip-tier.tip-tier-free.on { border-style: solid; }
.tip-tier.tip-tier-free.off { border-style: dashed; }
.tip-free-row { display: flex; gap: 8px; align-items: center; }
.tip-free-preview {
  margin-top: 10px; font-size: 13px; line-height: 1.7;
  text-align: center; min-height: 22px;
}
.tip-free-preview .tf-get { color: var(--danger-text); }
.tip-free-preview .tf-err { color: var(--danger-text); font-size: 12px; }

.raid-fc { width: 108px; padding-bottom: 10px; }
.raid-fc-sep {
  width: 100%; height: 1px; margin: 5px 0 3px;
  background: var(--border-color); opacity: .7;
}
.raid-fc-drop {
  font-size: 10px; line-height: 1.5; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.raid-fc-tier {
  font-size: 9px; line-height: 1.4; margin-top: 2px;
  color: var(--text-muted); opacity: .8; white-space: nowrap;
}
.raid-fc.on .raid-fc-drop, .raid-fc.on .raid-fc-tier { color: var(--primary-text); opacity: .9; }

.confirm-btn-row.is-col > button { flex: 0 0 auto; width: 100%; min-height: 44px; }

.fm-chip-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.fm-chip-grid > .fm-chip {
  display: flex; justify-content: space-between; gap: 6px;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 420px) { .fm-chip-grid { grid-template-columns: 1fr; } }

[data-hotkeys]{ counter-reset: hotkey; }
[data-hotkeys] > button{ counter-increment: hotkey; position: relative; }

[data-hotkeys] > button::after{
  content: counter(hotkey);
  position: absolute; top: 6px; left: 6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 5px; box-sizing: border-box;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
  color: #3f4756;
  background: linear-gradient(180deg, #fdfdfd 0%, #eceef2 100%);
  border: 1px solid #c8ccd4;
  
  box-shadow: 0 1.5px 0 0 #b9bec8, inset 0 1px 0 0 rgba(255,255,255,.9), 0 1px 2px rgba(15,23,42,.18);
  pointer-events: none;
}
[data-hotkeys] > button:disabled::after{ opacity: .35; }

html.theme-dark [data-hotkeys] > button::after{
  color: #d7dbe3;
  background: linear-gradient(180deg, #4a5162 0%, #363c49 100%);
  border-color: #2b303b;
  box-shadow: 0 1.5px 0 0 #23272f, inset 0 1px 0 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.45);
}

[data-hotkeys] > button[data-no-hotkey]::after{
  content: "🖱";
  background: rgba(15,23,42,.10); border-color: transparent;
  box-shadow: none; color: #8a93a3; font-size: 10px;
}
html.theme-dark [data-hotkeys] > button[data-no-hotkey]::after{
  background: rgba(255,255,255,.08); color: #9aa3b2;
}

[data-hotkeys] > button.hotkey-hit{
  outline: 2px solid var(--brand, #F04E4E); outline-offset: 1px;
  transform: scale(.97);
}

@media (hover: none), (pointer: coarse){
  [data-hotkeys] > button::after{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  [data-hotkeys] > button.hotkey-hit{ transform: none; }
}

.raid-hire-entry{
  float:right; margin-top:-2px;
  border:1px solid var(--brand,#F04E4E); background:transparent; color:var(--brand,#F04E4E);
  border-radius:6px; padding:2px 10px; font-size:12px; font-weight:700; cursor:pointer;
}
.raid-hire-entry:hover{ background:var(--brand,#F04E4E); color:#fff; }

.hire-overlay{
  position:fixed; inset:0; z-index:6000;
  background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.hire-modal{
  width:min(720px,100%); max-height:86vh; display:flex; flex-direction:column;
  background:var(--bg-1,#fff); color:var(--fg-1,#0f172a);
  border-radius:12px; box-shadow:0 18px 50px rgba(15,23,42,.28); overflow:hidden;
}
.hire-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--line,#e5e7eb); font-size:15px;
}
.hire-coins{ font-size:13px; color:var(--fg-2,#475569); display:inline-flex; align-items:center; gap:3px; }
.hire-switch{
  border:1px solid var(--line,#e5e7eb); background:transparent; color:var(--fg-2,#475569);
  border-radius:6px; padding:3px 10px; font-size:12px; cursor:pointer;
}
.hire-switch.on{ border-color:var(--brand,#F04E4E); color:var(--brand,#F04E4E); font-weight:700; }
.hire-x{ border:0; background:transparent; font-size:20px; line-height:1; cursor:pointer; color:var(--fg-3,#94a3b8); }
.hire-note{ padding:10px 14px; font-size:12px; line-height:1.7; color:var(--fg-2,#475569); background:var(--bg-2,#f8fafc); }
.hire-tabs{ display:flex; gap:6px; padding:10px 14px 0; flex-wrap:wrap; }
.hire-tab{
  border:1px solid var(--line,#e5e7eb); background:transparent; color:var(--fg-2,#475569);
  border-radius:999px; padding:4px 12px; font-size:12px; cursor:pointer;
}
.hire-tab em{ font-style:normal; opacity:.6; margin-left:4px; }
.hire-tab.on{ border-color:var(--brand,#F04E4E); color:var(--brand,#F04E4E); font-weight:700; }
.hire-body{ padding:10px 14px 14px; overflow-y:auto; }
.hire-row{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px; font-size:13px;
  border-bottom:1px solid var(--line,#eef2f7);
}
.hire-row.me{ background:var(--bg-2,#f8fafc); font-weight:700; }
.hire-rank{
  min-width:26px; text-align:center; font-weight:800; font-size:12px;
  color:var(--fg-3,#94a3b8); font-variant-numeric:tabular-nums;
}
.hire-rank.top{ color:var(--accent-orange,#f59e0b); }
.hire-name{ font-weight:600; }
.hire-cp,.hire-use{ font-size:12px; color:var(--fg-3,#94a3b8); }

.hire-stats{ display:flex; align-items:center; gap:6px; flex:none; }
.hire-chip{
  display:flex; align-items:baseline; gap:4px; justify-content:flex-end;
  min-width:78px; padding:3px 8px; border-radius:7px;
  background:var(--surface-2,#f8fafc); border:1px solid var(--line,#eef2f7);
  font-size:11px; line-height:1.5; white-space:nowrap;
}
.hire-chip em{ font-style:normal; color:var(--fg-3,#94a3b8); font-size:10px; }
.hire-chip b{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--fg-1,#0f172a); }
.hire-chip i{ font-style:normal; color:var(--fg-3,#94a3b8); font-size:10px; }
.hire-chip.is-zero b,.hire-chip.is-zero i{ color:var(--fg-3,#cbd5e1); font-weight:400; }

.hire-chip.is-floor{ background:#fff7ed; border-color:#fed7aa; }
.hire-chip.is-floor em,.hire-chip.is-floor b{ color:#b45309; }
html.theme-dark .hire-chip.is-floor{ background:#2a1f10; border-color:#7c4a12; }
html.theme-dark .hire-chip.is-floor em,html.theme-dark .hire-chip.is-floor b{ color:#fbbf24; }
html.theme-dark .hire-chip{ background:#0f172a; border-color:#334155; }
html.theme-dark .hire-chip b{ color:#e2e8f0; }
.hire-price{
  display:inline-flex; align-items:center; gap:3px;
  font-weight:700; font-variant-numeric:tabular-nums;
}
.hire-price em{ font-style:normal; font-weight:400; font-size:11px; color:var(--fg-3,#94a3b8); }
.hire-btn{
  border:0; background:var(--brand,#F04E4E); color:#fff;
  border-radius:6px; padding:4px 14px; font-size:12px; font-weight:700; cursor:pointer;
}
.hire-btn:hover{ filter:brightness(1.06); }
.hire-inc-note{ font-size:12px; color:var(--fg-3,#94a3b8); margin-bottom:6px; }

.rb-hire-left{
  display:inline-flex; align-items:center; gap:2px;
  margin-left:4px; padding:1px 6px;
  font-size:10px; font-weight:800; line-height:15px;
  font-variant-numeric:tabular-nums;
  border-radius:999px;
  background:rgba(59,130,246,.14); color:#2563eb;
  border:1px solid rgba(59,130,246,.30);
  vertical-align:middle; white-space:nowrap;
}

.rb-hire-left.is-btn{ cursor:pointer; }
.rb-hire-left.is-btn::after{ content:"＋"; font-size:9px; opacity:.75; margin-left:1px; }
.rb-hire-left.is-btn:hover{
  background:rgba(59,130,246,.26); border-color:rgba(59,130,246,.55);
}
.rb-hire-left.is-btn:active{ transform:scale(.96); }

.rb-hire-left.warm{
  background:rgba(245,158,11,.16); color:#b45309; border-color:rgba(245,158,11,.38);
}
.rb-hire-left.warm.is-btn:hover{ background:rgba(245,158,11,.28); }

.rb-hire-left.soon{
  background:rgba(240,78,78,.16); color:var(--brand,#F04E4E); border-color:rgba(240,78,78,.45);
  animation:hireBlink 1.4s ease-in-out infinite;
}
.rb-hire-left.soon.is-btn:hover{ background:rgba(240,78,78,.28); }
@keyframes hireBlink{ 0%,100%{opacity:1} 50%{opacity:.45} }
@media (prefers-reduced-motion: reduce){ .rb-hire-left.soon{ animation:none } }

@media (max-width: 560px){
  .hire-cp, .hire-use{ display:none; }
  
  .hire-chip{ min-width:0; padding:2px 6px; }
  .hire-chip:not(:first-child){ display:none; }
  .hire-modal{ max-height:92vh; }
}

html.theme-dark .hire-modal{ background:var(--bg-1,#0f172a); color:var(--fg-1,#e2e8f0); }
html.theme-dark .hire-overlay{ background:rgba(2,6,23,.66); }

      .eq-reforge-lock.is-ghost { visibility: hidden; pointer-events: none; }
      
      .eq-reforge-lock.is-hint, .eq-reforge-lock.is-hint:hover { opacity: .22; cursor: help; }
      
      .eq-reforge-col-head.is-layered { display: grid; align-items: center; }
      .eq-reforge-col-head.is-layered > .eq-rh-layer { grid-area: 1 / 1; }
      .eq-reforge-col-head.is-layered > .eq-rh-layer.is-ghost { visibility: hidden; }

html.theme-dark .rb-hire-left{
  background:rgba(59,130,246,.22); color:#93c5fd; border-color:rgba(59,130,246,.42);
}
html.theme-dark .rb-hire-left.warm{
  background:rgba(245,158,11,.22); color:#fcd34d; border-color:rgba(245,158,11,.45);
}
html.theme-dark .rb-hire-left.soon{
  background:rgba(240,78,78,.24); color:#fca5a5; border-color:rgba(240,78,78,.5);
}

.raid-card.is-hired{
  border-color:rgba(245,158,11,.55);
  background:linear-gradient(180deg, rgba(245,158,11,.10), transparent 60%);
}
.raid-card.is-hired .raid-card-title{ color:#b45309; }
html.theme-dark .raid-card.is-hired{
  border-color:rgba(245,158,11,.5);
  background:linear-gradient(180deg, rgba(245,158,11,.16), transparent 60%);
}
html.theme-dark .raid-card.is-hired .raid-card-title{ color:#fcd34d; }

.cc-act.is-short{
  opacity:.55;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.72);
}

.cc-act.is-short:hover{ background:rgba(255,255,255,.08); }

.cc-act.is-short{ cursor:pointer; }

.xrun-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-top:10px;
  width:100%;
}

.xrun-buy{
  background:linear-gradient(135deg,#b45309,#d97706)!important;
  border-color:#92400e!important;
  color:#fff7ed!important;
}
.xrun-buy:hover:not(:disabled){ filter:brightness(1.08); }
.xrun-buy:disabled{ opacity:.55; cursor:not-allowed; filter:grayscale(.4); }
.xrun-note{
  font-size:12px;
  line-height:1.5;
  color:var(--muted,#64748b);
  text-align:center;
  max-width:34em;
}
@media (max-width: 720px){
  .xrun-note{ font-size:11.5px; }
}

.pet-lobby-note{
  width:100%;
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted,#64748b);
  background:rgba(148,163,184,.12);
  border:1px solid rgba(148,163,184,.25);
}

.wl-sinks{
  
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:8px;
  margin-top:10px;
  align-items:center;
}
.wl-btn.wl-sink{
  background:linear-gradient(135deg,#7c5a1e,#a97c2c);
  border-color:#6b4c17;
  color:#fdf6e3;
  
  text-align:center;
  white-space:nowrap;
}
.wl-btn.wl-sink:hover:not(:disabled){ filter:brightness(1.1); }
.wl-budget .wl-bought{ color:#c9a227; margin-left:4px; font-size:11px; }

.wl-invest.wl-bribe{
  border-color:#a97c2c;
  color:#c9a227;
}
.wl-invest.wl-bribe::placeholder{ color:#8a7340; font-size:11px; }
@media (max-width: 720px){
  .wl-sinks{ gap:6px; }
  .wl-sinks{ grid-template-columns:1fr; }   
}

.weekly-reset-hint{
  display:block;
  margin:0 0 var(--s-2);
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  line-height:1.5;
  color:var(--text-muted);
  background:var(--surface-2);
  border:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}

.other-profile-card-row {
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  gap:var(--s-2);
  padding-bottom:var(--s-1);
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.other-profile-card-row > *{ flex:0 0 auto; }

.other-profile-mini-card.op-pet-active{
  outline:2px solid var(--primary);
  outline-offset:-2px;
}

.raid-fc-core{
  white-space: normal;
  color: var(--primary);
  opacity: 1;
  font-weight: 600;
}
.raid-fc.on .raid-fc-core{ color: var(--primary-text); opacity: 1; }

.fsh-tiers{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.fsh-tier{flex:1;min-width:96px;max-width:160px;padding:7px 0;border-radius:999px;
  border:1px solid rgba(148,163,184,.45);background:transparent;color:var(--text-secondary,#64748b);
  font-size:13px;cursor:pointer}
.fsh-tier.on{background:#e34d4d;border-color:#e34d4d;color:#fff;font-weight:700}
.fsh-roominfo{font-size:12px;color:var(--text-secondary,#64748b);padding:2px 2px 6px}
.fsh-sea{position:relative;height:min(58vh,500px);min-height:340px;border-radius:14px;overflow:hidden;
  background:linear-gradient(#0a3555,#041e30);cursor:crosshair;touch-action:manipulation;
  user-select:none;-webkit-user-select:none}
.fsh-banner{position:absolute;top:30px;left:0;right:0;text-align:center;font-size:13px;color:#ffd76a;
  text-shadow:0 1px 4px #000;opacity:0;transition:opacity .4s;pointer-events:none;z-index:6}
.fsh-banner.show{opacity:1}
.fsh-fish{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform;color:#bfe3ff;
  text-shadow:0 1px 6px rgba(0,0,0,.45);line-height:1;pointer-events:none;z-index:1}
.fsh-fish .od{font-size:.62em;color:#7fa8c9;margin-left:3px}
.fsh-fish.rich{color:#ffd76a}
.fsh-fish.rich .od{color:#caa64d}
.fsh-fish.boss{color:#ff9d6b;font-weight:800;letter-spacing:3px}
.fsh-fish.shake{animation:fshShake .3s}
@keyframes fshShake{25%{margin-top:-4px}50%{margin-top:3px}75%{margin-top:-2px}}
.fsh-ch{display:inline-block;transition:transform .9s ease-out,opacity .9s ease-out}
.fsh-bullet{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(#fff,#ffd76a 55%,transparent 70%);
  box-shadow:0 0 8px 2px rgba(255,215,106,.5);pointer-events:none;will-change:transform;z-index:3}
.fsh-bullet.other{background:radial-gradient(#fff,#9ad0ff 55%,transparent 70%);
  box-shadow:0 0 8px 2px rgba(154,208,255,.45)}
.fsh-flash{position:absolute;color:#fff;font-size:16px;pointer-events:none;z-index:3;
  animation:fshPop .22s ease-out forwards}
@keyframes fshPop{from{opacity:1;transform:scale(.5)}to{opacity:0;transform:scale(1.6)}}
.fsh-float{position:absolute;pointer-events:none;font-weight:800;white-space:nowrap;z-index:4;
  transition:transform 1.3s ease-out,opacity 1.3s ease-out;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.fsh-float.gold{color:#ffd76a}
.fsh-float.miss{color:#8fb6d6}
.fsh-float.other{color:#9ad0ff}
.fsh-slot{position:absolute;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;pointer-events:none;z-index:2}
.fsh-slot.top{bottom:auto;top:0;flex-direction:column-reverse}
.fsh-barrel{width:10px;height:30px;border-radius:5px 5px 0 0;background:linear-gradient(#f1f5f9,#94a3b8);
  transform-origin:50% 100%;box-shadow:0 0 5px rgba(0,0,0,.4)}
.fsh-slot.top .fsh-barrel{transform-origin:50% 0;border-radius:0 0 5px 5px}
.fsh-slot.me .fsh-barrel{background:linear-gradient(#ffe9a8,#d9a94a)}
.fsh-pname{margin-top:-4px;font-size:11px;color:#7fa8c9;background:rgba(2,16,26,.6);
  border-radius:6px 6px 0 0;padding:2px 7px 3px;line-height:1.2;text-align:center;white-space:nowrap;
  max-width:9em;overflow:hidden;text-overflow:ellipsis}
.fsh-slot.top .fsh-pname{margin-top:0;margin-bottom:-4px;border-radius:0 0 6px 6px}
.fsh-slot.me .fsh-pname{color:#ffd76a;font-weight:700}
.fsh-slot.empty .fsh-pname{opacity:.35}
.fsh-zzz{font-size:10px;color:#7fe0a8}
.fsh-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.fsh-autobtn{padding:8px 14px;border-radius:999px;border:none;cursor:pointer;font-size:13px;
  font-weight:700;background:#e34d4d;color:#fff;font-variant-numeric:tabular-nums}
.fsh-autobtn.off{background:var(--bg-tertiary,#e2e8f0);color:var(--text-secondary,#64748b)}
.fsh-mini{padding:7px 12px;border-radius:999px;border:1px solid rgba(148,163,184,.5);
  background:transparent;color:var(--text-primary,#1e293b);font-size:12px;cursor:pointer}
.fsh-mini-blue{border-color:#60a5fa;color:#2563eb}
.fsh-strats{display:flex;gap:4px;flex-wrap:wrap}
.fsh-strat{padding:6px 10px;border-radius:999px;border:1px solid rgba(148,163,184,.4);
  background:transparent;color:var(--text-secondary,#64748b);font-size:12px;cursor:pointer}
.fsh-strat.on{background:rgba(227,77,77,.14);border-color:#e34d4d;color:#e34d4d;font-weight:700}
.fsh-hint{font-size:12px;color:var(--text-secondary,#64748b)}
.fsh-hint b{color:#d97706}
.fsh-stats{margin-left:auto;font-size:12px;color:var(--text-secondary,#64748b);
  font-variant-numeric:tabular-nums}
.fsh-ovl{position:fixed;inset:0;background:rgba(2,12,20,.66);display:none;align-items:center;
  justify-content:center;z-index:1200;padding:16px}
.fsh-ovl.show{display:flex}
.fsh-modal{width:min(540px,94vw);max-height:80vh;display:flex;flex-direction:column;
  background:var(--bg-primary,#fff);border:1px solid rgba(148,163,184,.35);border-radius:14px;
  padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.fsh-modal h3{font-size:15px;display:flex;justify-content:space-between;align-items:center;
  margin:0 0 6px}
.fsh-x{cursor:pointer;color:var(--text-secondary,#64748b);border:none;background:none;font-size:18px;
  line-height:1}
.fsh-sub{font-size:11.5px;color:var(--text-secondary,#64748b);margin-bottom:8px;line-height:1.7}
.fsh-pack{display:block;width:100%;margin-bottom:6px;padding:10px;text-align:left;border-radius:10px;
  border:1px solid rgba(96,165,250,.6);background:transparent;color:var(--text-primary,#1e293b);
  font-size:13px;cursor:pointer}
.fsh-pack b{color:#2563eb}
.fsh-rankrow{display:flex;gap:8px;align-items:baseline;padding:6px 8px;border-radius:8px;
  font-size:13px;font-variant-numeric:tabular-nums}
.fsh-rankrow:nth-child(odd){background:rgba(148,163,184,.12)}
.fsh-rankrow.me{background:rgba(227,77,77,.16);color:#b45309;font-weight:700}
.fsh-rankrow .rn{width:34px;color:var(--text-secondary,#64748b)}
.fsh-rankrow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsh-rankrow .aw{font-size:11px}
.fsh-codexrow{padding:8px;border-radius:10px;margin-bottom:6px;background:rgba(148,163,184,.12)}
.fsh-codexrow .t{display:flex;gap:8px;align-items:baseline;font-size:13px}
.fsh-codexrow .t .unk{color:var(--text-secondary,#94a3b8)}
.fsh-codexrow .t .od{font-size:11px;color:var(--text-secondary,#64748b)}
.fsh-codexrow .t .cnt{margin-left:auto;font-size:12px;color:var(--text-secondary,#64748b);
  font-variant-numeric:tabular-nums}
.fsh-codexrow .ms{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.fsh-chip{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid rgba(148,163,184,.4);
  color:var(--text-secondary,#64748b);background:transparent}
.fsh-chip.done{color:#16a34a;border-color:rgba(22,163,74,.5)}
.fsh-chip.claim{color:#7c2d12;background:#ffd76a;border-color:#ffd76a;font-weight:700;cursor:pointer}
@media (max-width:640px){
  .fsh-sea{height:52vh;min-height:300px}
  .fsh-stats{margin-left:0;width:100%}
}
html.theme-dark .fsh-tier{border-color:rgba(148,163,184,.35);color:#94a3b8}
html.theme-dark .fsh-tier.on{background:#e34d4d;color:#fff}
html.theme-dark .fsh-autobtn.off{background:#1e293b;color:#94a3b8}
html.theme-dark .fsh-mini{color:#e2e8f0;border-color:rgba(148,163,184,.35)}
html.theme-dark .fsh-mini-blue{color:#93c5fd;border-color:#3b82f6}
html.theme-dark .fsh-modal{background:#0f172a;border-color:rgba(148,163,184,.25)}
html.theme-dark .fsh-pack{color:#e2e8f0}
html.theme-dark .fsh-rankrow.me{color:#fcd34d}

.fsh-heavy{border-color:#f59e0b;color:#d97706}
.fsh-heavy.locked{opacity:.55;border-style:dashed;cursor:not-allowed}
.fsh-sea.aiming,#fshSea.aiming{cursor:cell}
.fsh-ring{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:3px solid #ffd76a;box-shadow:0 0 34px 12px rgba(255,180,60,.5);pointer-events:none;z-index:5;
  animation:fshRing .9s ease-out forwards}
.fsh-ring.full{left:50%;top:50%}
@keyframes fshRing{from{transform:scale(.4);opacity:1}to{transform:scale(18);opacity:0}}
html.theme-dark .fsh-heavy{color:#fbbf24;border-color:#b45309}

.fsh-roominfo-row{display:flex;align-items:center;gap:10px;padding:2px 2px 6px}
.fsh-roominfo-row .fsh-roominfo{padding:0;flex:1;min-width:0}
.fsh-roominfo-row .fsh-mini{flex-shrink:0}

.cd-head{ display:flex; align-items:center; gap:var(--s-5); margin:0 0 var(--s-7); }
.cd-gem{ width:44px; height:44px; border-radius:var(--r-md); flex:0 0 auto;
  display:grid; place-items:center; font-size:22px; background:var(--bg-primary);
  box-shadow:inset 0 0 0 1px var(--border-color); }
.cd-id{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cd-name{ font-size:17px; font-weight:600; line-height:1.25; }
.cd-have{ color:var(--text-muted); font-size:12.5px; }
.cd-have b{ color:var(--text-main); font-size:15px; font-variant-numeric:tabular-nums; }

.cd-seg{ display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:2px; margin:0 0 var(--s-7);
  background:var(--bg-primary); border:1px solid var(--border-color); border-radius:var(--r-md); }
.cd-seg-btn{ font:inherit; font-size:13px; font-weight:600; border:0; background:transparent;
  color:var(--text-muted); padding:7px; border-radius:var(--r-sm); cursor:pointer; }
.cd-seg-btn[aria-pressed="true"]{ background:var(--bg-card); color:var(--text-main); box-shadow:var(--sh-1); }

.cd-deal{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s-5);
  background:var(--bg-primary); border-radius:var(--r-lg); padding:var(--s-7) var(--s-6); text-align:center; }

.cd-k{ font-size:11px; color:var(--text-muted); letter-spacing:.06em; margin-bottom:3px; }
.cd-v{ font-size:15px; font-weight:600; word-break:break-word; font-variant-numeric:tabular-nums; }
.cd-sub{ display:block; font-size:12.5px; font-weight:400; color:var(--text-muted); margin-top:2px; }
.cd-arrow{ font-size:18px; color:var(--text-muted); }

.cd-qty{ display:flex; gap:var(--s-4); align-items:stretch; margin-top:var(--s-6); }
.cd-qty .pg-qty-input{ flex:1; min-width:0; text-align:center; }
.cd-note{ margin-top:var(--s-5); font-size:13px; color:var(--text-muted); }
.cd-note b{ color:var(--text-main); font-variant-numeric:tabular-nums; }
.cd-use{ font-size:12.5px; color:var(--text-muted); line-height:1.7;
  border-top:1px solid var(--border-color); padding-top:var(--s-6); margin:var(--s-7) 0 0; }
.cd-use b{ color:var(--text-main); font-weight:600; }

      .eq-mat-tile { padding-bottom: 16px; }
      
      .eq-mat-tile.gem-inv-tile { padding-bottom: 0; }

      .eq-mat-tile-name { position: absolute; left: 0; right: 0; bottom: 0; top: auto;
        max-width: none; height: 16px; line-height: 16px; padding: 0 2px;
        text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .02em;
        color: var(--text-main); background: var(--surface-2);
        border-top: 1px solid var(--line-1); border-radius: 0 0 var(--r-lg) var(--r-lg);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

      .eq-mat-tile-qty { top: 3px; bottom: auto; }

      .eq-mat-tile.mg-shop-tile { padding-bottom: 32px; }
      .mg-shop-tile .eq-mat-tile-qty { top: auto; bottom: 16px; left: 3px; right: 3px; }
      .mg-shop-tile .eq-mat-tile-icon { font-size: 34px; }

      .pix-icon { vertical-align: -0.15em; }
      .eq-mat-tile-icon .pix-icon,
      .ex-listing-icon .pix-icon { vertical-align: middle; }

      .cd-deal { display: grid; align-items: center;
        grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
        grid-template-areas: "kL .     kR"
                             "vL arrow vR"
                             "sL .     sR";
        column-gap: var(--s-3); row-gap: 2px;
        background: var(--bg-primary); border-radius: var(--r-lg);
        padding: var(--s-7) var(--s-6); text-align: center; }
      .cd-k-l { grid-area: kL; } .cd-k-r { grid-area: kR; }
      .cd-v-l { grid-area: vL; } .cd-v-r { grid-area: vR; }
      .cd-sub-l { grid-area: sL; } .cd-sub-r { grid-area: sR; }
      .cd-arrow { grid-area: arrow; align-self: center; }

      .cd-v { display: flex; align-items: center; justify-content: center;
        gap: 5px; min-height: 24px; flex-wrap: nowrap; }
      .cd-ln-ic { flex: 0 0 auto; font-size: 20px; line-height: 1; display: flex; align-items: center; }
      .cd-ln-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .cd-ln-qt { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

      .cd-sub { display: block; font-size: 12.5px; font-weight: 400; line-height: 1.35;
        color: var(--text-muted); min-height: calc(12.5px * 1.35 * 2); margin-top: 2px; }

      .cd-note { min-height: calc(13px * 1.5 * 2); }

      @media (max-width: 560px) {
        
        .cd-deal { grid-template-columns: minmax(0, 1fr);
          grid-template-areas: "kL" "vL" "sL" "arrow" "kR" "vR" "sR";
          row-gap: 0; padding: var(--s-6) var(--s-5); }
        .cd-arrow { transform: rotate(90deg); margin: var(--s-4) 0; }
        
        .cd-sub { min-height: calc(12.5px * 1.35); }
        .cd-note { min-height: calc(13px * 1.5); }
        .cd-ln-ic { font-size: 22px; }
        .cd-v { min-height: 26px; font-size: 16px; }
      }

      .ex-catalog-tile { height: 100px; padding: 0; gap: 0; overflow: hidden;
        display: grid; grid-template-rows: 1fr 16px 20px; align-items: center;
        
        grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: stretch; }
      .ex-catalog-tile-ic { display: flex; align-items: center; justify-content: center;
        font-size: 40px; line-height: 1; min-height: 0; }
      .ex-catalog-ic-plain { display: flex; align-items: center; justify-content: center; line-height: 1; }
      
      .ex-catalog-tile .ex-listing-icon { width: 40px; height: 40px; font-size: 20px; }
      
      .ex-catalog-tile-name { height: 16px; line-height: 16px; max-width: none;
        padding: 0 3px; background: var(--surface-2); border-top: 1px solid var(--line-1);
        color: var(--text-main); font-weight: 700; }
      .ex-catalog-tile.is-empty .ex-catalog-tile-name { background: var(--surface-3); }
      
      .ex-catalog-tile-stock { height: 20px; display: flex; align-items: center;
        justify-content: center; gap: var(--s-2); flex-wrap: nowrap; overflow: hidden; }

      .eq-pix-img { width: 1em; height: 1em; display: inline-block;
        image-rendering: pixelated; image-rendering: crisp-edges; }

      .ik-head { display: flex; align-items: center; gap: var(--s-5); margin: 0 0 var(--s-6); }
      .ik-gem { width: 52px; height: 52px; border-radius: var(--r-md); flex: 0 0 auto;
        display: grid; place-items: center; font-size: 34px; line-height: 1;
        background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-color); }
      .ik-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
      .ik-name { font-size: 18px; font-weight: 700; line-height: 1.2;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .ik-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }

      .ik-sum { background: var(--bg-primary); border-radius: var(--r-md);
        padding: 10px 12px; margin-bottom: var(--s-5); font-size: 13px;
        line-height: 1.65; color: var(--text-muted); }
      .ik-sum b { color: var(--text-main); }

      .ik-quick { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-6); }
      
      button.ik-chip { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
        width: auto; text-align: center; flex: 0 0 auto;
        color: var(--brand); background: transparent; border: 1px solid var(--brand);
        border-radius: var(--r-pill); padding: 3px 11px; line-height: 1.6; }
      button.ik-chip:hover { background: var(--danger-soft); }

      .ik-fold { margin-bottom: var(--s-5); }
      .ik-fold > summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 600;
        color: var(--text-muted); padding: 9px 12px; border: 1px solid var(--border-color);
        border-radius: var(--r-md); display: flex; align-items: center; justify-content: space-between; }
      .ik-fold > summary::-webkit-details-marker { display: none; }
      .ik-fold > summary::after { content: "▾"; font-size: 11px; opacity: .8; }
      .ik-fold[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0;
        color: var(--text-main); }
      .ik-fold[open] > summary::after { content: "▴"; }
      .ik-fold[open] > .pg-box { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }

      .cap-mod-sum { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap;
        font-weight: 400; font-size: 11.5px; color: var(--text-muted); }
      .cap-mod-body { padding: 6px 10px 8px; border: 1px solid var(--border-color);
        border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); margin-top: -1px; }
      .ik-fold > summary > span:first-child { flex: 1; min-width: 0; }

      .cd-seg.cd-seg-3 { grid-template-columns: 1fr 1fr 1fr; }

      .eq-tarot-icon:has(.eq-pix-img),
      .showcase-slot-icon:has(.eq-pix-img) { opacity: .68; filter: none; }

.login-nick-hint{ margin-top:8px; border:1px solid var(--line,#e2e8f0); border-radius:10px; overflow:hidden; background:var(--card,#fff); }
.login-nick-hint .lnh-tip{ padding:8px 10px; font-size:12px; color:#b45309; background:#fffbeb; border-bottom:1px solid #fde68a; line-height:1.5; }
.login-nick-hint .lnh-row{ display:flex; align-items:center; gap:10px; padding:10px; cursor:pointer; border:none; background:none; width:100%; text-align:left; }
.login-nick-hint .lnh-row:hover{ background:#f1f5f9; }
.login-nick-hint .lnh-main{ flex:1; min-width:0; }
.login-nick-hint .lnh-nick{ font-weight:700; font-size:14px; color:#0f172a; }
.login-nick-hint .lnh-acc{ font-size:12px; color:#64748b; font-variant-numeric:tabular-nums; }
.login-nick-hint .lnh-go{ font-size:12px; color:#2563eb; white-space:nowrap; }
.login-nick-hint .lnh-none{ padding:10px; font-size:12px; color:#64748b; }

.raid-fc { width: 132px; padding: 12px 8px 12px; gap: 3px; }
.raid-fc-eff-lbl {
  font-size: 10px; color: var(--text-muted); margin-top: 6px; letter-spacing: .3px;
}

.raid-fc-eff {
  font-size: 15px; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--warn-text, #b45309);
  display: flex; align-items: center; gap: 3px;
}

.raid-fc-effbar {
  width: 100%; height: 7px; border-radius: 4px; margin-top: 4px;
  background: var(--surface-2); overflow: hidden;
}
.raid-fc-effbar > i { display: block; height: 100%; border-radius: 4px; }
.raid-fc-effbar.hi  > i { background: var(--success-solid); }
.raid-fc-effbar.mid > i { background: var(--warn-solid); }
.raid-fc-effbar.lo  > i { background: var(--danger-solid); }
.raid-fc-rel {
  font-size: 10px; font-weight: 700; color: var(--danger-text, #dc2626);
  font-variant-numeric: tabular-nums;
}
.raid-fc-rel.best { color: var(--success-text, #059669); }

.raid-fc-nom {
  font-size: 9.5px; color: var(--text-muted); line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) { .raid-fc { width: 118px; } }

.dtw{ --dtw-night:#161923; --dtw-stone-a:#8b909d; --dtw-stone-b:#7f8491; --dtw-seam:#6c717d; --dtw-wall-l:#4d5160; --dtw-wall-r:#5f6475;
  --dtw-wall-top:#a3a8b5; --dtw-mortar:#3d404c; --dtw-wood:#a8743f; --dtw-wood-dark:#7a5028; --dtw-wood-light:#c99257; --dtw-rope:#d8c49a; --dtw-iron:#3a3d46;
  position:relative; background:var(--dtw-night); border-radius:16px; padding:12px; overflow:hidden; margin-bottom:14px;
  box-shadow:0 18px 40px -22px rgba(20,24,40,.55); }
.dtw-fit{ position:relative; width:100%; }
.dtw-stage{ position:absolute; left:0; top:0; transform-origin:0 0; }
.dtw-svg{ position:absolute; left:0; top:0; overflow:visible; }
.dtw-layer{ position:absolute; left:0; top:0; }
.dtw-hud{ position:absolute; left:12px; top:10px; z-index:50; pointer-events:none; }
.dtw-chip{ display:flex; align-items:baseline; gap:10px; background:rgba(12,14,22,.72); border:1px solid rgba(255,255,255,.08); padding:7px 13px; border-radius:12px; color:#fff; }
.dtw-chip b{ font-size:22px; font-weight:900; letter-spacing:1px; font-variant-numeric:tabular-nums; }
.dtw-chip span{ color:#aab1c2; font-size:12px; }
.dtw-dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.2); align-self:center; }
.dtw-chip.busy .dtw-dot{ background:#f5b301; box-shadow:0 0 0 3px rgba(245,179,1,.22); }
.dtw-rejudge{ position:absolute; right:14px; top:10px; z-index:50; font:inherit; font-weight:900; font-size:13px; padding:9px 14px; border-radius:12px; border:0; cursor:pointer;
  color:#3b2408; background:linear-gradient(180deg,#f3c886,#d99a4e); box-shadow:0 2px 0 #9a6429, 0 10px 22px -12px rgba(217,154,78,.8); }
.dtw-rejudge:disabled{ cursor:not-allowed; filter:grayscale(.6) brightness(.8); }
.dtw-rejudge:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.dtw-toast{ position:absolute; left:50%; top:14px; transform:translate(-50%,-12px); z-index:60; opacity:0; pointer-events:none; background:#fffdf6; color:#3b2c0a;
  border:1px solid #f0d58e; border-radius:12px; padding:8px 14px; font-size:13px; box-shadow:0 12px 30px -14px rgba(0,0,0,.6); transition:all .35s ease; white-space:nowrap; }
.dtw-toast.on{ opacity:1; transform:translate(-50%,0); }
.dtw-toast b{ color:#9a6a00; }
.dtw-judge{ position:absolute; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; background:rgba(8,10,16,.8); color:#fff;
  opacity:0; pointer-events:none; transition:opacity .45s ease; }
.dtw-judge.on{ opacity:1; }
.dtw-judge small{ color:#9aa3b5; font-size:13px; }
.dtw-judge b{ font-size:52px; font-weight:900; letter-spacing:2px; font-variant-numeric:tabular-nums; }
.dtw-judge.done b{ color:#ffd27a; }
.dtw-gauge{ width:220px; height:6px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden; }
.dtw-gauge i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#d99a4e,#f3c886); transition:width 2.2s linear; }
.dtw-tile{ stroke:var(--dtw-seam); stroke-width:1; } .dtw-tile.a{ fill:var(--dtw-stone-a); } .dtw-tile.b{ fill:var(--dtw-stone-b); }
.dtw-crack{ stroke:rgba(40,44,56,.35); stroke-width:1; fill:none; }
.dtw-wall-l{ fill:var(--dtw-wall-l); } .dtw-wall-r{ fill:var(--dtw-wall-r); }
.dtw-brick{ fill:none; stroke:var(--dtw-mortar); stroke-width:1; opacity:.55; }
.dtw-wall-top{ fill:var(--dtw-wall-top); }
.dtw-para-l{ fill:#555a69; } .dtw-para-r{ fill:#6a6f80; } .dtw-para-top{ fill:#aeb3bf; } .dtw-fringe{ fill:#3a3d49; }
.dtw-shaft{ fill:#0d0f15; }
.dtw-post{ fill:var(--dtw-wood); stroke:var(--dtw-wood-dark); stroke-width:1; } .dtw-post-side{ fill:var(--dtw-wood-dark); }
.dtw-beam{ fill:var(--dtw-wood-light); stroke:var(--dtw-wood-dark); stroke-width:1; }
.dtw-pulley{ fill:var(--dtw-iron); stroke:#6b6f7a; stroke-width:2; } .dtw-hub{ fill:#9aa0ab; }
.dtw-rope{ stroke:var(--dtw-rope); stroke-width:1.6; }
.dtw-car{ transition:transform 1.5s cubic-bezier(.55,0,.35,1); }
.dtw-deck{ fill:var(--dtw-wood-light); stroke:var(--dtw-wood-dark); stroke-width:1; }
.dtw-plank{ stroke:rgba(90,58,26,.55); stroke-width:1; }
.dtw-deck-l{ fill:var(--dtw-wood-dark); } .dtw-deck-r{ fill:var(--dtw-wood); }
.dtw-rail{ stroke:var(--dtw-wood-dark); stroke-width:3; stroke-linecap:round; } .dtw-rail-post{ stroke:var(--dtw-wood-dark); stroke-width:2.5; }
.dtw-bar{ stroke:var(--dtw-iron); stroke-width:2.2; stroke-linecap:round; }
.dtw-gate{ transform-box:fill-box; transform-origin:50% 100%; transition:transform .45s ease, opacity .45s ease; }
.dtw-gate.open{ transform:scaleY(.08); opacity:.35; }
.dtw-lamp{ fill:#ffcf6a; } .dtw-lamp-glow{ fill:url(#dtwLamp); animation:dtw-pulse 1.6s ease-in-out infinite; }
@keyframes dtw-pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.dtw-torch{ position:absolute; width:18px; height:18px; transform:translate(-50%,-50%); font-size:16px; line-height:18px; text-align:center;
  animation:dtw-flick 1.3s infinite ease-in-out; filter:drop-shadow(0 0 6px rgba(255,170,60,.9)); }
.dtw-torch::after{ content:""; position:absolute; left:50%; top:50%; width:120px; height:120px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,180,80,.26), rgba(255,180,80,0) 65%); border-radius:50%; }
@keyframes dtw-flick{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:1; } 40%{ transform:translate(-50%,-52%) scale(1.08); opacity:.88; } 70%{ transform:translate(-50%,-49%) scale(.95); } }
.dtw-unit{ position:absolute; width:0; height:0; transition:left .38s linear, top .38s linear, opacity .35s ease; }
.dtw-sprite{ position:absolute; left:0; bottom:0; transform:translate(-50%,0); font-size:30px; line-height:1; filter:drop-shadow(0 3px 0 rgba(0,0,0,.25)); transition:transform .12s ease; }
.dtw-unit.boss .dtw-sprite{ font-size:40px; }
.dtw-shadow{ position:absolute; left:0; bottom:-5px; width:30px; height:10px; transform:translateX(-50%); border-radius:50%; background:rgba(0,0,0,.3); }
.dtw-unit.boss .dtw-shadow{ width:42px; height:12px; }
.dtw-unit.idle .dtw-sprite{ animation:dtw-bob 1.4s ease-in-out infinite; }
@keyframes dtw-bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,-3px); } }
.dtw-unit.hit .dtw-sprite{ animation:dtw-hit .26s ease; }
@keyframes dtw-hit{ 30%{ filter:brightness(2.4) saturate(0); transform:translate(calc(-50% + 3px),0); } }
.dtw-unit.dead{ opacity:0; } .dtw-unit.dead .dtw-sprite{ transform:translate(-50%,0) scale(.3) rotate(50deg); transition:transform .35s ease; }
.dtw-unit.spawning{ opacity:0; } .dtw-unit.spawning .dtw-sprite{ transform:translate(-50%,10px) scale(.5); }
.dtw-unit.riding{ transition:top 1.5s cubic-bezier(.55,0,.35,1), left .38s linear, opacity .35s ease; }
.dtw-fx{ position:absolute; pointer-events:none; transform:translate(-50%,-50%); white-space:nowrap; z-index:40; }
.dtw-fx.spark{ color:#fff6c8; font-size:18px; text-shadow:0 0 8px rgba(255,220,120,.9); animation:dtw-spark .28s ease-out forwards; }
@keyframes dtw-spark{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.4); } 40%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.3) rotate(45deg); } }
.dtw-fx.puff{ font-size:26px; animation:dtw-puff .6s ease-out forwards; }
@keyframes dtw-puff{ 0%{ opacity:.95; transform:translate(-50%,-50%) scale(.5); } 100%{ opacity:0; transform:translate(-50%,-80%) scale(1.6); } }
.dtw-fx.coin{ font-size:16px; animation:dtw-coin .9s ease-out forwards; }
@keyframes dtw-coin{ 0%{ opacity:0; transform:translate(-50%,-40%) scale(.6); } 25%{ opacity:1; transform:translate(-50%,-140%) scale(1); } 100%{ opacity:0; transform:translate(-50%,-220%) scale(.8); } }
.dtw-fx.ring{ width:10px; height:5px; border:3px solid rgba(167,139,250,.9); border-radius:50%; animation:dtw-ring .55s ease-out forwards; }
@keyframes dtw-ring{ 0%{ opacity:1; width:10px; height:5px; } 100%{ opacity:0; width:140px; height:70px; } }
@media (prefers-reduced-motion: reduce){ .dtw-torch, .dtw-lamp-glow, .dtw-unit.idle .dtw-sprite{ animation:none; } }

.dnb-my{ padding:9px 12px; border-radius:10px; background:rgba(59,130,246,0.10); margin:4px 0 10px; font-size:13px; }
.dnb-my b{ color:#d97706; }
.dnb-muted{ color:#94a3b8; font-size:12px; }
.dnb-row{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; margin-bottom:6px; background:rgba(148,163,184,0.08); }
.dnb-row.is-me{ background:rgba(250,204,21,0.14); }
.dnb-rank{ width:40px; flex-shrink:0; font-weight:800; color:#94a3b8; font-variant-numeric:tabular-nums; }
.dnb-row.is-top .dnb-rank{ font-size:18px; }
.dnb-who{ flex:1; min-width:0; }
.dnb-name{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dnb-me{ color:#d97706; font-size:12px; }
.dnb-sub{ font-size:12px; color:#94a3b8; margin-top:1px; }
.dnb-val{ font-weight:800; font-size:17px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dnb-val span{ font-size:12px; color:#94a3b8; font-weight:600; margin-left:3px; }
.dnb-foot{ font-size:12px; color:#94a3b8; margin-top:6px; }

.den-subtabs{ margin:18px 0 10px; }
.den-lobby-meta{ display:flex; justify-content:flex-end; margin:-2px 0 6px; }

.den-subtabs{ margin:6px 0 14px; }
.den-log-tab{ max-height:none; }

.den-idle-top{ margin-bottom:10px; }
.den-team-strip{ margin-top:10px; padding:10px 12px; border-radius:12px; background:rgba(148,163,184,.10); }
.dts-head{ font-size:13px; font-weight:700; color:#475569; margin-bottom:6px; }
.dts-list{ display:flex; flex-wrap:wrap; gap:8px; }
.dts-m{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#fff; border:1px solid #e2e8f0; font-size:13px; }
.dts-m.me{ border-color:#f59e0b; background:#fffbeb; }
.dts-m b{ font-weight:700; color:#1e293b; }
.dts-lead{ font-style:normal; font-size:11px; color:#b45309; background:#fef3c7; border-radius:6px; padding:0 5px; }

.dts-pet{ --c:#334155; display:inline-flex; align-items:center; gap:5px; padding:4px 10px 4px 6px; border-radius:999px;
  font-size:12px; color:#fff; cursor:pointer; font-family:inherit;
  background:linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 45%, #0b0d11));
  border:1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.dts-pet:hover{ filter:brightness(1.15); }
.dts-pet:focus-visible{ outline:2px solid #f59e0b; outline-offset:2px; }
.dts-pet i{ font-style:normal; font-size:14px; line-height:1; }
.dts-m .dts-pet b{ font-weight:600; color:#fff; }
.dts-pet em{ font-style:normal; font-size:11px; opacity:.8; font-variant-numeric:tabular-nums; }
.dts-pet[data-role="tank"]{ --c:#4b5563; } .dts-pet[data-role="dps"]{ --c:#7c2d12; } .dts-pet[data-role="assassin"]{ --c:#3b0764; }
.dts-pet[data-role="swift"]{ --c:#0e7490; } .dts-pet[data-role="drain"]{ --c:#14532d; } .dts-pet[data-role="support"]{ --c:#854d0e; }
.den-petview{ width:min(340px, 92vw); }
.den-petview .pet-tile{ margin:0; }
.den-petview-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; color:#e2e8f0; font-size:13px; }
.den-petview-foot .pt-btn{ flex:0 0 auto; padding:6px 20px; }

.den-gain-row{ flex-wrap:wrap; }
.den-yb-capped{ opacity:.55; }

.lb-cls-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.lb-cls-btn{ padding:5px 12px; border-radius:999px; border:1px solid rgba(148,163,184,.35); background:rgba(148,163,184,.08);
  color:inherit; font:inherit; font-size:13px; cursor:pointer; }
.lb-cls-btn:hover{ border-color:rgba(250,204,21,.6); }
.lb-cls-btn.active{ background:rgba(250,204,21,.18); border-color:#facc15; font-weight:700; }
.lb-cls-btn:focus-visible{ outline:2px solid #facc15; outline-offset:2px; }
.lb-bonus-line{ font-size:13px; margin:0 0 10px; padding:7px 10px; border-radius:8px; background:rgba(34,197,94,.10); }

.lbb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
.lbb-card{ border:1px solid var(--border,var(--line-1)); border-radius:var(--r-lg,12px); padding:12px 14px;
  background:var(--surface-1,#fff); display:flex; flex-direction:column; gap:8px; }
.lbb-head{ display:flex; align-items:center; gap:10px; min-width:0; }
.lbb-icon{ flex:0 0 32px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:17px;
  background:var(--surface-2,#f1f5f9); }
.lbb-name{ flex:1; min-width:0; display:flex; flex-direction:column; }
.lbb-name b{ font-size:14px; }
.lbb-sub{ font-size:11px; color:var(--muted,#94a3b8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lbb-pct{ display:flex; align-items:center; gap:3px; }
.lbb-title{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; color:color-mix(in srgb, var(--tc) 62%, #000); padding:0; border:0; background:none; }
.lbb-kind{ font-size:13px; color:var(--ink-3,#334155); }
.lbb-tiers{ display:flex; gap:6px; }
.lbb-tier{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px 2px; border-radius:8px;
  font-size:13px; font-variant-numeric:tabular-nums; background:var(--surface-2,#f1f5f9); }
.lbb-tier.r1{ background:rgba(250,204,21,.16); }
.lbb-tier.r2{ background:rgba(148,163,184,.18); }
.lbb-tier.r3{ background:rgba(217,119,6,.13); }
.lbb-note{ margin-top:8px; font-size:11.5px; line-height:1.7; color:var(--muted,#94a3b8); }
html.theme-dark .lbb-card{ background:#1a1e24; border-color:#333a44; }
html.theme-dark .lbb-icon, html.theme-dark .lbb-tier{ background:#232a33; }
html.theme-dark .lbb-kind{ color:#cbd5e1; }
html.theme-dark .lbb-title{ color:var(--tc); }
html.theme-dark .lbb-tier.r1{ background:rgba(250,204,21,.14); }
html.theme-dark .lbb-tier.r2{ background:rgba(148,163,184,.14); }
html.theme-dark .lbb-tier.r3{ background:rgba(217,119,6,.16); }

.blm-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; margin-bottom:10px; }
.blm-stats > div{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; background:var(--surface-2,#f1f5f9); font-size:15px; }
.blm-stats span{ font-size:12px; color:var(--muted,#64748b); }
.blm-stats small{ display:block; font-size:11px; }
.blm-note{ font-size:12.5px; line-height:1.7; color:var(--muted,#64748b); padding:8px 12px; border-radius:10px; background:rgba(210,39,48,.06); margin-bottom:6px; }
.blm-h{ margin:16px 0 8px; font-size:15px; }
.blm-dim{ color:var(--muted,#64748b); font-size:12.5px; font-weight:400; }
.blm-sell{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.blm-sell input, .blm-lots{ width:88px; padding:5px 8px; border:1px solid var(--border,#cbd5e1); border-radius:8px; font:inherit; background:var(--surface-1,#fff); color:inherit; }
.blm-lots{ width:64px; }
.blm-sell #blmSellPreview{ flex-basis:100%; }
.blm-scroll{ overflow-x:auto; }
.blm-table{ width:100%; min-width:520px; border-collapse:collapse; font-size:13.5px; }
.blm-table th, .blm-table td{ padding:8px 10px; text-align:left; border-bottom:1px solid var(--line-soft,#e2e8f0); white-space:nowrap; }
.blm-table th{ font-size:12px; color:var(--muted,#64748b); font-weight:500; }
.blm-table .num{ font-variant-numeric:tabular-nums; }
.blm-btn{ padding:5px 14px; }
html.theme-dark .blm-stats > div{ background:#1d232c; }
html.theme-dark .blm-note{ background:rgba(248,113,113,.08); }
html.theme-dark .blm-sell input, html.theme-dark .blm-lots{ background:#151a20; border-color:#334155; }
html.theme-dark .blm-table th, html.theme-dark .blm-table td{ border-bottom-color:#273040; }

.pg-a-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-1);
}
.pg-a-head > h2 {
  margin: 0;
  
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink-2, var(--text));
}

.pg-a-info { position: relative; }
.pg-a-info > summary {
  list-style: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-5);
  font-size: 12px; font-style: italic; font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.pg-a-info > summary::-webkit-details-marker { display: none; }
.pg-a-info > summary::marker { content: ""; }
.pg-a-info > summary:hover { background: var(--line-1); color: var(--ink-3); }
.pg-a-info[open] > summary { background: var(--ink-5); color: var(--surface-1); }
.pg-a-pop {
  position: absolute;
  top: 26px; left: -4px;
  z-index: 30;
  width: min(420px, 78vw);
  padding: 12px 14px;
  border: 1px solid var(--line-1);
  border-radius: 10px;
  background: var(--surface-1);
  box-shadow: var(--sh-4);
}
.pg-a-pop p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.65; color: var(--ink-4); }
.pg-a-pop p:last-child { margin-bottom: 0; }
.pg-a-pop b { color: var(--ink-2, var(--text)); margin-right: 6px; }

html .pg-a .pg-a-tabs.pg-subtabs {
  background: transparent;
  padding: 0;
  border-radius: 0;
  gap: 22px;
  border-bottom: 1px solid var(--line-1);
}
.pg-a .pg-a-tabs.lv1 { margin: 10px 0 16px; }   
.pg-a .pg-a-tabs.lv2 { margin: 16px 0 14px; }
.pg-a .pg-a-tabs.lv3 { margin: 14px 0 12px; }

.pg-a .pg-a-tabs .pg-subtab-btn {
  background: transparent;
  border-radius: 0;
  padding: 0 2px 9px;
  color: var(--ink-5);
  transition: color .15s ease;
}
.pg-a .pg-a-tabs .pg-subtab-btn:hover { background: transparent; color: var(--ink-3); }

.pg-a .pg-a-tabs .pg-subtab-btn.active,
.pg-a .pg-a-tabs .pg-subtab-btn.active:hover { background: transparent; }
.pg-a .pg-a-tabs .pg-subtab-btn.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;   
  border-radius: 2px;
}

.pg-a .pg-a-tabs.lv1 .pg-subtab-btn { font-size: 15px; }
.pg-a .pg-a-tabs.lv1 .pg-subtab-btn.active,
.pg-a .pg-a-tabs.lv1 .pg-subtab-btn.active:hover { color: var(--danger-solid); }
.pg-a .pg-a-tabs.lv1 .pg-subtab-btn.active::after { height: 2px; background: var(--danger-solid); }

.pg-a .pg-a-tabs.lv2 .pg-subtab-btn { font-size: 13px; }
.pg-a .pg-a-tabs.lv2 .pg-subtab-btn.active,
.pg-a .pg-a-tabs.lv2 .pg-subtab-btn.active:hover { color: var(--ink-3); }
.pg-a .pg-a-tabs.lv2 .pg-subtab-btn.active::after { height: 2px; background: var(--ink-3); }

.pg-a .pg-a-tabs.lv3 .pg-subtab-btn { font-size: 12px; }
.pg-a .pg-a-tabs.lv3 .pg-subtab-btn.active,
.pg-a .pg-a-tabs.lv3 .pg-subtab-btn.active:hover { color: var(--primary); }
.pg-a .pg-a-tabs.lv3 .pg-subtab-btn.active::after { height: 1.5px; background: var(--primary-solid); }

.pg-a .conquest-pane { margin-top: 0; }

@media (max-width: 920px) {
  .pg-a .pg-a-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 18px; }
  .pg-a .pg-a-tabs.lv1 .pg-subtab-btn { font-size: 14px; }
  .pg-a .pg-subtabs-wrap.is-overflowing::before {
    background: linear-gradient(90deg, var(--surface-1), rgba(255,255,255,0));
  }
  .pg-a .pg-subtabs-wrap.is-overflowing::after {
    background: linear-gradient(270deg, var(--surface-1), rgba(255,255,255,0));
  }
  .pg-a .pg-subtabs-wrap.is-overflowing .pg-a-tabs { padding-left: 26px; padding-right: 26px; }
  .pg-a .pg-subtabs-wrap.is-overflowing.at-start .pg-a-tabs { padding-left: 0; }
  .pg-a .pg-subtabs-wrap.is-overflowing.at-end .pg-a-tabs { padding-right: 0; }
}

html.theme-dark .pg-a-info[open] > summary { background: var(--line-1); color: var(--ink-1); }
html.theme-dark .pg-a-pop { background: var(--surface-2); }

html .pg-a .pg-a-tabs.tab-toggle-group {
  background: transparent;
  padding: 0;
  border-radius: 0;
  gap: 22px;
  border-bottom: 1px solid var(--line-1);
}
.pg-a .pg-a-tabs .tab-toggle-thumb { display: none; }   

.pg-a .pg-a-tabs .tab-toggle-pill {
  background: transparent;
  border-radius: 0;
  padding: 0 2px 9px;
  color: var(--ink-5);
  transition: color .15s ease;
}
.pg-a .pg-a-tabs .tab-toggle-pill:hover { background: transparent; color: var(--ink-3); }
.pg-a .pg-a-tabs .tab-toggle-pill.active,
.pg-a .pg-a-tabs .tab-toggle-pill.active:hover { background: transparent; }
.pg-a .pg-a-tabs .tab-toggle-pill.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  border-radius: 2px;
}
.pg-a .pg-a-tabs.lv1 .tab-toggle-pill { font-size: 15px; }
.pg-a .pg-a-tabs.lv1 .tab-toggle-pill.active,
.pg-a .pg-a-tabs.lv1 .tab-toggle-pill.active:hover { color: var(--danger-solid); }
.pg-a .pg-a-tabs.lv1 .tab-toggle-pill.active::after { height: 2px; background: var(--danger-solid); }
.pg-a .pg-a-tabs.lv2 .tab-toggle-pill { font-size: 13px; }
.pg-a .pg-a-tabs.lv2 .tab-toggle-pill.active,
.pg-a .pg-a-tabs.lv2 .tab-toggle-pill.active:hover { color: var(--ink-3); }
.pg-a .pg-a-tabs.lv2 .tab-toggle-pill.active::after { height: 2px; background: var(--ink-3); }
.pg-a .pg-a-tabs.lv3 .tab-toggle-pill { font-size: 12px; }
.pg-a .pg-a-tabs.lv3 .tab-toggle-pill.active,
.pg-a .pg-a-tabs.lv3 .tab-toggle-pill.active:hover { color: var(--primary); }
.pg-a .pg-a-tabs.lv3 .tab-toggle-pill.active::after { height: 1.5px; background: var(--primary-solid); }

.pg-a > .task-section { margin-top: 0; }

.pg-a-head > .pg-a-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pg-gate-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--danger-soft);
  background: var(--danger-soft);
  color: var(--danger-solid);
  font-size: 12.5px;
  line-height: 1.5;
}

.mg-group { margin-bottom: 18px; }
.mg-group:last-child { margin-bottom: 0; }
.mg-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-1);
}
.mg-group-count { font-size: 12px; color: var(--ink-5); }

.mg-timeline {
  margin: 14px 0 12px;
  padding: 12px 14px 10px;
  border: 1px solid var(--line-1);
  border-radius: 10px;
  background: var(--surface-2);
}
.mg-tl-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.mg-tl-title { font-size: 13px; font-weight: 700; color: var(--ink-2, var(--text)); }
.mg-tl-sub { font-size: 12px; color: var(--ink-5); }
.mg-tl-sub b { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.mg-tl-lane { position: relative; padding: 0 14px; }
.mg-tl-bubbles { position: relative; height: 22px; }
.mg-tl-bubble {
  position: absolute; top: 0; transform: translateX(-50%);
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--info-soft); color: var(--primary-solid);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.mg-tl-axis {
  position: relative; height: 3px; border-radius: 2px;
  background: var(--line-1);
}

.mg-tl-now {
  position: absolute; left: 0; top: -9px; transform: translateX(-50%);
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--success-solid, #16a34a); color: #fff;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.mg-tl-ticks { position: relative; height: 24px; }
.mg-tl-tick { position: absolute; top: 0; transform: translateX(-50%); text-align: center; }
.mg-tl-tick i {
  display: block; width: 1px; height: 5px; margin: 0 auto 3px;
  background: var(--line-2);
}
.mg-tl-tick em {
  display: block; font-style: normal; white-space: nowrap;
  font-size: 11px; color: var(--ink-5); font-variant-numeric: tabular-nums;
}

.mg-plot-card-actions { flex-wrap: nowrap; }
.mg-plot-card-actions .mg-plot-btn {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 0; padding-right: 0;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 560px) {
  
  .mg-tl-tick:nth-child(2), .mg-tl-tick:nth-child(4) { display: none; }
}

html.theme-dark .mg-timeline { background: var(--surface-3); }

.mg-groups { display: block; }

.pg-hero > .mg-timeline { flex: 1 0 100%; }

html .pg-a .pg-a-tabs.task-tabs {
  background: transparent;
  padding: 0;
  border-radius: 0;
  gap: 22px;
  margin: 10px 0 16px;
  border-bottom: 1px solid var(--line-1);
}
.pg-a .pg-a-tabs .task-tab-btn {
  position: relative;
  border: 0;                      
  background: transparent;
  border-radius: 0;
  padding: 0 2px 9px;
  color: var(--ink-5);
  font-weight: 700;
  transition: color .15s ease;
}
.pg-a .pg-a-tabs .task-tab-btn:hover { background: transparent; color: var(--ink-3); }
.pg-a .pg-a-tabs .task-tab-btn.active,
.pg-a .pg-a-tabs .task-tab-btn.active:hover {
  background: transparent;
  border-color: transparent;
}
.pg-a .pg-a-tabs .task-tab-btn.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  border-radius: 2px;
}
.pg-a .pg-a-tabs.lv1 .task-tab-btn { font-size: 15px; }
.pg-a .pg-a-tabs.lv1 .task-tab-btn.active,
.pg-a .pg-a-tabs.lv1 .task-tab-btn.active:hover { color: var(--danger-solid); }
.pg-a .pg-a-tabs.lv1 .task-tab-btn.active::after { height: 2px; background: var(--danger-solid); }
.pg-a .pg-a-tabs.lv2 .task-tab-btn { font-size: 13px; }
.pg-a .pg-a-tabs.lv2 .task-tab-btn.active,
.pg-a .pg-a-tabs.lv2 .task-tab-btn.active:hover { color: var(--ink-3); }
.pg-a .pg-a-tabs.lv2 .task-tab-btn.active::after { height: 2px; background: var(--ink-3); }

.pg-a .pg-a-tabs .task-tab-btn .chat-dock-mini-badge { margin-left: 4px; }

.pg-a-head > .pg-a-head-actions .btn-solid-cta {
  height: 30px;
  min-width: 0;
  width: auto;
  padding: 0 14px;
  font-size: 12.5px;
  border-radius: var(--r-pill);
}

.sandbox-map-title h2 { font-size: 24px; }

.sandbox-map-title { gap: 0; }

.sandbox-myplots-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--line-1);
}
.sandbox-myplots-actions .capsule-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
}

@keyframes navAlertBlink {
  0%, 100% { color: var(--danger-solid); }
  50%      { color: var(--ink-5); }
}
.nav-item.is-alert .nav-label {
  color: var(--danger-solid);
  font-weight: 700;
  animation: navAlertBlink 2.4s ease-in-out infinite;
}

@keyframes navAlertBlinkOn {
  0%, 100% { color: var(--on-solid); opacity: 1; }
  50%      { color: var(--on-solid); opacity: .55; }
}
.nav-item.active.is-alert .nav-label {
  color: var(--on-solid);
  animation: navAlertBlinkOn 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .nav-item.is-alert .nav-label,
  .nav-item.active.is-alert .nav-label { animation: none; }
}

.nftb-wrap { margin: 0 0 12px; }
.nftb-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.nftb-title { font-size: 13px; font-weight: 700; color: var(--ink-2, var(--text)); }
.nftb-sub { font-size: 12px; color: var(--ink-5); }
.nftb-sub b { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.nftb-belt {
  position: relative; overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, #0b1220, #131c2e);
  padding: 12px 0;
}

.nftb-belt::before, .nftb-belt::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 54px; z-index: 2; pointer-events: none;
}
.nftb-belt::before { left: 0;  background: linear-gradient(90deg, #0b1220, rgba(11,18,32,0)); }
.nftb-belt::after  { right: 0; background: linear-gradient(270deg, #131c2e, rgba(19,28,46,0)); }

.nftb-track { display: flex; gap: 12px; width: max-content; padding: 0 12px; }
.nftb-track.is-rolling { animation: nftbMove 30s linear infinite; }
.nftb-belt:hover .nftb-track.is-rolling { animation-play-state: paused; }
@keyframes nftbMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.nftb-item { flex: 0 0 auto; width: 78px; text-align: center; }
.nftb-pic {
  height: 78px; border-radius: 9px; overflow: hidden;
  display: grid; place-items: center;
  background: #0f172a;
  border: 2px solid var(--nftb-c, #94a3b8);
  box-shadow: 0 0 12px -2px var(--nftb-c, #94a3b8);
}
.nftb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nftb-nm { margin-top: 5px; font-size: 11px; font-weight: 700; color: #e2e8f0; }
.nftb-by { font-size: 10.5px; color: #94a3b8; }
.nftb-by b { color: #cbd5e1; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .nftb-track.is-rolling { animation: none; }
  .nftb-belt { overflow-x: auto; }
}

@media (max-width: 560px) {
  .dtw-rejudge { right: 10px; top: 8px; font-size: 12px; padding: 7px 11px; }
}

.forest-map-toggle {
  margin-left: auto;
  height: 26px; min-width: 52px; padding: 0 12px;
  border: 1px solid var(--line-1); border-radius: var(--r-pill);
  background: var(--surface-1); color: var(--ink-3);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.forest-map-toggle:hover { background: var(--surface-3); }
.forest-map-box.is-collapsed .forest-map-head { border-bottom: 0; }
.forest-map-box.is-collapsed.has-chest { border-color: #F3D27A; background: #FFFBEB; }
html.theme-dark .forest-map-box.is-collapsed.has-chest { border-color: #7a5d12; background: rgba(245, 179, 1, 0.08); }
.forest-map-stage { height: 260px; }
@media (max-width: 920px) {
  .forest-map-stage { height: 200px; }
}

.den-bd-info { display: inline-block; vertical-align: -4px; margin-left: 6px; }
.den-bd-pop { width: min(300px, 86vw); }
.den-bd-table { width: 100%; border-collapse: collapse; margin: 6px 0 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.den-bd-table th { text-align: right; font-weight: 600; color: var(--ink-5); padding: 4px 6px; border-bottom: 1px solid var(--line-1); }
.den-bd-table td { text-align: right; padding: 4px 6px; color: var(--ink-3); }
.den-bd-table th:first-child, .den-bd-table td:first-child { text-align: left; }
.den-bd-table tr.is-mine td { color: var(--danger-solid); font-weight: 700; background: var(--danger-soft); }
.den-bd-foot { font-size: 11.5px !important; color: var(--ink-5) !important; }

.forest-map-head { flex-wrap: nowrap; align-items: flex-start; }
.forest-map-title { flex: 0 0 auto; white-space: nowrap; line-height: 26px; }
.forest-map-meta { flex: 1 1 auto; min-width: 0; line-height: 1.55; padding-top: 3px; }
.forest-map-toggle { flex: 0 0 auto; }

.den-bd-pop p b { margin-right: 0; }
.den-bd-pop p > b:first-child { margin-right: 6px; }

.redbox-a .redbox-actions { gap: var(--s-4); }
.redbox-a-meta { font-size: 12px; color: var(--ink-5); line-height: 1.6; }
.redbox-a-meta b { color: var(--ink-2); }
.redbox-a .redbox-btn-row { flex-wrap: nowrap; gap: var(--s-4); margin-top: 0; }
.redbox-a-buy { flex: 1 1 0; min-width: 0; height: auto; min-height: 40px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding-top: 7px; padding-bottom: 7px; line-height: 1.2; }
.redbox-a-price { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; opacity: .88;
  font-variant-numeric: tabular-nums; white-space: nowrap; }

.lb-cls-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lb-cls-tabs::-webkit-scrollbar { display: none; }
.lb-cls-btn { flex: 0 0 auto; white-space: nowrap; }
.lb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 4px auto 10px; max-width: 640px; }
.lb-pod { min-width: 0; text-align: center; border: 1px solid var(--line-1); background: var(--surface-2); border-radius: 12px 12px 6px 6px;
  padding: 8px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.lb-pod-1 { padding-top: 16px; border-color: var(--warn-line); background: linear-gradient(180deg, var(--warn-soft), var(--surface-1)); }
.lb-pod.is-me { box-shadow: inset 0 0 0 2px var(--warn-line); }
.lb-pod.is-empty { opacity: .55; }
.lb-pod-title { font-size: 11px; font-weight: 900; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lb-pod-av { position: relative; line-height: 0; }
.lb-pod-av .lb-pod-medal { position: absolute; right: -8px; bottom: -4px; font-size: 14px; line-height: 1; }
.lb-pod.is-empty .lb-pod-medal { font-size: 22px; line-height: 1.2; }
.lb-pod-1 .rank-avatar .dropdown-avatar-mini { width: 40px; height: 40px; font-size: 21px; }
.lb-pod-name { font-size: 12.5px; font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-pod-score { font-size: 13px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lb-pod-score small, .lb-row-score small { font-size: 10.5px; font-weight: 600; color: var(--ink-5); }
.lb-me { margin-left: 3px; font-size: 11px; font-weight: 700; color: var(--warn-text); }
.lb-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 10px; padding: 7px 10px; border-radius: 10px;
  background: var(--info-soft, rgba(59,130,246,.10)); font-size: 12.5px; }
.lb-mine-rank b { color: var(--warn-text); }
.lb-mine .lb-bonus-line { margin: 0; padding: 0; background: none; font-size: 11.5px; color: var(--ink-4); border-radius: 0; }
.lb-mine .lb-bonus-line b { color: var(--ink-2); }
.lb-muted { color: var(--ink-5); }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; margin-bottom: 6px; background: var(--surface-2); }
.lb-row.is-me { background: var(--warn-soft); }
.lb-row-rank { width: 26px; flex: 0 0 auto; text-align: center; font-weight: 800; color: var(--ink-5); font-variant-numeric: tabular-nums; }
.lb-row-main { flex: 1; min-width: 0; }
.lb-row-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row-detail { font-size: 12px; color: var(--ink-5); }
.lb-row-score { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-foot { font-size: 12px; color: var(--ink-5); margin-top: 8px; line-height: 1.6; }

.task-list:has(> .task-a) { grid-template-columns: minmax(0, 1fr); }
.task-a { min-width: 0; }
.task-a-l1 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.task-a-l1 > strong { font-size: 14px; }
.task-a-reward { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-4); text-align: right; }
.task-a-desc { margin-top: 2px; font-size: 12px; color: var(--ink-5); }
.task-a-l3 { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); }
.task-a-l3 .task-progress { flex: 1 1 auto; min-width: 0; }
.task-a-l3 .task-progress-text { flex: 0 0 auto; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.task-a-l3 .home-btn { flex: 0 0 auto; min-width: 72px; justify-content: center; white-space: nowrap; }
.task-a-reroll { display: inline-flex; align-items: center; gap: 1px; height: 22px; padding: 0 7px; border-radius: 999px;
  border: 1px solid var(--line-1); background: var(--surface-1); color: var(--ink-4); font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; }
.task-a-reroll small { font-size: 10px; font-weight: 700; }
.task-a-reroll:hover:not(:disabled) { border-color: var(--ink-5); color: var(--ink-2); }
.task-a-reroll:disabled { opacity: .45; cursor: not-allowed; }
.task-a-reroll:focus-visible { outline: 2px solid var(--ink-4); outline-offset: 2px; }

@media (max-width: 920px) {
  
  .shell { background-image: linear-gradient(90deg, var(--sidebar-red-light) 0 57px, rgba(220, 38, 38, 0.15) 57px 58px, transparent 58px); }
  .sidebar { height: calc(100vh - var(--topbar-h, 62px)); height: calc(100dvh - var(--topbar-h, 62px)); max-height: none;
    padding: var(--s-2) var(--s-1); }
  .sidebar .nav-list { height: 100%; gap: 2px; }
  .sidebar .nav-group-first-row { display: none; }
  .sidebar .nav-item .nav-icon { display: none; }
  .sidebar .nav-item .nav-label { flex: 0 0 auto; }
  .sidebar .nav-item { flex: 1 1 0; min-height: 30px; padding: 0 2px; gap: 0; font-size: 11px; font-weight: 600; }
  .sidebar .nav-item.active { font-weight: 800; }

  #homeLandBox .capsule-head { flex-wrap: nowrap; }
  #homeLandBox .capsule-sub { display: none; }
  #homeLandBox .capsule-head .home-btn svg { display: none; }
  #homeLandBox .capsule-head .home-btn-compact { padding-left: 10px; padding-right: 10px; }

  .land-card { height: clamp(148px, 36vw, 190px); }

  .redbox-a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-6); row-gap: var(--s-5); }
  .redbox-a .redbox-actions { display: contents; }
  .redbox-a .redbox-visual-wrap svg { width: 96px; height: auto; }
  .redbox-a-meta { grid-column: 2; }
  
  .redbox-a-sep { display: block; height: 0; overflow: hidden; }
  .redbox-a .redbox-btn-row { grid-column: 1 / -1; }

  .pg-a-pop { position: fixed; top: 72px; left: 66px; right: 8px; width: auto; max-height: calc(100dvh - 96px); overflow-y: auto; }
}

.pg-a .pg-a-tabs .chat-channel-tab { height: auto; }
.pg-a .pg-a-tabs .chat-channel-tab.has-unread::after { top: -2px; right: -8px; }
.pg-a .pg-a-tabs .chat-channel-tab.active.has-unread::after { top: auto; right: 0; left: 0; bottom: -1px; width: auto; height: 2px;
  border-radius: 2px; box-shadow: none; }

.pg-a .chat-input-row .send-btn.home-btn { min-height: 44px; padding: 0 var(--s-9); }

.mc-mat-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); min-width: 0; }
@media (max-width: 920px) { .pg-row > .mc-mat-actions { flex: 1 1 100%; width: 100%; } }
.mc-qty-line { display: flex; align-items: center; gap: var(--s-2); }
.mc-qty-line .pg-qty-input { width: 64px; height: 32px; min-height: 32px; padding-top: 0; padding-bottom: 0; text-align: center; }
.mc-qty-step { width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--r-md); border: 1px solid var(--line-1);
  background: var(--surface-2); color: var(--ink-3); font-size: 16px; font-weight: 800; line-height: 1; cursor: pointer; }
.mc-qty-step:hover { border-color: var(--line-2); color: var(--ink-1); }
.mc-trade-line { display: flex; gap: var(--s-3); }
.mc-trade-line .home-btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
.mc-total { font-weight: 700; opacity: .85; font-variant-numeric: tabular-nums; }

@media (max-width: 920px) {
  
  .nsg-fab { display: none; }
  .next-step-guide-bar.is-collapsed { width: 46px; height: 46px; padding: 0; border-radius: 50%; right: 12px; bottom: 14px; }
  .next-step-guide-bar.is-collapsed .next-step-guide-body,
  .next-step-guide-bar.is-collapsed .next-step-guide-close { display: none; }
  .next-step-guide-bar.is-collapsed .nsg-fab { display: flex; align-items: center; justify-content: center; position: relative;
    width: 100%; height: 100%; border: 0; background: transparent; color: var(--on-solid); font-size: 19px; cursor: pointer; border-radius: 50%; }
  .nsg-fab i { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
    background: var(--danger-solid); color: #fff; font: 800 10px/18px ui-monospace, Menlo, monospace; font-style: normal; text-align: center; }

  .eq-forge-row + .eq-forge-row { margin-top: var(--s-5); padding-top: var(--s-5); }
  .eq-forge-row-head { margin-bottom: var(--s-3); }
  .eq-forge-tiles { flex-wrap: nowrap; gap: 4px; container-type: inline-size; }
  .eq-forge-tile { flex: 1 1 0; width: auto; height: auto; aspect-ratio: 1; max-width: 46px; min-width: 0; border-radius: var(--r-md); }
  .eq-forge-tile-icon { font-size: 15px; }
  .eq-forge-tile-tier { font-size: 8px; }

  .eq-mat-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
  .eq-mat-grid .eq-mat-tile { width: 100%; height: auto; aspect-ratio: 1; }
  .ex-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
  .ex-catalog-grid .ex-catalog-tile { width: 100%; height: auto; min-height: 88px; }

  .pt-fold { margin-left: auto; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: rgba(255,255,255,.85);
    border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; cursor: pointer; }
  .pet-tile.pt-foldable:not(.is-open),
  .pet-tile.pt-foldable:not(.is-open) .pt-inner { min-height: 0; }
  .pet-tile.pt-foldable:not(.is-open) .pt-exp,
  .pet-tile.pt-foldable:not(.is-open) .pt-skill,
  .pet-tile.pt-foldable:not(.is-open) .pt-chips,
  .pet-tile.pt-foldable:not(.is-open) .pt-equips { display: none; }
  .pet-tile.pt-foldable:not(.is-open) .pt-cp { margin-top: var(--s-3); }
  .pet-tile.pt-foldable:not(.is-open) .pt-stats { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 2px 10px; margin-top: var(--s-3); }
  .pet-tile.pt-foldable:not(.is-open) .pt-stats > div { gap: 4px; font-size: 11px; }

  .wb-chests { flex-wrap: nowrap; gap: 6px; }
  .wb-chest { flex: 1 1 0; padding: var(--s-3) var(--s-4); font-size: 11px; line-height: 1.45; }

  .topbar #nickname { display: inline-block; max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
}
@media (min-width: 921px) { .pt-fold, .nsg-fab { display: none; } }
@container (max-width: 230px) { .eq-forge-tile-tier { display: none; } }

@media (max-width: 400px) {
  .topbar .top-actions { gap: 6px; }
  .topbar .user-chip { flex: 0 0 auto; min-width: 0; }
  .topbar .profile-trigger { padding: 0 8px; gap: 4px; }
  .topbar #nickname { max-width: 4.8em; }
  
  #homeLandBox .capsule-head { flex-wrap: wrap; row-gap: 8px; }
  #homeLandBox .capsule-head-btns { flex: 1 1 100%; }
  #homeLandBox .capsule-head-btns .home-btn-compact { flex: 1 1 0; justify-content: center; }
}

.home-hero-checkin-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); width: min(372px, 100%); }
.home-hero-checkin-entries .capsule-btn.primary { width: 100%; justify-content: center; white-space: nowrap; padding-left: var(--s-3); padding-right: var(--s-3); }
.home-hero-checkin-entries .entry-count { font-style: normal; margin-left: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--danger-solid); color: #fff; font: 800 10px/16px ui-monospace, Menlo, monospace; display: inline-block; text-align: center; }
@media (max-width: 920px) { .home-hero-checkin-entries { width: 100%; } }

.cap-state-pill { font-size: 11.5px; font-weight: 700; color: var(--success-text, #166534); background: var(--success-soft, #dcfce7);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.cap-state-pill b { font-variant-numeric: tabular-nums; }
.cap-state-pill.is-bad { color: var(--danger-text); background: var(--danger-soft); }
.cap-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.cap-tri.cap-tri-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cap-tri > div { min-width: 0; background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.cap-tri small { display: block; font-size: 10.5px; color: var(--ink-5); }
.cap-tri b { display: block; font-size: 14px; color: var(--ink-1); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-tri b.is-warm { color: var(--warn-text, #b45309); }
.cap-tri .is-bad { color: var(--danger-text); }
.cap-dgn-sub { font-size: 11.5px; margin-top: var(--s-3); }
.cap-gains { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); align-items: flex-start; }
.cap-gains .cap-pill { margin: 0; }
.cap-gains .cap-pill.is-big { font-size: 13px; font-weight: 800; background: var(--warn-soft); color: var(--warn-deep, #9a3412); }
.cap-gains-more { display: contents; }
.cap-gains-more > summary { list-style: none; cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--ink-5);
  border: 1px dashed var(--line-2); border-radius: 999px; padding: 2px 9px; }
.cap-gains-more > summary::-webkit-details-marker { display: none; }
.cap-gains-more[open] > summary { order: 99; }
.cap-dgn-actions.cap-dgn-actions-3 { flex-wrap: nowrap; }
.cap-dgn-actions.cap-dgn-actions-3 > .home-btn { min-width: 0; white-space: nowrap; }
.cap-dgn-actions.cap-dgn-actions-3 > .home-btn-danger { flex: .7 1 0; }

#homePetBox .hp-head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
#homePetBox .hp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; }
#homePetBox .hp-block.hp-card { display: flex; flex-direction: column; border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line-1); min-width: 0; }
#homePetBox .hp-card.idle { opacity: 1; }
#homePetBox .hp-card.idle .hp-row, #homePetBox .hp-card.idle .hp-card-meta { opacity: .6; }
#homePetBox .hp-card-meta { margin-left: 0; margin-top: 2px; }
#homePetBox .hp-card .hp-pets { gap: 0; margin-top: var(--s-3); }
#homePetBox .hp-card .hp-pet { width: 26px; height: 26px; padding: 0; margin-right: -6px; border-radius: 50%; justify-content: center; border: 2px solid var(--surface-1); }
#homePetBox .hp-card .hp-pet b { display: none; }
#homePetBox .hp-card .hp-pills { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px 6px; }
#homePetBox .hp-card .hp-pill { justify-content: flex-start; white-space: nowrap; font-size: 11px; padding-left: 6px; padding-right: 6px; min-width: 0; }
#homePetBox .hp-card .hp-next { margin-top: var(--s-3); }
#homePetBox .hp-card-spacer { flex: 1 1 auto; min-height: var(--s-4); }
#homePetBox .hp-card .hp-actions { margin-top: 0; }
@media (max-width: 920px) { #homePetBox .hp-cards { grid-template-columns: 1fr; } }

#homeRankBox .cap-utabs { display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; scrollbar-width: none; background: transparent;
  padding: 0; border-radius: 0; border-bottom: 1px solid var(--line-1); margin: 0 0 var(--s-3); }
#homeRankBox .cap-utabs::-webkit-scrollbar { display: none; }
#homeRankBox .cap-utabs .cap-tab-btn { flex: 0 0 auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 7px 0;
  font-size: 13px; font-weight: 800; color: var(--ink-5); white-space: nowrap; }
#homeRankBox .cap-utabs .cap-tab-btn.active { color: var(--danger-solid); background: transparent; box-shadow: inset 0 -2px 0 var(--danger-solid); }
#homeRankBox .cap-tab-short { display: none; }
@media (max-width: 920px) {
  #homeRankBox .cap-tab-full { display: none; }
  #homeRankBox .cap-tab-short { display: inline; }
  #homeRankBox .cap-utabs { gap: 18px; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
}

#homeTowerBox .tv-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px dashed var(--line-1); }
#homeTowerBox .tv-row:first-child, #homeTowerBox .tv-full > .tv-row:first-child { border-top: 0; }
#homeTowerBox .tv-row-ic { width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--r-md); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 17px; }
#homeTowerBox .tv-row-mid { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--ink-1); }
#homeTowerBox .tv-row-mid > small { display: block; font-size: 11.5px; color: var(--ink-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#homeTowerBox .tv-row-mid > small.tv-row-meta { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
#homeTowerBox .tv-row-btn { flex: 0 0 78px; justify-content: center; }
#homeTowerBox .tv-tarot-hint { font-size: 11.5px; color: var(--ink-5); margin-top: var(--s-2); }
#homeTowerBox .home-tarot-cols { max-width: 430px; }
#homeTowerBox .home-tarot-reroll { max-width: 430px; }
#homeTowerBox .home-tarot-col { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
#homeTowerBox .home-tarot-col > .tower-shop-inline-btn { width: 100%; min-width: 0; justify-content: center; margin: 0; }
#homeTowerBox .home-tarot-col:nth-child(2) .tower-tarot-card { animation-delay: .12s; }
#homeTowerBox .home-tarot-col:nth-child(3) .tower-tarot-card { animation-delay: .24s; }
#homeTowerBox .home-tarot-reroll > .tower-shop-inline-btn { width: 100%; justify-content: center; margin: 0; }

.cap-report-group { display: flex; align-items: center; gap: var(--s-3); }
.cap-report-links { margin-left: auto; display: inline-flex; gap: var(--s-4); }
.cap-link-btn { border: 0; background: transparent; padding: 0; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink-4); cursor: pointer; }
.cap-link-btn:hover { color: var(--ink-1); }
.cap-report-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px dashed var(--line-1); font-size: 12.5px; color: var(--ink-2); }
.cap-report-ic { width: 22px; text-align: center; flex: 0 0 auto; }
.cap-report-main { flex: 1 1 auto; min-width: 0; }
.cap-report-main small { display: block; font-size: 11px; color: var(--ink-5); }
.cap-report-btn { flex: 0 0 auto; min-width: 52px; justify-content: center; }
.cap-report-empty { display: block; padding: var(--s-2) 0; }
@media (max-width: 920px) {
  #homeStatsBox .capsule-head { flex-wrap: wrap; }
  .cap-report-links { gap: var(--s-3); }
}

#homeTowerBox .tv-row.tv-boss-strip { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: var(--s-4) 0; margin: 0; }
#homeTowerBox .tv-full > .tv-row { border-top: 1px dashed var(--line-1); }

@media (max-width: 520px) { .cap-tri.cap-tri-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#homeLandBox .capsule-sub { display: none; }
#homeLandBox .capsule-head .home-btn svg { display: none; }
#homeLandBox .capsule-head .home-btn-extra { display: none; }
#homeLandBox .capsule-head .home-btn-compact { padding-left: 12px; padding-right: 12px; }
#homeLandBox .capsule-head .home-btn-compact.is-short:not(:disabled) { color: var(--danger-text); border-color: var(--danger-line); background: var(--danger-soft); }
#homeLandBox .capsule-head .home-btn-compact.is-short:not(:disabled):hover { border-color: var(--danger-solid); }

.city-hero { position: relative; border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 12px; color: #fff;
  background: linear-gradient(150deg, #3f2a1d, #1c1917 72%); overflow: hidden; }
.city-hero.is-max { padding-bottom: 16px; }
.city-hero-icon { position: absolute; right: 14px; top: 10px; font-size: 42px; opacity: .9; line-height: 1; }
.city-hero-lv { font: 800 12px/1 ui-monospace, Menlo, monospace; opacity: .75; }
.city-hero-title { font-size: 20px; font-weight: 900; margin-top: 4px; }
.city-hero-tag { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; background: #f59e0b; color: #1c1917; vertical-align: middle; }

.city-hero-need { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
.city-need.is-ok { color: #86efac; }
.city-need.is-short { color: #fca5a5; }
.city-hero-btn.home-btn { margin-top: 12px; width: 100%; max-width: 520px; justify-content: center; background-color: #f59e0b; border-color: #f59e0b; color: #1c1917; background-image: none; }
.city-hero-btn.home-btn:hover:not(:disabled) { background-color: #fbbf24; border-color: #fbbf24; }
.city-hero-btn.home-btn:disabled { background-color: rgba(255,255,255,.16); border-color: transparent; color: rgba(255,255,255,.6); }
.city-hero-hint { font-size: 11.5px; margin-top: 6px; color: rgba(255,255,255,.75); }
.city-hero-hint b { color: #fff; }
.city-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.city-tile { min-width: 0; border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--surface-1); padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.city-tile small { font-size: 11px; color: var(--ink-5); }
.city-tile b { font-size: 16px; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.city-tile em { font-style: normal; font-size: 11px; color: var(--ink-5); }
.city-tile.is-locked { background: var(--surface-2); border-style: dashed; }
.city-tile.is-locked b { font-size: 13.5px; color: var(--ink-5); }
.city-tile-bar { margin: 2px 0; }
.city-tile-acts { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.city-tile-acts .home-btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
.city-tile-note { font-size: 11px; color: var(--ink-5); }
.city-bad { color: var(--danger-text); font-size: 11px; font-weight: 800; }
.city-mats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.city-mats-t { font-size: 11.5px; color: var(--ink-5); margin-right: 2px; }
.city-chip { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: var(--surface-2); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.city-chip.is-plus { background: var(--success-soft); color: var(--success-text); }
.city-chip.is-minus { background: var(--danger-soft); color: var(--danger-text); }
.city-rules { margin-top: 12px; border: 1px solid var(--line-1); border-radius: var(--r-md); padding: 6px 12px; background: var(--surface-2); }
.city-rules > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink-4); list-style: none; }
.city-rules > summary::-webkit-details-marker { display: none; }
.city-rules p { font-size: 12px; line-height: 1.75; color: var(--ink-4); margin: 6px 0; }
@media (max-width: 920px) { .city-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.city-strip { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 8px; margin-bottom: 10px; }
.city-strip > div, .city-strip-buy { border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--surface-1); padding: 7px 10px; text-align: center; min-width: 0; }
.city-strip small { display: block; font-size: 11px; color: var(--ink-5); white-space: nowrap; }
.city-strip b { font-size: 15px; color: var(--ink-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.city-strip-buy { font: inherit; cursor: pointer; }
.city-strip-buy:hover:not(:disabled) { border-color: var(--line-2); background: var(--surface-2); }
.city-strip-buy:disabled { opacity: .55; cursor: not-allowed; }

.city-strip-buy.is-buy { border-color: var(--primary-line); background: var(--primary-soft); color: var(--fill-primary); }
.city-strip-buy.is-buy small { color: var(--fill-primary); }
.city-strip-buy.is-buy b { color: var(--fill-primary); }
.city-strip-buy.is-buy:hover:not(:disabled) { background: var(--primary-line); border-color: var(--fill-primary); }
html.theme-dark .city-strip-buy.is-buy, html.theme-dark .city-strip-buy.is-buy small, html.theme-dark .city-strip-buy.is-buy b { color: var(--info); }

.ht-pill .ht-x { font-style: normal; font-size: 10.5px; opacity: .8; margin-left: 4px; white-space: nowrap; }
.city-revenge { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--danger-line); background: var(--danger-soft); border-radius: var(--r-md); padding: 8px 12px; margin-bottom: 8px; font-size: 13px; color: var(--ink-2); }
.city-revenge-ic { font-size: 18px; }
.city-revenge-main { flex: 1 1 auto; min-width: 0; }
.city-revenge-main small { display: block; font-size: 11px; color: var(--ink-5); }
.city-revenge .home-btn { flex: 0 0 auto; }
.city-sec { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.city-sec small { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ink-5); text-align: right; }
.city-ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.city-op { min-width: 0; border: 1.5px solid var(--line-1); border-radius: var(--r-md); padding: 8px 8px 9px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--surface-1); }
.city-op b { font-size: 13px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.city-op small { font-size: 11px; color: var(--ink-5); }
.city-op-diff { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 1px 8px; }
.city-op-diff.is-easy { background: var(--success-soft); color: var(--success-text); }
.city-op-diff.is-mid { background: var(--warn-soft); color: var(--warn-text, #92400e); }
.city-op-diff.is-hard { background: var(--danger-soft); color: var(--danger-text); }
.city-op .city-foe-tag { font-size: 11px; color: var(--ink-4); white-space: nowrap; }
.city-op .city-foe-desc { font-size: 10.5px; color: var(--ink-5); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.city-op .home-btn { width: 100%; justify-content: center; margin-top: auto; }
.city-op small { margin-bottom: 4px; }
.city-tgts { border: 1px solid var(--line-1); border-radius: var(--r-md); overflow: hidden; background: var(--surface-1); }
.city-tgts > .empty-state { margin: 0; }
.city-tgt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px dashed var(--line-1); }
.city-tgt:first-child { border-top: 0; }
.city-tgt-main { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.city-tgt-main small { display: block; font-size: 11px; color: var(--ink-5); }
.city-odds { flex: 0 0 auto; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; background: var(--surface-2); color: var(--ink-5); }
.city-odds.is-good { background: var(--success-soft); color: var(--success-text); }
.city-odds.is-even { background: var(--warn-soft); color: var(--warn-text, #92400e); }
.city-odds.is-hard { background: var(--danger-soft); color: var(--danger-text); }
.city-tgt .home-btn { flex: 0 0 auto; min-width: 64px; justify-content: center; }

@media (max-width: 520px) { .city-ops { gap: 6px; } .city-op { padding: 7px 5px 8px; } .city-op b { font-size: 12px; } .city-op .city-foe-tag, .city-op small { font-size: 10.5px; } .city-op .home-btn { padding-left: 4px; padding-right: 4px; } }

.city-logs { border: 1px solid var(--line-1); border-radius: var(--r-md); overflow: hidden; background: var(--surface-1); }
.city-log { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px 9px 16px; border-top: 1px dashed var(--line-1); font-size: 13px; color: var(--ink-2); }
.city-log:first-child { border-top: 0; }
.city-log::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--ink-6); }
.city-log.is-win::before { background: var(--success-solid); }
.city-log.is-lose::before { background: var(--danger-solid); }
.city-log-main { flex: 1 1 auto; min-width: 0; }
.city-log-main > small { display: block; font-size: 11px; color: var(--ink-5); }
.city-log-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.city-log-more { margin-top: 4px; font-size: 11px; color: var(--ink-5); }
.city-log-more > summary { cursor: pointer; list-style: none; display: inline; color: var(--ink-5); }
.city-log-more > summary::-webkit-details-marker { display: none; }
.city-log-more[open] > summary { margin-right: 6px; }
.city-log-btn { flex: 0 0 auto; align-self: center; }

.city-tile-acts { margin-top: auto; padding-top: 6px; }
.city-hero-row { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 12px; }
.city-hero-row .city-hero-need { flex: 1 1 auto; min-width: 0; }
.city-hero-btn.home-btn { margin-top: 0; width: auto; max-width: none; min-width: 112px; flex: 0 0 auto; }

.city-op-reward { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-bottom: 6px; }
.city-op-reward .city-chip { font-size: 10.5px; padding: 1px 7px; }
.city-tgt-loot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; font-size: 11px; color: var(--ink-5); }
.city-tgt-loot .city-chip { font-size: 10.5px; padding: 1px 7px; }
.city-strong { font-size: 10.5px; font-weight: 800; color: var(--warn-text, #92400e); background: var(--warn-soft); border-radius: 999px; padding: 0 6px; }
.city-sec .city-sec-btn.home-btn { margin: 0 0 0 6px; padding: 3px 10px; min-height: 0; width: auto; font-size: 11.5px; align-self: center; flex: 0 0 auto; }

.inv-board { border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--surface-1); overflow: hidden; }
.inv-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px dashed var(--line-1); font-size: 13px; }
.inv-row:first-child { border-top: 0; }
.inv-row.is-me { background: var(--surface-2); }
.inv-row b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-rank { width: 20px; text-align: center; font-weight: 800; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.inv-dmg { font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.inv-shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.inv-item { min-width: 0; border: 1.5px solid var(--line-1); border-radius: var(--r-md); background: var(--surface-1); padding: 9px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.inv-item.is-locked { opacity: .55; }
.inv-item-ic { font-size: 24px; line-height: 1.1; }
.inv-item b { font-size: 12.5px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.inv-item small { font-size: 11px; color: var(--ink-5); }
.inv-item .home-btn { width: 100%; justify-content: center; margin-top: auto; }
@media (max-width: 920px) { .inv-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.inv-dev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1.5px dashed var(--warn-text, #b45309); border-radius: var(--r-md); padding: 8px 10px; margin-bottom: 10px; background: var(--warn-soft); }
.inv-dev b { font-size: 12.5px; margin-right: 4px; }
.inv-dev .home-btn { width: auto; margin: 0; padding: 4px 10px; min-height: 0; font-size: 12px; }
.inv-dev small { flex-basis: 100%; font-size: 11px; color: var(--ink-5); }

.city-strip.terr-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 620px) { .city-strip.terr-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.terr-sites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 920px) { .terr-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.terr-site { min-width: 0; border: 1.5px solid var(--line-1); border-radius: var(--r-md); background: var(--surface-1); padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 4px; }
.terr-site.is-mine { border-color: var(--success-text); box-shadow: inset 0 0 0 1px var(--success-soft); }
.terr-site.is-other { border-color: var(--danger-soft); }
.terr-site.is-empty { border-style: dashed; }
.terr-site-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 13px; font-weight: 800; color: var(--ink-1); }
.terr-site-head small { font-size: 10.5px; font-weight: 600; color: var(--ink-5); }
.terr-site > small { font-size: 11px; color: var(--ink-5); line-height: 1.5; }
.terr-site .home-btn { width: 100%; justify-content: center; margin-top: auto; }
.terr-pets { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.terr-pet { display: inline-flex; align-items: center; gap: 1px; font-size: 15px; line-height: 1; background: var(--surface-2); border-radius: 999px; padding: 2px 5px; }
.terr-pet small { font-size: 9.5px; font-weight: 800; color: var(--ink-4); }
.terr-pick-box { width: min(560px, 94vw) !important; text-align: left; }
.terr-pick-vs { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.terr-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; max-height: 46vh; overflow: auto; margin-bottom: 8px; }
.terr-pick-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border: 1.5px solid var(--line-1); border-radius: var(--r-md); background: var(--surface-1); cursor: pointer; font: inherit; color: var(--ink-2); }
.terr-pick-tile.is-on { border-color: var(--success-text); background: var(--success-soft); }
.terr-pick-tile:disabled { opacity: .45; cursor: not-allowed; }
.terr-pick-tile b { font-size: 12px; }
.terr-pick-tile small { font-size: 10.5px; color: var(--ink-5); font-variant-numeric: tabular-nums; }
.terr-pick-tile em { font-style: normal; font-size: 10px; color: var(--ink-5); }
.terr-pick-tile em.is-on { color: var(--success-text); font-weight: 800; }
.terr-pick-ic { font-size: 22px; line-height: 1.1; }
.terr-pick-foot { font-size: 12.5px; margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.terr-lines { max-height: 40vh; overflow: auto; border: 1px solid var(--line-1); border-radius: var(--r-md); padding: 6px 8px; background: var(--surface-2); }
.terr-line { font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
.terr-line.is-a { color: var(--success-text); }
.terr-line.is-d { color: var(--danger-text); }
.terr-line.is-death { font-weight: 800; }

@keyframes terrFocus { 0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); } 50% { box-shadow: 0 0 0 4px rgba(234, 179, 8, .75); } }
.terr-site.is-focus { animation: terrFocus .8s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .terr-site.is-focus { animation: none; box-shadow: 0 0 0 3px rgba(234, 179, 8, .75); } }
.city-op .city-op-odds { font-size: 10.5px; font-weight: 800; color: var(--ink-3); margin-top: -2px; }

.sidebar .nav-item .nav-icon { color: var(--sidebar-icon, currentColor); }
.sidebar .nav-item .nav-icon svg { width: 100%; height: 100%; stroke-width: 1.6; transition: transform .15s; }
.sidebar .nav-item:hover .nav-icon svg { transform: translateY(-1px); }
.sidebar .nav-item.active .nav-icon { color: inherit; }
@media (min-width: 921px) { .sidebar .nav-item .nav-icon { width: 20px; height: 20px; } }
@media (prefers-reduced-motion: reduce) { .sidebar .nav-item .nav-icon svg { transition: none; transform: none; } }

.inv-guard { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; border: 1.5px solid var(--line-1); border-radius: var(--r-md); background: var(--surface-1); padding: 10px 12px; }

.inv-guard .home-btn { width: auto; margin: 0; min-width: 96px; flex: 0 0 auto; }

.gacha-pools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 720px) { .gacha-pools { grid-template-columns: 1fr; } }
.gacha-pool { border: 1.5px solid var(--line-1); border-radius: var(--r-md); background: var(--surface-1); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.gacha-pool.is-accessory { border-color: rgba(168, 85, 247, .45); }
.gacha-head { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-1); }
.gacha-ic { font-size: 22px; line-height: 1; }
.gacha-pool > small { font-size: 11.5px; color: var(--ink-5); line-height: 1.5; }
.gacha-contents { display: flex; flex-wrap: wrap; gap: 4px; }
.gacha-contents .city-chip { font-size: 10.5px; padding: 1px 7px; }
.gacha-odds { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.gacha-odds em { font-style: normal; color: var(--ink-5); }
.gacha-odds .q-green { color: #16a34a; } .gacha-odds .q-blue { color: #2563eb; } .gacha-odds .q-purple { color: #9333ea; } .gacha-odds .q-orange { color: #ea580c; font-weight: 600; }
.gacha-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; }
.gacha-btns .home-btn { width: 100%; margin: 0; justify-content: center; }

.acc-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acc-name { font-size: 12.5px; font-weight: 800; color: var(--ink-1); }
.acc-q { display: inline-block; font-size: 10px; font-weight: 900; border-radius: 4px; padding: 0 4px; color: #fff; background: #94a3b8; }
.acc-item small { font-size: 11px; color: var(--ink-4); }
.acc-item small.acc-affix { color: var(--ink-3); }
.q-green .acc-q { background: #16a34a; } .q-blue .acc-q { background: #2563eb; } .q-purple .acc-q { background: #9333ea; } .q-orange .acc-q { background: #ea580c; }

.acc-bag-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: 13px; }
.acc-bag-head .home-btn { width: auto; margin: 0; }
.acc-bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }

.chip-card.alien { box-shadow: inset 0 0 0 1.5px rgba(168, 85, 247, .7); }

.confirm-box.gx-box { width: 640px; max-width: 94vw; position: relative; overflow: hidden; }
.confirm-box.gx-box.is-single { width: 380px; }
.gx-box { --gx: #cbd5e1; }
.tone-green { --gx: #22c55e; } .tone-blue { --gx: #3b82f6; } .tone-purple { --gx: #a855f7; } .tone-orange { --gx: #f97316; } .tone-alien { --gx: #c084fc; } .tone-white { --gx: #cbd5e1; }
.gx-stage { position: relative; height: 190px; border-radius: var(--r-md); overflow: hidden;
  background: radial-gradient(circle at 50% 58%, #1c2548 0%, #0b1022 62%, #070a16 100%);
  transition: height .4s ease, opacity .3s ease, margin .4s ease; }
.gx-box.is-revealing .gx-stage { height: 0; opacity: 0; margin-bottom: -10px; }
.gx-stars { position: absolute; inset: -40px; opacity: .55;
  background-image: radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 90px 80px, #cbd5ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 150px 40px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 60px 140px, #a5b4fc 50%, transparent 51%);
  background-size: 180px 170px; animation: gxDrift 14s linear infinite; }
@keyframes gxDrift { to { transform: translate(-180px, 40px); } }
.gx-stage > span:not(.gx-stars) { position: absolute; left: 50%; top: 50%; }
.gx-crate { font-size: 58px; line-height: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 0 14px var(--gx)); }
.gx-box.is-charging .gx-crate { animation: gxShake .45s ease-in-out infinite; }
.gx-box.is-open .gx-crate { animation: gxBurst .4s ease-out forwards; }
@keyframes gxShake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0) scale(1); }
  25% { transform: translate(-50%, -52%) rotate(-9deg) scale(1.05); }
  75% { transform: translate(-50%, -48%) rotate(8deg) scale(1.08); }
}
@keyframes gxBurst { 0% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } }
.gx-glow { width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, var(--gx) 0%, color-mix(in srgb, var(--gx) 35%, transparent) 38%, transparent 68%); }
.gx-box.is-charging .gx-glow { animation: gxGlow 1.3s ease-in forwards; }
@keyframes gxGlow { 0% { transform: scale(.4); opacity: .1; } 100% { transform: scale(1.35); opacity: .95; } }
.gx-flash { width: 100%; height: 100%; left: 0 !important; top: 0 !important; background: #fff; opacity: 0; }
.gx-box.is-open .gx-flash { animation: gxFlash .45s ease-out forwards; }
@keyframes gxFlash { 0% { opacity: .75; } 100% { opacity: 0; } }
.gx-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid var(--gx); opacity: 0; }
.gx-box.is-open .gx-ring { animation: gxRing .65s cubic-bezier(.15,.75,.35,1) forwards; }
.gx-box.is-open .gx-ring2 { animation-delay: .12s; border-width: 2px; }
@keyframes gxRing { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(6); opacity: 0; } }
.gx-shard { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; background: var(--gx); box-shadow: 0 0 8px var(--gx); opacity: 0; }
.gx-box.is-open .gx-shard { animation: gxShard .6s cubic-bezier(.2,.7,.3,1) var(--d) forwards; }
@keyframes gxShard { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-120px) scale(.3); opacity: 0; } }

@keyframes gxDeal { 0% { transform: translateY(14px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes gxFlip { 0% { transform: rotateY(0); } 100% { transform: rotateY(180deg); } }

@keyframes gxHalo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gx) 80%, transparent); } 40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gx) 45%, transparent), 0 0 22px var(--gx); } 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--gx) 45%, transparent); } }

@keyframes gxShine { 0% { transform: translateX(-120%); opacity: 1; } 100% { transform: translateX(120%); opacity: 1; } }
.gx-skip { border: 1px solid var(--line-1); background: var(--surface-1); color: var(--ink-3); border-radius: var(--r-md); padding: 8px 16px; font-weight: 700; cursor: pointer; }
.gx-box.is-done .gx-skip { display: none; }
.gx-box:not(.is-done) .confirm-ok { display: none; }
.gx-box.is-skipped *, .gx-box.is-skipped *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }
.gx-box.is-skipped .gx-stars { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .gx-stars { animation: none; } }

.terr-site.is-wreck { border-color: rgba(168, 85, 247, .65); background: linear-gradient(160deg, rgba(168, 85, 247, .10), transparent 65%), var(--surface-1); }
.terr-site.is-wreck.is-empty { border-style: dashed; }
.terr-site.is-wreck .terr-site-head span { color: #7e22ce; }
html.theme-dark .terr-site.is-wreck .terr-site-head span { color: #c084fc; }
.terr-site > small.terr-wreck-line { color: var(--ink-4); }

.vub-short { display: none; }
#versionUpdateBar { width: max-content; }   
@media (max-width: 560px) {
  #versionUpdateBar { top: 0; bottom: auto; left: 0; right: 0; transform: none; width: auto; max-width: none;
    border-radius: 0; justify-content: center; white-space: nowrap; gap: 8px; font-size: 12px;
    padding: calc(5px + env(safe-area-inset-top, 0px)) 10px 5px; box-shadow: 0 2px 10px rgba(15,23,42,.25); }
  #versionUpdateBar .vub-long { display: none; }
  #versionUpdateBar .vub-short { display: inline; }
  #versionUpdateBtn { padding: 3px 12px; font-size: 12px; border-radius: 6px; }
  #versionUpdateLater { padding: 2px 6px; }
  html.has-version-bar body { padding-top: 34px; }
}

.nsg-count { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.guide-sheet-wrap { position: fixed; inset: 0; z-index: 3500; }
.guide-sheet-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); opacity: 0; transition: opacity .2s; }
.guide-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; display: flex; flex-direction: column;
  background: var(--surface-1, #fff); color: var(--ink-8, #1f2937); border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px rgba(15,23,42,.25); transform: translateY(100%); transition: transform .22s ease;
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.guide-sheet-wrap.is-open .guide-sheet-backdrop { opacity: 1; }
.guide-sheet-wrap.is-open .guide-sheet { transform: translateY(0); }
.guide-sheet-grab { display: flex; justify-content: center; padding: 8px 0 2px; }
.guide-sheet-grab i { width: 38px; height: 4px; border-radius: 4px; background: var(--line-2, #d6d3d1); }
.guide-sheet-head { display: flex; align-items: baseline; gap: 8px; padding: 2px 16px 8px; }
.guide-sheet-head b { font-size: 16px; }
.guide-sheet-head span { font-size: 12px; color: var(--ink-5, #78716c); }
.guide-sheet-x { margin-left: auto; border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--ink-5, #78716c); cursor: pointer; padding: 0 4px; }
.guide-sheet-body { overflow-y: auto; padding: 0 12px 14px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.guide-grp { font-size: 12px; color: var(--ink-5, #78716c); margin: 6px 4px 0; }
.guide-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface-1, #fff); border: 1px solid var(--line-1, #e7e5e4); border-radius: 12px; padding: 10px 12px; }
.guide-row:hover { border-color: var(--line-3, #a8a29e); }
.guide-row.is-claim { background: #fff7e6; border-color: #f5c77e; }
html.theme-dark .guide-row.is-claim { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.45); }
.guide-row-ic { width: 24px; text-align: center; font-size: 17px; flex: none; }
.guide-row-t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.guide-row-t small { display: block; font-size: 12px; color: var(--ink-5, #78716c); margin-top: 2px; }
.guide-row-go { flex: none; font-size: 13px; font-weight: 700; color: var(--danger-solid, #dc2626); white-space: nowrap; }
.guide-empty { text-align: center; padding: 24px 0; color: var(--ink-5, #78716c); }
@media (min-width: 921px) {
  .guide-sheet-backdrop { background: transparent; }
  .guide-sheet { left: auto; right: 20px; bottom: 20px; width: 360px; max-height: 70vh; border-radius: 14px;
    transform: translateY(12px); opacity: 0; transition: transform .18s ease, opacity .18s ease; }
  .guide-sheet-wrap.is-open .guide-sheet { opacity: 1; }
  .guide-sheet-grab { display: none; }
  .guide-sheet-head { padding-top: 12px; }
}

.guide-ring-box { position: fixed; z-index: 3450; pointer-events: none; border: 3px solid #fbbf24; border-radius: 12px;
  box-shadow: 0 0 0 0 rgba(251,191,36,.55); }
.guide-ring-box.is-pulse { animation: guideRingPulse 0.9s ease-in-out 3; }
@keyframes guideRingPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,.6); } 50% { box-shadow: 0 0 0 9px rgba(251,191,36,0); } }
@media (prefers-reduced-motion: reduce) { .guide-ring-box.is-pulse { animation: none; } }

.pt-eq[data-open-equip] { cursor: pointer; }
.pt-eq.on.q-white { border-color: rgba(203,213,225,.7); background: rgba(203,213,225,.14); } .pt-eq.on.q-white > i { background: #94a3b8; }
.pt-eq.on.q-green { border-color: rgba(74,222,128,.7); background: rgba(22,163,74,.2); } .pt-eq.on.q-green > i { background: #16a34a; }
.pt-eq.on.q-blue { border-color: rgba(96,165,250,.75); background: rgba(37,99,235,.22); } .pt-eq.on.q-blue > i { background: #2563eb; }
.pt-eq.on.q-purple { border-color: rgba(192,132,252,.8); background: rgba(147,51,234,.24); } .pt-eq.on.q-purple > i { background: #9333ea; }
.pt-eq.on.q-orange { border-color: rgba(251,146,60,.9); background: rgba(234,88,12,.26); box-shadow: 0 0 8px rgba(234,88,12,.45); } .pt-eq.on.q-orange > i { background: #ea580c; }
.gear-box { width: 660px; max-height: 92vh; overflow-y: auto; }
.chip-card-grid.gear-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gear-card { cursor: default; }
.gear-slots .gear-card { cursor: pointer; }
.gear-card.sel { outline: 2.5px solid #3b82f6; outline-offset: 2px; }
.gear-card.q-white .cc-bg { background: linear-gradient(160deg, #4b5563 0%, #151820 100%); }
.gear-card.q-green .cc-bg { background: linear-gradient(160deg, #166534 0%, #0a1a10 100%); }
.gear-card.q-blue .cc-bg { background: linear-gradient(160deg, #1e40af 0%, #0a1230 100%); }
.gear-card.q-purple .cc-bg { background: linear-gradient(160deg, #6b21a8 0%, #1a0b2a 100%); }
.gear-card.q-orange .cc-bg { background: linear-gradient(160deg, #b45309 0%, #2a1204 100%); }
.gear-card.q-purple { border-color: rgba(192,132,252,.65); } .gear-card.q-orange { border-color: rgba(251,146,60,.8); box-shadow: 0 0 14px rgba(234,88,12,.35); }
.gear-card .cc-eff { color: #fde68a; }

.gear-card .gc-diff { font-size: 10.5px; font-weight: 800; margin-top: 3px; color: rgba(255,255,255,.7); }
.gear-card .gc-diff.up { color: #4ade80; } .gear-card .gc-diff.down { color: #f87171; }
.gear-card .gc-owner { font-size: 10px; margin-top: 3px; color: #fbbf24; font-weight: 700; }
.gear-card.worn-elsewhere { opacity: .92; }
.gear-card.worn-elsewhere .cc-bg { filter: saturate(.6) brightness(.85); }
.gear-bag-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.gear-bag-grid .gear-card { aspect-ratio: auto; min-height: 150px; }
.gear-card .cc-act[disabled] { opacity: .4; cursor: not-allowed; }
.gear-tabs { margin: 0 0 10px; }
.gear-tabs .pg-subtab-btn i { font-style: normal; font-weight: 500; opacity: .6; margin-left: 3px; }
.gear-bag { min-height: 120px; }
.gear-others-head { font-size: 12px; font-weight: 800; color: var(--ink-4); margin: 12px 0 6px; padding-top: 8px; border-top: 1px dashed var(--line-1); }
.gear-close { width: 100%; border: 1.5px solid var(--line-1); background: var(--surface-1); color: var(--ink-3); border-radius: var(--r-md); padding: 10px; font-weight: 800; font-size: 14px; cursor: pointer; }

@media (max-width: 620px) { .chip-card-grid.gear-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .gear-bag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.alloy-amt { display: inline-flex; align-items: center; gap: 3px; vertical-align: -2px; white-space: nowrap; }
.alloy-amt .pix-icon { width: 1.15em; height: 1.15em; flex: none; }
.alloy-amt b { font-weight: 800; font-variant-numeric: tabular-nums; }
.alloy-amt.is-tile .pix-icon { width: 1.05em; height: 1.05em; }
.alloy-wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--r-md);
  border: 1.5px solid rgba(139, 92, 246, .35); background: linear-gradient(100deg, rgba(139, 92, 246, .10), transparent 70%), var(--surface-1); }
.alloy-wallet-amt { display: flex; align-items: center; gap: 8px; }
.alloy-wallet-amt .pix-icon { width: 34px; height: 34px; }
.alloy-wallet-amt b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink-1); }
.alloy-wallet-amt small { font-size: 12px; color: var(--ink-4); font-weight: 700; }
.alloy-wallet-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.alloy-wallet-src em { font-style: normal; font-size: 11.5px; color: var(--ink-5); }
.alloy-wallet-src .city-chip { cursor: pointer; border: 1px solid var(--line-1); }
.gacha-btns .alloy-amt .pix-icon { width: 1.1em; height: 1.1em; }
.city-link { color: #7c3aed; text-decoration: none; font-weight: 700; }

.gc-plus { display: inline-block; font: 900 10px/1.5 var(--font-mono, monospace); color: #fff; background: #ea580c; border-radius: 4px; padding: 0 4px; vertical-align: 1px; }
.gc-plus.big { font-size: 13px; padding: 0 6px; }
.gc-enh { position: relative; height: 12px; margin-top: 4px; border-radius: 999px; background: rgba(0,0,0,.35); overflow: hidden; }
.gc-enh i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #f59e0b, #fb923c); }
.gc-enh span { position: relative; display: block; font-size: 8.5px; line-height: 12px; color: #fff; font-weight: 800; text-shadow: 0 1px 1px rgba(0,0,0,.6); }
.gc-acts { display: flex; gap: 4px; position: relative; z-index: 3; }
.gc-acts .cc-act { flex: 1; }
.chip-card .cc-act.enh { background: rgba(245,158,11,.4); border-color: rgba(251,191,36,.7); }
.gear-bag-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }

.gear-enh-box { width: 640px; max-height: 92vh; overflow-y: auto; }
.enh-head { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 14px; align-items: start; }
@media (max-width: 560px) { .enh-head { grid-template-columns: 1fr; } }
.enh-card .gear-card { aspect-ratio: auto; min-height: 170px; }
.enh-title { font-size: 17px; font-weight: 900; color: var(--ink-1); }
.enh-arrow { color: #16a34a; font-weight: 900; }
.enh-sub { font-size: 12px; color: var(--ink-4); margin-bottom: 8px; }
.enh-lbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.enh-lbl b { font-variant-numeric: tabular-nums; color: var(--ink-1); }
.enh-lbl em { font-style: normal; color: #16a34a; }
.enh-bar { position: relative; height: 16px; border-radius: 999px; background: var(--surface-2, #eef0f4); overflow: visible; margin-top: 4px; border: 1px solid var(--line-1); }
.enh-bar i { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.enh-bar i.now { left: 0; background: linear-gradient(90deg, #f59e0b, #ea580c); }
.enh-bar i.prev { background: repeating-linear-gradient(45deg, rgba(22,163,74,.75) 0 6px, rgba(74,222,128,.75) 6px 12px); border-radius: 0 999px 999px 0; }
.enh-bar.total { height: 14px; margin-bottom: 16px; }
.enh-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(100,116,139,.55); }
.enh-tick.done { background: rgba(255,255,255,.85); }
.enh-tick em { position: absolute; top: 17px; left: -8px; font-style: normal; font-size: 9px; color: var(--ink-5); white-space: nowrap; }
.enh-note { font-size: 11.5px; color: var(--ink-5); margin-top: 2px; }
.enh-pick-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.enh-quick { border: 1px solid var(--line-1); background: var(--surface-1); border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); cursor: pointer; margin-left: 4px; }
.enh-fodder { display: flex; flex-wrap: wrap; gap: 6px; max-height: 30vh; overflow: auto; padding: 2px; }
.enh-fod { position: relative; border: 1.5px solid var(--line-1); background: var(--surface-1); border-radius: 10px; padding: 4px 26px 4px 8px; font-size: 12px; color: var(--ink-2); cursor: pointer; text-align: left; }
.enh-fod b { color: #16a34a; margin-left: 4px; font-variant-numeric: tabular-nums; }
.enh-fod.on { border-color: #16a34a; background: rgba(22,163,74,.1); }
.enh-fod.is-orange { border-color: rgba(234,88,12,.5); }
.enh-fod i { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-style: normal; color: #16a34a; font-weight: 900; }
.enh-preview { margin-top: 10px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2, #f3f4f7); font-size: 13px; color: var(--ink-4); }
.enh-preview.on { background: rgba(22,163,74,.08); color: var(--ink-2); border: 1px solid rgba(22,163,74,.35); }
.gear-synth-box { width: 600px; max-height: 92vh; overflow-y: auto; }
.syn-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.syn-row { display: grid; grid-template-columns: 70px repeat(3, minmax(0,1fr)); gap: 6px; align-items: stretch; }
@media (max-width: 560px) { .syn-row { grid-template-columns: 1fr 1fr; } .syn-slot { grid-column: 1 / -1; } }
.syn-slot { font-weight: 900; font-size: 13px; display: flex; align-items: center; }
.syn-cell { border: 1.5px solid var(--line-1); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.syn-cell.ready { border-color: rgba(22,163,74,.55); background: rgba(22,163,74,.05); }
.syn-cell .home-btn { width: 100%; justify-content: center; }
.acc-q.q-white-bg { background: #94a3b8; } .acc-q.q-green-bg { background: #16a34a; } .acc-q.q-blue-bg { background: #2563eb; } .acc-q.q-purple-bg { background: #9333ea; }

.starpod { border: 2px solid rgba(234, 88, 12, .45); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 12px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(234,88,12,.12), transparent 55%), radial-gradient(120% 140% at 0% 100%, rgba(99,102,241,.12), transparent 60%), var(--surface-1); }
.starpod-head { display: flex; align-items: center; gap: 10px; }
.starpod-head b { font-size: 16px; color: var(--ink-1); display: block; }
.starpod-head small { font-size: 12px; color: var(--ink-4); line-height: 1.5; display: block; }
.starpod-ic { font-size: 34px; line-height: 1; }
.starpod-bal { margin-left: auto; text-align: right; flex: none; }
.starpod-bal b { font-size: 18px; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {  }

.starpod-ten small { font-size: 11px; opacity: .85; margin-left: 4px; }
.gacha-btns small { font-size: 11px; opacity: .8; }

.gx-box.is-starpod .gx-stage { background: radial-gradient(circle at 50% 110%, #3b1d0f 0%, #140a24 45%, #070a16 100%); }
.gx-box.is-starpod.is-charging .gx-crate { animation: gxDrop .55s cubic-bezier(.3,1.4,.5,1) both, gxShake .45s ease-in-out .55s infinite; }
@keyframes gxDrop { 0% { transform: translate(-50%, -260%) scale(.7); opacity: 0; } 70% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

.pgm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pgm-views { display: inline-flex; gap: 4px; background: var(--surface-2, #f1f3f7); padding: 3px; border-radius: 999px; }
.pgm-view { border: 0; background: transparent; padding: 5px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--ink-3); cursor: pointer; }
.pgm-view.on { background: var(--surface-1); color: var(--ink-1); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.pgm-bal { font-size: 12.5px; color: var(--ink-4); }
.pgm-bal b { color: var(--ink-1); font-variant-numeric: tabular-nums; }
.pgm-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pgm-filters > div { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.pgm-sort { margin-left: auto; display: inline-flex; gap: 5px; }
.pgm-chip { border: 1px solid var(--line-1); background: var(--surface-1); border-radius: 999px; padding: 2px 11px; font-size: 12px; font-weight: 700; color: var(--ink-3); cursor: pointer; }
.pgm-chip.on { background: #1f2533; color: #fff; border-color: #1f2533; }
.gear-card .pgm-price { font-size: 13px; font-weight: 900; color: #fde68a; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pgm-grid .gear-card { min-height: 180px; }
.pgm-sellbar { font-size: 12.5px; color: var(--ink-3); padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2, #f3f4f7); }
.pgm-warn { margin-top: 8px; font-size: 13px; color: #b45309; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35); border-radius: var(--r-md); padding: 8px 12px; }
.pgm-list-box { width: 560px; }
.pgm-price-input { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pgm-price-input input { font-size: 18px; font-weight: 800; padding: 8px 10px; border: 1.5px solid var(--line-1); border-radius: var(--r-md); background: var(--surface-1); color: var(--ink-1); font-variant-numeric: tabular-nums; }
.pgm-quick { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.pgm-quick .enh-quick { margin-left: 0; }
.pgm-receive { font-size: 13px; color: var(--ink-3); margin: 6px 0; }
.pgm-receive b { color: #16a34a; }

.mc-chg { display:inline-flex; align-items:center; border-radius:99px; padding:0 7px; font-size:12px; font-weight:700;
  line-height:18px; vertical-align:1px; white-space:nowrap; font-variant-numeric:tabular-nums; background:#f8fafc; color:#94a3b8; }
.mc-chg.up { color:#dc2626; background:#fef2f2; }
.mc-chg.dn { color:#16a34a; background:#f0fdf4; }
.mc-chg.flat { font-weight:500; }
html.theme-dark .mc-chg { background:rgba(148,163,184,.12); }
html.theme-dark .mc-chg.up { background:rgba(220,38,38,.16); color:#f87171; }
html.theme-dark .mc-chg.dn { background:rgba(22,163,74,.16); color:#4ade80; }
.mc-bang { position:relative; display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%;
  border:1px solid #cbd5e1; color:#94a3b8; font:700 10px/1 system-ui, sans-serif; cursor:help; vertical-align:1px; outline:none; }

.terr-claim-cell { display: grid; gap: 1px; align-content: center; }
.city-strip-buy.terr-claim-cell:disabled { opacity: 1; }
.city-strip-buy.terr-claim-cell:disabled > small, .city-strip-buy.terr-claim-cell:disabled > b { opacity: .55; }
.terr-alloy-bar { display: block; height: 4px; margin: 3px 8px 0; border-radius: 2px; background: var(--line-1); overflow: hidden; }
.terr-alloy-bar i { display: block; height: 100%; background: #7c6be0; border-radius: 2px; }
.terr-alloy-bar.is-full i { background: #d97706; }
.terr-alloy-mini { font-size: 10.5px; font-weight: 600; color: var(--ink-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.terr-alloy-mini.is-full { color: #b45309; }
.terr-cap-note { margin: 8px 0 0; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; background: #fff4e0; color: #b45309; border: 1px solid #f5d49a; }
html.theme-dark .terr-cap-note { background: rgba(245,165,36,.12); color: #f5a524; border-color: rgba(245,165,36,.35); }

.terr-bang { margin-left: 4px; }
.terr-bang:hover::after, .terr-bang:focus::after { white-space: pre-line !important; width: 270px; left: 0 !important; transform: none !important; text-align: left; font-weight: 500; }
.mc-bang:hover::after, .mc-bang:focus::after { content:attr(data-tip); position:absolute; left:50%; bottom:135%; transform:translateX(-50%);
  white-space:nowrap; background:#1e2536; color:#fff; font:500 12px/1.4 -apple-system, "PingFang SC", sans-serif;
  padding:6px 9px; border-radius:7px; box-shadow:0 6px 16px rgba(0,0,0,.2); z-index:30; }

.ibx { display: flex; flex-direction: column; gap: 2px; }
.pg-tag.ibx-direct { background: #ffedd5; color: #9a3412; }
.ibx-open { display: flex; gap: 8px; margin: 4px 0 6px; }
.ibx-btn { flex: 1; padding: 9px 8px; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid #fdba74; background: #fff7ed; color: #9a3412; }
.ibx-btn.primary { border: 0; background: linear-gradient(90deg, #f59e0b, #f97316); color: #fff; }
.ibx-btn:disabled { opacity: .45; cursor: not-allowed; }
.ibx-title { font-size: 12px; font-weight: 700; color: var(--ink-4); margin: 10px 0 5px; }
.ibx-mats { display: flex; gap: 6px; margin-bottom: 6px; }
.ibx-mats .pix-icon { width: 22px; height: 22px; }
.ibx-loot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ibx-loot.one { grid-template-columns: 1fr; }
.ibx-loot > div { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line-1); border-radius: 10px; padding: 7px 9px; min-width: 0; }
.ibx-loot > div b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-1); }
.ibx-loot > div em { font-style: normal; font-size: 11px; color: var(--ink-5); }
.ibx-loot > div small { margin-left: auto; font-size: 11.5px; color: var(--ink-5); font-variant-numeric: tabular-nums; }
.ibx-loot > div.is-top { border-color: #fcd34d; background: #fffbeb; }
html.theme-dark .ibx-loot > div.is-top { background: rgba(245,158,11,.1); }
.ibx-ic { display: inline-flex; align-items: center; font-size: 15px; }
.ibx-ic .pix-icon { width: 20px; height: 20px; }
.ibx-key { display: flex; align-items: center; gap: 8px; border: 1.5px dashed var(--line-1); border-radius: 10px; padding: 8px 10px; margin: 4px 0; font-size: 13px; }
.ibx-key.ok { border-style: solid; border-color: #86efac; background: rgba(22,163,74,.06); }
.ibx-key small { margin-left: auto; font-size: 11.5px; color: var(--ink-5); }
.ibx-from { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--line-1); background: var(--surface-1); border-radius: 10px; padding: 8px 10px; cursor: pointer; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.ibx-from small { color: var(--ink-5); font-size: 11.5px; }
.ibx-from em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: #2563eb; }
.ibx-note { font-size: 11px; color: var(--ink-5); text-align: center; margin-top: 10px; }

.sp-btn { font: inherit; font-size: 13px; font-weight: 500; flex: 1; min-width: 0; min-height: 38px; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 11px; border-radius: 9px; white-space: nowrap; border: 0; cursor: pointer; position: relative; margin: 0;
  background: var(--surface-1, #fff); color: var(--ink-1, #2a2f3b); box-shadow: inset 0 0 0 1px var(--sp-line, #e2e5ec); transition: background-color .15s, box-shadow .15s; }
.sp-btn:hover:not(:disabled) { background: var(--sp-hover, #f7f8fb); }
.sp-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.sp-btn > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sp-btn .pr { flex: none; padding-left: 10px; border-left: 1px solid var(--sp-line, #e6e8ee); display: inline-flex; align-items: center; gap: 4px; color: var(--sp-ink, #6b7182); font-variant-numeric: tabular-nums; }
.sp-btn .pr .alloy-amt, .sp-btn .pr .spc-amt { display: inline-flex; align-items: center; gap: 3px; }
.sp-btn .pr b { font-weight: 500; color: inherit; }
.sp-btn .pr .pix-icon, .sp-btn .pr .currency-icon-img { width: 14px; height: 14px; }
.sp-btn.is-center { justify-content: center; }
.sp-btn.tone-amber { --sp-line: #efd9b4; --sp-ink: #a15c10; --sp-hover: #fffaf1; }
.sp-btn.tone-amber.is-ten { background: #fdf5e7; --sp-line: #e6c48a; color: #6f3d08; }
.sp-btn.tone-violet { --sp-line: #e1d7f7; --sp-ink: #6a3fc4; --sp-hover: #fbf9ff; }
.sp-btn.tone-violet.is-ten { background: #f6f2fe; --sp-line: #c9b6f1; color: #44238f; }
.sp-btn.tone-gold { --sp-line: #e3d3b0; --sp-ink: #8a6a2c; --sp-hover: #fffaf1; color: #4a3a1c; }
.sp-btn.tone-slate { --sp-line: #dcdff0; --sp-hover: #f7f8fd; color: #3f4596; }
.sp-btn.is-free .pr { color: #4d7c2a; }
.sp-btn:disabled { cursor: not-allowed; background: #f7f8fa; box-shadow: inset 0 0 0 1px #eceef2; color: #b0b5c1; }
.sp-btn:disabled .pr { color: #b0b5c1; border-color: #eceef2; }
.sp-btn:disabled .pix-icon, .sp-btn:disabled .currency-icon-img { opacity: .5; filter: grayscale(1); }
.sp-btn.is-night { background: #1f1d33; color: #efe2bf; --sp-line: #433d58; --sp-ink: #e6cf93; box-shadow: inset 0 0 0 1px #6f6243, 0 6px 16px -10px #1f1d33; overflow: hidden; }
.sp-btn.is-night:hover:not(:disabled) { background: #27243f; }
.sp-btn.is-night em { font-style: normal; font-size: 11px; color: #c9b27a; margin-left: 6px; }
.sp-btn.is-night::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(1px 1px at 9% 30%, rgba(255,255,255,.55) 60%, transparent 61%), radial-gradient(1px 1px at 34% 78%, rgba(255,255,255,.4) 60%, transparent 61%),
  radial-gradient(1.2px 1.2px at 58% 22%, #f5dfa0 60%, transparent 61%), radial-gradient(1px 1px at 83% 70%, rgba(201,193,245,.7) 60%, transparent 61%); }
.sp-btn.is-night:disabled { background: #45435a; color: #a7a3b6; box-shadow: inset 0 0 0 1px #56526a; }
.sp-btn.is-night:disabled .pr { color: #a7a3b6; border-color: #56526a; }
.sp-btn.is-night:disabled em { color: #a7a3b6; }
html.theme-dark .sp-btn { background: rgba(255,255,255,.04); color: #e5e7eb; }
html.theme-dark .sp-btn.tone-amber { --sp-line: rgba(245,158,11,.38); --sp-ink: #fbbf24; --sp-hover: rgba(245,158,11,.1); }
html.theme-dark .sp-btn.tone-amber.is-ten { background: rgba(245,158,11,.14); color: #fde68a; }
html.theme-dark .sp-btn.tone-violet { --sp-line: rgba(167,139,250,.4); --sp-ink: #c4b5fd; --sp-hover: rgba(167,139,250,.1); }
html.theme-dark .sp-btn.tone-violet.is-ten { background: rgba(167,139,250,.16); color: #ddd6fe; }
html.theme-dark .sp-btn.tone-gold { --sp-line: rgba(217,184,120,.4); --sp-ink: #e6cf93; color: #efe2bf; --sp-hover: rgba(217,184,120,.1); }
html.theme-dark .sp-btn.tone-slate { --sp-line: rgba(165,180,252,.35); color: #c7d2fe; --sp-hover: rgba(165,180,252,.1); }
html.theme-dark .sp-btn.is-night { background: #2a2745; }
html.theme-dark .sp-btn:disabled:not(.is-night) { background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: #6b7280; }
html.theme-dark .sp-btn:disabled:not(.is-night) .pr { color: #6b7280; border-color: rgba(255,255,255,.08); }
.gacha-btns .sp-btn { width: 100%; }
.inv-item .sp-btn { width: 100%; flex: none; margin-top: auto; min-height: 32px; padding: 6px 10px; }

.starpod.sp-v2 { border: 1px solid #ebe3d3; background: var(--surface-1, #fff); padding: 12px 14px; }
html.theme-dark .starpod.sp-v2 { border-color: rgba(217,184,120,.28); }
.starpod.sp-v2 .starpod-head b { font-weight: 600; }
.starpod.sp-v2 .starpod-bal small { font-size: 11px; color: var(--ink-5, #8a90a0); display: block; }
.starpod.sp-v2 .starpod-bal b { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.starpod.sp-v2 .starpod-bal b .currency-icon-img { width: 18px; height: 18px; }
.sp-stage { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; margin-top: 10px; align-items: stretch; }
.sp-show { position: relative; border-radius: 12px; overflow: hidden; min-height: 150px; color: #fde9c4;
  background: radial-gradient(80% 60% at 50% 40%, rgba(251,146,60,.45), transparent 70%), linear-gradient(160deg, #9a4608 0%, #2a1204 100%);
  box-shadow: inset 0 0 0 1px rgba(251,191,36,.6); --cycle: calc(var(--n, 4) * 2.5s); }
.sp-show-top { position: absolute; top: 6px; left: 8px; right: 8px; display: flex; justify-content: space-between; font-size: 10.5px; z-index: 2; }
.sp-show-top span { color: #fdba74; }
.sp-show-top em { font-style: normal; color: #fde9c4; font-variant-numeric: tabular-nums; }
.sp-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 6px 22px;
  opacity: 0; animation: spSlide var(--cycle) infinite; animation-delay: calc(var(--i) * 2.5s); }
@keyframes spSlide { 0% { opacity: 0; transform: scale(.94); } 4%, 23% { opacity: 1; transform: scale(1); } 27%, 100% { opacity: 0; transform: scale(1.03); } }
.sp-slide .sp-art { width: 72px; height: 72px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.sp-slide .sp-art .gear-pix { width: 100%; height: 100%; display: block; }
.sp-slide b { font-size: 12.5px; font-weight: 500; margin-top: 4px; color: #fde9c4; }
.sp-slide small { font-size: 10.5px; color: #e8b77a; }
.sp-dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; z-index: 2; }
.sp-dots i { width: 4px; height: 4px; border-radius: 2px; background: rgba(253,233,196,.35); animation: spDot var(--cycle) infinite; animation-delay: calc(var(--i) * 2.5s); }
@keyframes spDot { 0%, 25% { background: #fdba74; width: 10px; } 26%, 100% { background: rgba(253,233,196,.35); width: 4px; } }
.sp-show::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, transparent 35%, rgba(255,236,200,.25) 48%, transparent 60%); transform: translateX(-120%); animation: spSheen 5s ease-in-out infinite; }
@keyframes spSheen { 0%, 62% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }
.sp-rail { position: relative; overflow: hidden; display: flex; align-items: center; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent); }
.sp-track { display: flex; gap: 8px; width: max-content; animation: spMarq 22s linear infinite; }
.sp-rail:hover .sp-track { animation-play-state: paused; }
@keyframes spMarq { to { transform: translateX(calc(-50% - 4px)); } }
.sp-tile { flex: none; width: 98px; border: 1px solid var(--line-1, #eceef3); border-radius: 10px; background: var(--surface-1, #fff); padding: 14px 4px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.sp-tile-ic { height: 34px; display: grid; place-items: center; font-size: 24px; line-height: 1; }
.sp-tile-ic .pix-icon { width: 32px; height: 32px; }
.sp-tile b { font-size: 11px; font-weight: 500; color: var(--ink-2, #4a5060); white-space: nowrap; }
.sp-tile em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--ink-5, #8a90a0); font-variant-numeric: tabular-nums; }
.sp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.starpod.sp-v2 .starpod-head > div:not(.starpod-bal) { flex: 1 1 0; min-width: 0; }
@media (max-width: 720px) {
  .sp-stage { grid-template-columns: 108px minmax(0, 1fr); }
  .starpod.sp-v2 .starpod-head { flex-wrap: wrap; row-gap: 6px; }
  .starpod.sp-v2 .starpod-bal { flex: 1 0 100%; margin-left: 0; padding-left: 44px; text-align: left; display: flex; justify-content: flex-start; align-items: center; gap: 6px; }
  .starpod.sp-v2 .starpod-bal small { display: inline; }
  .sp-show { min-height: 132px; }
  .sp-slide .sp-art { width: 58px; height: 58px; }
  .sp-tile { width: 84px; padding: 10px 3px 8px; }
  .sp-btns { grid-template-columns: 1fr; }
}

.confirm-box.spc-box { width: min(360px, 94vw); text-align: left; padding: 18px 18px 16px; }
.spc-head { display: flex; gap: 12px; align-items: center; }
.spc-box.is-night { overflow: hidden; }
.spc-box.is-night .spc-head { margin: -18px -18px 0; padding: 16px 18px; color: #efe2bf; position: relative;
  background: radial-gradient(120% 140% at 100% 0%, rgba(154,70,8,.55), transparent 60%), linear-gradient(135deg, #1f1d33 0%, #2b2140 100%); }
.spc-box.is-night .spc-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(1px 1px at 48% 24%, rgba(255,255,255,.6) 60%, transparent 61%), radial-gradient(1px 1px at 72% 70%, rgba(255,255,255,.45) 60%, transparent 61%),
  radial-gradient(1.3px 1.3px at 86% 30%, #f5dfa0 60%, transparent 61%), radial-gradient(1px 1px at 62% 48%, rgba(201,193,245,.7) 60%, transparent 61%); }
.spc-box.is-night .spc-art { width: 64px; height: 64px; }
.spc-box.is-night .spc-slide .gear-pix { width: 44px; height: 44px; }
.spc-box.is-night .spc-tt b { color: #efe2bf; }
.spc-box.is-night .spc-tt small { color: #c9b27a; }
.spc-box.is-night .spc-rows { border-top: 0; margin-top: 6px; }
.spc-art { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; font-size: 28px; line-height: 1; flex: none; position: relative; overflow: hidden; }
.spc-art.tone-amber { background: #fdf3e1; box-shadow: inset 0 0 0 1px #efd9b4; }
.spc-art.tone-violet { background: #f3effd; box-shadow: inset 0 0 0 1px #e1d7f7; }
.spc-art.is-show { background: radial-gradient(80% 60% at 50% 45%, rgba(251,146,60,.5), transparent 72%), linear-gradient(160deg, #9a4608 0%, #2a1204 100%); box-shadow: inset 0 0 0 1px rgba(251,191,36,.6); }
.spc-art.is-show.q-purple { background: radial-gradient(80% 60% at 50% 45%, rgba(168,85,247,.45), transparent 72%), linear-gradient(160deg, #5b21b6 0%, #1a0b2a 100%); box-shadow: inset 0 0 0 1px rgba(196,181,253,.55); }
.spc-slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; animation: spSlide 6s infinite; animation-delay: calc(var(--i) * 1.5s); }
.spc-slide .gear-pix { width: 38px; height: 38px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.spc-tt { min-width: 0; }
.spc-tt b { display: block; font-size: 17px; font-weight: 600; color: var(--ink-1, #1f2430); line-height: 1.3; }
.spc-tt small { display: block; font-size: 12.5px; color: var(--ink-4, #767d8e); margin-top: 2px; }
.spc-rows { margin-top: 14px; border-top: 1px solid var(--line-1, #eceef3); }
.spc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line-1, #eceef3); font-size: 13px; color: var(--ink-4, #767d8e); }
.spc-row > b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink-1, #1f2430); font-variant-numeric: tabular-nums; }
.spc-row > b > i { font-style: normal; color: var(--ink-5, #a0a6b4); }
.spc-row .spc-amt, .spc-row .alloy-amt { display: inline-flex; align-items: center; gap: 4px; }
.spc-row .spc-amt b, .spc-row .alloy-amt b { font-weight: 500; }
.spc-row .currency-icon-img, .spc-row .pix-icon { width: 15px; height: 15px; }
.spc-bad { font-style: normal; color: #dc2626; }
.spc-guar { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; color: #7a3f06;
  background: linear-gradient(90deg, #fff5ec, #f7f1fe); box-shadow: inset 0 0 0 1px #f1d9bf; }
.spc-guar .gear-pix { width: 18px; height: 18px; flex: none; }
.spc-btns { display: flex; gap: 8px; margin-top: 16px; }
.spc-btns .spc-cancel { flex: 0 0 34%; }
html.theme-dark .spc-guar { background: rgba(251,146,60,.12); box-shadow: inset 0 0 0 1px rgba(251,146,60,.3); color: #fdba74; }
html.theme-dark .spc-art.tone-amber { background: rgba(245,158,11,.14); box-shadow: inset 0 0 0 1px rgba(245,158,11,.35); }
html.theme-dark .spc-art.tone-violet { background: rgba(167,139,250,.14); box-shadow: inset 0 0 0 1px rgba(167,139,250,.35); }

.gear-pix { display: inline-block; vertical-align: -.2em; }
.chip-card .cc-ic .gear-pix { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.chip-card .cc-mark .gear-pix { width: 64px; height: 64px; }
.chip-card.empty .cc-ic .gear-pix { opacity: .7; }
.pt-eq .gear-pix { width: 18px; height: 18px; }
.gear-tabs .gear-pix, .syn-slot .gear-pix, .pgm-chip .gear-pix { width: 15px; height: 15px; }

.enh-fod .gear-pix, .gear-orange-pill .gear-pix { width: 16px; height: 16px; }
.enh-title .gear-pix { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .sp-track { animation: none; } .sp-rail { overflow-x: auto; }
  .sp-slide, .spc-slide { animation: none; } .sp-slide[style*="--i:0"], .spc-slide:first-child { opacity: 1; }
  .sp-dots i, .sp-show::after { animation: none; }
}

.confirm-box.gxr-box { width: 640px; max-width: 94vw; text-align: left; padding: 0 18px 16px; }
.confirm-box.gxr-box.is-single { width: 340px; }
.gxr-head { margin: 0 -18px 12px; padding: 14px 18px; display: flex; align-items: baseline; gap: 10px; position: relative;
  background: radial-gradient(120% 160% at 100% 0%, rgba(154,70,8,.5), transparent 60%), linear-gradient(135deg, #1f1d33 0%, #2b2140 100%); color: #efe2bf; }
.gxr-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(1px 1px at 38% 30%, rgba(255,255,255,.6) 60%, transparent 61%), radial-gradient(1px 1px at 66% 70%, rgba(255,255,255,.45) 60%, transparent 61%),
  radial-gradient(1.3px 1.3px at 84% 36%, #f5dfa0 60%, transparent 61%), radial-gradient(1px 1px at 55% 52%, rgba(201,193,245,.7) 60%, transparent 61%); }
.gxr-head b { font-size: 16px; font-weight: 600; }
.gxr-head small { font-size: 12px; color: #c9b27a; }
.gxr-box .gx-stage { margin-bottom: 10px; }
.gxr-grid, .gxr-detail, .gxr-foot { display: none; }
.gx-box.is-revealing .gxr-grid { display: grid; }
.gx-box.is-done .gxr-detail { display: flex; }
.gx-box.is-revealing .gxr-foot { display: block; }
.gxr-grid { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 8px; padding: 6px 2px; max-height: 56vh; overflow-y: auto; }
.gxr-box.is-single .gxr-grid { grid-template-columns: minmax(0, 150px); justify-content: center; }
.gxr-card { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; perspective: 900px; min-width: 0; font: inherit; color: inherit; transition: opacity .35s, filter .35s; }
.gxr-card:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; border-radius: 12px; }
.gxr-flip { position: relative; display: grid; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,.7,.3,1); }
.gxr-card.is-flipped .gxr-flip { transform: rotateY(180deg); }
.gxr-card.is-slow .gxr-flip { transition-duration: 1s; transition-timing-function: cubic-bezier(.2,.8,.2,1); }
.gxr-back, .gxr-front { grid-area: 1 / 1; border-radius: 11px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; position: relative; }
.gxr-back { display: grid; place-items: center; background: linear-gradient(160deg, #262440 0%, #151427 100%); box-shadow: inset 0 0 0 1px rgba(230,207,147,.35); }
.gxr-back::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(1px 1px at 20% 24%, rgba(255,255,255,.55) 60%, transparent 61%), radial-gradient(1px 1px at 76% 64%, rgba(255,255,255,.4) 60%, transparent 61%),
  radial-gradient(1.2px 1.2px at 60% 18%, #f5dfa0 60%, transparent 61%), radial-gradient(1px 1px at 30% 80%, rgba(201,193,245,.7) 60%, transparent 61%); }
.gxr-back::after { content: ""; position: absolute; inset: 7px; border-radius: 7px; border: 1px dashed rgba(230,207,147,.22); }
.gxr-back i { font-style: normal; font-size: 24px; opacity: .75; filter: grayscale(.2); }
.gxr-front { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; padding: 8px 6px 9px; text-align: center;
  background: var(--surface-1, #fff); box-shadow: inset 0 0 0 1px var(--gxr-line, #e2e5ec); }
.gxr-art { flex: 1; min-height: 0; display: grid; place-items: center; font-size: 30px; line-height: 1; width: 100%; }
.gxr-art .pix-icon, .gxr-art .gear-pix { width: 44px; height: 44px; }
.gxr-front b { max-width: 100%; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-1, #1f2430); }
.gxr-front small { max-width: 100%; font-size: 10.5px; color: var(--ink-5, #8a90a0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gxr-q { position: absolute; top: 6px; left: 6px; font-style: normal; font-size: 9.5px; line-height: 1; padding: 2px 5px; border-radius: 999px; background: var(--gxr-chip, #eef0f4); color: var(--gxr-chip-ink, #5b6273); }
.gxr-card.tone-white { --gxr-line: #e2e5ec; }
.gxr-card.tone-green { --gxr-line: #bfe6cc; --gxr-chip: #dcfce7; --gxr-chip-ink: #166534; }
.gxr-card.tone-blue { --gxr-line: #c7d7f5; --gxr-chip: #dbeafe; --gxr-chip-ink: #1d4ed8; }
.gxr-card.tone-purple .gxr-front { background: radial-gradient(90% 70% at 50% 38%, rgba(168,85,247,.35), transparent 70%), linear-gradient(160deg, #5b21b6 0%, #1a0b2a 100%); box-shadow: inset 0 0 0 1px rgba(196,181,253,.55); }
.gxr-card.tone-orange .gxr-front { background: radial-gradient(90% 70% at 50% 38%, rgba(251,146,60,.42), transparent 70%), linear-gradient(160deg, #9a4608 0%, #2a1204 100%); box-shadow: inset 0 0 0 1px rgba(251,191,36,.6), 0 8px 18px -10px rgba(234,88,12,.9); }
.gxr-card.tone-alien .gxr-front { background: radial-gradient(90% 70% at 50% 38%, rgba(45,212,191,.35), transparent 70%), linear-gradient(160deg, #0f4c4a 0%, #04181a 100%); box-shadow: inset 0 0 0 1px rgba(94,234,212,.55); }
.gxr-card.tone-purple .gxr-front b, .gxr-card.tone-orange .gxr-front b, .gxr-card.tone-alien .gxr-front b { color: #fdf2dc; }
.gxr-card.tone-purple .gxr-front small { color: #d8c4fb; } .gxr-card.tone-orange .gxr-front small { color: #f2c28c; } .gxr-card.tone-alien .gxr-front small { color: #a7f3e4; }
.gxr-card.tone-purple .gxr-q { background: rgba(0,0,0,.35); color: #d8b4fe; }
.gxr-card.tone-orange .gxr-q { background: rgba(0,0,0,.35); color: #fdba74; box-shadow: inset 0 0 0 1px rgba(253,186,116,.45); }
.gxr-card.tone-alien .gxr-q { background: rgba(0,0,0,.35); color: #5eead4; }
.gxr-card.tone-purple .gxr-art .gear-pix, .gxr-card.tone-orange .gxr-art .gear-pix { filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.gxr-card.tone-orange .gxr-front::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,236,200,.3) 48%, transparent 60%); transform: translateX(-120%); }
.gxr-card.tone-orange.is-flipped .gxr-front::after { animation: spSheen 4.5s ease-in-out 1s infinite; }
.gxr-card.is-sel .gxr-front { outline: 2px solid #6f6243; outline-offset: -2px; }
.gxr-card.tone-orange.is-sel .gxr-front, .gxr-card.tone-purple.is-sel .gxr-front, .gxr-card.tone-alien.is-sel .gxr-front { outline-color: #f5dfa0; }
.gx-box.is-revealing .gxr-card { animation: gxrDeal .35s ease-out calc(var(--i) * 60ms) both; }
@keyframes gxrDeal { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }

.gxr-grid.is-focus .gxr-card:not(.is-tease):not(.is-burst) { opacity: .38; filter: saturate(.5); }
.gxr-card::before { content: ""; position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0; z-index: 0;
  background: repeating-conic-gradient(rgba(251,191,36,.3) 0deg 8deg, transparent 8deg 30deg); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%); mask-image: radial-gradient(circle, #000 20%, transparent 68%); transition: opacity .4s; }
.gxr-card .gxr-flip { z-index: 1; }
.gxr-card.is-tease { z-index: 3; }
.gxr-card.is-tease::before { opacity: 1; animation: gxrSpin 4s linear infinite; }
.gxr-card.is-tease .gxr-flip { animation: gxrTease 1.6s ease-in both; }
.gxr-card.is-tease .gxr-back { box-shadow: inset 0 0 0 1px #f5c56b, 0 0 26px 4px rgba(251,146,60,.6); animation: gxrPulse .45s ease-in-out infinite alternate; }
@keyframes gxrSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes gxrPulse { from { box-shadow: inset 0 0 0 1px #f5c56b, 0 0 14px 2px rgba(251,146,60,.4); } to { box-shadow: inset 0 0 0 1px #fde68a, 0 0 30px 6px rgba(251,146,60,.75); } }
@keyframes gxrTease {
  0% { transform: none; } 18% { transform: translateY(-6px) scale(1.08); }
  30% { transform: translateY(-6px) scale(1.08) rotate(-2deg); } 40% { transform: translateY(-6px) scale(1.08) rotate(2deg); }
  50% { transform: translateY(-6px) scale(1.09) rotate(-2.5deg); } 58% { transform: translateY(-6px) scale(1.09) rotate(2.5deg); }
  65% { transform: translateY(-7px) scale(1.1) rotate(-3deg); } 71% { transform: translateY(-7px) scale(1.1) rotate(3deg); }
  76% { transform: translateY(-7px) scale(1.1) rotate(-3deg); } 81% { transform: translateY(-7px) scale(1.1) rotate(3deg); }
  86% { transform: translateY(-7px) scale(1.1) rotate(-2deg); } 91% { transform: translateY(-7px) scale(1.1) rotate(2deg); }
  100% { transform: translateY(-7px) scale(1.1); } }
.gxr-card.is-burst::after { content: ""; position: absolute; inset: 0; border-radius: 11px; pointer-events: none; z-index: 2; animation: gxrBurst 1s ease-out .75s both; }
@keyframes gxrBurst { from { box-shadow: 0 0 0 0 rgba(251,191,36,.85), 0 0 30px 6px rgba(251,146,60,.7); } to { box-shadow: 0 0 0 22px rgba(251,191,36,0), 0 0 0 0 rgba(251,146,60,0); } }
.gxr-detail { margin-top: 10px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 11px; background: var(--surface-2, #f6f7fa); box-shadow: inset 0 0 0 1px var(--line-1, #e6e8ee); }
.gxr-detail-art { width: 44px; height: 44px; flex: none; display: grid; place-items: center; font-size: 28px; line-height: 1; }
.gxr-detail-art .pix-icon, .gxr-detail-art .gear-pix { width: 40px; height: 40px; }
.gxr-detail > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--ink-3, #4a5060); }
.gxr-detail > div b { font-size: 14px; font-weight: 600; color: var(--ink-1, #1f2430); }
.gxr-detail > div span { display: flex; align-items: center; gap: 4px; }
.gxr-detail > div span .pix-icon { width: 14px; height: 14px; }
.gxr-detail > div em { font-style: normal; font-size: 11.5px; color: var(--ink-5, #8a90a0); margin-top: 2px; }
.gxr-detail.tone-orange { background: linear-gradient(90deg, #fff5ec, #fdf2f8 80%); box-shadow: inset 0 0 0 1px #f1d2b0; }
.gxr-detail.tone-orange > div b { color: #9a3412; }
.gxr-detail.tone-purple { background: #faf7ff; box-shadow: inset 0 0 0 1px #e1d7f7; }
.gxr-detail.tone-purple > div b { color: #6b21a8; }
.gxr-foot { font-size: 12px; color: var(--ink-5, #8a90a0); margin-top: 8px; }
.gxr-btns { display: flex; gap: 8px; margin-top: 12px; }
.gx-box.is-done .gxr-btns .gx-skip { display: none; }
.gx-box:not(.is-done) .gxr-ok { display: none; }
html.theme-dark .gxr-detail.tone-orange { background: rgba(251,146,60,.12); box-shadow: inset 0 0 0 1px rgba(251,146,60,.3); }
html.theme-dark .gxr-detail.tone-orange > div b { color: #fdba74; }
html.theme-dark .gxr-detail.tone-purple { background: rgba(168,85,247,.12); box-shadow: inset 0 0 0 1px rgba(168,85,247,.3); }
html.theme-dark .gxr-detail.tone-purple > div b { color: #d8b4fe; }
@media (max-width: 560px) {
  .confirm-box.gxr-box { padding: 0 12px 12px; }
  .gxr-head { margin: 0 -12px 10px; padding: 12px; }
  .gxr-box.is-multi .gxr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gxr-art .pix-icon, .gxr-art .gear-pix { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .gxr-card::before, .gxr-card.is-tease .gxr-flip, .gxr-card.is-tease .gxr-back, .gxr-card.is-burst::after, .gxr-card.tone-orange.is-flipped .gxr-front::after { animation: none; }
}

.chip-card.gear-card.gc2 { background: none; border: 0; padding: 0; box-shadow: none; overflow: visible; aspect-ratio: auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; perspective: 900px; }
.chip-card.gear-card.gc2.sel { outline: 0; }
.gc2-flip { position: relative; height: 188px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,.7,.3,1); border-radius: 12px; }
.gc2.is-back .gc2-flip { transform: rotateY(180deg); }
.gc2.sel .gc2-flip { box-shadow: 0 0 0 2.5px #3b82f6; }
.gc2-face { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  color: #fff; border: 1px solid rgba(255,255,255,.14); background: #171a21; }
.gc2-face > *:not(.cc-bg) { position: relative; z-index: 1; }
.gc2.q-purple .gc2-face { border-color: rgba(192,132,252,.65); }
.gc2.q-orange .gc2-face { border-color: rgba(251,146,60,.8); }
.gc2.q-orange .gc2-front { box-shadow: inset 0 0 18px rgba(234,88,12,.25); }
.gc2-front { display: grid; grid-template-rows: 20px 50px 18px 16px 14px 30px; row-gap: 3px; align-content: start; justify-items: center; padding: 8px; text-align: center; }
.gc2-top { justify-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.gc2-q { font-size: 9.5px; line-height: 1; padding: 3px 6px; border-radius: 999px; background: rgba(0,0,0,.3); color: #e5e7eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gc2.q-green .gc2-q { color: #86efac; } .gc2.q-blue .gc2-q { color: #93c5fd; } .gc2.q-purple .gc2-q { color: #d8b4fe; }
.gc2.q-orange .gc2-q { color: #fdba74; box-shadow: inset 0 0 0 1px rgba(253,186,116,.45); }
.gc2-info { all: unset; box-sizing: border-box; flex: none; cursor: pointer; position: relative; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font: 600 11px/1 var(--font-sans, system-ui, sans-serif); color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.38); }
.gc2-info:hover { background: rgba(255,255,255,.28); }
.gc2-info:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.gc2-info i { position: absolute; top: -5px; right: -6px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px; font: 600 9px/13px var(--font-sans, system-ui, sans-serif); font-style: normal; background: #f59e0b; color: #2a1204; text-align: center; }
.gc2-info.is-none { cursor: default; opacity: .3; }
.gc2-art { width: 48px; height: 48px; display: grid; place-items: center; }
.gc2-art .gear-pix { width: 46px; height: 46px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.gc2-nm { max-width: 100%; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc2-nm .gc-plus { margin-left: 3px; }
.gc2-main { font-size: 11.5px; font-weight: 500; line-height: 16px; color: #fde68a; white-space: nowrap; }
.gc2-enh { justify-self: stretch; height: 14px; display: flex; align-items: center; }
.gc2-enh .gc-enh { width: 100%; margin: 0; }
.gc2-none { width: 100%; font-size: 9.5px; color: rgba(255,255,255,.32); }
.gc2-extra { justify-self: stretch; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; overflow: hidden; line-height: 1.3; }
.gc2-extra > * { margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc2-extra .gc-diff { font-weight: 500; }
.gc2-extra .gc-owner { font-weight: 500; }
.gc2-back { transform: rotateY(180deg); display: flex; flex-direction: column; gap: 7px; padding: 9px 10px 8px; text-align: left; cursor: pointer; }
.gc2-back:focus-visible { outline: 2px solid #93c5fd; outline-offset: -3px; }
.gc2-bh { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gc2-mini { width: 22px; height: 22px; flex: none; }
.gc2-mini .gear-pix { width: 22px; height: 22px; display: block; }
.gc2-bh > div { min-width: 0; flex: 1; }
.gc2-bh b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc2-bh small { display: block; font-size: 9.5px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc2-aff { list-style: none; margin: 0; padding: 7px 0 0; border-top: 1px solid rgba(255,255,255,.14); flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.gc2-aff li { display: grid; grid-template-columns: auto 1fr; gap: 5px; align-items: start; font-size: 10.5px; line-height: 1.45; color: rgba(255,255,255,.82); }
.gc2-aff li em { font-style: normal; font-size: 9.5px; line-height: 1; padding: 3px 5px; border-radius: 5px; background: rgba(255,255,255,.14); color: #fde68a; white-space: nowrap; margin-top: 1px; }
.gc2-aff li b { font-weight: 500; color: #fff; margin-left: 2px; }
.gc2-aff li.none { grid-template-columns: 1fr; color: rgba(255,255,255,.5); }
.gc2-foot { font-size: 9.5px; color: rgba(255,255,255,.5); text-align: right; }

.gc2-act { display: flex; gap: 4px; }
.gc2-act .gc-acts { display: flex; gap: 4px; width: 100%; }
.gc2-act .cc-act { position: static; margin: 0; flex: 1; width: auto; min-height: 30px; padding: 6px 0; font-size: 12px; font-weight: 500; border-radius: 8px;
  background: var(--surface-1, #fff); color: var(--ink-1, #2a2f3b); border: 0; box-shadow: inset 0 0 0 1px var(--line-1, #dfe2ea); cursor: pointer; }
.gc2-act .cc-act:hover:not([disabled]) { background: var(--surface-2, #f6f7fa); }
.gc2-act .cc-act.enh { background: #fdf5e7; color: #7a4208; box-shadow: inset 0 0 0 1px #e6c48a; }
.gc2-act .cc-act.enh:hover:not([disabled]) { background: #fbeccf; }
.gc2-act .cc-act[disabled] { opacity: .45; cursor: not-allowed; }
html.theme-dark .gc2-act .cc-act { background: rgba(255,255,255,.05); color: #e5e7eb; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
html.theme-dark .gc2-act .cc-act.enh { background: rgba(245,158,11,.16); color: #fde68a; box-shadow: inset 0 0 0 1px rgba(245,158,11,.4); }

.gc2.worn-elsewhere .gc2-face .cc-bg { filter: saturate(.6) brightness(.85); }

.gc2.is-empty .gc2-face { background: transparent; border: 1px dashed rgba(148,163,184,.5); color: var(--muted, #8a94a6); }
.gc2.is-empty .gc2-q { background: none; color: var(--muted, #8a94a6); padding-left: 0; }
.gc2.is-empty .gc2-art .gear-pix { opacity: .7; filter: none; }
.gc2.is-empty .gc2-nm { font-weight: 400; }
.gc2.is-empty .gc2-main { color: var(--muted, #8a94a6); font-weight: 400; }

.gear-slots .gc2-flip { height: 150px; }
.gear-slots .gc2-front { grid-template-rows: 20px 44px 18px 16px 14px; }
.gear-slots .gc2-art, .gear-slots .gc2-art .gear-pix { width: 40px; height: 40px; }
.gear-bag-grid .gear-card.gc2, .pgm-grid .gear-card.gc2, .enh-card .gear-card.gc2 { min-height: 0; }
@media (max-width: 620px) {
  .gear-slots .gc2-flip { height: 128px; }
  .gear-slots .gc2-front { grid-template-rows: 18px 36px 16px 14px 12px; row-gap: 2px; padding: 6px 4px; }
  .gear-slots .gc2-q { display: none; }
  .gear-slots .gc2-top { justify-content: flex-end; }
  .gear-slots .gc2-art, .gear-slots .gc2-art .gear-pix { width: 32px; height: 32px; }
  .gear-slots .gc2-nm { font-size: 10.5px; } .gear-slots .gc2-main { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .gc2-flip { transition: none; } }

.gc2-act .cc-act.wear { background: #1f1d33; color: #efe2bf; box-shadow: inset 0 0 0 1px #6f6243; }
.gc2-act .cc-act.wear:hover:not([disabled]) { background: #27243f; }
html.theme-dark .gc2-act .cc-act.wear { background: #2a2745; color: #efe2bf; box-shadow: inset 0 0 0 1px #6f6243; }
.confirm-box.gw-box { width: min(440px, 94vw); text-align: left; padding: 18px 18px 14px; }
.gw-head { display: flex; align-items: center; gap: 12px; }
.gw-art { width: 52px; height: 52px; border-radius: 11px; display: grid; place-items: center; flex: none; background: linear-gradient(160deg, #4b5563, #151820); }
.gw-art.q-green { background: linear-gradient(160deg, #166534, #0a1a10); } .gw-art.q-blue { background: linear-gradient(160deg, #1e40af, #0a1230); }
.gw-art.q-purple { background: linear-gradient(160deg, #6b21a8, #1a0b2a); } .gw-art.q-orange { background: linear-gradient(160deg, #b45309, #2a1204); box-shadow: inset 0 0 0 1px rgba(251,146,60,.8); }
.gw-art .gear-pix { width: 38px; height: 38px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.gw-head > div { min-width: 0; }
.gw-head b { display: block; font-size: 16px; font-weight: 600; color: var(--ink-1, #1f2430); }
.gw-head small { display: block; font-size: 12px; color: var(--ink-4, #767d8e); }
.gw-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; }
.gw-row { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.25fr) 76px; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; background: var(--surface-1, #fff); box-shadow: inset 0 0 0 1px var(--line-1, #e2e5ec); transition: background-color .15s; }
.gw-row:hover:not([disabled]) { background: var(--surface-2, #f6f7fa); box-shadow: inset 0 0 0 1px #c9b6f1; }
.gw-row:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.gw-row[disabled] { cursor: not-allowed; opacity: .5; }
.gw-pet { font-size: 22px; line-height: 1; text-align: center; }
.gw-who, .gw-cur > span { min-width: 0; display: flex; flex-direction: column; }
.gw-who b, .gw-cur b { font-size: 13px; font-weight: 500; color: var(--ink-1, #1f2430); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-cur b.dim { color: var(--ink-5, #8a90a0); font-weight: 400; }
.gw-who small, .gw-cur small { font-size: 11px; color: var(--ink-5, #8a90a0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-cur { min-width: 0; display: flex; align-items: center; gap: 6px; }
.gw-cur .gear-pix { width: 22px; height: 22px; flex: none; }
.gw-diff { font-size: 12px; font-weight: 500; text-align: right; color: var(--ink-4, #767d8e); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gw-diff.up { color: #16a34a; } .gw-diff.down { color: #dc2626; }
.gw-note { font-size: 11.5px; color: var(--ink-5, #8a90a0); margin-top: 8px; }
.gw-btns { display: flex; margin-top: 10px; }
@media (max-width: 520px) {
  .gw-row { grid-template-columns: 26px minmax(0, 1fr) 64px; }
  .gw-cur { grid-column: 2 / 3; grid-row: 2; }
  .gw-diff { grid-column: 3; grid-row: 1 / 3; }
}

.confirm-box.gd-box { width: min(440px, 94vw); text-align: left; padding: 18px 18px 14px; }
.gd-head b { display: block; font-size: 16px; font-weight: 600; color: var(--ink-1, #1f2430); }
.gd-head small { display: block; font-size: 12px; color: var(--ink-4, #767d8e); margin-top: 2px; }
.gd-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.gd-q { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 4px 8px; border-radius: 11px;
  color: #fff; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(160deg, #4b5563, #151820); opacity: .55; transition: opacity .15s, transform .15s, box-shadow .15s; }
.gd-q.q-green { background: linear-gradient(160deg, #166534, #0a1a10); } .gd-q.q-blue { background: linear-gradient(160deg, #1e40af, #0a1230); }
.gd-q.q-purple { background: linear-gradient(160deg, #6b21a8, #1a0b2a); } .gd-q.q-orange { background: linear-gradient(160deg, #b45309, #2a1204); }
.gd-q:hover:not([disabled]) { opacity: .8; }
.gd-q.is-on { opacity: 1; box-shadow: 0 0 0 2px #f5dfa0, 0 6px 14px -8px rgba(0,0,0,.6); transform: translateY(-2px); }
.gd-q:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.gd-q[disabled] { cursor: not-allowed; opacity: .22; }
.gd-tick { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.gd-q.is-on .gd-tick { background: #f5dfa0; color: #1f1d33; box-shadow: none; }
.gd-art .gear-pix { width: 32px; height: 32px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.gd-q b { font-size: 12px; font-weight: 500; margin-top: 2px; }
.gd-q small { font-size: 11px; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.gd-sum { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 9px 2px; border-top: 1px solid var(--line-1, #eceef3); border-bottom: 1px solid var(--line-1, #eceef3); font-size: 13px; color: var(--ink-4, #767d8e); }
.gd-sum b { font-weight: 600; color: var(--ink-1, #1f2430); font-variant-numeric: tabular-nums; }
.gd-sum .alloy-amt { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-1, #1f2430); }
.gd-sum .alloy-amt b { font-weight: 500; }
.gd-warn { margin-top: 10px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; color: #9a3412; background: #fff5ec; box-shadow: inset 0 0 0 1px #f1d2b0; }
html.theme-dark .gd-warn { color: #fdba74; background: rgba(251,146,60,.12); box-shadow: inset 0 0 0 1px rgba(251,146,60,.3); }
.gd-btns { display: flex; gap: 8px; margin-top: 14px; }
.gd-btns .gd-cancel { flex: 0 0 34%; }
@media (max-width: 420px) { .gd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.gear-page-head { margin-top: 4px; }
.gear-page-head b small { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--ink-5, #8a90a0); }

.inv3-hero { position: relative; border-radius: 14px; overflow: hidden; color: #efe2bf; margin-bottom: 4px;
  background: radial-gradient(90% 120% at 85% 0%, rgba(124,58,237,.35), transparent 60%), radial-gradient(80% 90% at 10% 100%, rgba(154,70,8,.35), transparent 60%), linear-gradient(160deg, #1a1830, #0f0e1d); }
.inv3-hero.is-win { background: radial-gradient(90% 120% at 85% 0%, rgba(16,185,129,.28), transparent 60%), linear-gradient(160deg, #13241f, #0b1512); }
.inv3-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7; background:
  radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.6) 60%, transparent 61%), radial-gradient(1px 1px at 38% 70%, rgba(255,255,255,.4) 60%, transparent 61%),
  radial-gradient(1.3px 1.3px at 64% 22%, #f5dfa0 60%, transparent 61%), radial-gradient(1px 1px at 88% 80%, rgba(201,193,245,.7) 60%, transparent 61%),
  radial-gradient(1px 1px at 52% 44%, rgba(255,255,255,.35) 60%, transparent 61%), radial-gradient(1px 1px at 22% 58%, rgba(255,255,255,.35) 60%, transparent 61%); }
.inv3-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; padding: 18px; }
@media (max-width: 760px) { .inv3-hero-in { grid-template-columns: 1fr; padding: 14px; gap: 14px; } }
.inv3-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 9px; border-radius: 999px; color: #c9c1f5; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(201,193,245,.3); }
.inv3-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.inv3-hero.is-active .inv3-state { color: #fca5a5; background: rgba(220,38,38,.15); box-shadow: inset 0 0 0 1px rgba(248,113,113,.35); }
.inv3-hero.is-active .inv3-state i { animation: inv3Blink 1.2s infinite; }
.inv3-hero.is-warn .inv3-state { color: #fcd34d; background: rgba(245,158,11,.14); box-shadow: inset 0 0 0 1px rgba(252,211,77,.35); }
.inv3-hero.is-win .inv3-state { color: #6ee7b7; background: rgba(16,185,129,.14); box-shadow: inset 0 0 0 1px rgba(110,231,183,.35); }
@keyframes inv3Blink { 50% { opacity: .25; } }
.inv3-ttl { font-size: 20px; font-weight: 600; margin: 8px 0 2px; color: #fdf2dc; }
.inv3-sub { font-size: 12.5px; color: #c9b27a; }
.inv3-bad { color: #fca5a5 !important; }
.inv3-scene { position: relative; height: 150px; margin-top: 12px; border-radius: 10px; overflow: hidden; background: #0c0b17; box-shadow: inset 0 0 0 1px rgba(230,207,147,.18); }
.inv3-map { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols, 19), 1fr); grid-template-rows: repeat(var(--rows, 9), 1fr); gap: 2px; padding: 6px;
  transform: perspective(420px) rotateX(38deg) scale(1.18) translateY(14px); }
.inv3-map i { border-radius: 2px; background: rgba(148,163,184,.16); }
.inv3-map i.inv { background: rgba(168,85,247,.38); box-shadow: inset 0 0 0 1px rgba(196,181,253,.35); }
.inv3-map i.me { background: rgba(251,146,60,.85); box-shadow: 0 0 6px rgba(251,146,60,.8); }
.inv3-scene.is-over .inv3-map i.inv { background: rgba(148,163,184,.22); box-shadow: none; }
.inv3-ship { position: absolute; left: 50%; top: 10px; width: 120px; height: 48px; transform: translateX(-50%); animation: inv3Hover 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.inv3-ship svg { width: 100%; height: 100%; display: block; }
.inv3-ship.is-down { top: auto; bottom: 18px; transform: translateX(-50%) rotate(-12deg); animation: none; filter: grayscale(.6) brightness(.7) drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.inv3-beam { position: absolute; left: 50%; top: 52px; width: 120px; height: 100px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(94,234,212,.35), transparent);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); animation: inv3Beam 3.2s ease-in-out infinite; }
@keyframes inv3Hover { 50% { transform: translate(-50%, -5px); } }
@keyframes inv3Beam { 50% { opacity: .55; } }
.inv3-legend { position: absolute; left: 8px; bottom: 6px; display: flex; gap: 10px; font-size: 10.5px; color: #c9c1f5; }
.inv3-legend b { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.inv3-legend b.inv { background: rgba(168,85,247,.7); } .inv3-legend b.me { background: #fb923c; }
.inv3-hp-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: #c9b27a; }
.inv3-hp-n { font-size: 28px; font-weight: 600; color: #fdf2dc; font-variant-numeric: tabular-nums; line-height: 1.3; }
.inv3-hp-n small { font-size: 13px; color: #c9b27a; font-weight: 400; margin-left: 6px; }
.inv3-clock { font-size: 34px; letter-spacing: .02em; }
.inv3-note { font-size: 12.5px; color: #c9c1f5; margin: 8px 0 0; line-height: 1.6; }
.inv3-plates { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; margin: 8px 0 4px; }
.inv3-plates i { height: 14px; border-radius: 2px; background: linear-gradient(180deg, #c084fc, #7c3aed); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.inv3-plates i.gone { background: rgba(255,255,255,.08); box-shadow: none; }
.inv3-plates i.hit { background: linear-gradient(180deg, #fde68a, #f59e0b); animation: inv3Blink 1s infinite; }
.inv3-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.inv3-meta div { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(230,207,147,.15); border-radius: 9px; padding: 6px 9px; min-width: 0; }
.inv3-meta small { display: block; font-size: 11px; color: #c9b27a; }
.inv3-meta b { font-size: 15px; font-weight: 600; color: #fdf2dc; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv3-acts { display: grid; gap: 8px; margin-top: 12px; }
.inv3-btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 11px 14px; border-radius: 10px;
  font: 500 14px/1.2 var(--font-sans, system-ui, sans-serif); white-space: nowrap; position: relative; overflow: hidden; }
.inv3-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.inv3-btn .pr { padding-left: 10px; border-left: 1px solid rgba(255,255,255,.22); display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.inv3-btn .pr .currency-icon-img { width: 14px; height: 14px; }
.inv3-btn.is-gold { background: linear-gradient(180deg, #f6d58e, #e3b457); color: #3b2506; box-shadow: inset 0 0 0 1px #b8862f, 0 8px 20px -12px #9a6a1c; padding: 13px 16px; font-size: 15px; }
.inv3-btn.is-gold .pr { border-color: rgba(59,37,6,.25); }
.inv3-btn.is-gold:hover:not([disabled]) { filter: brightness(1.05); }
.inv3-btn.is-night { background: #1f1d33; color: #efe2bf; box-shadow: inset 0 0 0 1px #6f6243; }
.inv3-btn.is-night:hover:not([disabled]) { background: #27243f; }
.inv3-btn.is-line { width: auto; flex: none; background: var(--surface-1, #fff); color: #4a3a1c; box-shadow: inset 0 0 0 1px #e3d3b0; padding: 8px 14px; }
.inv3-btn[disabled] { cursor: not-allowed; opacity: .55; filter: saturate(.6); }
.inv3-pips { display: inline-flex; gap: 3px; margin-left: 3px; }
.inv3-pips i { width: 6px; height: 6px; border-radius: 50%; background: #3b2506; }
.inv3-pips i.off { background: rgba(59,37,6,.22); }
.inv3-tl { display: flex; align-items: center; margin: 12px 2px 0; font-size: 11.5px; color: var(--ink-5, #8a90a0); }
.inv3-dot { display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; }
.inv3-dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-1, #fff); box-shadow: inset 0 0 0 2px #c4b5fd; }
.inv3-dot.done i { background: #a78bfa; box-shadow: none; }
.inv3-seg { flex: 1; height: 4px; margin: 0 4px 16px; border-radius: 2px; background: linear-gradient(90deg, #c4b5fd var(--p, 0%), var(--line-1, #eceef3) var(--p, 0%)); }
.inv3-seg.done { background: #c4b5fd; }
.inv3-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (max-width: 920px) { .inv3-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inv3-tile { border: 1px solid var(--line-1, #eceef3); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; background: var(--surface-1, #fff); min-width: 0; }
.inv3-tile .ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-size: 18px; background: #f5f3ff; }
.inv3-tile .ic.is-red { background: #fff1f2; } .inv3-tile .ic.is-green { background: #f0fdf4; } .inv3-tile .ic.is-violet { background: #f3effd; }
.inv3-tile .ic .pix-icon { width: 22px; height: 22px; }
html.theme-dark .inv3-tile .ic { background: rgba(255,255,255,.06); }
.inv3-tile small { display: block; color: var(--ink-5, #8a90a0); font-size: 11.5px; }
.inv3-tile b { font-size: 15px; font-weight: 600; color: var(--ink-1, #1f2430); font-variant-numeric: tabular-nums; }
.inv3-tile em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-4, #6b7182); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv3-low { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; margin-top: 12px; }
.inv3-low.is-one { grid-template-columns: 1fr; }
@media (max-width: 760px) { .inv3-low { grid-template-columns: 1fr; } }
.inv3-box { border: 1px solid var(--line-1, #eceef3); border-radius: 12px; padding: 12px; background: var(--surface-1, #fff); min-width: 0; }
.inv3-box h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; color: var(--ink-1, #1f2430); }
.inv3-box h4 small { font-weight: 400; color: var(--ink-5, #8a90a0); font-size: 11.5px; text-align: right; }
.inv3-guard { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inv3-slots { display: flex; gap: 6px; }
.inv3-slots i { width: 34px; height: 34px; border-radius: 9px; border: 1px dashed #c9cde0; display: grid; place-items: center; font-style: normal; color: #b0b5c1; }
.inv3-slots i.on { border-style: solid; border-color: #c9b6f1; background: #f6f2fe; font-size: 18px; }
.inv3-guard-t { flex: 1; min-width: 160px; font-size: 12.5px; color: var(--ink-4, #6b7182); }
.inv3-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 6px; align-items: end; margin-bottom: 6px; }
.inv3-pd { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; border-radius: 10px; padding: 8px 4px 6px; background: #faf7ff; box-shadow: inset 0 0 0 1px #e9e1fb; min-width: 0; position: relative; }
.inv3-pd.p1 { background: linear-gradient(180deg, #fff7e6, #fdf1d8); box-shadow: inset 0 0 0 1px #ecd29a; padding-top: 16px; }
.inv3-pd.is-me { box-shadow: inset 0 0 0 2px #fb923c; }
.inv3-pd.is-empty { background: transparent; box-shadow: none; border: 1px dashed var(--line-1, #dfe2ea); min-height: 60px; }
.inv3-pd .rkn { position: absolute; top: 4px; left: 6px; font-size: 10.5px; color: #8a6a2c; font-weight: 600; }
.inv3-pd b { display: block; max-width: 100%; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1f2430; }
.inv3-pd .dmg { font-size: 11px; color: #6b7182; font-variant-numeric: tabular-nums; }
html.theme-dark .inv3-pd { background: rgba(167,139,250,.08); box-shadow: inset 0 0 0 1px rgba(167,139,250,.25); }
html.theme-dark .inv3-pd.p1 { background: rgba(245,158,11,.12); box-shadow: inset 0 0 0 1px rgba(245,158,11,.35); }
html.theme-dark .inv3-pd b { color: #e5e7eb; }
.inv3-rk { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 5px 4px; border-top: 1px solid var(--line-1, #f1f2f6); }
.inv3-rk b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv3-rk.is-me { background: #fff7ed; border-radius: 6px; }
html.theme-dark .inv3-rk.is-me { background: rgba(251,146,60,.12); }
.inv3-rk .dmg { font-variant-numeric: tabular-nums; color: var(--ink-3, #4a5060); }
.inv3-last { margin-top: 12px; font-size: 12.5px; color: var(--ink-4, #6b7182); }
@media (prefers-reduced-motion: reduce) { .inv3-ship, .inv3-beam, .inv3-state i, .inv3-plates i.hit { animation: none !important; } }
@media (max-width: 520px) {
  .inv3-tiles { grid-template-columns: 1fr; gap: 8px; }
  .inv3-meta { gap: 6px; }
  .inv3-meta div { padding: 6px 7px; }
  .inv3-meta small { font-size: 10.5px; white-space: nowrap; }
  .inv3-meta b { font-size: 14px; }
  .inv3-btn .pr { font-size: 12.5px; }
  .inv3-hp-n { font-size: 24px; }
}

.sandbox-map-wrap { position: relative; }
.map-inv-banner { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px);
  padding: 8px 8px 8px 14px; border-radius: 12px; cursor: pointer; color: #efe2bf; background: rgba(22, 20, 40, .92);
  box-shadow: inset 0 0 0 1px rgba(230,207,147,.35), 0 10px 24px -14px rgba(0,0,0,.7); font-size: 12.5px; white-space: nowrap; }
.map-inv-banner:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.mib-dot { width: 8px; height: 8px; border-radius: 50%; background: #f87171; flex: none; animation: mibPing 1.6s infinite; }
.map-inv-banner.is-warn .mib-dot { background: #fbbf24; }
@keyframes mibPing { 0% { box-shadow: 0 0 0 0 rgba(248,113,113,.6); } 70% { box-shadow: 0 0 0 8px rgba(248,113,113,0); } 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); } }
.mib-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.mib-t b { font-weight: 600; color: #fdf2dc; }
.mib-t small { color: #c9b27a; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.mib-t em { font-style: normal; color: #fdf2dc; font-variant-numeric: tabular-nums; }
.mib-go { flex: none; background: linear-gradient(180deg, #f6d58e, #e3b457); color: #3b2506; border-radius: 8px; padding: 6px 12px; font-weight: 500; box-shadow: inset 0 0 0 1px #b8862f; }
@media (max-width: 520px) { .map-inv-banner { top: 72px; gap: 8px; padding: 6px 6px 6px 10px; } .mib-go { padding: 5px 9px; } }

.ivb-overlay { z-index: 9000; }
.ivb-modal { position: relative; width: min(560px, 94vw); border-radius: 16px; overflow: hidden; color: #efe2bf; font-size: 13px; line-height: 1.5;
  background: radial-gradient(90% 120% at 85% 0%, rgba(124,58,237,.32), transparent 60%), radial-gradient(80% 90% at 10% 100%, rgba(154,70,8,.3), transparent 60%), linear-gradient(160deg, #1a1830, #0f0e1d);
  box-shadow: inset 0 0 0 1px rgba(230,207,147,.22), 0 24px 50px -24px rgba(0,0,0,.7); }
.ivb-modal::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6; background:
  radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.6) 60%, transparent 61%), radial-gradient(1px 1px at 38% 70%, rgba(255,255,255,.4) 60%, transparent 61%),
  radial-gradient(1.3px 1.3px at 64% 22%, #f5dfa0 60%, transparent 61%), radial-gradient(1px 1px at 88% 80%, rgba(201,193,245,.7) 60%, transparent 61%); }
.ivb-modal > * { position: relative; }
.ivb-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(230,207,147,.14); }
.ivb-head b { font-size: 15px; font-weight: 600; color: #fdf2dc; }
.ivb-rd { font-size: 12px; color: #c9b27a; }
.ivb-rd em { font-style: normal; color: #fdf2dc; font-variant-numeric: tabular-nums; }
.ivb-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 14px 16px; }
@media (max-width: 520px) { .ivb-stage { grid-template-columns: 1fr; } }
.ivb-me { display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(94,234,212,.2); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.ivb-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ivb-who > div { min-width: 0; display: flex; flex-direction: column; }
.ivb-who b { color: #e6fff6; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivb-who small { color: #8fd8c6; font-size: 11.5px; }
.ivb-hpt { display: flex; justify-content: space-between; font-size: 11.5px; color: #8fd8c6; font-variant-numeric: tabular-nums; }
.ivb-hp { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.ivb-hp i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5eead4, #22d3ee); transition: width .25s; }
.ivb-foe { position: relative; background: rgba(124,58,237,.1); box-shadow: inset 0 0 0 1px rgba(196,181,253,.25); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.ivb-ship { display: block; width: 120px; height: 48px; margin: 0 auto 6px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.ivb-ship svg { width: 100%; height: 100%; display: block; }
.ivb-plates { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.ivb-plates i { height: 10px; border-radius: 2px; background: linear-gradient(180deg, #c084fc, #7c3aed); }
.ivb-plates i.gone { background: rgba(255,255,255,.08); }
.ivb-plates.is-res { max-width: 340px; margin: 12px auto 0; }
.ivb-t { display: flex; justify-content: space-between; font-size: 11.5px; color: #c9c1f5; margin-top: 5px; }
.ivb-t b { color: #fdf2dc; font-variant-numeric: tabular-nums; }
.ivb-floats { position: absolute; left: 0; right: 0; top: 0; height: 60px; pointer-events: none; }
.ivb-float { position: absolute; top: 18px; font-size: 18px; font-weight: 600; color: #fde68a; text-shadow: 0 2px 0 rgba(0,0,0,.5); animation: ivbUp 1.1s ease-out forwards; }
.ivb-float.is-crit { font-size: 22px; color: #fb923c; }
@keyframes ivbUp { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-24px); } }
.ivb-log { margin: 0 16px 12px; border-radius: 10px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px rgba(230,207,147,.1); padding: 4px 10px; height: 132px; overflow-y: auto; font-size: 12.5px; }
.ivb-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.ivb-row span:first-child { color: #8f8aa8; font-variant-numeric: tabular-nums; }
.ivb-row .d { font-variant-numeric: tabular-nums; font-weight: 600; }
.ivb-row.is-out .d { color: #fde68a; }
.ivb-row.is-in .d { color: #fca5a5; }
.ivb-row.is-miss .d { color: #8f8aa8; font-weight: 400; }
.ivb-crit { color: #fb923c; font-weight: 600; margin-left: 4px; }
.ivb-res { padding: 22px 16px 12px; text-align: center; }
.ivb-res small { color: #c9b27a; }
.ivb-big { font-size: 42px; font-weight: 600; color: #fde68a; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ivb-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.ivb-chips span { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(230,207,147,.25); border-radius: 999px; padding: 3px 11px; font-size: 12px; }
.ivb-chips span.is-win { color: #6ee7b7; box-shadow: inset 0 0 0 1px rgba(110,231,183,.4); }
.ivb-chips span.is-dim { color: #9d98b3; box-shadow: none; }
.ivb-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid rgba(230,207,147,.14); }
.ivb-foot .inv3-btn { width: auto; flex: none; padding: 9px 16px; }
.ivb-modal [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .mib-dot, .ivb-float { animation: none; } }

#homePetBox .ht-strip { margin-top: var(--s-4); border-radius: var(--r-lg); padding: 12px 16px; color: #efe9ff;
  background-color: #1a1238;
  background-image: linear-gradient(rgba(182,156,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(182,156,255,.07) 1px, transparent 1px), linear-gradient(120deg, #1a1238, #3a1f6b);
  background-size: 18px 18px, 18px 18px, 100% 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; }

#homePetBox .ht-strip .ht-acts { grid-column: 2; grid-row: 1; }
#homePetBox .ht-strip .ht-mid { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; border-top: 1px solid rgba(182,156,255,.16); padding-top: 9px; }
#homePetBox .ht-strip .ht-mid .ht-pills { margin-top: 0; }
#homePetBox .ht-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#homePetBox .ht-row.nowrap { flex-wrap: nowrap; }
#homePetBox .ht-k { font-size: 11.5px; color: #b9a9e8; letter-spacing: .06em; }
#homePetBox .ht-v { font-size: 16px; font-weight: 600; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#homePetBox .ht-sub { font-size: 12px; color: #b9a9e8; }
#homePetBox .ht-sub b { color: #efe9ff; font-weight: 600; }
#homePetBox .ht-st { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: rgba(182,156,255,.18); color: #cdbcff; }
#homePetBox .ht-st.warn { background: rgba(251,191,36,.18); color: #fcd34d; }
#homePetBox .ht-st.shield { background: rgba(125,211,252,.16); color: #7dd3fc; }
#homePetBox .ht-pets { display: flex; margin-right: 12px; }
#homePetBox .ht-pet { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; margin-right: -7px; border: 2px solid #1a1238; background: #4c3a86; }
#homePetBox .ht-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
#homePetBox .ht-pill { background: rgba(255,255,255,.08); border-radius: 8px; font-size: 12px; padding: 2px 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
#homePetBox .ht-pill b { font-weight: 600; }
#homePetBox .ht-ic { font-style: normal; display: inline-flex; width: 14px; height: 14px; }
#homePetBox .ht-ic svg { width: 14px; height: 14px; }
#homePetBox .ht-acts { display: flex; flex-direction: column; gap: 6px; }
#homePetBox .ht-btn { border: 0; border-radius: 10px; padding: 8px 16px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; background: #b69cff; color: #1a1238; white-space: nowrap; cursor: pointer; }
#homePetBox .ht-btn[disabled] { background: rgba(182,156,255,.22); color: #8f80c0; cursor: default; }
#homePetBox .ht-btn.ghost { background: transparent; color: #efe9ff; border: 1px solid rgba(182,156,255,.45); }
@media (max-width: 920px) {
  #homePetBox .ht-strip, #homePetBox .ht-strip.idle { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #homePetBox .ht-strip .ht-acts { grid-column: 1; grid-row: 3; flex-direction: row; }
  #homePetBox .ht-acts .ht-btn { flex: 1 1 0; }
}

.pg-act-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.pg-act-grid > .home-btn:first-child { grid-column: 1 / -1; }
.pg-act-grid .home-btn { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-tabs { display: flex; gap: 6px; padding: 4px; background: var(--surface-2); border-radius: var(--r-md); margin-bottom: 10px; }
.cp-tabs .cp-tab { flex: 1; border: 0; background: transparent; border-radius: var(--r-sm); padding: 7px 0; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cp-tabs .cp-tab.on { background: var(--surface-1); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 30, 50, .12); }
.cp-live { font-size: 11px; font-weight: 500; padding: 1px 6px; margin-left: 5px; border-radius: 999px; background: rgba(22, 163, 74, .12); color: #16a34a; }
.cp-buy { border: 1px dashed var(--line-1); border-radius: var(--r-md); padding: 16px; text-align: center; }
.cp-buy-t { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.cp-buy-li { font-size: 12.5px; color: var(--muted); margin: 2px 0; }
.cp-buy-li b { color: var(--ink); }
.cp-buy-btn { margin-top: 12px; min-width: 220px; }
@media (max-width: 720px) { .cp-buy-btn { min-width: 0; width: 100%; } }

.scp-box { max-width: 520px; }
.scp-sub { color: var(--muted); font-size: 13px; margin: 4px 0 10px; }
.scp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 56vh; overflow-y: auto; }
.scp-item { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--surface-1); padding: 8px 10px; cursor: pointer; font-family: inherit; }
.scp-item:hover, .scp-item:focus-visible { border-color: #8b7cf6; }
.scp-ic { grid-row: 1 / 3; font-size: 22px; line-height: 1; text-align: center; }
.scp-item b { font-size: 13.5px; color: var(--ink-1); }
.scp-item small { font-size: 12px; color: var(--muted); }
@media (max-width: 520px) { .scp-list { grid-template-columns: 1fr; } }

.gc2.has-wear .gc2-extra { overflow: visible; position: static; }   
.gc2 .gc2-wear { width: 100%; height: 28px; border: 0; border-radius: 8px; padding: 0 6px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255,255,255,.94); color: #1f2937; box-shadow: 0 1px 0 rgba(0,0,0,.18); }
.gc2.q-orange .gc2-wear { color: #7c2d12; }
.gc2 .gc2-wear em { font-style: normal; font-weight: 600; }
.gc2 .gc2-wear em.up { color: #15803d; }
.gc2 .gc2-wear em.down { color: #b91c1c; }
.gc2 .gc2-wear em.same { color: #64748b; }
.gc2 .gc2-wear:hover:not([disabled]) { background: #fff; }
.gc2 .gc2-wear:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
.gc2 .gc2-wear[disabled] { opacity: .5; cursor: not-allowed; }
.gc2 .gc2-owner-tag { position: absolute; left: 50%; top: 68px; transform: translateX(-50%); max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 10px; font-weight: 600; line-height: 16px; padding: 0 7px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fde68a; pointer-events: none; }

.chip-card.pcb, .chip-card.pcb-empty { aspect-ratio: 5 / 7; }
.chip-card.pcb { border: 0; padding: 22px 9px 6px; justify-content: flex-start; overflow: hidden; color: #fff; container-type: inline-size;
  box-shadow: inset 0 0 0 1.5px #8b94a3, 0 2px 6px -3px rgba(0,0,0,.45); }
.chip-card.pcb .cc-bg { background:
  repeating-linear-gradient(90deg, transparent 0 13px, rgba(148,163,184,.12) 13px 14px),
  repeating-linear-gradient(0deg, transparent 0 17px, rgba(148,163,184,.10) 17px 18px),
  linear-gradient(165deg, #2e3644, #11151c); }
.chip-card.pcb .cc-pins { position: absolute; top: 24%; bottom: 32%; width: 4px; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, #9aa3b1 0 3px, transparent 3px 7px); }
.chip-card.pcb .cc-pins.l { left: 2px; }
.chip-card.pcb .cc-pins.r { right: 2px; }
.chip-card.pcb .cc-tag { position: absolute; top: 5px; left: 5px; z-index: 3; font-size: 9px; font-weight: 600; line-height: 1;
  padding: 3px 5px; border-radius: 4px; background: rgba(0,0,0,.45); color: #cbd5e1; box-shadow: inset 0 0 0 1px rgba(154,163,177,.55); }
.chip-card.pcb .cc-n { top: 5px; right: 5px; min-width: 0; height: auto; padding: 3px 4px; line-height: 1; border-radius: 4px;
  font: 700 9.5px/1 ui-monospace, "SF Mono", Menlo, monospace; background: #0b0e13; color: #e5e7eb; box-shadow: inset 0 0 0 1px #9aa3b1; }
.chip-card.pcb .cc-body { display: flex; flex-direction: column; align-items: center; min-width: 0; width: 100%; }
.chip-card.pcb .cc-die { width: 48%; aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: clamp(16px, 25cqw, 32px); line-height: 1; margin: 2px 0 6px;   
  background: linear-gradient(145deg, #4b5563, #1f2937); box-shadow: inset 0 0 0 1.5px #9aa3b1, 0 0 0 3px rgba(0,0,0,.35); }
.chip-card.pcb .cc-die .gear-pix, .chip-card.pcb .cc-die .pix-icon { width: 70%; height: 70%; }
.chip-card.pcb .cc-nm { margin-top: 0; max-width: 100%; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-card.pcb .cc-eff { max-width: 100%; font-size: 10px; line-height: 1.3; color: #cbd5e1; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }   
.chip-card.pcb .cc-slot { font-size: 9px; color: rgba(255,255,255,.45); margin-top: 1px; }
.chip-card.pcb .cc-act { margin-top: auto; padding: 0; height: 20px; line-height: 20px; font-size: 10px; border-radius: 5px; border: 0;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.chip-card.pcb .cc-act.go { background: rgba(56,189,248,.28); box-shadow: inset 0 0 0 1px rgba(125,211,252,.6); }
.chip-card.pcb .cc-act.go:hover { background: rgba(56,189,248,.42); }
.chip-card.pcb .cc-act.go.is-short { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); color: rgba(255,255,255,.7); }
.chip-card.pcb .cc-act.done { color: rgba(255,255,255,.5); background: rgba(255,255,255,.05); }

.chip-card.pcb.adv { box-shadow: inset 0 0 0 1.5px #e0a526, 0 4px 12px -6px rgba(217,119,6,.8); }
.chip-card.pcb.adv .cc-bg { background:
  repeating-linear-gradient(90deg, transparent 0 13px, rgba(252,211,77,.14) 13px 14px),
  repeating-linear-gradient(0deg, transparent 0 17px, rgba(252,211,77,.10) 17px 18px),
  linear-gradient(165deg, #3a2a0c, #140d03); }
.chip-card.pcb.adv .cc-pins { background: repeating-linear-gradient(0deg, #f2c14e 0 3px, transparent 3px 7px); }
.chip-card.pcb.adv .cc-die { background: linear-gradient(145deg, #b7791f, #5c3a08); box-shadow: inset 0 0 0 1.5px #fcd34d, 0 0 0 3px rgba(0,0,0,.35), 0 0 14px rgba(251,191,36,.4); }
.chip-card.pcb.adv .cc-tag { color: #fcd34d; box-shadow: inset 0 0 0 1px rgba(242,193,78,.7); }
.chip-card.pcb.adv .cc-n { color: #fde68a; box-shadow: inset 0 0 0 1px #e0a526; }
.chip-card.pcb.adv .cc-nm { color: #fde68a; }
.chip-card.pcb.adv .cc-eff { color: #fbbf24; }
.chip-card.pcb.innate { box-shadow: inset 0 0 0 2.5px #f2c14e, 0 0 16px rgba(245,158,11,.45); }

.chip-card.pcb.alien { box-shadow: inset 0 0 0 1.5px #2dd4bf, 0 4px 12px -6px rgba(13,148,136,.8); }
.chip-card.pcb.alien .cc-bg { background:
  repeating-linear-gradient(90deg, transparent 0 13px, rgba(94,234,212,.14) 13px 14px),
  repeating-linear-gradient(0deg, transparent 0 17px, rgba(94,234,212,.10) 17px 18px),
  linear-gradient(165deg, #0d3b3a, #031213); }
.chip-card.pcb.alien .cc-pins { background: repeating-linear-gradient(0deg, #5eead4 0 3px, transparent 3px 7px); }
.chip-card.pcb.alien .cc-die { background: linear-gradient(145deg, #0f766e, #083b38); box-shadow: inset 0 0 0 1.5px #5eead4, 0 0 0 3px rgba(0,0,0,.35), 0 0 14px rgba(45,212,191,.4); }
.chip-card.pcb.alien .cc-tag { color: #5eead4; box-shadow: inset 0 0 0 1px rgba(94,234,212,.6); }
.chip-card.pcb.alien .cc-n { color: #ccfbf1; box-shadow: inset 0 0 0 1px #2dd4bf; }
.chip-card.pcb.alien .cc-nm { color: #ccfbf1; }
.chip-card.pcb.alien .cc-eff { color: #5eead4; }
html.theme-dark .chip-card.pcb .cc-eff { color: #cbd5e1; }
html.theme-dark .chip-card.pcb.adv .cc-eff { color: #fbbf24; }
html.theme-dark .chip-card.pcb.alien .cc-eff { color: #5eead4; }

@media (max-width: 620px) {
  .chip-card.pcb { padding: 20px 7px 5px; }
  .chip-card.pcb .cc-die { width: 44%; margin-bottom: 4px; font-size: clamp(15px, 22cqw, 26px); }
  .chip-card.pcb .cc-act { height: 18px; line-height: 18px; }
}

.gxr-front.is-chip { padding: 0; gap: 0; background: none; box-shadow: none; display: block; }
.gxr-front.is-chip .chip-card.pcb { width: 100%; height: 100%; aspect-ratio: auto; cursor: inherit; }
.gxr-front.is-chip .chip-card.pcb .cc-die { width: 42%; margin-top: 8px; }

.ik-tabs { display: flex; margin: 10px 0 0; border-bottom: 1px solid var(--border-subtle, #e5e8ef); }
.ik-tabs button { flex: 1; border: 0; background: none; padding: 8px 0 9px; font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--text-muted, #8a93a3); cursor: pointer; position: relative; }
.ik-tabs button em { font-style: normal; font-size: 11px; margin-left: 3px; color: var(--text-muted, #8a93a3); font-variant-numeric: tabular-nums; }
.ik-tabs button.on { color: var(--text-main, #1f2633); font-weight: 600; }
.ik-tabs button.on::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand, #d9363e); }
.ik-tabs button:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; border-radius: 6px; }
.ik-panes { height: min(300px, 46vh); overflow-y: auto; overscroll-behavior: contain; padding: 10px 2px 2px; margin-bottom: 10px; }
.ik-pane { display: none; }
.ik-pane.on { display: block; }
.ik-pane .ik-quick { margin-bottom: 8px; }
.ik-sec { font-size: 12px; color: var(--text-muted, #8a93a3); margin: 10px 0 6px; }
.ik-pane > .ik-sec:first-child { margin-top: 0; }
.ik-pane .ik-sell { margin: 0; }
.ik-pane .ik-sell-act .home-btn[hidden] { display: none; }
#eqMaterialModalOverlay .ik-sum { margin-bottom: 0; }

.rsh { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; margin-top: 10px; }
.rsh-shaft { display: flex; flex-direction: column; gap: 5px; }
.rsh-seg { border: 1px solid var(--line-1, #e2e8f0); border-radius: 10px; background: var(--surface-2, #f8fafc); }
.rsh-seg-hd { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 8px;
  align-items: center; padding: 7px 10px; cursor: pointer; border-radius: 10px; }
.rsh-seg-hd:focus-visible { outline: 2px solid var(--brand, #d22730); outline-offset: 1px; }
.rsh-seg-nm { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.rsh-seg-nm b { font-size: 13px; font-weight: 600; color: var(--ink-1, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsh-seg-nm small { font-size: 11.5px; color: var(--ink-5, #64748b); }
.rsh-mark { font-size: 12px; color: var(--ink-5, #64748b); white-space: nowrap; min-width: 14px; text-align: right; }
.rsh-mark.ok { color: var(--success-text, #15803d); }
.rsh-mark.here { color: var(--ink-1, #0f172a); font-weight: 700; font-variant-numeric: tabular-nums; }
.rsh-seg.t1 { --rsh-here: #94a3b8; } .rsh-seg.t2 { --rsh-here: #22c55e; } .rsh-seg.t3 { --rsh-here: #0ea5e9; }
.rsh-seg.t4 { --rsh-here: #6366f1; } .rsh-seg.t5 { --rsh-here: #a855f7; } .rsh-seg.t6 { --rsh-here: #e11d48; } .rsh-seg.t7 { --rsh-here: #f59e0b; }
.rsh-seg.locked { opacity: .55; }
.rsh-seg.peek { border-color: var(--ink-4, #475569); box-shadow: 0 0 0 1px var(--ink-4, #475569) inset; }
.rsh-seg.here { border-color: var(--rsh-here, #e11d48); box-shadow: 0 0 0 1px var(--rsh-here, #e11d48) inset;
  background: var(--bg-card, #fff); padding-bottom: 8px; }
.rsh-gauge { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 0 8px; }
.rsh-cell { font: inherit; font-size: 11px; font-variant-numeric: tabular-nums; height: 22px; border-radius: 5px; border: 0;
  cursor: pointer; background: var(--surface-3, #f1f5f9); color: var(--ink-5, #64748b); }
.rsh-cell.ok { background: color-mix(in srgb, var(--success-solid, #16a34a) 30%, transparent); color: var(--ink-2, #1e293b); }
.rsh-cell.mid { background: color-mix(in srgb, var(--warn-solid, #f59e0b) 38%, transparent); color: var(--ink-2, #1e293b); }
.rsh-cell.no { background: color-mix(in srgb, var(--danger-solid, #dc2626) 22%, transparent); color: var(--ink-3, #334155); }
.rsh-cell.cur { outline: 2px solid var(--ink-1, #0f172a); outline-offset: -2px; font-weight: 700; color: var(--ink-1, #0f172a); }
.rsh-cell:focus-visible { outline: 2px solid var(--brand, #d22730); }
.rsh-tb { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 18px; padding: 0 5px;
  border-radius: 5px; font-size: 11px; font-weight: 700; color: #fff; background: #94a3b8; vertical-align: middle; }
.rsh-tb.t1 { background: #94a3b8; } .rsh-tb.t2 { background: #22c55e; } .rsh-tb.t3 { background: #0ea5e9; }
.rsh-tb.t4 { background: #6366f1; } .rsh-tb.t5 { background: #a855f7; } .rsh-tb.t6 { background: #e11d48; } .rsh-tb.t7 { background: #f59e0b; }
.rsh-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rsh-auto { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--line-1, #e2e8f0); background: var(--surface-2, #f8fafc); font-size: 13px; color: var(--ink-3, #334155); }
.rsh-auto.warn { background: var(--warn-soft, #fffbeb); border-color: var(--warn-line, #fde68a); }
.rsh-auto.bad { background: var(--danger-soft, #fef2f2); border-color: var(--danger-line, #fecaca); }
.rsh-auto-msg { margin-right: auto; min-width: 0; }
.rsh-auto .home-btn { white-space: nowrap; flex: 0 0 auto; }
.rsh-step { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line-1, #e2e8f0); background: var(--surface-2, #f8fafc); }
.rsh-pm { width: 36px; height: 36px; padding: 0; font-size: 18px; font-weight: 500; flex: 0 0 auto; }
.rsh-step-mid { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.rsh-big { font-size: 28px; font-weight: 800; line-height: 1; color: var(--ink-1, #0f172a); font-variant-numeric: tabular-nums; }
.rsh-big small { font-size: 13px; font-weight: 500; color: var(--ink-5, #64748b); margin-left: 3px; }
.rsh-sub { font-size: 12px; color: var(--ink-5, #64748b); margin-top: 3px; }
.rsh-kv { display: flex; gap: 18px; font-size: 12px; color: var(--ink-5, #64748b); white-space: nowrap; }
.rsh-kv b { display: block; font-size: 16px; color: var(--ink-1, #0f172a); font-variant-numeric: tabular-nums; }
.rsh-loot { display: flex; flex-direction: column; gap: 8px; }
.rsh-sect { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3, #334155); }
.rsh-aside { font-weight: 400; font-size: 12px; color: var(--ink-5, #64748b); }
.rsh-ramp { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-5, #64748b); font-variant-numeric: tabular-nums; }
.rsh-track { flex: 1; height: 6px; border-radius: 3px; position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rsh-c, #e11d48) 22%, transparent), var(--rsh-c, #e11d48)); }
.rsh-track.t1 { --rsh-c: #94a3b8; } .rsh-track.t2 { --rsh-c: #22c55e; } .rsh-track.t3 { --rsh-c: #0ea5e9; }
.rsh-track.t4 { --rsh-c: #6366f1; } .rsh-track.t5 { --rsh-c: #a855f7; } .rsh-track.t6 { --rsh-c: #e11d48; } .rsh-track.t7 { --rsh-c: #f59e0b; }
.rsh-track i { position: absolute; top: -4px; width: 3px; height: 14px; margin-left: -1px; border-radius: 2px; background: var(--ink-1, #0f172a); }
.rsh-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rsh-it { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 8px 6px;
  border: 1px solid var(--line-1, #e2e8f0); border-radius: 10px; background: var(--surface-2, #f8fafc); }
.rsh-pic { width: 36px; height: 36px; display: grid; place-items: center; font-size: 20px; }
.rsh-pic svg { width: 32px; height: 32px; image-rendering: pixelated; }
.rsh-it-n { font-size: 12px; color: var(--ink-2, #1e293b); line-height: 1.3; }
.rsh-it-q { font-size: 11px; color: var(--ink-5, #64748b); }
@media (max-width: 760px) {
  .rsh { grid-template-columns: 1fr; }
  .rsh-shaft { display: grid; grid-template-columns: 1fr 1fr; }
  .rsh-seg.here { grid-column: 1 / -1; order: -1; }
  .rsh-seg-hd { gap: 6px; padding: 6px 8px; }
  .rsh-seg-nm b { white-space: normal; overflow: visible; font-size: 12.5px; }
  .rsh-seg-nm small { white-space: nowrap; }
  
  .rsh-step { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; row-gap: 8px; }
  .rsh-step-mid { margin-right: 0; align-items: center; text-align: center; }
  .rsh-sub { white-space: nowrap; }
  .rsh-kv { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 28px; }
  .rsh-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bm2 { display: flex; flex-direction: column; gap: 14px; }
.bm2-card { border: 1px solid var(--line-1, #e2e8f0); border-radius: 12px; background: var(--bg-card, #fff); padding: 14px 16px; }
.bm2-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: nowrap; }
.bm2-hd > b { font-size: 15px; color: var(--ink-1, #0f172a); white-space: nowrap; }
.bm2-hd-aside { margin-left: auto; font-size: 12.5px; color: var(--ink-5, #64748b); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bm2-info { width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--surface-3, #f1f5f9); color: var(--ink-5, #64748b);
  font: italic 600 12px/22px Georgia, serif; cursor: pointer; flex: 0 0 auto; }
.bm2-info[aria-expanded="true"] { background: var(--ink-1, #0f172a); color: #fff; }
.bm2-rules { font-size: 12.5px; line-height: 1.7; color: var(--ink-4, #475569); background: var(--surface-2, #f8fafc);
  border-radius: 8px; padding: 8px 12px; margin: -4px 0 10px; }
.bm2-block { font-size: 12.5px; color: var(--warn-text, #b45309); background: var(--warn-soft, #fffbeb);
  border: 1px solid var(--warn-line, #fde68a); border-radius: 8px; padding: 7px 12px; margin-bottom: 10px; }
.bm2-sell { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.bm2-field { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-4, #475569); white-space: nowrap; }
.bm2-field input { width: 76px; font: inherit; font-variant-numeric: tabular-nums; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--line-2, #cbd5e1); background: var(--bg-card, #fff); color: var(--ink-1, #0f172a); }
.bm2-field em { font-style: normal; color: var(--ink-5, #64748b); }
.bm2-preview { font-size: 12.5px; color: var(--ink-5, #64748b); justify-self: end; text-align: right; font-variant-numeric: tabular-nums; }
.bm2-preview b { color: var(--ink-1, #0f172a); }
.bm2-btn { min-width: 72px; white-space: nowrap; }

.bm2-row { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(0, 1.2fr) 96px 168px; gap: 12px; align-items: center;
  padding: 9px 4px; border-top: 1px solid var(--line-1, #e2e8f0); font-size: 13.5px; min-height: 50px; }
.bm2-head { font-size: 12px; color: var(--ink-5, #64748b); border-top: 0; min-height: 0; padding-top: 0; }
.bm2-price { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--ink-1, #0f172a); }
.bm2-conv { color: var(--ink-5, #64748b); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bm2-left { text-align: right; }
.bm2-act { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: nowrap; }
.bm2-qty { width: 52px; font: inherit; text-align: center; padding: 5px 4px; border-radius: 8px;
  border: 1px solid var(--line-2, #cbd5e1); background: var(--bg-card, #fff); color: var(--ink-1, #0f172a); }
.bm2-tag { font-size: 11px; border-radius: 999px; padding: 1px 8px; margin-left: 4px; white-space: nowrap; }
.bm2-tag.best { background: var(--success-soft, #f0fdf4); color: var(--success-text, #15803d); }
.bm2-tag.mine { background: var(--surface-3, #f1f5f9); color: var(--ink-4, #475569); }
.bm2-row.is-mine { background: var(--surface-2, #f8fafc); }
.bm2-empty { padding: 18px 4px; text-align: center; color: var(--ink-5, #64748b); border-top: 1px solid var(--line-1, #e2e8f0); }
@media (max-width: 760px) {
  
  .bm2-hd { flex-wrap: wrap; row-gap: 4px; }
  .bm2-hd-aside { order: 3; width: 100%; margin-left: 0; white-space: normal; }
  .bm2-info { margin-left: auto; }
  .bm2-sell { grid-template-columns: minmax(0, 1fr) auto; }
  .bm2-field { grid-column: 1 / -1; }
  .bm2-field span { min-width: 2.2em; }
  .bm2-field input { flex: 1 1 auto; width: auto; min-width: 0; }
  .bm2-field em { min-width: 4.6em; }
  .bm2-preview { grid-column: 1; justify-self: start; text-align: left; }
  .bm2-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .bm2-conv { display: none; }
  .bm2-act { grid-column: 1 / -1; }
  .bm2-head .bm2-left, .bm2-head .bm2-act { display: none; }
}

.raid-rp-verdict { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none;
  background: rgba(15, 23, 42, .9); color: #fff; border-radius: 12px; padding: 10px 22px; text-align: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .25); animation: raidVerdictIn .18s ease-out; }
.raid-rp-verdict b { display: block; font-size: 18px; letter-spacing: .08em; }
.raid-rp-verdict.win b { color: #4ade80; } .raid-rp-verdict.loss b { color: #f87171; }
.raid-rp-verdict small { display: block; margin-top: 2px; font-size: 12.5px; color: #cbd5e1; white-space: nowrap; }
@keyframes raidVerdictIn { from { opacity: 0; transform: translate(-50%, -44%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .raid-rp-verdict { animation: none; } }

.raid-cp-sup { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; letter-spacing: 0;
  font-size: 11.5px; font-weight: 500; color: #b45309; background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .45);
  vertical-align: 1px; cursor: help; }

.bm3-sell { grid-template-columns: auto auto auto auto auto minmax(0, 1fr) auto; }
.bm3-sell .bm2-field input.bm3-coins { width: 132px; }
.bm3-sell .bm2-preview { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin-top: -4px; }
.bm3-op { color: var(--ink-5, #64748b); font-size: 15px; }
.bm3-sell > .bm2-btn { grid-column: 7; grid-row: 1; justify-self: end; }
.bm3-pill { display: inline-flex; align-items: center; white-space: nowrap; font-size: 13px; font-weight: 600;
  color: #92400e; background: #fef3c7; border-radius: 8px; padding: 6px 10px; }
.bm3-row { grid-template-columns: minmax(150px, 1.2fr) minmax(0, .8fr) 96px 196px; }
.bm2-step { display: inline-flex; align-items: center; border: 1px solid var(--line-2, #cbd5e1); border-radius: 8px; overflow: hidden; }
.bm2-step button { border: 0; background: var(--surface-2, #f8fafc); color: var(--ink-2, #1e293b); width: 28px; height: 30px; font: 600 15px/1 inherit; cursor: pointer; }
.bm2-step button:hover { background: var(--surface-3, #f1f5f9); }
.bm2-step .bm2-qty { border: 0; border-inline: 1px solid var(--line-2, #cbd5e1); border-radius: 0; width: 46px; -moz-appearance: textfield; }
.bm2-step .bm2-qty::-webkit-outer-spin-button, .bm2-step .bm2-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
[data-theme="dark"] .bm3-pill { color: #fcd34d; background: rgba(245, 158, 11, .16); }
@media (max-width: 760px) {
  .bm3-sell { grid-template-columns: minmax(0, 1fr) auto; }
  .bm3-sell .bm2-field input.bm3-coins { width: auto; }
  .bm3-op { display: none; }
  .bm3-sell > .bm2-btn { grid-column: 2; grid-row: auto; }
  .bm3-pill { grid-column: 1 / -1; justify-self: start; }
  .bm3-sell .bm2-preview { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .bm3-row { grid-template-columns: minmax(0, 1fr) auto; }
}

.lmk-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-1, #e2e8f0); flex-wrap: wrap; }
.lmk-seg { display: inline-flex; background: var(--surface-3, #f1f5f9); border-radius: 10px; padding: 3px; }
.lmk-seg button { border: 0; background: transparent; padding: 5px 14px; border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--ink-5, #64748b); cursor: pointer; white-space: nowrap; }
.lmk-seg button em { font-style: normal; font-size: 12px; margin-left: 2px; opacity: .8; }
.lmk-seg button.on { background: var(--bg-card, #fff); color: var(--ink-1, #0f172a); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.lmk-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lmk-chip { border: 1px solid var(--line-1, #e2e8f0); background: var(--bg-card, #fff); border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 12.5px; color: var(--ink-5, #64748b); cursor: pointer; white-space: nowrap; }
.lmk-chip.on { border-color: var(--ink-1, #0f172a); color: var(--ink-1, #0f172a); font-weight: 600; }
.lmk-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.lmk-sort { font: inherit; font-size: 13px; border: 1px solid var(--line-2, #cbd5e1); border-radius: 8px; padding: 5px 8px; background: var(--bg-card, #fff); color: var(--ink-2, #1e293b); }
.lmk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.lmk-card { border: 1px solid var(--line-1, #e2e8f0); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-card, #fff); }
.lmk-card.is-mine { outline: 2px solid var(--surface-3, #f1f5f9); }
.lmk-top { background: var(--lmk-soft, #f1f5f9); padding: 14px 12px 10px; display: flex; align-items: flex-start; justify-content: space-between; }
.lmk-ico { font-size: 34px; line-height: 1; }
.lmk-no { font-size: 12px; font-weight: 600; color: var(--lmk-ink, #475569); font-variant-numeric: tabular-nums; }
.lmk-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.lmk-name { font-size: 15px; color: var(--ink-1, #0f172a); }
.lmk-meta { font-size: 12.5px; color: var(--ink-5, #64748b); }
.lmk-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.lmk-price { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; color: var(--ink-1, #0f172a); white-space: nowrap; }
.lmk-btn { white-space: nowrap; min-width: 64px; }
.lmk-state { font-size: 12px; color: var(--ink-5, #94a3b8); }
.lmk-pager { display: flex; gap: 8px; align-items: center; padding: 10px 14px; }
.lmk-t-forest { --lmk-soft: #e7f4ea; --lmk-ink: #2f7d4a; }
.lmk-t-grassland { --lmk-soft: #f0f6e1; --lmk-ink: #5f8a14; }
.lmk-t-mine { --lmk-soft: #eceef2; --lmk-ink: #5b6472; }
.lmk-t-lava { --lmk-soft: #fdebe1; --lmk-ink: #c2410c; }
.lmk-t-riverside { --lmk-soft: #e3f0fb; --lmk-ink: #1d6fb8; }
.lmk-t-spirit_vein { --lmk-soft: #f1e8fb; --lmk-ink: #7a3fc4; }
[data-theme="dark"] .lmk-top { filter: brightness(.55) saturate(1.2); }
@media (max-width: 760px) {
  .lmk-bar { gap: 8px; }
  .lmk-chips { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .lmk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lmk-foot { flex-wrap: wrap; }
  .lmk-btn { width: 100%; }
}

.exb-sec { display: flex; flex-direction: column; gap: 8px; }
.exb-sec + .exb-sec { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-1, #e2e8f0); }
.exb-sh { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-1, #0f172a); }
.exb-cnt { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--ink-5, #64748b); background: var(--surface-3, #f1f5f9); border-radius: 999px; padding: 0 8px; }
.ex-catalog-fold .exb-sec:first-of-type { margin-top: 10px; }

.exb .pg-body { display: flex; flex-direction: column; gap: 10px; }
.exb-rows { display: flex; flex-direction: column; }
.exb-row { display: grid; grid-template-columns: 30px minmax(130px, 170px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 2px; border-top: 1px solid var(--line-1, #e2e8f0); }
.exb-row:first-child { border-top: 0; }
.exb-ico { font-size: 22px; text-align: center; }
.exb-name { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.exb-name em, .exb-charm em { font-style: normal; color: var(--ink-5, #64748b); font-size: 12.5px; }
.exb-info { font-size: 13px; color: var(--ink-3, #334155); }
.exb-warn { color: var(--warn-text, #b45309); }
.exb-mute { color: var(--ink-5, #64748b); font-size: 12.5px; }
.exb-acts { display: inline-flex; gap: 6px; justify-content: flex-end; }
.exb-btn { min-width: 64px; white-space: nowrap; }
.exb-ghost { visibility: hidden; }
.exb-charms { border-top: 1px dashed var(--line-1, #e2e8f0); padding-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.exb-charms-hd { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--ink-2, #1e293b); }
.exb-charm { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; border: 1px solid var(--line-1, #e2e8f0); border-radius: 10px; padding: 6px 8px; }
.exb-overflow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--surface-2, #f8fafc); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
@media (max-width: 760px) {
  .exb-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .exb-info { grid-column: 2 / -1; grid-row: 2; }
  .exb-acts { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
  .exb-ghost { display: none; }
}

.home-btn.land-buff-pick { height: auto !important; min-height: 44px; padding: 8px 12px; white-space: normal; line-height: 1.45; }
.home-btn.land-buff-pick .lbp-fee { margin-top: 4px; }

.home-btn.land-buff-pick + .home-btn.land-buff-pick { margin-left: 0; }

.chat-titles-full { display: inline-flex; align-items: center; gap: var(--s-4, 6px); flex-shrink: 0; }
.chat-titles-chip { display: none; }
@media (max-width: 620px) {
  .chat-meta { min-width: 0; }
  .chat-meta .chat-titles-full { display: none; }
  .chat-meta .chat-titles-chip { display: inline-flex; align-items: center; gap: 1px; flex-shrink: 0; padding: 0 5px; border-radius: 5px;
    font-size: 11.5px; line-height: 18px; font-weight: 700; background: rgba(148,163,184,.16); }
  .chat-meta .chat-vip-stack { flex-shrink: 0; }
  .chat-meta .chat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-meta .chat-level-plain { flex-shrink: 0; font-size: 11px; }
  .chat-meta .chat-time { margin-left: auto; flex-shrink: 0; font-size: 11px; white-space: nowrap; }
}

.ck2 .ck2-streak { font-size: 12.5px; color: var(--text-muted, #64748b); }
.ck2 .ck2-streak b { color: #d97706; font-variant-numeric: tabular-nums; }
.ck2-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ck2-day { position: relative; border-radius: 10px; padding: 6px 2px 6px; text-align: center; background: var(--bg-primary, #f1f5f9); border: 1px solid var(--border-subtle, #e2e8f0); min-width: 0; }
.ck2-day em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted, #64748b); }
.ck2-day i { display: block; font-style: normal; font-size: 20px; line-height: 1.3; }
.ck2-day b { display: block; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck2-day small { display: block; font-size: 10px; color: var(--text-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ck2-day.done { background: #dcfce7; border-color: #86efac; }
.ck2-day.done::after { content: "✓"; position: absolute; top: 2px; right: 5px; font-size: 11px; color: #16a34a; font-weight: 700; }
.ck2-day.today { border: 2px solid #f59e0b; background: #fffbeb; }
.ck2-day.miss { opacity: .55; }
.ck2-day.sun:not(.done) { background: linear-gradient(160deg, #fee2e2, #fff1f2); }
.ck2-stage { position: relative; margin-top: 12px; border-radius: 14px; padding: 16px 12px 12px; min-height: 280px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 55%, #2a0a10, #07030a 75%); }
.ck2-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); justify-content: center; gap: 12px; }
.ck2-card { position: relative; display: block; aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; perspective: 800px; font: inherit; color: inherit;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.ck2-card:disabled { cursor: default; }
.ck2-card:focus-visible { outline: 2px solid #f59e0b; outline-offset: 3px; border-radius: 12px; }
.ck2-sh, .ck2-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.ck2-in { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ck2-face { position: absolute; inset: 0; border-radius: 11px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden; }

.ck2-back { border: 2px solid rgba(251,191,36,.55); background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px), linear-gradient(160deg, #3b1017, #1a0a0e); box-shadow: 0 0 12px rgba(251,191,36,.18); }
.ck2-back::after { content: ""; position: absolute; inset: 7px; border-radius: 7px; border: 1px dashed rgba(255,255,255,.18); }
.ck2-back i { font-style: normal; font-size: 24px; color: rgba(253,230,138,.65); }
.ck2-card:not(:disabled):hover .ck2-back { filter: brightness(1.2); }
.ck2-front { transform: rotateY(180deg); border: 2px solid var(--qc); color: #f8fafc; background: radial-gradient(90% 70% at 50% 35%, var(--qg), transparent 70%), linear-gradient(160deg, #1e293b, #0b1220); }
.ck2-front i { font-style: normal; font-size: 30px; line-height: 1.2; }
.ck2-front b { font-size: 13px; font-weight: 600; text-align: center; padding: 0 4px; }
.ck2-front small { font-size: 11.5px; color: var(--qc); }
.ck2-front.q-w { --qc: #9ca3af; --qg: rgba(156,163,175,.35); }
.ck2-front.q-b { --qc: #60a5fa; --qg: rgba(59,130,246,.4); }
.ck2-front.q-p { --qc: #c084fc; --qg: rgba(168,85,247,.45); }
.ck2-front.q-g { --qc: #fbbf24; --qg: rgba(245,158,11,.55); }
.ck2-card.is-open .ck2-in { transform: rotateY(180deg); }
.ck2-card.is-other { opacity: .55; filter: grayscale(.5); }
.ck2-card.is-picked .ck2-front { box-shadow: 0 0 22px var(--qc); }
.ck2-foot { position: relative; z-index: 6; margin-top: 14px; text-align: center; font-size: 13px; color: #e2e8f0; transition: transform .45s; }
.ck2-foot b { color: #fde68a; font-weight: 600; }

.ck2-stage.is-go .ck2-card:not(.is-picked) { opacity: 0; transform: scale(.8); }
.ck2-stage.is-go .ck2-card.is-picked { z-index: 4; }
.ck2-stage.is-go { min-height: 320px; }
.ck2-stage.is-go .ck2-card.is-picked .ck2-sh { animation: ck2Charge .7s ease-in-out .45s infinite; }
.ck2-stage.is-flip .ck2-card.is-picked .ck2-sh { animation: none; }
.ck2-stage.is-go .ck2-foot { opacity: 0; }
.ck2-stage.is-flip .ck2-card.is-picked .ck2-in { transform: rotateY(180deg); }
.ck2-stage[data-q="w"] { --hc: #9ca3af; } .ck2-stage[data-q="b"] { --hc: #3b82f6; } .ck2-stage[data-q="p"] { --hc: #a855f7; } .ck2-stage[data-q="g"] { --hc: #f59e0b; }
.ck2-burst { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; z-index: 1; opacity: 0; pointer-events: none; background: radial-gradient(circle, var(--hc, #ef4444) 0, transparent 70%); }
.ck2-rays { position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; margin: -190px; z-index: 1; opacity: 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--hc, #ef4444) 0 5deg, transparent 5deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); }
.ck2-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 5; pointer-events: none; }
.ck2-stage.is-flip .ck2-burst { animation: ck2Burst .8s ease-out both; }
.ck2-stage.is-flip .ck2-rays { animation: ck2Rays 3s linear both; }
.ck2-stage.is-flip[data-q="g"] .ck2-flash { animation: ck2Flash .5s ease-out both; }
@keyframes ck2Charge { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-3deg) scale(1.03); } 40% { transform: rotate(3deg) scale(1.05); } 60% { transform: rotate(-4deg) scale(1.07); } 80% { transform: rotate(4deg) scale(1.09); } }
@keyframes ck2Burst { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(40); } }
@keyframes ck2Rays { 0% { opacity: 0; transform: rotate(0); } 15% { opacity: .5; } 100% { opacity: .35; transform: rotate(60deg); } }
@keyframes ck2Flash { 0% { opacity: 0; } 25% { opacity: .8; } 100% { opacity: 0; } }

.ck2-chest { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-radius: 12px; padding: 10px 12px; font-size: 13px;
  background: linear-gradient(90deg, #fff1f2, #fff7ed); border: 1px solid #fecaca; }
.ck2-chest > i { font-style: normal; font-size: 22px; }
.ck2-chest b { color: #b91c1c; }
.ck2-chest-btn { margin-left: auto; border: 0; border-radius: 10px; padding: 8px 16px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: #fff; cursor: pointer; background: linear-gradient(160deg, #dc2626, #991b1b); box-shadow: 0 4px 12px -4px rgba(220,38,38,.6); }
.ck2-chest-btn:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }

.ck2-chest-ov { position: fixed; inset: 0; z-index: 10050;    display: flex; align-items: center; justify-content: center; background: rgba(5,3,8,.72); }
.ck2-chest-stage { position: relative; width: min(420px, 92vw); height: 340px; border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(70% 60% at 50% 60%, #2a0a10, #07030a 75%); }
.ck2-chest-ov.t-lo { --c: #b91c1c; --bw: 50px; } .ck2-chest-ov.t-hi { --c: #f87171; --bw: 70px; } .ck2-chest-ov.t-gold { --c: #fbbf24; --bw: 90px; } .ck2-chest-ov.t-top { --c: #f59e0b; --bw: 120px; }
.ck2-beam { position: absolute; left: 50%; bottom: 44%; width: 10px; height: 0; transform: translateX(-50%); background: linear-gradient(to top, var(--c), transparent); filter: blur(2px); opacity: 0; }
.ck2-box { position: relative; width: 120px; height: 92px; transform-origin: 50% 100%; margin-top: -30px; }
.ck2-box-base { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; border-radius: 8px; background: linear-gradient(160deg, #7f1d1d, #3b0a0e); box-shadow: inset 0 0 0 3px #b45309, 0 8px 20px rgba(0,0,0,.6); }
.ck2-box-base::before { content: ""; position: absolute; left: 50%; top: 10px; width: 18px; height: 22px; transform: translateX(-50%); border-radius: 4px; background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.ck2-box-lid { position: absolute; left: -4px; right: -4px; top: 0; height: 40px; border-radius: 14px 14px 6px 6px; background: linear-gradient(160deg, #991b1b, #450a0a); box-shadow: inset 0 0 0 3px #b45309; transform-origin: 10% 100%; }
.ck2-gems { position: absolute; left: 50%; top: 45%; width: 0; height: 0; }
.ck2-gems span { position: absolute; width: 14px; height: 18px; margin: -9px 0 0 -7px; clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); background: linear-gradient(160deg, #fca5a5, #b91c1c); opacity: 0; }
.ck2-result { position: absolute; left: 0; right: 0; bottom: 64px; text-align: center; opacity: 0; transform: translateY(10px); }
.ck2-result b { display: block; font-size: 36px; color: #fff; text-shadow: 0 0 18px var(--c); font-variant-numeric: tabular-nums; }
.ck2-result small { color: #fecaca; font-size: 12.5px; }
.ck2-ov-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.ck2-ov-close { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); border: 0; border-radius: 10px; padding: 8px 28px; font-family: inherit; font-size: 14px; font-weight: 600; background: #fde68a; color: #7c2d12; cursor: pointer; }
.ck2-chest-ov.is-play .ck2-box { animation: ck2Shake .9s ease-in-out; }
.ck2-chest-ov.is-play .ck2-box-lid { animation: ck2Lid .5s ease-out .9s forwards; }
.ck2-chest-ov.is-play .ck2-beam { animation: ck2Beam .7s ease-out 1.05s forwards; }
.ck2-chest-ov.is-play .ck2-gems span { animation: ck2Fly .9s cubic-bezier(.2,.7,.2,1) calc(1.15s + var(--d)) forwards; }
.ck2-chest-ov.is-play .ck2-result, .ck2-chest-ov.is-end .ck2-result { animation: ck2Rise .45s ease-out 1.6s forwards; }
.ck2-chest-ov.is-end .ck2-result { animation-delay: 0s; }
.ck2-chest-ov.is-play.t-top .ck2-ov-flash { animation: ck2Flash .6s ease-out 1s; }
@keyframes ck2Shake { 0%,100% { transform: rotate(0); } 15% { transform: rotate(-4deg); } 30% { transform: rotate(4deg); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg) scale(1.04); } }
@keyframes ck2Lid { to { transform: rotate(-58deg) translate(-6px, -10px); } }
@keyframes ck2Beam { 0% { height: 0; opacity: 0; width: 10px; } 60% { opacity: .9; } 100% { height: 260px; width: var(--bw); opacity: .75; } }
@keyframes ck2Fly { 0% { opacity: 0; transform: translate(0,0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); } }
@keyframes ck2Rise { to { opacity: 1; transform: none; } }
@media (max-width: 620px) {
  .ck2-days { gap: 3px; }
  .ck2-day { padding: 4px 1px; }
  .ck2-day i { font-size: 16px; }
  .ck2-day small { font-size: 9px; }
  .ck2-cards { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck2-stage *, .ck2-chest-ov * { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; }
}
html.theme-dark .ck2-day { background: #1e293b; border-color: #334155; }
html.theme-dark .ck2-day.done { background: rgba(22,163,74,.22); border-color: #166534; }
html.theme-dark .ck2-day.today { background: rgba(245,158,11,.14); }
html.theme-dark .ck2-day.sun:not(.done) { background: rgba(185,28,28,.2); }
html.theme-dark .ck2-chest { background: rgba(185,28,28,.14); border-color: #7f1d1d; color: #fecaca; }
html.theme-dark .ck2-chest b { color: #fca5a5; }

.ck2-ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.2em; line-height: 1; }
.ck2-ico > svg { width: 1.15em !important; height: 1.15em !important; margin: 0 !important; }
.ck2-box-ico { position: relative; display: block; width: 40px; height: 30px; margin: 3px auto 3px; }
.ck2-boxsvg { display: block; width: 100%; height: 100%; }
.ck2-box-ico .ck2-badge { position: absolute; right: -5px; bottom: -4px; font-size: 15px; padding: 1px; border-radius: 5px; background: var(--bg-card, #fff); box-shadow: 0 0 0 1px var(--border-subtle, #e2e8f0); }
.ck2-day small.ck2-rg { color: var(--text-primary, #1f2937); font-weight: 600; opacity: .7; }
.ck2-front i.ck2-ico { font-size: 30px; }
.ck2-front i.ck2-ico > svg { width: 1.2em !important; height: 1.2em !important; }
.ck2-foot .ck2-ico { font-size: 15px; }
.ck2-chest-ico { width: 30px; height: 23px; margin: 0; flex: none; }
.ck2-gems span { width: 24px; height: 24px; margin: -12px 0 0 -12px; clip-path: none; background: none; }
.ck2-gems span > svg { width: 24px !important; height: 24px !important; }
.ck2-rrow { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ck2-rrow .ck2-ico { font-size: 30px; }
.ck2-result .ck2-rrow b { display: inline; }
@media (max-width: 620px) {
  .ck2-box-ico { width: 32px; height: 24px; }
  .ck2-box-ico .ck2-badge { font-size: 12px; right: -4px; }
}
html.theme-dark .ck2-box-ico .ck2-badge { background: #0f172a; box-shadow: 0 0 0 1px #334155; }
html.theme-dark .ck2-day small.ck2-rg { color: #e2e8f0; }

.pd-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 12px; padding: 3px; border-radius: 10px; background: var(--bg-primary, #eceff4); }
.pd-tabs .char-attr-tab-btn { margin: 0; min-width: 0; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; font-size: 13.5px; font-weight: 500; color: var(--text-muted, #64748b); }
.pd-tabs .char-attr-tab-btn.active { background: var(--bg-card, #fff); color: var(--text-primary, #1f2937); font-weight: 600; box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.pd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pd-stat { background: var(--bg-card, #fff); border: 1px solid var(--border-subtle, #e6e9ef); border-radius: 10px; padding: 7px 4px; text-align: center; min-width: 0; }
.pd-stat small { display: block; font-size: 11px; color: var(--text-muted, #8a93a3); }
.pd-stat b { display: block; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-card { background: var(--bg-card, #fff); border: 1px solid var(--border-subtle, #e6e9ef); border-radius: 12px; padding: 10px 12px; }
.pd-card + .pd-card { margin-top: 10px; }
.pd-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 12.5px; }
.pd-kv dt { color: var(--text-muted, #8a93a3); }
.pd-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary, #1f2937); }
.pd-kv dd strong { font-weight: 600; }
.pd-kv dd.pd-note { grid-column: 1 / -1; text-align: right; font-size: 11px; color: var(--text-muted, #8a93a3); margin-top: -3px; }
.pd-card .pd-kv + .land-worker-detail { margin-top: 6px; }
.land-worker-detail.pd-kv { margin: 0; padding: 0; border: 0; line-height: 1.5; font-size: 12.5px; color: inherit; }
.pd-store { display: flex; align-items: center; gap: 10px; }
.pd-store-main { flex: 1; min-width: 0; }
.pd-store-main small { display: block; font-size: 11.5px; color: var(--text-muted, #8a93a3); }
.pd-store-main b { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-store-btn { flex: none; width: 96px; height: 40px; margin: 0 !important; }
.pd-meter { display: grid; grid-template-columns: 48px minmax(0, 1fr) 64px; align-items: center; gap: 8px; font-size: 12px; }
.pd-meter + .pd-meter, .pd-hint + .pd-meter { margin-top: 8px; }
.pd-meter > span { color: var(--text-muted, #8a93a3); }
.pd-meter > em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary, #4a5566); }
.pd-bar { height: 7px; border-radius: 99px; background: var(--bg-primary, #eef1f5); overflow: hidden; }
.pd-bar > i { display: block; height: 100%; border-radius: 99px; }
.pd-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pd-g2 .home-btn { width: 100%; margin: 0; min-width: 0; white-space: nowrap; }
.pd-hint { margin-top: 6px; font-size: 11.5px; color: var(--text-muted, #8a93a3); text-align: center; }
.pd-hint.warn { color: #dc2626; }
.pd-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-secondary, #4a5566); }
.pd-row > span { flex: 1; min-width: 0; }
.pd-row .home-btn { flex: none; width: 96px; margin: 0; }
.pd-set-list { background: var(--bg-card, #fff); border: 1px solid var(--border-subtle, #e6e9ef); border-radius: 12px; overflow: hidden; }
.pd-set + .pd-set { border-top: 1px solid var(--border-subtle, #f0f2f6); }
.pd-set > summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; cursor: pointer; list-style: none; font-size: 13px; }
.pd-set > summary::-webkit-details-marker { display: none; }
.pd-set > summary:focus-visible { outline: 2px solid #f59e0b; outline-offset: -2px; }
.pd-set-ico { width: 17px; height: 17px; flex: none; fill: none; stroke: #64748b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pd-set-n { flex: 1; min-width: 0; font-weight: 500; }
.pd-set-n small { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-muted, #8a93a3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-set-v { font-size: 12.5px; color: var(--text-muted, #8a93a3); white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.pd-set-chev { color: #b6bdc9; font-size: 16px; transition: transform .2s; }
.pd-set[open] > summary .pd-set-chev { transform: rotate(90deg); }
.pd-set-body { padding: 0 12px 12px; }
.pd-set-body .plot-settings-card { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.pd-set-body .plot-settings-card-head { display: none; }
html.theme-dark .pd-tabs { background: #1e293b; }
html.theme-dark .pd-tabs .char-attr-tab-btn.active { background: #0f172a; color: #f1f5f9; }
html.theme-dark .pd-stat, html.theme-dark .pd-card, html.theme-dark .pd-set-list { background: #0f172a; border-color: #334155; }
html.theme-dark .pd-kv dd, html.theme-dark .pd-stat b, html.theme-dark .pd-store-main b { color: #e2e8f0; }
html.theme-dark .pd-bar { background: #1e293b; }

.eq-rf-base922 { border: 1px solid var(--pg-border, rgba(148,163,184,.3)); background: var(--pg-box-bg, rgba(148,163,184,.06)); border-radius: var(--r-sm, 8px); padding: 0 12px; margin-bottom: 4px; }
.eq-rf-base922 > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 13px; }
.eq-rf-base922 > summary::-webkit-details-marker { display: none; }
.eq-rf-base922-t { font-weight: 500; white-space: nowrap; }
.eq-rf-base922-brief { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.eq-rf-base922-tip { white-space: nowrap; opacity: .6; font-size: 12px; }
.eq-rf-base922-tip::after { content: "展开 ▸"; }
.eq-rf-base922[open] .eq-rf-base922-tip::after { content: "收起 ▾"; }
.eq-rf-base922[open] { padding-bottom: 10px; }

.pd-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.pd-side { border-radius: 10px; padding: 8px 10px; min-width: 0; }
.pd-side.d { background: #eff6ff; } .pd-side.a { background: #fef2f2; }
.pd-side h5 { margin: 0 0 4px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-side-kv { gap: 3px 8px; font-size: 12px; }
.pd-vs-mid { font-size: 12px; color: var(--text-muted, #8a93a3); }
.plot-settings-card-body .pd-g2 { margin-top: 10px; }
html.theme-dark .pd-side.d { background: rgba(59,130,246,.14); } html.theme-dark .pd-side.a { background: rgba(239,68,68,.14); }

.occ925-note { margin: 6px 0 0; text-align: center; font-size: 12px; }
.occ925-mine .occ925-bar { margin: 2px 0 10px; } .occ925-mine .occ925-bar > i { background: #f59e0b; }
.occ925-ov { position: fixed; inset: 0; z-index: 10040; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.occ925-panel { width: min(460px, 100%); max-height: min(640px, 88vh); display: flex; flex-direction: column; background: var(--bg-card, #fff); border-radius: 16px; box-shadow: 0 20px 50px -20px rgba(15,23,42,.5); overflow: hidden; }
.occ925-head { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle, #e6e9ef); font-size: 15px; }
.occ925-x { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--bg-primary, #f1f5f9); font-size: 17px; cursor: pointer; color: inherit; }
.occ925-body { padding: 12px 14px 14px; overflow-y: auto; }
.occ925-sum { font-size: 13px; color: var(--text-secondary, #4a5566); }
.occ925-sum b { color: var(--text-primary, #1f2937); font-variant-numeric: tabular-nums; }
.occ925-board { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; font-size: 12.5px; }
.occ925-board > span { font-weight: 600; color: #92400e; }
.occ925-board em { font-style: normal; } .occ925-board small { color: #92400e; font-variant-numeric: tabular-nums; }
.occ925-list { margin-top: 10px; border: 1px solid var(--border-subtle, #e6e9ef); border-radius: 12px; overflow: hidden; }
.occ925-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.occ925-row + .occ925-row { border-top: 1px solid var(--border-subtle, #f0f2f6); }
.occ925-row:hover { background: var(--bg-primary, #f8fafc); }
.occ925-row:focus-visible { outline: 2px solid #f59e0b; outline-offset: -2px; }
.occ925-ico { font-size: 22px; flex: none; }
.occ925-main { flex: 1; min-width: 0; } .occ925-main b { display: block; font-size: 13.5px; font-weight: 600; }
.occ925-main small { display: block; font-size: 11.5px; color: var(--text-muted, #8a93a3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.occ925-tag { flex: none; font-size: 11px; border-radius: 999px; padding: 0 8px; line-height: 20px; white-space: nowrap; }
.occ925-tag.open { background: #dcfce7; color: #15803d; } .occ925-tag.me { background: #fef3c7; color: #92400e; }
.occ925-tag.occ { background: #ffedd5; color: #9a3412; } .occ925-tag.rest { background: #f1f5f9; color: #64748b; }
.occ925-hb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 12px 2px; padding: 6px 10px; border-radius: 10px; background: #fffbeb; font-size: 12px; }
.occ925-hb[hidden] { display: none; }
.occ925-hb-t { font-weight: 600; color: #92400e; } .occ925-hb em { font-style: normal; }
html.theme-dark .occ925-panel { background: #0f172a; } html.theme-dark .occ925-board, html.theme-dark .occ925-hb { background: rgba(245,158,11,.12); border-color: #78350f; }

.nb934-ov { position: fixed; inset: 0; z-index: 10055; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.nb934-card { width: min(420px, 100%); background: var(--bg-card, #fff); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px -20px rgba(15,23,42,.5); }
.nb934-head { padding: 14px 16px 10px; }
.nb934-head b { display: block; font-size: 17px; }
.nb934-head span { font-size: 12.5px; color: var(--text-muted, #8a93a3); }
.nb934-body { padding: 0 16px; }
.nb934-step { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.nb934-step + .nb934-step { border-top: 1px solid var(--border-subtle, #f0f2f6); }
.nb934-n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; background: var(--bg-primary, #f1f5f9); color: var(--text-muted, #8a93a3); }
.nb934-step.cur .nb934-n { background: #fee2e2; color: #b91c1c; }
.nb934-step.done .nb934-n { background: #dcfce7; color: #15803d; }
.nb934-step.wait { opacity: .55; }
.nb934-t { flex: 1; min-width: 0; }
.nb934-t b { display: block; font-size: 14px; font-weight: 600; }
.nb934-t small { display: block; font-size: 11.5px; color: var(--text-muted, #8a93a3); }
.nb934-go { flex: none; margin: 0 !important; }
.nb934-msg { min-height: 18px; margin: 4px 0 2px; font-size: 12.5px; color: var(--text-secondary, #4a5566); text-align: center; }
.nb934-msg.bad { color: #dc2626; }
.nb934-foot { padding: 10px 16px 14px; }
.nb934-later { width: 100%; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text-muted, #8a93a3); cursor: pointer; padding: 6px 0; }
.nb934-tasks { display: flex; flex-direction: column; }
.nb934-task { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; }
.nb934-task + .nb934-task { border-top: 1px solid var(--border-subtle, #f0f2f6); }
.nb934-task.got { opacity: .6; }
.nb934-tick { width: 18px; flex: none; text-align: center; color: var(--text-muted, #b6bdc9); }
.nb934-task.can .nb934-tick { color: #16a34a; }
.nb934-tt { flex: 1; min-width: 0; }
.nb934-tt b { display: block; font-weight: 500; }
.nb934-tt small { display: block; font-size: 11.5px; color: var(--text-muted, #8a93a3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb934-rw { flex: none; font-size: 12px; color: var(--text-secondary, #4a5566); white-space: nowrap; }
.nb934-got { flex: none; font-size: 12px; color: var(--text-muted, #8a93a3); }
.nb934-task .home-btn { flex: none; margin: 0 !important; }
html.theme-dark .nb934-card { background: #0f172a; }

.capsule-box[hidden] { display: none !important; }

.land941 { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; }
.land941-txt { display: flex; flex-direction: column; gap: var(--s-2); }
.land941-txt b { font-size: 14px; font-weight: 700; color: var(--ink-1); }
.land941-txt span { font-size: 12px; line-height: 1.6; color: var(--ink-4); }
.land941-btn { flex: none; white-space: nowrap; }

.land941-bar-wrap {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 14;
  padding: var(--s-4) var(--s-9) 0; pointer-events: none;
}
.land941-bar-wrap .land941 {
  pointer-events: auto; flex-direction: row; align-items: center; justify-content: space-between;
  gap: var(--s-5); text-align: left;
  background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-md);
  box-shadow: var(--sh-2); padding: var(--s-4) var(--s-6);
}
.land941-bar-wrap .land941-txt span { font-size: 11.5px; }
@media (max-width: 640px) {
  .land941-bar-wrap { padding: var(--s-3) var(--s-5) 0; }
  .land941-bar-wrap .land941 { flex-direction: column; align-items: stretch; text-align: left; gap: var(--s-3); }
}

.land-card-find941 {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s-1);
  border: 0; border-radius: var(--r-xs); background: rgba(0,0,0,0.52); color: var(--on-solid);
  font-size: 9px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  padding: var(--s-1) var(--s-3); cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.land-card-find941:hover { background: rgba(0,0,0,0.74); }
.land-card-find941:active { transform: scale(0.97); }

.occ943-box { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(220, 38, 38, .05); border: 1px solid rgba(220, 38, 38, .18); }
.occ943-title { font-size: 12.5px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; }

.occ943-row { display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "ico main btn" "ico sub btn"; column-gap: 8px; align-items: center;
  padding: 6px 0; border-top: 1px solid rgba(220, 38, 38, .12); }
.occ943-row:first-of-type { border-top: 0; }
.occ943-ico { grid-area: ico; font-size: 18px; }
.occ943-main { grid-area: main; min-width: 0; }
.occ943-name { font-size: 12.5px; font-weight: 600; color: var(--text-main);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.occ943-sub { grid-area: sub; min-width: 0; font-size: 11px; color: var(--text-muted);
  line-height: 1.5; display: block; }
.occ943-left { font-size: 11px; color: #dc2626; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.occ943-go { grid-area: btn; width: 64px; padding-left: 0; padding-right: 0; text-align: center; }

.ld944-body { padding: 0 16px 4px; }
.ld944-why {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-2, #f6f7f9); border-radius: 12px; padding: 12px 13px;
  font-size: 13px; line-height: 1.65; color: var(--ink-3, #334155);
}
.ld944-ic { font-size: 20px; line-height: 1.2; flex: 0 0 auto; }
.ld944-msg { min-height: 0; font-size: 12.5px; color: var(--ink-4, #475569); padding: 6px 2px 0; }
.ld944-msg.bad { color: #dc2626; }
.ld944-msg:empty { display: none; }
.ld944-btns { display: flex; gap: 10px; }
.ld944-btn { flex: 1 1 0; min-width: 0; white-space: nowrap; justify-content: center; }
.ld944-foot .nb934-later { margin-top: 4px; }

.hr961-body { padding: 2px 16px 6px; display: flex; flex-direction: column; gap: 10px; }
.hr961-step { display: flex; align-items: flex-start; gap: 11px; }
.hr961-i {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-2, #f1f5f9); color: var(--ink-4, #475569);
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.hr961-step > span:last-child { min-width: 0; }
.hr961-step b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2, #1f2937); }
.hr961-step i { display: block; font-style: normal; font-size: 12.5px; line-height: 1.6; color: var(--ink-4, #475569); margin-top: 1px; }
.hr961-free {
  margin-top: 2px; padding: 8px 11px; border-radius: 10px;
  background: #fef6e7; color: #92600a; font-size: 12.5px; font-weight: 500;
}
.hr961-go { width: 100%; justify-content: center; white-space: nowrap; }
.hr961-foot .nb934-later { margin-top: 4px; }
html.theme-dark .hr961-i { background: #1e293b; color: #cbd5e1; }
html.theme-dark .hr961-step b { color: #e2e8f0; }
html.theme-dark .hr961-step i { color: #94a3b8; }
html.theme-dark .hr961-free { background: #3a2c10; color: #f0c675; }

.hire-free961 { color: #b45309; font-weight: 700; margin-right: 5px; }
.hire-price > s { color: var(--text-muted, #94a3b8); font-size: 12px; font-weight: 400; }
html.theme-dark .hire-free961 { color: #f0c675; }

.theme-toggle-btn::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 14px 2px rgba(210, 39, 48, 0.85);
  opacity: 0; animation: themeTogglePulse945 2s ease-in-out infinite;
}
@keyframes themeTogglePulse945 { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

html.theme-terminal .theme-toggle-btn::after { animation: none; opacity: 0; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .theme-toggle-btn::after { animation: none; opacity: 0; } }

@media (max-width: 920px) {
  body.sidebar-collapsed .shell { grid-template-columns: 58px minmax(0, 1fr); }
  body.sidebar-collapsed .sidebar { padding: var(--s-2) var(--s-1); gap: 0; }
  body.sidebar-collapsed .nav-item { padding: 0 2px; gap: 0; justify-content: center; }
  body.sidebar-collapsed .nav-label { display: block; }
}

.sw946-entry { border: 1px solid var(--line-soft, rgba(15,23,42,.14)); background: var(--surface-1, #fff);
  color: var(--text-main); border-radius: 999px; font-size: 12px; font-weight: 500;
  padding: 3px 12px; cursor: pointer; line-height: 1.6; white-space: nowrap; }
.sw946-entry:hover { border-color: #2563eb; color: #2563eb; }

.confirm-box.sw946-box { width: min(420px, 94vw); text-align: left; padding: 18px 18px 14px; }
.sw946-box h3 { margin: 0 0 3px; }
.sw946-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.6; }
.sw946-lbl { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 0 0 6px; }
.sw946-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 11px; }
@media (max-width: 420px) { .sw946-grid { grid-template-columns: repeat(3, 1fr); } }
.sw946-tile { display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer;
  border: 1px solid var(--line-soft, rgba(15,23,42,.12)); background: var(--surface-1, #fff);
  border-radius: 10px; padding: 6px 2px 5px; min-width: 0; }
.sw946-tile.on { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.14); }
.sw946-tile.dim { opacity: .45; }
.sw946-ico { font-size: 17px; line-height: 1.1; }
.sw946-ico img, .sw946-ico svg { width: 20px; height: 20px; display: block; }
.sw946-nm { font-size: 10.5px; color: var(--text-main); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; }
.sw946-own { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.sw946-rate { font-size: 13px; font-weight: 600; color: var(--text-main); text-align: center;
  background: rgba(37,99,235,.07); border-radius: 9px; padding: 7px 10px; margin-bottom: 11px; }
.sw946-row { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
.sw946-qty { flex: 1; min-width: 0; border: 1px solid var(--line-soft, rgba(15,23,42,.16));
  border-radius: 9px; padding: 8px 11px; font-size: 14px; background: var(--surface-1, #fff);
  color: var(--text-main); font-variant-numeric: tabular-nums; }
.sw946-all { flex: none; width: 60px; border: 1px solid var(--line-soft, rgba(15,23,42,.16));
  background: var(--surface-1, #fff); color: var(--text-main); border-radius: 9px;
  padding: 8px 0; font-size: 13px; font-weight: 500; cursor: pointer; }
.sw946-out { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 11px;
  min-height: 40px; }
.sw946-out.ok { color: var(--text-main); }
.sw946-out b { font-variant-numeric: tabular-nums; }
.sw946-left { display: block; font-size: 11.5px; color: var(--text-muted); }

.tu949-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tu949-list .home-btn.tu949-row { margin-left: 0; }
.tu949-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; white-space: normal; height: auto; min-height: 42px;
  padding: 8px 12px; line-height: 1.45;
}
.tu949-name { min-width: 0; font-weight: 600; }
.tu949-name i { font-style: normal; font-weight: 400; color: var(--text-muted); font-size: 12px; margin-left: 6px; }
.tu949-price { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tu949-price b { font-weight: 700; }
@media (max-width: 420px) {
  
  .tu949-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .tu949-name i { margin-left: 0; display: block; }
}

.fq951-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.fq951-qty {
  flex: 1; min-width: 0; border: 1px solid var(--line-soft, rgba(15,23,42,.18));
  border-radius: 8px; padding: 6px 9px; font-size: 13px; background: var(--surface-1, #fff);
  color: var(--text-main); font-variant-numeric: tabular-nums;
}
.fq951-preset {
  flex: none; width: 52px; padding: 6px 0; text-align: center; cursor: pointer;
  border: 1px solid var(--line-soft, rgba(15,23,42,.18)); border-radius: 8px;
  background: var(--surface-1, #fff); color: var(--text-main); font-size: 12px; line-height: 1.3;
}
.fq951-preset:hover { border-color: #2563eb; color: #2563eb; }
.fq951-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; min-height: 16px; line-height: 1.45; }
@media (max-width: 380px) { .fq951-preset { width: 46px; font-size: 11px; } }

.sk952-box { border: 1px solid var(--line-1, #e2e8f0); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; background: var(--surface-2, #f8fafc); }
.sk952-head { font-size: 12.5px; font-weight: 700; color: var(--ink-2, #1e293b); margin-bottom: 4px; }
.sk952-sub { font-weight: 500; color: var(--ink-5, #64748b); font-size: 11px; margin-left: 4px; }
.sk952-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--line-1, #e2e8f0); }
.sk952-left { display: flex; flex-direction: column; min-width: 0; gap: 1px; text-align: left; }
.sk952-row:first-of-type { border-top: 0; }
.sk952-name { font-size: 12.5px; font-weight: 600; color: var(--ink-2, #1e293b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk952-meta { font-size: 11px; color: var(--ink-5, #64748b); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk952-step { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.sk952-btn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-1, #cbd5e1); background: var(--surface-1, #fff); color: var(--ink-2, #1e293b); font-size: 15px; font-weight: 500; line-height: 1; cursor: pointer; padding: 0; }
.sk952-btn:disabled { opacity: .4; cursor: not-allowed; }
.sk952-n { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.sk952-note { font-size: 12px; border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; line-height: 1.6; }
.sk952-note.ok { background: rgba(22,163,74,.08); color: #15803d; }
.sk952-note.warn { background: rgba(217,119,6,.10); color: #b45309; }
.sk952-note.bad { background: rgba(220,38,38,.08); color: #b91c1c; }

#skillBatchGo:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.35); }

.fc955-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }

body.auth963-on .topbar,
body.auth963-on .sidebar { display: none !important; }
body.auth963-on .content,
body.auth963-on .content-inner { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body.auth963-on .shell { display: block !important; }
body.auth963-on { overflow: hidden; }

.auth963 {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column;
  background: #05060a; color: #fff;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-y: auto;
}
.auth963-bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

.auth963-top,
.auth963-mid,
.auth963-bottom { position: relative; z-index: 1; }

.auth963-top {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px;
}

.auth963-logo {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 800; font-size: 20px; letter-spacing: .22em; color: #fff;
}
.auth963-logo span { color: #e8443a; }
.auth963-tagline { font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.55); }

.auth963-mid {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: 8px 20px 20px; min-height: 0;
}

.auth963-card {
  width: min(430px, 100%);
  background: rgba(13,12,14,.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 2px;
  padding: 24px 28px 22px;
  box-shadow: 0 28px 70px -30px rgba(0,0,0,.95);
}

.auth963-tabs { display: flex; gap: 0; margin: -4px -4px 14px; }
.auth963-tab {
  flex: 1 1 0; min-width: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15.5px; color: rgba(255,255,255,.5);
  padding: 9px 6px 10px; border-bottom: 1.5px solid rgba(255,255,255,.12);
  transition: color .18s, border-color .18s;
}
.auth963-tab.active { color: #fff; font-weight: 600; border-bottom-color: #e8443a; }
.auth963-tab:focus-visible { outline: 2px solid #e8443a; outline-offset: -2px; }

.auth963-head { margin-bottom: 16px; }
.auth963-head h2 { margin: 0 0 4px; font-size: 23px; font-weight: 600; color: #fff; }
.auth963-head p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.5); }

.auth963-form { display: none; }
.auth963-form.visible { display: block; }

.auth963-f { position: relative; margin-bottom: 14px; }
.auth963-f input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.05); color: #fff;
  border: 0; border-bottom: 1.5px solid rgba(255,255,255,.2); border-radius: 2px 2px 0 0;
  padding: 22px 13px 8px; font: inherit; font-size: 15.5px; outline: none;
  transition: border-color .18s, background .18s;
}
.auth963-f input:focus { border-bottom-color: #e8443a; background: rgba(255,255,255,.08); }
.auth963-f input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(40,38,42,.98) inset;
  caret-color: #fff;
}
.auth963-f label {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 14.5px; color: rgba(255,255,255,.5); pointer-events: none;
  transition: transform .18s ease, font-size .18s ease, color .18s ease;
}
.auth963-f input:focus + label,
.auth963-f input:not(:placeholder-shown) + label {
  transform: translateY(-24px); font-size: 11.5px; color: #e8443a; letter-spacing: .05em;
}

.auth963-f-captcha { display: flex; gap: 10px; align-items: stretch; }
.auth963-f-captcha input { flex: 1 1 auto; min-width: 0; }
.auth963-f-captcha label { left: 13px; }
.auth963-f-captcha canvas {
  flex: 0 0 auto; width: 118px; height: auto; align-self: center;
  border-radius: 2px; cursor: pointer; background: #fff;
}

.auth963-hint { margin: -6px 0 15px 2px; font-size: 12.5px; color: rgba(255,255,255,.45); }

.auth963-go {
  width: 100%; border: 0; border-radius: 2px; cursor: pointer;
  background: #e8443a; color: #fff; font: inherit; font-weight: 700; font-size: 16.5px;
  padding: 14px 10px; letter-spacing: .04em;
  transition: filter .15s, transform .08s;
}
.auth963-go:hover { filter: brightness(1.08); }
.auth963-go:active { transform: translateY(1px); }
.auth963-go:disabled { opacity: .55; cursor: default; transform: none; }
.auth963-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.auth963-swap { margin: 13px 0 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.5); }
.auth963-swap-note b { color: #ffb4ad; font-weight: 600; }
.auth963-link {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px;
  color: #f9a8a2; padding: 2px 4px; font-size: 13px;
}
.auth963-link:hover { color: #fff; }

.auth963 .message { margin-top: 13px; font-size: 13.5px; color: #ffb4ad; text-align: center; }
.auth963 .message:empty { display: none; }
.auth963 .login-nick-hint {
  margin: -8px 0 13px; font-size: 13px; color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.06); border-radius: 2px; padding: 7px 10px;
}

.auth963-bottom {
  flex: 0 0 auto; display: flex; gap: 16px; flex-wrap: wrap;
  padding: 0 22px 18px; font-size: 11.5px; color: rgba(255,255,255,.38);
}

@media (max-width: 560px) {
  .auth963-top { padding: 14px 16px; }
  .auth963-logo { font-size: 18px; }
  .auth963-mid { padding: 4px 16px 16px; }
  .auth963-card { padding: 19px 18px 17px; }
  .auth963-head h2 { font-size: 21px; }
  .auth963-bottom { padding: 0 16px 14px; gap: 10px; font-size: 11px; }
}

@media (max-height: 520px) {
  .auth963-mid { align-items: flex-start; }
  .auth963-head { margin-bottom: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth963-tab, .auth963-f input, .auth963-f label, .auth963-go { transition: none; }
}

.auth963-intro-btn {
  display: inline-flex; align-items: baseline; gap: 10px;
  border: 0; background: none; border-radius: 0; cursor: pointer; font: inherit;
  padding: 4px 2px; color: rgba(255,255,255,.55); font-size: 12.5px; letter-spacing: .08em;
  transition: color .16s;
}
.auth963-intro-btn:hover { color: rgba(255,255,255,.9); }
.auth963-intro-btn:hover .auth963-intro-go { text-decoration: underline; text-underline-offset: 3px; }
.auth963-intro-btn:focus-visible { outline: 2px solid #e8443a; outline-offset: 3px; border-radius: 2px; }
.auth963-intro-num { color: #ff8a80; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.auth963-intro-num[hidden] { display: none; }
.auth963-intro-go { color: #e8443a; font-weight: 600; white-space: nowrap; }

.auth963-bottom span[hidden] { display: none; }
#auth963Lords { color: rgba(255,255,255,.55); }
#auth963Lords b { color: #ff8a80; font-weight: 700; font-variant-numeric: tabular-nums; }

.auth963-sheet {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(4,4,6,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.auth963-sheet[hidden] { display: none !important; }
.auth963-sheet-card {
  width: min(460px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: rgba(17,16,18,.96); border: 1px solid rgba(255,255,255,.12); border-radius: 3px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.95);
}
.auth963-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 22px 12px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.auth963-sheet-head b { font-size: 18px; font-weight: 600; color: #fff; }
.auth963-sheet-x {
  border: 0; background: none; cursor: pointer; color: rgba(255,255,255,.5);
  font-size: 24px; line-height: 1; padding: 0 4px;
}
.auth963-sheet-x:hover { color: #fff; }
.auth963-sheet-body { padding: 16px 22px 6px; display: flex; flex-direction: column; gap: 14px; }
.auth963-sheet-row { display: flex; align-items: flex-start; gap: 12px; }
.auth963-sheet-i {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(232,68,58,.16); color: #ff8a80;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.auth963-sheet-row > span:last-child { min-width: 0; }
.auth963-sheet-row b { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
.auth963-sheet-row i {
  display: block; font-style: normal; font-size: 13px; line-height: 1.7;
  color: rgba(255,255,255,.62); margin-top: 2px;
}
.auth963-sheet-foot { padding: 12px 22px 20px; }

@media (max-width: 560px) {
  
  .auth963-intro-txt { display: none; }
  .auth963-intro-btn { padding: 4px 2px; font-size: 12px; gap: 8px; }
  .auth963-sheet { padding: 14px; align-items: flex-end; }
  .auth963-sheet-card { max-height: 86vh; }
  .auth963-sheet-head { padding: 15px 17px 11px; }
  .auth963-sheet-head b { font-size: 16.5px; }
  .auth963-sheet-body { padding: 14px 17px 4px; gap: 13px; }
  .auth963-sheet-foot { padding: 11px 17px 17px; }
  .auth963-bottom { font-size: 11.5px; }
}

.guide-ring-tip {
  
  position: fixed; z-index: 3451; pointer-events: none;
  max-width: min(260px, calc(100vw - 24px));
  background: #16130f; color: #fff; border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; padding: 8px 12px;
  font-size: 13px; line-height: 1.55; font-weight: 500;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.7);
}
.guide-ring-tip[hidden] { display: none !important; }

.guide-ring-tip::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent;
}
.guide-ring-tip[data-dir="up"]::after { top: 100%; border-top-color: #16130f; }
.guide-ring-tip[data-dir="down"]::after { bottom: 100%; border-bottom-color: #16130f; }
@media (max-width: 560px) {
  .guide-ring-tip { font-size: 12.5px; padding: 7px 11px; }
}

.chat-input-row.has-hb { grid-template-columns: auto minmax(0, 1fr) auto; }
.hb-entry { width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--danger-line); border-radius: var(--r-md); background: var(--brand-soft); }
.hb-entry:hover { border-color: var(--brand); }
.hb-entry:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hb-entry[hidden] { display: none; }

.hb-bar { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; min-width: 0; padding: 8px; border-radius: var(--r-md);
  background: linear-gradient(135deg, #1f1d33, #2b2140); border: 1px solid #6f6243; scrollbar-width: thin; }
.hb-bar[hidden] { display: none; }
.hb-bar-lead { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 2px; color: #efe2bf; font-size: 12.5px; white-space: nowrap; }
.hb-chip { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border-radius: 8px;
  background: rgba(239,226,191,.07); border: 1px solid rgba(239,226,191,.22); color: #efe2bf; font-size: 12.5px; white-space: nowrap; }
.hb-chip-meta { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; min-width: 0; }
.hb-chip-name { display: flex; align-items: center; gap: 4px; }
.hb-chip-who { max-width: 8em; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.hb-chip small { color: #b9ab86; font-size: 11px; }
.hb-chip-bar { display: block; width: 86px; height: 3px; border-radius: 2px; background: rgba(239,226,191,.15); overflow: hidden; }
.hb-chip-bar i { display: block; height: 100%; background: #e7c77e; }
.hb-chip.is-done { opacity: .72; }
.hb-grab { flex: none; min-width: 48px; height: 30px; padding: 0 12px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid #d9b76a; background: linear-gradient(180deg, #e7c77e, #c9a24e); color: #2b1d05; }
.hb-grab.is-quiet { background: transparent; color: #cfc19b; border-color: rgba(239,226,191,.3); }
.hb-grab:focus-visible { outline: 2px solid #efe2bf; outline-offset: 2px; }

.chat-message.system.hb-line { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.hb-line-ico { display: inline-flex; flex: none; }
.hb-line-text { min-width: 0; }
.hb-line-text b { color: var(--ink-3); font-weight: 600; }
.hb-line-btn { flex: none; padding: 1px 10px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap;
  border: 1px solid var(--brand); background: var(--surface-1); color: var(--brand); }
.hb-line-btn:hover { background: var(--brand-soft); }
.hb-line-btn.is-quiet { border-color: var(--surface-4); color: var(--ink-5); background: transparent; }
.hb-line-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.hb-ov { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5,3,8,.72); }
.hb-stage { position: relative; width: min(360px, 92vw); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 18px;
  padding: 22px 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: radial-gradient(120% 90% at 50% 30%, #3a0d13 0%, #1a0509 60%, #07030a 100%); color: #fde68a; }
.hb-x { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent;
  color: #fecaca; font-size: 22px; line-height: 32px; cursor: pointer; z-index: 5; }
.hb-x:focus-visible { outline: 2px solid #fde68a; }
.hb-env { position: relative; flex: none; width: 228px; height: 300px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(170deg, #d32f2f, #8e1b1b 70%, #6d1414); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.hb-env-flap { position: absolute; left: -12%; right: -12%; top: -120px; height: 230px; border-radius: 0 0 50% 50%; z-index: 2;
  background: linear-gradient(180deg, #e04848, #b22727); transform-origin: 50% 0; transition: transform .55s cubic-bezier(.3,.7,.3,1), opacity .4s .15s; }
.hb-seal { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); z-index: 3; width: 78px; height: 78px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #f5b52c 58%, #b45309); color: #7c2d12; box-shadow: 0 4px 0 rgba(0,0,0,.2);
  font: 900 32px/78px "STKaiti", "KaiTi", "Songti SC", serif; text-align: center; transition: transform .3s, opacity .3s; }
.hb-seal:hover { transform: translateX(-50%) scale(1.05); }
.hb-seal:focus-visible { outline: 3px solid #fde68a; outline-offset: 3px; }
.hb-seal:disabled { cursor: default; }
.hb-env-from { position: absolute; left: 12px; right: 12px; bottom: 56px; z-index: 1; text-align: center; color: #fde68a; font-size: 13px; transition: opacity .3s; }
.hb-env-from b { display: block; margin-top: 4px; font: 700 17px/1.35 "Songti SC", "Noto Serif SC", serif; overflow-wrap: anywhere; }
.hb-env-res { position: absolute; left: 8px; right: 8px; top: 86px; z-index: 1; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .45s .35s, transform .45s .35s; }
.hb-res-num { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hb-res-num b { font: 800 32px/1.15 -apple-system, "PingFang SC", sans-serif; color: #fff7d6; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hb-res-ico[hidden] { display: none; }
.hb-env-res small { display: block; margin-top: 8px; color: #fecaca; font-size: 12.5px; }
.hb-env.is-word .hb-res-num b { font-size: 24px; }
.hb-coins { position: absolute; left: 50%; top: 42%; width: 0; height: 0; z-index: 4; pointer-events: none; }
.hb-coins span { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; opacity: 0; }
.hb-coins span > svg { width: 24px !important; height: 24px !important; }

.hb-env.is-shaking { animation: hbShake .6s ease-in-out infinite; }
.hb-env.is-open .hb-env-flap { transform: rotateX(180deg) translateY(-24px); opacity: 0; }
.hb-env.is-open .hb-seal { transform: translateX(-50%) scale(.3); opacity: 0; pointer-events: none; }
.hb-env.is-open .hb-env-from { opacity: 0; }
.hb-env.is-open .hb-env-res { opacity: 1; transform: none; }
.hb-env.is-open .hb-coins span { animation: hbFly .9s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--d)) forwards; }
.hb-env.is-static .hb-env-flap, .hb-env.is-static .hb-seal, .hb-env.is-static .hb-env-from, .hb-env.is-static .hb-env-res { transition: none; }
.hb-ov.is-still .hb-env * { transition: none !important; animation: none !important; }
.hb-ov.is-still .hb-env.is-shaking { animation: none; }
@keyframes hbShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2.5deg); } }
@keyframes hbFly { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); } }
.hb-luck { width: 100%; max-width: 300px; border-radius: 10px; padding: 6px 12px; font-size: 12.5px; color: #fde2e2;
  background: rgba(255,255,255,.06); border: 1px solid rgba(253,230,138,.18); }
.hb-luck[hidden] { display: none; }
.hb-luck-hd { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0 6px; color: #fecaca; border-bottom: 1px solid rgba(253,230,138,.12); }
.hb-luck-sum { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.hb-luck-note { padding: 6px 0 0; color: #fde68a; }
.hb-luck-list { max-height: 180px; overflow-y: auto; }
.hb-luck-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid rgba(253,230,138,.1); }
.hb-luck-row:last-child { border-bottom: 0; }
.hb-luck-row.is-me .hb-luck-who { color: #fde68a; }
.hb-luck-who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-luck-amt { flex: none; display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.hb-luck-empty { padding: 8px 0; color: #fecaca; text-align: center; }
.hb-tag-best { flex: none; font-size: 10.5px; font-weight: 700; color: #7c2d12; background: #fde68a; border-radius: 4px; padding: 0 5px; }
.hb-tag-me { flex: none; font-size: 10.5px; font-weight: 700; color: #fde68a; border: 1px solid rgba(253,230,138,.5); border-radius: 4px; padding: 0 4px; }
.hb-take { flex: none; height: 40px; padding: 0 34px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500;
  background: #fde68a; color: #7c2d12; }
.hb-take[hidden] { display: none; }
.hb-take:focus-visible { outline: 2px solid #fff7d6; outline-offset: 2px; }

.hb-send-ov { position: fixed; inset: 0; z-index: 10045; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(10,8,20,.55); }
.hb-sheet { width: min(400px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 14px; border: 1px solid #6f6243;
  background: #1d1b2e; color: #efe2bf; box-shadow: 0 16px 38px rgba(0,0,0,.35); }
.hb-sheet-grip { display: none; width: 40px; height: 4px; border-radius: 2px; background: rgba(239,226,191,.25); margin: 8px auto 0; }
.hb-sheet-hd { position: relative; display: flex; align-items: center; gap: 8px; padding: 14px 44px 6px 16px; flex-wrap: wrap; }
.hb-sheet-hd b { font-size: 16px; font-weight: 600; }
.hb-sheet-bal { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: #b9ab86; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hb-sheet .hb-x { color: #b9ab86; top: 10px; }
.hb-sheet-body { padding: 4px 16px 16px; }
.hb-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(239,226,191,.1); min-width: 0; }
.hb-k { flex: none; width: 56px; color: #b9ab86; font-size: 13.5px; }
.hb-seg { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 8px; background: rgba(239,226,191,.06); }
.hb-seg button { min-height: 32px; border: 0; border-radius: 6px; background: transparent; color: #b9ab86; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.hb-seg button[aria-pressed="true"] { background: #efe2bf; color: #1d1b2e; }
.hb-seg button:focus-visible, .hb-step button:focus-visible { outline: 2px solid #e7c77e; outline-offset: 1px; }
.hb-step { margin-left: auto; display: inline-flex; align-items: stretch; border: 1px solid rgba(239,226,191,.22); border-radius: 6px; overflow: hidden; }
.hb-step button { width: 32px; border: 0; background: rgba(239,226,191,.06); color: #efe2bf; font-size: 16px; cursor: pointer; }
.hb-step input { width: 52px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 0; text-align: center; font: inherit; font-weight: 600;
  background: transparent; color: #efe2bf; -moz-appearance: textfield; appearance: textfield; }
.hb-in { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid rgba(239,226,191,.22); }
.hb-in:focus-within { border-color: #e7c77e; }
.hb-in-ico { display: inline-flex; flex: none; }
.hb-in input { flex: 1 1 auto; min-width: 0; width: 100%; height: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; color: #efe2bf;
  font: inherit; font-size: 14px; -moz-appearance: textfield; appearance: textfield; }
.hb-in input[type="number"] { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.hb-in input::placeholder { color: #8d8266; font-weight: 400; }
.hb-step input::-webkit-outer-spin-button, .hb-step input::-webkit-inner-spin-button,
.hb-in input::-webkit-outer-spin-button, .hb-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hb-step input:focus, .hb-in input:focus { outline: none; box-shadow: none; }
.hb-sum { display: grid; gap: 4px; margin: 12px 0 4px; padding: 10px 12px; border-radius: 8px; background: rgba(239,226,191,.06); font-size: 13px; }
.hb-sum > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hb-sum > div > span:first-child { color: #b9ab86; }
.hb-sum > div > span:last-child { font-variant-numeric: tabular-nums; }
.hb-sum-fee[hidden] { display: none !important; }
.hb-sum-big { font-size: 15px; }
.hb-sum-big > span:first-child { color: #efe2bf !important; }
.hb-sum-val { display: inline-flex; align-items: center; gap: 5px; }
.hb-sum-val b { font-weight: 700; }
.hb-hint { min-height: 18px; margin-top: 6px; font-size: 12px; color: #8d8266; }
.hb-hint.is-err { color: #fca5a5; }
.hb-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.hb-cancel, .hb-ok { height: 42px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.hb-cancel { border: 0; background: rgba(239,226,191,.08); color: #efe2bf; }
.hb-ok { border: 1px solid #d9b76a; background: linear-gradient(180deg, #e7c77e, #c9a24e); color: #2b1d05; }
.hb-ok:disabled { opacity: .45; cursor: default; }
.hb-cancel:focus-visible, .hb-ok:focus-visible { outline: 2px solid #efe2bf; outline-offset: 2px; }

@media (max-width: 560px) {
  .hb-send-ov { align-items: flex-end; padding: 0; }
  .hb-sheet { width: 100%; max-height: 88vh; border-radius: 14px 14px 0 0; border-bottom: 0; }
  .hb-sheet-grip { display: block; }
  .hb-sheet-bal { order: 3; width: 100%; margin-left: 0; }
}
@media (max-width: 620px) {
  .hb-chip-who { max-width: 5.5em; }
  .hb-chip-bar { width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-ov *, .hb-env { transition-duration: .01s !important; animation: none !important; }
}