/* ============================================================
   UI DESIGN SYSTEM — global tokens + shared component library
   ------------------------------------------------------------
   Extracted from css/sect-ui.css (Etapa 0 "SECT DESIGN FOUNDATION")
   and promoted to :root so ANY screen or modal resolves the tokens
   without needing a .sect-scope / .sect-modal-scope ancestor.

   Token prefix: --ui-* (canonical). --sect-* kept as aliases.
   Class prefix: .ui-* (canonical). .sect-* kept as aliases.

   This is a PRESENTATION layer only. It never changes mechanics,
   numbers, Decimal math, save formats, or event wiring.
   Reference: docs/ui-design-system.md
   ============================================================ */
:root {
    /* ---- Canonical --ui-* tokens ---- */
    /* surfaces */
    --ui-bg:            #141d2b;
    --ui-surface-1:     #1a2332;
    --ui-surface-2:     rgba(255,255,255,0.03);
    --ui-surface-3:     rgba(255,255,255,0.06);
    --ui-border:        rgba(255,255,255,0.08);
    --ui-border-strong: rgba(255,255,255,0.14);
    /* accents */
    --ui-teal:      #4ecdc4;  --ui-teal-dim: rgba(78,205,196,0.15);
    --ui-gold:      #ffd700;  --ui-gold-dim: rgba(255,215,0,0.10);
    --ui-danger:    #ff6b6b;  --ui-danger-dim: rgba(255,107,107,0.12);
    --ui-red:       #e74c3c;  --ui-red-dim: rgba(231,76,60,0.20);
    --ui-purple:    #9b59b6;  --ui-purple-dim: rgba(155,89,182,0.20);
    --ui-success:   #22c55e;
    /* accent gradient stops + extras (defaults == original hardcoded chrome values) */
    --ui-teal-2:      #45b7aa;  --ui-teal-bright: #63e0d7;  --ui-on-teal: #06231f;
    --ui-gold-2:      #e0b000;
    --ui-red-2:       #c0392b;
    --ui-purple-2:    #8e44ad;
    --ui-blue:        #3498db;  --ui-blue-2:      #2980b9;
    --ui-orange:      #ff9800;  --ui-info:        #2196f3;
    --ui-surface-1-2: #1e2a3a;
    --ui-navy-1:      #1a1a2e;  --ui-navy-2:      #16213e;

    /* ---- generated palette tokens (defaults == original hex; app-wide theme-ability) ---- */
    --p-000000:#000000; --p-0000ff:#0000ff; --p-00ff00:#00ff00; --p-04160b:#04160b;
    --p-04211f:#04211f; --p-052e16:#052e16; --p-06b6d4:#06b6d4; --p-070c0a:#070c0a;
    --p-0891b2:#0891b2; --p-0a0a0a:#0a0a0a; --p-0a0a14:#0a0a14; --p-0a1110:#0a1110;
    --p-0b1120:#0b1120; --p-0b1220:#0b1220; --p-0b1512:#0b1512; --p-0d0e1f:#0d0e1f;
    --p-0e1524:#0e1524; --p-0e1526:#0e1526; --p-0f172a:#0f172a; --p-101a2e:#101a2e;
    --p-10b981:#10b981; --p-111827:#111827; --p-12101e:#12101e; --p-12151f:#12151f;
    --p-12161f:#12161f; --p-131c30:#131c30; --p-141018:#141018; --p-14532d:#14532d;
    --p-15152a:#15152a; --p-166534:#166534; --p-16a34a:#16a34a; --p-1a1a1a:#1a1a1a;
    --p-1a1b34:#1a1b34; --p-1a1d28:#1a1d28; --p-1a202c:#1a202c; --p-1a2338:#1a2338;
    --p-1a4a6e:#1a4a6e; --p-1e1e2e:#1e1e2e; --p-1e293b:#1e293b; --p-1e3a8a:#1e3a8a;
    --p-1eb855:#1eb855; --p-1f2937:#1f2937; --p-22d3ee:#22d3ee; --p-253146:#253146;
    --p-2563eb:#2563eb; --p-273349:#273349; --p-273449:#273449; --p-27ae60:#27ae60;
    --p-2a2a2a:#2a2a2a; --p-2b3650:#2b3650; --p-2d3748:#2d3748; --p-2d8a82:#2d8a82;
    --p-2dd269:#2dd269; --p-2ecc71:#2ecc71; --p-333333:#333333; --p-334155:#334155;
    --p-34d399:#34d399; --p-374151:#374151; --p-38bdf8:#38bdf8; --p-3a4656:#3a4656;
    --p-3b0764:#3b0764; --p-3b82f6:#3b82f6; --p-3ba89f:#3ba89f; --p-3dbdb5:#3dbdb5;
    --p-3edc81:#3edc81; --p-3f3a5a:#3f3a5a; --p-444444:#444444; --p-44a6a0:#44a6a0;
    --p-44ffdd:#44ffdd; --p-475569:#475569; --p-4a0a0a:#4a0a0a; --p-4a4a6a:#4a4a6a;
    --p-4a5568:#4a5568; --p-4ade80:#4ade80; --p-4b5563:#4b5563; --p-4b5f86:#4b5f86;
    --p-4c1d95:#4c1d95; --p-4caf50:#4caf50; --p-555555:#555555; --p-5ee0d8:#5ee0d8;
    --p-5fd4cc:#5fd4cc; --p-5fd8cf:#5fd8cf; --p-5fd9d0:#5fd9d0; --p-60a5fa:#60a5fa;
    --p-64748b:#64748b; --p-666666:#666666; --p-6a7370:#6a7370; --p-6b7280:#6b7280;
    --p-6ee7a0:#6ee7a0; --p-718096:#718096; --p-777777:#777777; --p-7c2d12:#7c2d12;
    --p-7c3aed:#7c3aed; --p-7d4692:#7d4692; --p-7ec8e3:#7ec8e3; --p-7f1d1d:#7f1d1d;
    --p-7fcfbf:#7fcfbf; --p-7fefef:#7fefef; --p-818cf8:#818cf8; --p-86efac:#86efac;
    --p-888888:#888888; --p-8a2be2:#8a2be2; --p-8a8a9a:#8a8a9a; --p-8a8a9e:#8a8a9e;
    --p-8b0000:#8b0000; --p-8b00ff:#8b00ff; --p-8b6914:#8b6914; --p-8b97ad:#8b97ad;
    --p-8be9fd:#8be9fd; --p-8f2b23:#8f2b23; --p-92400e:#92400e; --p-9333ea:#9333ea;
    --p-93a3a0:#93a3a0; --p-94a3b8:#94a3b8; --p-95a5a6:#95a5a6; --p-95e1d3:#95e1d3;
    --p-991b1b:#991b1b; --p-9aa3af:#9aa3af; --p-9ca3af:#9ca3af; --p-9fb0c6:#9fb0c6;
    --p-a0aec0:#a0aec0; --p-a855f7:#a855f7; --p-aaaaaa:#aaaaaa; --p-b23a2f:#b23a2f;
    --p-b45309:#b45309; --p-bbbbbb:#bbbbbb; --p-bbf7d0:#bbf7d0; --p-bfdbfe:#bfdbfe;
    --p-c084fc:#c084fc; --p-c39bd3:#c39bd3; --p-c4b5fd:#c4b5fd; --p-c7c7c7:#c7c7c7;
    --p-c99a65:#c99a65; --p-cbd5e0:#cbd5e0; --p-cbd5e1:#cbd5e1; --p-ccac00:#ccac00;
    --p-cccccc:#cccccc; --p-cfeeea:#cfeeea; --p-d1fae5:#d1fae5; --p-d4a574:#d4a574;
    --p-d8b4fe:#d8b4fe; --p-d94639:#d94639; --p-d97706:#d97706; --p-dc143c:#dc143c;
    --p-dddddd:#dddddd; --p-e0e0e0:#e0e0e0; --p-e2e8f0:#e2e8f0; --p-e4f3f0:#e4f3f0;
    --p-e55555:#e55555; --p-e5e7eb:#e5e7eb; --p-e67e22:#e67e22; --p-e8c96a:#e8c96a;
    --p-e8d5b7:#e8d5b7; --p-e9c46a:#e9c46a; --p-eafffb:#eafffb; --p-eeeeee:#eeeeee;
    --p-ef4444:#ef4444; --p-ef8fa0:#ef8fa0; --p-f08532:#f08532; --p-f0f0f0:#f0f0f0;
    --p-f1948a:#f1948a; --p-f1f5f9:#f1f5f9; --p-f39c12:#f39c12; --p-f3f4f6:#f3f4f6;
    --p-f44336:#f44336; --p-f59e0b:#f59e0b; --p-f5a623:#f5a623; --p-f5d76e:#f5d76e;
    --p-f87171:#f87171; --p-f8fafc:#f8fafc; --p-facc15:#facc15; --p-fbbf24:#fbbf24;
    --p-fca5a5:#fca5a5; --p-fde68a:#fde68a; --p-fecaca:#fecaca; --p-fed7aa:#fed7aa;
    --p-ff0000:#ff0000; --p-ff4444:#ff4444; --p-ff5555:#ff5555; --p-ff5f52:#ff5f52;
    --p-ff6666:#ff6666; --p-ff7b7b:#ff7b7b; --p-ff7f00:#ff7f00; --p-ff8c00:#ff8c00;
    --p-ff8e8e:#ff8e8e; --p-ff8f84:#ff8f84; --p-ffaa00:#ffaa00; --p-ffb347:#ffb347;
    --p-ffc966:#ffc966; --p-ffe066:#ffe066; --p-ffe44d:#ffe44d; --p-ffe7e2:#ffe7e2;
    --p-ffec8b:#ffec8b; --p-fff4b0:#fff4b0; --p-ffff00:#ffff00; --p-ffffff:#ffffff;

    /* ---- generated palette tokens (JS inline styles; defaults == original hex) ---- */
    --p-003311:#003311; --p-00ff7f:#00ff7f; --p-00ffff:#00ffff; --p-04140f:#04140f;
    --p-059669:#059669; --p-0a0f18:#0a0f18; --p-0a0f1a:#0a0f1a; --p-0a1210:#0a1210;
    --p-0a1614:#0a1614; --p-0a1a0a:#0a1a0a; --p-0d0d1a:#0d0d1a; --p-0d1412:#0d1412;
    --p-101a28:#101a28; --p-111111:#111111; --p-120a10:#120a10; --p-12110b:#12110b;
    --p-12121f:#12121f; --p-12302b:#12302b; --p-140d12:#140d12; --p-140d1f:#140d1f;
    --p-14120a:#14120a; --p-141414:#141414; --p-149a72:#149a72; --p-15803d:#15803d;
    --p-160a14:#160a14; --p-16130f:#16130f; --p-1a1122:#1a1122; --p-1a1216:#1a1216;
    --p-1a2a1a:#1a2a1a; --p-1b1622:#1b1622; --p-1d2a3e:#1d2a3e; --p-1d4ed8:#1d4ed8;
    --p-1e1e2a:#1e1e2a; --p-1e40af:#1e40af; --p-1f4a7a:#1f4a7a; --p-1f6f6a:#1f6f6a;
    --p-222222:#222222; --p-223344:#223344; --p-245a38:#245a38; --p-2a0a0a:#2a0a0a;
    --p-2a2a3e:#2a2a3e; --p-2a2a4a:#2a2a4a; --p-2a3a2a:#2a3a2a; --p-2a3a55:#2a3a55;
    --p-2a6b5a:#2a6b5a; --p-2a7a5c:#2a7a5c; --p-2aa07a:#2aa07a; --p-2c3e50:#2c3e50;
    --p-301230:#301230; --p-302a12:#302a12; --p-3068b1:#3068b1; --p-31c79a:#31c79a;
    --p-34495e:#34495e; --p-34886f:#34886f; --p-3a2a7a:#3a2a7a; --p-3a4a5a:#3a4a5a;
    --p-3a5a4a:#3a5a4a; --p-442233:#442233; --p-444433:#444433; --p-44a08d:#44a08d;
    --p-4752c4:#4752c4; --p-4a38b1:#4a38b1; --p-4a5a7c:#4a5a7c; --p-4a6a62:#4a6a62;
    --p-4a7c59:#4a7c59; --p-4a8a70:#4a8a70; --p-4aa0e0:#4aa0e0; --p-55aaff:#55aaff;
    --p-5865f2:#5865f2; --p-5a0000:#5a0000; --p-5a3a1a:#5a3a1a; --p-5a3a3a:#5a3a3a;
    --p-5a5a6a:#5a5a6a; --p-5aa585:#5aa585; --p-5f7590:#5f7590; --p-6a0000:#6a0000;
    --p-6a4a62:#6a4a62; --p-6a6242:#6a6242; --p-6a6a7a:#6a6a7a; --p-6a8a6a:#6a8a6a;
    --p-6aad7a:#6aad7a; --p-6adb6a:#6adb6a; --p-6b5b8a:#6b5b8a; --p-6b7d7a:#6b7d7a;
    --p-6ee7b7:#6ee7b7; --p-7a4b12:#7a4b12; --p-7a7a8a:#7a7a8a; --p-7c5cff:#7c5cff;
    --p-7d6bd0:#7d6bd0; --p-7e22ce:#7e22ce; --p-7e57c2:#7e57c2; --p-7ecbff:#7ecbff;
    --p-7ee081:#7ee081; --p-7fa89e:#7fa89e; --p-7ff0e6:#7ff0e6; --p-7fff00:#7fff00;
    --p-854d0e:#854d0e; --p-8a6a48:#8a6a48; --p-8a7aa8:#8a7aa8; --p-8ac4ea:#8ac4ea;
    --p-8ad0c8:#8ad0c8; --p-8ae08a:#8ae08a; --p-8b4513:#8b4513; --p-8b5cf6:#8b5cf6;
    --p-8f7eff:#8f7eff; --p-8fa0c0:#8fa0c0; --p-8fa89e:#8fa89e; --p-8fb0d6:#8fb0d6;
    --p-8fd0c0:#8fd0c0; --p-8fe3a0:#8fe3a0; --p-8fe3dc:#8fe3dc; --p-8ff0cc:#8ff0cc;
    --p-90a4ae:#90a4ae; --p-90caf9:#90caf9; --p-93c5fd:#93c5fd; --p-999999:#999999;
    --p-99ffbb:#99ffbb; --p-9a7a55:#9a7a55; --p-9a7ac8:#9a7ac8; --p-9a8ac0:#9a8ac0;
    --p-9a9aab:#9a9aab; --p-9ae0c0:#9ae0c0; --p-9b1b4e:#9b1b4e; --p-a044c0:#a044c0;
    --p-a06ad0:#a06ad0; --p-a0a0b0:#a0a0b0; --p-a0d8a0:#a0d8a0; --p-a16207:#a16207;
    --p-a78bfa:#a78bfa; --p-a87f9e:#a87f9e; --p-a88f9e:#a88f9e; --p-a89e7f:#a89e7f;
    --p-b39ddb:#b39ddb; --p-b8860b:#b8860b; --p-b8b0c0:#b8b0c0; --p-b8b8c8:#b8b8c8;
    --p-b8c6c4:#b8c6c4; --p-bcbccc:#bcbccc; --p-bfe8dc:#bfe8dc; --p-c0261a:#c0261a;
    --p-c0399f:#c0399f; --p-c0982a:#c0982a; --p-c0a0e0:#c0a0e0; --p-c0b8a8:#c0b8a8;
    --p-c78bff:#c78bff; --p-c7d4e6:#c7d4e6; --p-c8a0e0:#c8a0e0; --p-c8b89a:#c8b89a;
    --p-c9a0ff:#c9a0ff; --p-c9a227:#c9a227; --p-c9b98a:#c9b98a; --p-c9c9d6:#c9c9d6;
    --p-cc0000:#cc0000; --p-ccddee:#ccddee; --p-cdd6e4:#cdd6e4; --p-cfe0d0:#cfe0d0;
    --p-d0955a:#d0955a; --p-d0d0d0:#d0d0d0; --p-d35400:#d35400; --p-d4a843:#d4a843;
    --p-d4af37:#d4af37; --p-d4e0ef:#d4e0ef; --p-d6d0e0:#d6d0e0; --p-d8d8e0:#d8d8e0;
    --p-daa520:#daa520; --p-dbeafe:#dbeafe; --p-e040fb:#e040fb; --p-e05555:#e05555;
    --p-e05bc0:#e05bc0; --p-e08a4a:#e08a4a; --p-e0a050:#e0a050; --p-e0b040:#e0b040;
    --p-e0c060:#e0c060; --p-e0c0c0:#e0c0c0; --p-e0d8c8:#e0d8c8; --p-e2c97e:#e2c97e;
    --p-e57373:#e57373; --p-e6eefb:#e6eefb; --p-e6f5ef:#e6f5ef; --p-e879f9:#e879f9;
    --p-e8a0ff:#e8a0ff; --p-e8c76d:#e8c76d; --p-e8d8ff:#e8d8ff; --p-e8daef:#e8daef;
    --p-e8e0d0:#e8e0d0; --p-e8e0e8:#e8e0e8; --p-e8e8e8:#e8e8e8; --p-eab308:#eab308;
    --p-ee99bb:#ee99bb; --p-eeeebb:#eeeebb; --p-ef9a9a:#ef9a9a; --p-f0a24a:#f0a24a;
    --p-f0c8ff:#f0c8ff; --p-f0d9ff:#f0d9ff; --p-f1c40f:#f1c40f; --p-f472b6:#f472b6;
    --p-f5b7b1:#f5b7b1; --p-f5e6f0:#f5e6f0; --p-f5efe0:#f5efe0; --p-f8b4a8:#f8b4a8;
    --p-f97316:#f97316; --p-fcd5ce:#fcd5ce; --p-fde6a8:#fde6a8; --p-fdeeb0:#fdeeb0;
    --p-ff424d:#ff424d; --p-ff4500:#ff4500; --p-ff6347:#ff6347; --p-ff6b4a:#ff6b4a;
    --p-ff6b9d:#ff6b9d; --p-ff7ac2:#ff7ac2; --p-ff8a1e:#ff8a1e; --p-ffb3b3:#ffb3b3;
    --p-ffce8a:#ffce8a; --p-ffcf6b:#ffcf6b; --p-ffd36b:#ffd36b; --p-ffd8a0:#ffd8a0;
    --p-ffd98a:#ffd98a; --p-ffdf3d:#ffdf3d; --p-ffe9a6:#ffe9a6; --p-fff0e6:#fff0e6;
    --p-fff5cc:#fff5cc;
    /* text */
    --ui-text:      #e6edf3;  --ui-text-dim: #8b98a5;  --ui-text-mute: #5c6773;
    /* stats */
    --c-hp:#7ec7ff; --c-dmg:#ff8a8a; --c-def:#8affc0; --c-qi:#4ee0c8; --c-prestige:#c9a6ff;
    /* space + radius */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
    --r-sm:6px; --r-md:10px; --r-lg:14px;

    /* ---- Backward-compat --sect-* aliases (map to --ui-*) ---- */
    --sect-bg:            var(--ui-bg);
    --sect-surface-1:     var(--ui-surface-1);
    --sect-surface-2:     var(--ui-surface-2);
    --sect-surface-3:     var(--ui-surface-3);
    --sect-border:        var(--ui-border);
    --sect-border-strong: var(--ui-border-strong);
    --sect-teal:      var(--ui-teal);    --sect-teal-dim:    var(--ui-teal-dim);
    --sect-gold:      var(--ui-gold);    --sect-gold-dim:    var(--ui-gold-dim);
    --sect-danger:    var(--ui-danger);  --sect-danger-dim:  var(--ui-danger-dim);
    --sect-red:       var(--ui-red);     --sect-red-dim:     var(--ui-red-dim);
    --sect-purple:    var(--ui-purple);  --sect-purple-dim:  var(--ui-purple-dim);
    --sect-success:   var(--ui-success);
    --sect-text:      var(--ui-text);    --sect-text-dim:    var(--ui-text-dim);  --sect-text-mute: var(--ui-text-mute);
}

/* ---- Panel / rhythm ---- */
.ui-panel, .sect-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
    color: var(--sect-text);
}
.ui-panel > *, .sect-panel > * { animation: sect-fade-in 0.3s ease both; }
.ui-panel > *:nth-child(1), .sect-panel > *:nth-child(1) { animation-delay: 0.02s; }
.ui-panel > *:nth-child(2), .sect-panel > *:nth-child(2) { animation-delay: 0.06s; }
.ui-panel > *:nth-child(3), .sect-panel > *:nth-child(3) { animation-delay: 0.10s; }
.ui-panel > *:nth-child(4), .sect-panel > *:nth-child(4) { animation-delay: 0.14s; }
.ui-panel > *:nth-child(5), .sect-panel > *:nth-child(5) { animation-delay: 0.18s; }
.ui-panel > *:nth-child(6), .sect-panel > *:nth-child(6) { animation-delay: 0.22s; }
@keyframes sect-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Alchemy & Talisman re-render on every button click (renderInto rebuilds the
   .sect-panel subtrees), which replays the staggered fade-in and reads as a
   full-screen "reload". These tabs opt out of the entry animation.
   The Sect Buildings modal rebuilds its content on every upgrade (refreshModal),
   so it opts out for the same reason. */
#alchemy-container .sect-panel > *,
#talisman-container .sect-panel > *,
#treasure-merge-container .sect-panel > *,
#legends .sect-panel > *,
#legends .ui-panel > *,
.buildings-modal.sect-panel > * { animation: none; }

/* ---- Section + title ---- */
.ui-section, .sect-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.ui-section__title, .sect-section__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--sect-text-dim);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--sect-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}
.ui-section__title--gold, .sect-section__title--gold { color: var(--sect-gold); }

/* ---- Card ---- */
.ui-card, .sect-card {
    background: var(--sect-surface-1);
    border: 1px solid var(--sect-border);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-sizing: border-box;
    /* Cards are shrinkable content in every grid/flex context: allow them to shrink below their
       intrinsic width (so a grid column can collapse on narrow screens) and let long unbreakable
       tokens (e-notation numbers, long names) wrap instead of overflowing the card. */
    min-width: 0;
    overflow-wrap: anywhere;
    /* Fixed-width digits keep numeric values (bonuses, costs, tiers) from changing width as they
       grow, so upgrading an item doesn't shove card content onto a new line / reflow the grid. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.ui-card--raised, .sect-card--raised { background: var(--sect-surface-3); }
.ui-card--hover:hover, .ui-card--clickable:hover,
.sect-card--hover:hover, .sect-card--clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(78,205,196,0.14);
    border-color: var(--sect-border-strong);
}
.ui-card--clickable, .sect-card--clickable { cursor: pointer; }
.ui-card--max, .sect-card--max {
    border-color: var(--sect-gold);
    background: var(--sect-gold-dim);
}
.ui-card--target, .sect-card--target {
    border-color: var(--sect-teal);
    background: var(--sect-teal-dim);
}
.ui-card__header, .sect-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.ui-card__title, .sect-card__title { font-size: 14px; font-weight: 700; color: var(--sect-text); }

/* ---- Stat chip ---- */
.ui-stat, .sect-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--sect-surface-2);
    border: 1px solid var(--sect-border);
    border-radius: var(--r-sm);
    min-width: 0;
    overflow: hidden;
}
.ui-stat__label, .sect-stat__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--sect-text-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ui-stat__value, .sect-stat__value {
    font-size: 17px;
    font-weight: 700;
    color: var(--sect-text);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ui-stat__value--gold, .sect-stat__value--gold { color: var(--sect-gold); }
.ui-stat__value--teal, .sect-stat__value--teal { color: var(--sect-teal); }
.ui-stat__value--danger, .sect-stat__value--danger { color: var(--sect-danger); }
.ui-stat__sub, .sect-stat__sub { font-size: 11px; color: var(--sect-text-dim); }
.ui-stat--center, .sect-stat--center { align-items: center; text-align: center; }

.ui-statgrid, .sect-statgrid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.ui-statgrid--2, .sect-statgrid--2 { grid-template-columns: repeat(2, 1fr); }
.ui-statgrid--3, .sect-statgrid--3 { grid-template-columns: repeat(3, 1fr); }
.ui-statgrid--4, .sect-statgrid--4 { grid-template-columns: repeat(4, 1fr); }
.ui-statgrid--auto, .sect-statgrid--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---- Chip ---- */
.ui-chip, .sect-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px 8px;
    background: var(--sect-surface-3);
    border: 1px solid var(--sect-border);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sect-text-dim);
    white-space: nowrap;
}
.ui-chip--gold, .sect-chip--gold { color: var(--sect-gold); background: var(--sect-gold-dim); border-color: rgba(255,215,0,0.25); }
.ui-chip--teal, .sect-chip--teal { color: var(--sect-teal); background: var(--sect-teal-dim); border-color: rgba(78,205,196,0.25); }
.ui-chip--danger, .sect-chip--danger { color: var(--sect-danger); background: var(--sect-danger-dim); border-color: rgba(255,107,107,0.25); }

/* ---- Progress bar ---- */
.ui-bar, .sect-bar {
    height: 6px;
    background: rgba(0,0,0,0.35);
    border-radius: 3px;
    overflow: hidden;
}
.ui-bar__fill, .sect-bar__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sect-teal), var(--ui-teal-2));
    transition: width 0.4s ease;
}
.ui-bar__fill--gold, .sect-bar__fill--gold { background: linear-gradient(90deg, var(--sect-gold), var(--ui-gold-2)); }

/* ---- Buttons (unified) ---- */
.ui-btn, .sect-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--sect-text);
    background: var(--sect-surface-3);
    border: 1px solid var(--sect-border-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.ui-btn:hover, .sect-btn:hover {
    transform: translateY(-2px);
    background: var(--sect-surface-3);
    border-color: var(--sect-teal);
    box-shadow: 0 4px 14px rgba(78,205,196,0.18);
}
.ui-btn:active, .sect-btn:active { animation: bulk-btn-pop 0.15s ease; }
/* Bloodline: no bounce on press — the pop makes buttons hard to read (filter/sort/equip/absorb, incl. modals) */
.bloodline-tab .ui-btn:active, .bloodline-tab .sect-btn:active,
[data-action^="bloodline"]:active { animation: none; }
.ui-btn:focus-visible, .sect-btn:focus-visible { outline: 2px solid var(--sect-teal); outline-offset: 2px; }
.ui-btn--primary, .sect-btn--primary {
    color: var(--ui-on-teal);
    background: linear-gradient(135deg, var(--sect-teal), var(--ui-teal-2));
    border-color: transparent;
}
.ui-btn--primary:hover, .sect-btn--primary:hover {
    background: linear-gradient(135deg, var(--ui-teal-bright), var(--ui-teal));
    color: var(--ui-on-teal);
    box-shadow: 0 6px 18px rgba(78,205,196,0.35);
}
.ui-btn--ghost, .sect-btn--ghost {
    background: transparent;
    border-color: var(--sect-border-strong);
    color: var(--sect-text-dim);
}
.ui-btn--ghost:hover, .sect-btn--ghost:hover { color: var(--sect-text); border-color: var(--sect-teal); }
.ui-btn--danger, .sect-btn--danger {
    background: var(--sect-danger-dim);
    border-color: rgba(255,107,107,0.5);
    color: var(--sect-danger);
}
.ui-btn--danger:hover, .sect-btn--danger:hover { background: rgba(255,107,107,0.22); border-color: var(--sect-danger); box-shadow: 0 4px 14px rgba(255,107,107,0.22); }
.ui-btn--gold, .sect-btn--gold {
    background: var(--sect-gold-dim);
    border-color: rgba(255,215,0,0.5);
    color: var(--sect-gold);
}
.ui-btn--gold:hover, .sect-btn--gold:hover { background: rgba(255,215,0,0.2); border-color: var(--sect-gold); }
.ui-btn--sm, .sect-btn--sm { padding: 5px 10px; font-size: 11px; border-radius: var(--r-sm); }
.ui-btn--block, .sect-btn--block { width: 100%; }
.ui-btn:disabled, .ui-btn.disabled,
.sect-btn:disabled, .sect-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    border-color: var(--sect-border);
}

/* ---- Toolbar (filters/actions row) ---- */
.ui-toolbar, .sect-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--sect-surface-2);
    border: 1px solid var(--sect-border);
    border-radius: var(--r-md);
}
.ui-toolbar__group, .sect-toolbar__group { display: flex; align-items: center; gap: var(--sp-2); }
.ui-toolbar__label, .sect-toolbar__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--sect-text-dim); }
.ui-toolbar select, .sect-toolbar select,
.ui-select, .sect-select {
    padding: 6px 10px;
    background: var(--sect-surface-1);
    border: 1px solid var(--sect-border-strong);
    border-radius: var(--r-sm);
    color: var(--sect-text);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.ui-toolbar select:hover, .sect-toolbar select:hover,
.ui-select:hover, .sect-select:hover { border-color: var(--sect-teal); }
.ui-search, .sect-search {
    padding: 6px 12px;
    background: var(--sect-surface-1);
    border: 1px solid var(--sect-border-strong);
    border-radius: var(--r-sm);
    color: var(--sect-text);
    font-size: 12px;
    font-family: inherit;
    min-width: 160px;
}
.ui-search:focus, .sect-search:focus { outline: none; border-color: var(--sect-teal); }

/* ---- Segmented control ---- */
.ui-segment, .sect-segment {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    background: var(--sect-surface-2);
    border: 1px solid var(--sect-border);
    border-radius: var(--r-sm);
}
.ui-segment__btn, .sect-segment__btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--sect-text-dim);
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.ui-segment__btn:hover, .sect-segment__btn:hover { color: var(--sect-text); }
.ui-segment__btn.active, .sect-segment__btn.active {
    color: var(--ui-on-teal);
    background: var(--sect-teal);
}
.ui-segment--scroll, .sect-segment--scroll { overflow-x: auto; max-width: 100%; flex-wrap: nowrap; }

/* ---- Badge ---- */
.ui-badge, .sect-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px 8px;
    border-radius: var(--r-sm);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ui-badge--available, .sect-badge--available { color: var(--sect-success); background: rgba(34,197,94,0.14); }
.ui-badge--busy, .sect-badge--busy { color: var(--sect-danger); background: var(--sect-danger-dim); }
.ui-badge--mission, .sect-badge--mission { color: var(--ui-orange); background: rgba(255,152,0,0.14); }
.ui-badge--workshop, .sect-badge--workshop { color: var(--ui-info); background: rgba(33,150,243,0.14); }
.ui-badge--shopkeeper, .sect-badge--shopkeeper { color: var(--sect-gold); background: var(--sect-gold-dim); }
.ui-badge--locked, .sect-badge--locked { color: var(--sect-text-mute); background: var(--sect-surface-3); }
.ui-badge--teal, .sect-badge--teal { color: var(--sect-teal); background: var(--sect-teal-dim); }

/* ---- Empty state ---- */
.ui-empty, .sect-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-6);
    text-align: center;
    color: var(--sect-text-mute);
}
.ui-empty__icon, .sect-empty__icon { font-size: 2em; opacity: 0.6; }
.ui-empty__text, .sect-empty__text { font-size: 13px; color: var(--sect-text-dim); }

/* ---- Empty equipment slot (dashed teal affordance) ---- */
.ui-slot-empty, .sect-slot-empty {
    border: 1.5px dashed var(--sect-teal-dim);
    border-radius: var(--r-md);
    padding: 8px 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ui-slot-empty:hover, .sect-slot-empty:hover { border-color: var(--sect-teal); background: rgba(78,205,196,0.06); }
.ui-slot-empty__plus, .sect-slot-empty__plus { color: var(--sect-teal-dim); font-size: 1.1em; font-weight: bold; transition: color 0.15s ease; }
.ui-slot-empty:hover .ui-slot-empty__plus, .ui-slot-empty:hover .sect-slot-empty__plus,
.sect-slot-empty:hover .ui-slot-empty__plus, .sect-slot-empty:hover .sect-slot-empty__plus { color: var(--sect-teal); }

/* ---- Modal frame ---- */
/* .ui-modal — standard modal frame (bg + border + shadow + flex column).
   Replaces the inline MODAL_BG + MODAL_SHADOW constants from modal.js. */
.ui-modal {
    background: linear-gradient(135deg, var(--ui-surface-1), var(--ui-surface-1-2));
    border: 1px solid rgba(78,205,196,0.3);
    border-radius: var(--r-md);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
/* .ui-modal-scope — marker added to every modal's content root so
   .ui-*/.sect-* classes always resolve inside any Modal.create() frame. */
.ui-modal-scope {}
.ui-modal__title {
    color: var(--ui-gold);
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-modal__content {
    overflow: auto;
    flex: 1;
    min-height: 0;
}

/* ---- Responsive ---- */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    .ui-panel, .sect-panel { padding: var(--sp-3); gap: var(--sp-3); }
    .ui-statgrid--3, .ui-statgrid--4, .sect-statgrid--3, .sect-statgrid--4 { grid-template-columns: repeat(2, 1fr); }
    .ui-card, .sect-card { padding: var(--sp-3); }
}

/* ---- Breakdown row (stat breakdown modals) ---- */
.ui-bd-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 0.85em;
}
.ui-bd-row--indent {
    padding-left: 16px;
    opacity: 0.85;
}
.ui-bd-row--indent2 {
    padding-left: 34px;
    opacity: 0.7;
    font-size: 0.8em;
}
.ui-bd-row__label { color: var(--ui-text-dim); }
.ui-bd-row__value { color: var(--ui-text); }

/* Breakdown total row */
.ui-bd-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    margin-top: 12px;
    border-top: 1px solid var(--ui-border);
    font-weight: 700;
    font-size: 0.9em;
}
.ui-bd-total__label { color: var(--ui-gold); }
.ui-bd-total__value { color: var(--ui-text); }

/* ============================================================
   UTILITY KEYFRAMES
   ============================================================ */

@keyframes mindFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes mindXpPop {
    0% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -32px); }
}

@keyframes acFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes acXpPop {
    0% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -32px); }
}

@keyframes lawFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ============================================================
   INFO GUIDE
   ============================================================ */

#infoGuideModal_content { overflow: hidden !important; }

.info-guide-container {
    display: flex;
    height: 100%;
    gap: 20px;
    overflow: hidden;
    min-height: 0;
}
.info-guide-sidebar {
    width: 180px;
    flex-shrink: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    max-height: 100%;
}
.info-guide-sidebar-btn {
    background: rgba(78, 205, 196, 0.1);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 12px 15px;
    color: var(--p-cccccc);
    cursor: pointer;
    transition: all 0.3s;
    text-align: left;
    font-size: 0.95em;
}
.info-guide-sidebar-btn:hover {
    background: rgba(78, 205, 196, 0.2);
    border-color: rgba(78, 205, 196, 0.3);
    color: var(--p-ffffff);
}
.info-guide-sidebar-btn.active {
    background: rgba(78, 205, 196, 0.3);
    border-color: var(--ui-teal);
    color: var(--ui-teal);
    font-weight: bold;
}
.info-guide-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
}
.info-guide-category {
    margin-bottom: 25px;
    border-radius: 10px;
    overflow: hidden;
}
.info-guide-category-header {
    padding: 15px;
    border-left: 4px solid;
    background: rgba(0, 0, 0, 0.3);
}
.info-guide-category-name {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.info-guide-category-badge {
    font-size: 0.7em;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}
.info-guide-category-desc {
    color: var(--p-aaaaaa);
    font-size: 0.9em;
    line-height: 1.5;
}
.info-guide-realms-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
}
.info-guide-realm-item {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border-left: 3px solid;
    display: flex;
    align-items: center;
    gap: 10px;
}
.info-guide-realm-index {
    color: var(--p-888888);
    font-size: 0.85em;
    min-width: 25px;
}
.info-guide-realm-name {
    color: var(--p-ffffff);
    font-size: 0.95em;
}
.info-guide-subtabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(78, 205, 196, 0.3);
    padding-bottom: 10px;
}
.info-guide-subtab {
    background: rgba(78, 205, 196, 0.1);
    border: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 10px 20px;
    color: var(--p-cccccc);
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9em;
}
.info-guide-subtab:hover {
    background: rgba(78, 205, 196, 0.2);
    color: var(--p-ffffff);
}
.info-guide-subtab.active {
    background: rgba(78, 205, 196, 0.3);
    border-color: var(--ui-teal);
    border-bottom-color: transparent;
    color: var(--ui-teal);
    font-weight: bold;
}
.info-guide-attr-card {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    border-left: 4px solid;
}
.info-guide-attr-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.info-guide-attr-icon { font-size: 1.8em; }
.info-guide-attr-name { font-size: 1.15em; font-weight: bold; }
.info-guide-attr-desc {
    color: var(--p-bbbbbb);
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 12px;
}
.info-guide-attr-sources {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 12px;
}
.info-guide-attr-sources-title {
    color: var(--ui-teal);
    font-size: 0.85em;
    font-weight: bold;
    margin-bottom: 8px;
}
.info-guide-attr-sources-list { list-style: none; padding: 0; margin: 0; }
.info-guide-attr-sources-list li {
    color: var(--p-aaaaaa);
    font-size: 0.85em;
    padding: 3px 0 3px 15px;
    position: relative;
}
.info-guide-attr-sources-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--ui-teal);
}
.info-guide-attr-formula {
    margin-top: 10px;
    padding: 10px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    color: var(--ui-gold);
    font-size: 0.85em;
    font-family: monospace;
}
.info-guide-elements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}
.info-guide-element-card {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    border: 2px solid;
    transition: all 0.3s;
}
.info-guide-element-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.info-guide-element-icon { font-size: 2em; margin-bottom: 8px; }
.info-guide-element-name { font-weight: bold; font-size: 1em; }
.info-guide-section-title {
    color: var(--ui-gold);
    font-size: 1.1em;
    font-weight: bold;
    margin: 25px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}
.info-guide-cycle-box {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    border-left: 4px solid;
}
.info-guide-cycle-title { font-weight: bold; font-size: 1em; margin-bottom: 8px; }
.info-guide-cycle-desc { color: var(--p-aaaaaa); font-size: 0.9em; margin-bottom: 12px; }
.info-guide-cycle-chain {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.95em;
}
.info-guide-cycle-arrow { color: var(--p-888888); }
.info-guide-info-box {
    background: rgba(78, 205, 196, 0.1);
    border: 1px solid rgba(78, 205, 196, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}
.info-guide-info-box-title {
    color: var(--ui-teal);
    font-weight: bold;
    margin-bottom: 8px;
}
.info-guide-info-box p {
    color: var(--p-bbbbbb);
    font-size: 0.9em;
    line-height: 1.6;
    margin: 0;
}
.info-guide-highlight { color: var(--ui-gold); font-weight: bold; }

/* Mobile drawer trigger + backdrop — hidden on desktop (two-column layout) */
.info-guide-mobile-trigger { display: none; }
.info-guide-backdrop { display: none; }

/* ─── Info Guide — Mobile (drawer navigation) ─── */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    .info-guide-container {
        flex-direction: column;
        gap: 0;
        position: relative;
    }

    /* Dropdown-style trigger: shows current section, opens the drawer */
    .info-guide-mobile-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        flex-shrink: 0;
        margin-bottom: 12px;
        padding: 12px 15px;
        background: rgba(78, 205, 196, 0.15);
        border: 2px solid var(--ui-teal);
        border-radius: 8px;
        color: var(--ui-teal);
        font-weight: bold;
        font-size: 1em;
        cursor: pointer;
        text-align: left;
    }
    .info-guide-mobile-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .info-guide-mobile-trigger-chevron { flex-shrink: 0; }

    /* Content takes the full width */
    .info-guide-content {
        flex: 1;
        min-height: 0;
        padding-right: 0;
    }

    /* Sidebar becomes an off-canvas drawer sliding in from the left */
    .info-guide-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: min(280px, 85%);
        max-height: 100%;
        z-index: 6;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.6);
        background: var(--p-12161f);
        border-right: 1px solid rgba(78, 205, 196, 0.3);
    }
    .info-guide-container.drawer-open .info-guide-sidebar {
        transform: translateX(0);
    }

    /* Dim backdrop behind the open drawer; tapping it closes the drawer */
    .info-guide-backdrop {
        position: absolute;
        inset: 0;
        z-index: 5;
        background: rgba(0, 0, 0, 0.6);
    }
    .info-guide-container.drawer-open .info-guide-backdrop {
        display: block;
    }

    /* Bigger tap targets in the drawer */
    .info-guide-sidebar-btn {
        padding: 14px 15px;
        font-size: 1em;
    }

    /* Tighter cards so nothing overflows the narrow viewport */
    .info-guide-attr-card,
    .info-guide-cycle-box { padding: 14px; }
    .info-guide-realms-list {
        grid-template-columns: 1fr;
        padding: 10px;
    }
    .info-guide-subtabs { flex-wrap: wrap; gap: 6px; }
    .info-guide-subtab { padding: 8px 14px; }
}

/* ============================================================
   FATE CARDS
   ============================================================ */

@keyframes fc-border-glow {
    0%, 100% { border-color: rgba(255,215,0,0.06); box-shadow: 0 0 10px rgba(255,215,0,0.02); }
    50% { border-color: rgba(255,215,0,0.18); box-shadow: 0 0 18px rgba(255,215,0,0.06); }
}
@keyframes fc-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fc-orbit { to { transform: rotate(360deg); } }
@keyframes fc-orbit-r { to { transform: rotate(-360deg); } }
@keyframes fc-rainbow {
    0%   { border-color: var(--p-ff0000); box-shadow: 0 0 12px rgba(255,0,0,0.15); }
    16%  { border-color: var(--p-ff7f00); box-shadow: 0 0 12px rgba(255,127,0,0.15); }
    33%  { border-color: var(--p-ffff00); box-shadow: 0 0 12px rgba(255,255,0,0.15); }
    50%  { border-color: var(--p-00ff00); box-shadow: 0 0 12px rgba(0,255,0,0.15); }
    66%  { border-color: var(--p-0000ff); box-shadow: 0 0 12px rgba(0,0,255,0.15); }
    83%  { border-color: var(--p-8b00ff); box-shadow: 0 0 12px rgba(139,0,255,0.15); }
    100% { border-color: var(--p-ff0000); box-shadow: 0 0 12px rgba(255,0,0,0.15); }
}

.fc-wrap { position: relative; max-width: none; width: 100%; margin: 0; padding: 0 16px; overflow: hidden; }

.fc-header { position: relative; text-align: center; padding: 18px 0 14px; margin-bottom: 14px; }
.fc-header::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 220px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,215,0,0.35), transparent); }
.fc-title { font-size: 1.4em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-gold); text-shadow: 0 0 20px rgba(255,215,0,0.25); }

.fc-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,215,0,0.04); pointer-events: none; }
.fc-ring-1 { width: 180px; height: 180px; top: -60px; right: -60px; animation: fc-orbit 25s linear infinite; }
.fc-ring-1::before { content: ""; position: absolute; top: 0; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,215,0,0.3); transform: translateX(-50%); }
.fc-ring-2 { width: 240px; height: 240px; top: -90px; right: -90px; border-color: rgba(255,215,0,0.025); animation: fc-orbit-r 35s linear infinite; }
.fc-ring-2::before { content: ""; position: absolute; top: 0; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,215,0,0.18); transform: translateX(-50%); }

.fc-connecting { color: var(--p-4a5568); font-size: 0.82em; margin-bottom: 14px; letter-spacing: 0.02em; }

.fc-stats { border: 1px solid rgba(255,215,0,0.1); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; background: linear-gradient(135deg, rgba(255,215,0,0.04), rgba(255,215,0,0.01)); animation: fc-border-glow 5s ease-in-out infinite; }
.fc-stats-title { font-size: 0.68em; font-weight: 700; color: var(--ui-gold); margin-bottom: 5px; letter-spacing: 0.08em; text-transform: uppercase; }
.fc-stats-grid { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fc-stat { font-size: 0.7em; display: flex; align-items: center; gap: 3px; }
.fc-stat-label { opacity: 0.8; }
.fc-stat-val { font-weight: 700; }

.fc-section { border: 1px solid rgba(255,215,0,0.06); border-radius: 8px; padding: 0; margin-bottom: 6px; background: linear-gradient(160deg, rgba(18,18,38,0.7), rgba(13,13,28,0.8)); overflow: hidden; transition: border-color 0.3s; }
.fc-section:hover { border-color: rgba(255,215,0,0.12); }
.fc-section--rainbow { animation: fc-rainbow 6s linear infinite; }
.fc-section-hdr { padding: 7px 12px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; transition: background 0.2s; }
.fc-section-hdr:hover { background: rgba(255,255,255,0.02); }
.fc-section-arrow { font-size: 0.6em; transition: transform 0.2s; opacity: 0.7; }
.fc-section-arrow--open { transform: rotate(90deg); }
.fc-section-name { font-size: 0.78em; font-weight: 700; letter-spacing: 0.04em; }
.fc-section-count { color: var(--p-4a5568); font-weight: 400; font-size: 0.78em; }
.fc-section-bar { height: 1px; margin: 0 12px; border-radius: 1px; opacity: 0.25; }

.fc-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 12px; }

.fc-tile { --fc-accent: var(--p-9ca3af); --fc-rgb: 156,163,175; width: 68px; border: 1px solid rgba(var(--fc-rgb),0.2); border-radius: 6px; padding: 5px 4px 4px; background: linear-gradient(160deg, rgba(18,18,38,0.9), rgba(10,10,24,0.95)); text-align: center; transition: all 0.25s; animation: fc-fade-in 0.3s ease-out both; position: relative; overflow: hidden; }
.fc-tile--owned { cursor: default; }
.fc-tile--owned:hover { border-color: rgba(var(--fc-rgb),0.5); box-shadow: 0 0 14px rgba(var(--fc-rgb),0.1); transform: translateY(-2px); }
.fc-tile--locked { opacity: 0.3; }
.fc-tile--rainbow { animation: fc-rainbow 4s linear infinite, fc-fade-in 0.3s ease-out both; }
.fc-tile-img { display: block; margin: 0 auto 3px; border-radius: 3px; transition: filter 0.3s, transform 0.3s; }
.fc-tile--owned:hover .fc-tile-img { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(var(--fc-rgb),0.4)); }
.fc-tile-img--locked { filter: grayscale(1) brightness(0.5); }
.fc-tile-name { font-size: 0.58em; color: var(--p-cbd5e0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.fc-tile-stats { font-size: 0.48em; line-height: 1.3; margin-bottom: 2px; min-height: 10px; }
.fc-tile-qty { font-size: 0.62em; font-weight: 700; }
.fc-tile-qty--owned { color: var(--p-e2e8f0); }
.fc-tile-qty--locked { color: var(--p-4a5568); }
.fc-tile-glow { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--fc-rgb),0.08) 0%, transparent 70%); pointer-events: none; }

/* --- Fate Cards: view tabs, stars, fusion, collections --- */
.fc-viewtabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.fc-viewtab { padding: 6px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); color: var(--p-94a3b8); font-size: 0.82em; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: all 0.15s; }
.fc-viewtab:hover { color: var(--p-e2e8f0); border-color: rgba(255,255,255,0.18); }
.fc-viewtab--active { color: var(--ui-gold, var(--ui-gold)); border-color: rgba(255,215,0,0.4); background: rgba(255,215,0,0.06); }

.fc-star-badge { display: inline-block; color: var(--ui-gold); font-size: 0.72em; font-weight: 700; }
.fc-tile-equipped { font-size: 0.6em; color: var(--p-10b981); margin-top: 2px; }
.fc-star-list { display: flex; flex-wrap: wrap; gap: 4px; }
.fc-star-row { display: flex; align-items: center; gap: 6px; font-size: 0.66em; }
.fc-star-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,0.05); font-size: 0.66em; }
.fc-star-count { color: var(--p-cbd5e1); }

/* Inventory-style card grid */
.fc-inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.5rem; align-items: start; padding: 2px; }
.fc-inv-card { display: flex; flex-direction: column; padding: 10px; border-width: 2px; border-radius: 10px; min-height: 232px; }
.fc-inv-card--locked { opacity: 0.5; }
.fc-inv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.fc-inv-name { font-weight: 700; font-size: 0.9em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-inv-rarity { font-size: 0.58em; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; white-space: nowrap; }
.fc-inv-stats { font-size: 0.72em; margin: 4px 0; line-height: 1.4; min-height: 1em; }
.fc-inv-art { display: flex; justify-content: center; align-items: center; padding: 8px 0; }
.fc-inv-art-img { border-radius: 6px; filter: drop-shadow(0 0 5px rgba(0,0,0,0.35)); }
.fc-inv-foot { margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
.fc-inv-count { font-size: 0.72em; color: var(--p-cbd5e1); font-weight: 600; }
.fc-inv-eq { color: var(--p-34d399); font-weight: 500; }
.fc-inv-count--locked { color: var(--p-64748b); }
.fc-fuse-progress { font-size: 0.66em; color: var(--p-64748b); text-align: center; }
.fc-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.fc-pager-info { font-size: 0.8em; color: var(--p-94a3b8); font-weight: 600; }
@keyframes fc-spin { to { transform: rotate(360deg); } }
.fc-loading-spinner { width: 42px; height: 42px; border: 4px solid rgba(255,215,0,0.15); border-top-color: var(--ui-gold); border-radius: 50%; animation: fc-spin 0.8s linear infinite; }

/* Fusion animation overlay */
.fc-fuse-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.68); backdrop-filter: blur(3px); }
.fc-fuse-stage { position: relative; width: 230px; height: 240px; display: flex; align-items: center; justify-content: center; }
.fc-fuse-card { width: 80px; height: 112px; border-radius: 8px; filter: drop-shadow(0 0 12px var(--fc-fuse-color, var(--ui-gold))); animation: fc-fuse-breathe 1.1s ease-in-out infinite; }
@keyframes fc-fuse-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.fc-fuse-ring { position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 2px dashed var(--fc-fuse-color, var(--ui-gold)); opacity: 0.45; animation: fc-spin 3s linear infinite; }
.fc-fuse-orbit { position: absolute; width: 160px; height: 160px; animation: fc-fuse-pullin 1.5s ease-in-out infinite; }
@keyframes fc-fuse-pullin { 0% { transform: rotate(0deg) scale(1); opacity: 0.95; } 100% { transform: rotate(120deg) scale(0.18); opacity: 0.1; } }
.fc-fuse-spark-card { position: absolute; top: 50%; left: 50%; width: 30px; height: 42px; margin: -21px 0 0 -15px; border-radius: 4px; filter: drop-shadow(0 0 6px var(--fc-fuse-color, var(--ui-gold))); }
.fc-fuse-label { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 0.82em; font-weight: 700; color: var(--p-e2e8f0); letter-spacing: 0.03em; }
.fc-fuse-label--done { color: var(--ui-gold); }
.fc-fuse-flash { position: absolute; inset: 0; background: radial-gradient(circle, var(--fc-fuse-color, var(--ui-gold)) 0%, transparent 60%); animation: fc-fuse-flash-kf 550ms ease-out both; pointer-events: none; }
@keyframes fc-fuse-flash-kf { from { opacity: 0.7; transform: scale(0.6); } to { opacity: 0; transform: scale(1.7); } }
.fc-fuse-reveal { position: relative; display: flex; align-items: center; justify-content: center; animation: fc-fuse-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes fc-fuse-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fc-fuse-newcard { width: 100px; height: 140px; border-radius: 8px; filter: drop-shadow(0 0 18px var(--fc-fuse-color, var(--ui-gold))); }
.fc-fuse-newstar { position: absolute; top: -12px; right: -12px; font-size: 1em; font-weight: 800; color: var(--ui-gold); background: var(--p-12101e); border: 2px solid rgba(255,215,0,0.6); border-radius: 8px; padding: 2px 9px; }
.fc-codex-card { display: flex; flex-direction: column; padding: 10px; border-width: 2px; border-radius: 10px; }
.fc-codex-desc { font-size: 0.7em; color: var(--p-94a3b8); font-style: italic; line-height: 1.35; margin: 4px 0 6px; }
.fc-codex-effect { margin-top: auto; font-size: 0.76em; font-weight: 600; }

/* Fate Skins — uniform card sizing (cap the variable stat lists, stretch each row) */
.fc-inv-grid.fc-skins-grid { align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.fc-skins-grid .fc-inv-card, .fc-skins-grid .fc-codex-card { height: 100%; min-height: 400px; }
.fc-skins-grid .fc-inv-art { min-height: 176px; flex-shrink: 0; }
.fc-skins-grid .fc-inv-stats { height: 170px; overflow-y: auto; margin: 4px 0; }
.fc-skins-grid .fc-codex-desc { height: 34px; overflow: hidden; }
.fc-skins-grid .fc-codex-effect { height: 180px; overflow-y: auto; }

/* Fate Titles — uniform card sizing (stretch each row, fixed stat/art/effect blocks) */
.fc-inv-grid.fc-titles-grid { align-items: stretch; }
.fc-titles-grid .fc-inv-card, .fc-titles-grid .fc-codex-card { height: 100%; min-height: 260px; }
.fc-titles-grid .fc-inv-stats { height: 84px; overflow-y: auto; }
.fc-titles-grid .fc-inv-art { height: 74px; padding: 4px 0; }
.fc-titles-grid .fc-codex-desc { height: 46px; overflow: hidden; }
.fc-titles-grid .fc-codex-effect { height: 92px; overflow-y: auto; }
.fc-fuse-btn { margin-left: auto; padding: 1px 8px; border-radius: 5px; border: 1px solid rgba(255,215,0,0.4); background: rgba(255,215,0,0.08); color: var(--ui-gold); font-size: 0.9em; font-weight: 700; cursor: pointer; }
.fc-fuse-btn:hover { background: rgba(255,215,0,0.18); }
.fc-fuse-btn--disabled { border-color: rgba(255,255,255,0.1); background: transparent; color: var(--p-64748b); cursor: default; }

/* Collections as a card grid */
.fc-col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.6rem; align-items: start; }
.fc-col-card { display: flex; flex-direction: column; padding: 12px; border-width: 2px; border-radius: 10px; }
.fc-col-card--complete { box-shadow: 0 0 18px rgba(16,185,129,0.12); }
.fc-col-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fc-col-emblem-wrap { flex: 0 0 auto; display: flex; }
.fc-col-emblem { display: block; }
.fc-col-headtext { min-width: 0; flex: 1; }
.fc-col-name { font-weight: 700; color: var(--p-e2e8f0); font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-col-prog { font-size: 0.72em; color: var(--p-94a3b8); font-weight: 600; margin-top: 2px; }
.fc-col-prog--done { color: var(--p-34d399); }
.fc-col-bonus { font-size: 0.78em; color: var(--p-34d399); font-weight: 700; margin-bottom: 8px; }
.fc-col-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-mthumb { position: relative; width: 42px; padding: 4px 2px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; display: flex; justify-content: center; background: rgba(255,255,255,0.02); cursor: pointer; transition: all 0.15s; }
.fc-mthumb:hover { background: rgba(255,255,255,0.06); }
.fc-mthumb-img { border-radius: 3px; }
.fc-mthumb--locked .fc-mthumb-img { filter: grayscale(1) brightness(0.38); }
.fc-mthumb--locked { opacity: 0.85; cursor: default; }
.fc-mthumb--equipped { box-shadow: 0 0 8px rgba(16,185,129,0.35); }
.fc-mthumb--keystone { box-shadow: 0 0 8px rgba(255,215,0,0.25); }
.fc-mthumb-key { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-size: 0.6em; color: var(--ui-gold); background: var(--p-12101e); border-radius: 3px; padding: 0 2px; line-height: 1.2; }
.fc-mthumb-star { position: absolute; bottom: -5px; right: -3px; font-size: 0.58em; font-weight: 700; color: var(--ui-gold); background: var(--p-12101e); border-radius: 3px; padding: 0 2px; }

/* Collection detail modal */
.fc-modal-overlay { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; }
.fc-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.62); backdrop-filter: blur(2px); }
.fc-modal { position: relative; z-index: 1; width: calc(100% - 32px); max-width: 760px; max-height: 86vh; overflow-y: auto; padding: 18px 18px 20px; border-width: 2px; border-radius: 12px; }
.fc-modal-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--p-94a3b8); font-size: 1.5em; line-height: 1; cursor: pointer; z-index: 2; }
.fc-modal-close:hover { color: var(--p-e2e8f0); }
.fc-detail-head { display: flex; align-items: center; gap: 12px; }

/* Equip picker modal (choose a star tier, shown as cards) */
.fc-pick-overlay { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; }
.fc-pick-modal { position: relative; z-index: 1; width: calc(100% - 32px); max-width: 520px; max-height: 86vh; overflow-y: auto; padding: 18px; border-width: 2px; border-radius: 12px; }
.fc-pick-title { font-weight: 700; font-size: 1.05em; margin-bottom: 2px; }
.fc-pick-sub { font-size: 0.78em; color: var(--p-94a3b8); margin-bottom: 12px; }
.fc-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.6rem; }
.fc-pick-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-width: 2px; border-radius: 10px; cursor: pointer; transition: all 0.15s; }
.fc-pick-tile:hover { background: rgba(255,255,255,0.05); transform: translateY(-2px); }
.fc-pick-tile--eq { box-shadow: 0 0 12px rgba(16,185,129,0.3); }
.fc-pick-tile--disabled { cursor: default; }
.fc-pick-tile--disabled:hover { background: none; transform: none; }
.fc-pick-tile-art { position: relative; display: flex; justify-content: center; }
.fc-pick-tile-art .fc-inv-art-img { border-radius: 6px; filter: drop-shadow(0 0 5px rgba(0,0,0,0.35)); }
.fc-pick-tile-star { position: absolute; top: -6px; right: -6px; font-size: 0.7em; font-weight: 700; color: var(--ui-gold); background: var(--p-12101e); border: 1px solid rgba(255,215,0,0.5); border-radius: 5px; padding: 0 4px; }
.fc-pick-tile-sub { font-size: 0.72em; color: var(--ui-gold); font-weight: 600; text-align: center; }
.fc-pick-tile-sub--eq { color: var(--p-34d399); }
.fc-detail-name { font-weight: 700; color: var(--p-e2e8f0); font-size: 1.2em; }
.fc-detail-prog { font-size: 0.85em; color: var(--p-94a3b8); font-weight: 600; margin-top: 2px; }
.fc-detail-desc { font-size: 0.82em; color: var(--p-94a3b8); margin: 8px 0; max-width: 640px; }
.fc-detail-gv { color: var(--p-94a3b8); font-weight: 500; font-size: 0.9em; }
.fc-detail-hint { font-size: 0.8em; color: var(--p-64748b); margin-bottom: 12px; }
.fc-detail-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.6rem; align-items: start; }
.fc-dslot { position: relative; display: flex; flex-direction: column; padding: 12px 10px 10px; border-width: 2px; border-radius: 10px; min-height: 190px; transition: all 0.15s; }
.fc-dslot:hover { background: rgba(255,255,255,0.04); }
.fc-dslot--locked { opacity: 0.55; }
.fc-dslot--filled { box-shadow: 0 0 12px rgba(16,185,129,0.25); }
.fc-dslot--keystone { box-shadow: 0 0 14px rgba(255,215,0,0.2); }
.fc-dslot-key { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 0.58em; font-weight: 700; color: var(--ui-gold); background: var(--p-12101e); padding: 1px 6px; border-radius: 4px; white-space: nowrap; border: 1px solid rgba(255,215,0,0.4); }
.fc-dslot-foot { margin-top: auto; padding-top: 6px; }
.fc-dslot-status { font-size: 0.72em; font-weight: 600; }
.fc-dslot-status--eq { color: var(--p-34d399); }
.fc-dslot-status--own { color: var(--ui-gold); }
.fc-dslot-status--locked { color: var(--p-64748b); }
.fc-picker { margin-top: 10px; padding: 10px; }
.fc-picker-hdr { display: flex; justify-content: space-between; align-items: center; font-size: 0.82em; font-weight: 700; color: var(--p-e2e8f0); margin-bottom: 8px; }
.fc-picker-close { background: none; border: none; color: var(--p-94a3b8); font-size: 1.2em; cursor: pointer; line-height: 1; }
.fc-picker-empty { font-size: 0.76em; color: var(--p-64748b); }
.fc-picker-list { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-picker-item { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,215,0,0.3); background: rgba(255,215,0,0.05); color: var(--ui-gold); font-size: 0.78em; font-weight: 700; cursor: pointer; }
.fc-picker-item:hover { background: rgba(255,215,0,0.15); }
.fc-picker-item--current { border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.1); color: var(--p-34d399); }
.fc-picker-unequip { margin-top: 8px; padding: 3px 12px; border-radius: 6px; border: 1px solid rgba(239,68,68,0.4); background: rgba(239,68,68,0.06); color: var(--p-f87171); font-size: 0.76em; font-weight: 600; cursor: pointer; }
.fc-picker-unequip:hover { background: rgba(239,68,68,0.16); }

/* ============================================================
   FATE SHOP
   ============================================================ */

@keyframes fs-orbit   { 0% { transform: rotate(0deg); }   100% { transform: rotate(360deg); } }
@keyframes fs-orbit-r { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
@keyframes fs-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%       { transform: translateY(-4px) rotate(0.5deg); }
    75%       { transform: translateY(-2px) rotate(-0.5deg); }
}
@keyframes fs-coin-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255,215,0,0.3)); }
    50%       { filter: drop-shadow(0 0 10px rgba(255,215,0,0.7)); }
}
@keyframes fs-border-glow {
    0%, 100% { border-color: rgba(var(--fs-rgb),0.2);  box-shadow: 0 0 15px rgba(var(--fs-rgb),0.05); }
    50%       { border-color: rgba(var(--fs-rgb),0.45); box-shadow: 0 0 25px rgba(var(--fs-rgb),0.12); }
}

.fate-shop-wrap { position: relative; margin: 0 auto; padding: 0 20px; }

.fate-header { position: relative; text-align: center; padding: 30px 0 24px; margin-bottom: 28px; }
.fate-header::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,215,0,0.4), transparent); }
.fate-title { font-size: 1.5em; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ui-gold); text-shadow: 0 0 20px rgba(255,215,0,0.3); }

.fate-balance-box { position: absolute; top: 28px; left: 0; display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.03)); border: 1px solid rgba(255,215,0,0.2); border-radius: 12px; padding: 8px 16px; }
.fate-coin-icon { animation: fs-coin-pulse 3s ease-in-out infinite; }
.fate-balance-label { color: var(--p-9ca3af); font-size: 0.85em; letter-spacing: 0.05em; }
.fate-balance-value { color: var(--ui-gold); font-size: 1.3em; font-weight: 700; }

/* --- Daily Missions --- */
.dm-wrap { max-width: 760px; margin: 0 auto; padding: 0 12px 24px; }
.dm-subtitle { text-align: center; color: var(--p-8a8a9e); font-size: 0.85em; margin: -12px 0 22px; letter-spacing: 0.02em; }
.dm-list { display: flex; flex-direction: column; gap: 14px; }
.dm-card { --dm-accent: var(--ui-gold); display: flex; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid rgba(255,255,255,0.06); border-left: 3px solid var(--dm-accent); border-radius: 14px; background: linear-gradient(150deg, rgba(20,20,40,0.85), rgba(15,15,30,0.92)); }
.dm-card-icon { flex: 0 0 auto; filter: drop-shadow(0 0 10px var(--dm-accent)); display: flex; align-items: center; justify-content: center; }
.dm-card-body { flex: 1; min-width: 0; }
.dm-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.dm-card-name { font-size: 1.05em; font-weight: 700; letter-spacing: 0.03em; }
.dm-card-tier { font-size: 0.78em; font-weight: 700; color: var(--p-cbd5e1); background: rgba(255,255,255,0.06); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.dm-card-desc { color: var(--p-8a8a9e); font-size: 0.82em; line-height: 1.4; margin-bottom: 10px; }
.dm-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.dm-bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.dm-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.dm-card-progress { color: var(--p-9ca3af); font-size: 0.8em; font-variant-numeric: tabular-nums; }
.dm-card-earned { color: var(--ui-gold); font-size: 0.82em; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }

.fate-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.fs-card { --fs-accent: var(--ui-gold); --fs-rgb: 255,215,0; position: relative; flex: 0 1 300px; min-width: 280px; max-width: 340px; border: 1px solid rgba(var(--fs-rgb),0.15); border-radius: 16px; background: linear-gradient(160deg, rgba(20,20,40,0.9), rgba(15,15,30,0.95)); overflow: hidden; animation: fs-border-glow 4s ease-in-out infinite; display: flex; flex-direction: column; }

.fs-card-ring { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(var(--fs-rgb),0.06); pointer-events: none; }
.fs-card-ring-1 { width: 200px; height: 200px; top: -60px; animation: fs-orbit 20s linear infinite; }
.fs-card-ring-1::before { content: ""; position: absolute; top: 0; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--fs-rgb),0.4); transform: translateX(-50%); }
.fs-card-ring-2 { width: 260px; height: 260px; top: -90px; border-color: rgba(var(--fs-rgb),0.04); animation: fs-orbit-r 30s linear infinite; }
.fs-card-ring-2::before { content: ""; position: absolute; top: 0; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--fs-rgb),0.25); transform: translateX(-50%); }

.fs-card-img { position: relative; padding: 28px 0 20px; display: flex; justify-content: center; align-items: center; z-index: 1; height: 130px; }
.fs-card-img.fs-animate img, .fs-card-img.fs-animate svg { animation: fs-float 6s ease-in-out infinite; }
.fs-card-img img, .fs-card-img svg { filter: drop-shadow(0 0 20px rgba(var(--fs-rgb),0.3)); }

.fs-card-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-55%); width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--fs-rgb),0.12) 0%, transparent 70%); pointer-events: none; }

.fs-card-body { position: relative; z-index: 1; padding: 0 24px 24px; flex: 1; display: flex; flex-direction: column; }
.fs-card-name { text-align: center; font-size: 1.2em; font-weight: 700; color: var(--fs-accent); margin-bottom: 6px; letter-spacing: 0.05em; }
.fs-card-desc { text-align: center; color: var(--p-8a8a9e); font-size: 0.82em; line-height: 1.5; margin-bottom: 18px; flex: 1; }

.fs-card-price { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.fs-card-price-val { font-size: 1.6em; font-weight: 700; color: var(--fs-accent); }
.fs-card-price-lbl { color: var(--p-6b7280); font-size: 0.85em; }
.fs-card-count { text-align: center; color: var(--ui-teal); font-size: 0.75em; margin-bottom: 14px; opacity: 0.8; }

.fs-card-btn { background: linear-gradient(135deg, color-mix(in srgb, var(--fs-accent) 60%, var(--p-000000)) 0%, color-mix(in srgb, var(--fs-accent) 40%, var(--p-000000)) 100%); border: 1px solid rgba(var(--fs-rgb),0.3); box-shadow: 0 0 12px rgba(var(--fs-rgb),0.15), inset 0 1px 0 rgba(255,255,255,0.1); transition: all 0.25s ease; position: relative; overflow: hidden; }
.fs-card-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(var(--fs-rgb),0.15) 50%, transparent 100%); transform: translateX(-100%); transition: transform 0.5s ease; }
.fs-card-btn:hover:not(:disabled) { box-shadow: 0 0 20px rgba(var(--fs-rgb),0.3), inset 0 1px 0 rgba(255,255,255,0.15); transform: translateY(-1px); filter: brightness(1.2); }
.fs-card-btn:hover:not(:disabled)::before { transform: translateX(100%); }
.fs-card-btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); box-shadow: 0 0 8px rgba(var(--fs-rgb),0.2), inset 0 2px 4px rgba(0,0,0,0.3); filter: brightness(0.9); }
.fs-card-btn:disabled { background: var(--p-374151) !important; border-color: var(--p-4b5563) !important; box-shadow: none !important; color: var(--p-6b7280) !important; cursor: not-allowed; filter: none !important; }

.fs-info-wrap { position: absolute; top: 10px; right: 10px; z-index: 5; }
.fs-info-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(var(--fs-rgb),0.3); background: rgba(var(--fs-rgb),0.08); color: var(--fs-accent); font-size: 0.8em; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.fs-info-btn:hover { background: rgba(var(--fs-rgb),0.2); border-color: rgba(var(--fs-rgb),0.6); }
.fs-info-tt { display: none; position: absolute; top: 30px; right: 0; width: 260px; background: linear-gradient(160deg, rgba(20,20,40,0.98), rgba(12,12,28,0.98)); border: 1px solid rgba(var(--fs-rgb),0.2); border-radius: 10px; padding: 14px 16px; z-index: 100; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.fs-info-tt::before { content: ""; position: absolute; top: -6px; right: 6px; transform: rotate(45deg); width: 10px; height: 10px; background: rgba(20,20,40,0.98); border-left: 1px solid rgba(var(--fs-rgb),0.2); border-top: 1px solid rgba(var(--fs-rgb),0.2); }
.fs-info-wrap:hover .fs-info-tt { display: block; }
.fs-tt-sec { margin-bottom: 10px; }
.fs-tt-sec:last-child { margin-bottom: 0; }
.fs-tt-head { font-size: 0.7em; color: var(--fs-accent); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(var(--fs-rgb),0.1); }
.fs-tt-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 0.78em; }
.fs-tt-row-l { color: var(--p-9ca3af); }
.fs-tt-row-v { font-weight: 600; }

/* ============================================================
   FATE AUCTION HOUSE
   ============================================================ */

@keyframes ah-coin-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255,215,0,0.3)); }
    50%       { filter: drop-shadow(0 0 10px rgba(255,215,0,0.7)); }
}
@keyframes ah-orbit { to { transform: rotate(360deg); } }

.ah-balance { position: absolute; top: 6px; right: 0; z-index: 2; display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02)); border: 1px solid rgba(255,215,0,0.18); border-radius: 10px; padding: 5px 12px; }
.ah-balance-icon { animation: ah-coin-pulse 3s ease-in-out infinite; display: block; }
.ah-balance-lbl { color: var(--p-9ca3af); font-size: 0.66em; letter-spacing: 0.06em; text-transform: uppercase; }
.ah-balance-val { color: var(--ui-gold); font-size: 1.1em; font-weight: 700; }

.ah-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ah-control-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ah-control-lbl { font-size: 0.68em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p-718096); font-weight: 600; min-width: 46px; }
.ah-field { padding: 5px 10px; background: rgba(15,18,28,0.8); color: var(--p-cbd5e0); border: 1px solid var(--p-2d3748); border-radius: 6px; font-size: 0.8em; transition: border-color 0.2s; flex: 1; min-width: 120px; }
.ah-field:focus { border-color: rgba(255,215,0,0.35); outline: none; }

.ah-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.ah-type-tag { font-size: 0.62em; border: 1px solid rgba(78,205,196,0.18); border-radius: 3px; padding: 1px 5px; margin-left: 4px; color: var(--ui-teal); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.ah-qty-tag { font-size: 0.72em; border: 1px solid rgba(255,215,0,0.35); border-radius: 3px; padding: 1px 6px; margin-left: 4px; color: var(--ui-gold); font-weight: 700; }
.ah-skin-stats { color: var(--p-718096); }
.ah-expires { color: var(--p-4a5568); font-size: 0.72em; letter-spacing: 0.02em; }

.ah-sell-card { cursor: pointer; text-align: left; }

.ah-listing-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }

.ah-price { color: var(--ui-gold); font-weight: 700; font-size: 0.82em; }
.ah-price-muted { color: var(--p-a0aec0); font-size: 0.8em; }
.ah-bid-info { color: var(--p-718096); font-size: 0.78em; font-weight: 400; }

.ah-btn { padding: 4px 12px; border: none; border-radius: 5px; cursor: pointer; font-size: 0.78em; font-weight: 600; letter-spacing: 0.02em; transition: all 0.2s; position: relative; overflow: hidden; }
.ah-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); transform: translateX(-100%); transition: transform 0.4s ease; }
.ah-btn:hover::before { transform: translateX(100%); }
.ah-btn-buy    { background: linear-gradient(135deg, var(--p-14532d), var(--p-166534)); color: var(--p-86efac); border: 1px solid rgba(34,197,94,0.25); }
.ah-btn-buy:hover { box-shadow: 0 0 12px rgba(34,197,94,0.15); }
.ah-btn-bid    { background: linear-gradient(135deg, var(--p-3b0764), var(--p-4c1d95)); color: var(--p-c4b5fd); border: 1px solid rgba(139,92,246,0.25); }
.ah-btn-bid:hover { box-shadow: 0 0 12px rgba(139,92,246,0.15); }
.ah-btn-cancel { background: linear-gradient(135deg, var(--p-7f1d1d), var(--p-991b1b)); color: var(--p-fca5a5); border: 1px solid rgba(239,68,68,0.25); }
.ah-btn-cancel:hover { box-shadow: 0 0 12px rgba(239,68,68,0.15); }
.ah-btn:disabled { background: var(--p-1a202c) !important; border-color: var(--p-2d3748) !important; box-shadow: none !important; color: var(--p-4a5568) !important; cursor: not-allowed; }

.ah-status { font-size: 0.72em; font-weight: 600; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.03em; }
.ah-status--active  { color: var(--p-34d399); background: rgba(52,211,153,0.1); }
.ah-status--sold    { color: var(--p-60a5fa); background: rgba(96,165,250,0.1); }
.ah-status--expired { color: var(--p-f87171); background: rgba(248,113,113,0.1); }

.ah-spinner { display: flex; justify-content: center; align-items: center; padding: 40px; }
.ah-spinner-ring { width: 26px; height: 26px; border: 2px solid rgba(255,215,0,0.08); border-top-color: var(--ui-gold); border-radius: 50%; animation: ah-orbit 0.8s linear infinite; }

.ah-skin-box { width: 40px; height: 56px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 6px; background: rgba(15,18,28,0.9); }
.ah-skin-box--lg { width: 64px; height: 80px; }

.ah-history-filter { display: flex; justify-content: flex-end; padding: 0 4px 8px; }
.ah-history-filter-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--p-cbd5e0); font-size: 0.82em; user-select: none; }
.ah-history-filter-toggle input { accent-color: var(--ui-gold); cursor: pointer; }
.ah-tx-filter { display: inline-flex; }
.ah-tx-filter-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--p-cbd5e0); font-size: 0.82em; padding: 5px 10px; background: rgba(15,18,28,0.55); border: 1px solid rgba(255,215,0,0.14); border-radius: 6px; transition: border-color 0.15s, background 0.15s; }
.ah-tx-filter-btn:hover { border-color: rgba(255,215,0,0.35); background: rgba(15,18,28,0.75); }
.ah-tx-filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.72em; font-weight: 700; color: var(--p-1a1d28); background: var(--ui-gold); border-radius: 8px; }
.ah-tx-filter-caret { font-size: 0.6em; color: var(--p-718096); }
.ah-tx-filter-btn--open { border-color: rgba(255,215,0,0.45); background: rgba(15,18,28,0.85); }
.ah-tx-filter-panel { width: 240px; padding: 10px; background: var(--p-12151f); border: 1px solid rgba(255,215,0,0.18); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.ah-tx-filter-panel--portal { position: fixed; z-index: 2000000; }
.ah-tx-filter-hint { color: var(--p-718096); font-size: 0.74em; margin-bottom: 8px; text-align: left; }
.ah-tx-filter-row { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--p-cbd5e0); font-size: 0.82em; padding: 5px 4px; border-radius: 4px; user-select: none; text-align: left; }
.ah-tx-filter-row:hover { background: rgba(255,215,0,0.04); }
.ah-tx-filter-row input { accent-color: var(--ui-gold); cursor: pointer; }
.ah-tx-filter-actions { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.ah-tx-filter-apply { cursor: pointer; color: var(--p-1a1d28); font-weight: 700; font-size: 0.8em; padding: 6px 16px; background: var(--ui-gold); border: none; border-radius: 6px; transition: filter 0.15s; }
.ah-tx-filter-apply:hover { filter: brightness(1.1); }
.ah-history { font-size: 0.85em; }
.ah-history-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 8px; border-bottom: 1px solid rgba(255,215,0,0.03); border-radius: 4px; transition: background 0.15s; }
.ah-history-row:hover { background: rgba(255,215,0,0.02); }
.ah-history-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ah-history-date { color: var(--p-4a5568); font-size: 0.82em; }
.ah-history-desc { color: var(--p-cbd5e0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-history-amt { font-weight: 700; flex-shrink: 0; }

.ah-empty { color: var(--p-4a5568); text-align: center; padding: 32px 20px; font-size: 0.88em; letter-spacing: 0.02em; }

.ah-modal { text-align: center; padding: 14px; }
.ah-modal-title { font-weight: 700; margin: 0 0 16px; letter-spacing: 0.04em; }

.ah-sell-preview { display: flex; gap: 14px; align-items: flex-start; text-align: left; margin: 0 auto 16px; padding: 12px; max-width: 340px; background: rgba(15,18,28,0.55); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; }
.ah-sell-preview-art { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ah-sell-preview-art .fc-inv-art-img { border-radius: 6px; filter: drop-shadow(0 0 5px rgba(0,0,0,0.35)); }
.ah-sell-preview-info { flex: 1; min-width: 0; }
.ah-sell-preview-rarity { font-size: 0.74em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.ah-sell-stars { font-size: 0.8em; font-weight: 700; margin-top: 2px; }
.ah-effect-desc { color: var(--p-94a3b8); font-size: 0.76em; line-height: 1.45; margin: 7px 0; font-style: italic; }
.ah-effect-stats { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.ah-effect-stat { font-size: 0.82em; font-weight: 600; }

.ah-tier-picker { margin: 0 auto 14px; max-width: 340px; text-align: left; }
.ah-tier-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ah-tier-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; background: rgba(15,18,28,0.9); color: var(--ui-gold); border: 1px solid rgba(255,215,0,0.25); border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 0.82em; transition: all 0.15s; }
.ah-tier-chip:hover { border-color: rgba(255,215,0,0.5); }
.ah-tier-chip.active { background: rgba(255,215,0,0.14); border-color: var(--ui-gold); box-shadow: 0 0 8px rgba(255,215,0,0.2); }
.ah-tier-chip-ct { color: var(--p-cbd5e0); font-weight: 600; }

.ah-modal--wide .ah-sell-preview,
.ah-modal--wide .ah-tier-picker { max-width: none; }
.ah-sell-body { display: flex; gap: 18px; text-align: left; align-items: stretch; }
.ah-sell-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ah-sell-col--right { display: flex; flex-direction: column; }
.ah-sell-field { margin-bottom: 14px; }
.ah-sell-row { display: flex; gap: 12px; }
.ah-sell-field--grow { flex: 1; min-width: 0; }
.ah-modal-inp--wide { width: 100%; box-sizing: border-box; text-align: left; }
.ah-modal-btn--block { display: block; width: 100%; }

.ah-payout-card { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 14px; margin-bottom: 14px; background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(34,197,94,0.02)); border: 1px solid rgba(34,197,94,0.24); border-radius: 8px; }
.ah-payout-title { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p-a0aec0); font-weight: 700; }
.ah-payout-qty { color: var(--p-86efac); font-weight: 700; }
.ah-qty-max { color: var(--p-4a5568); font-weight: 600; text-transform: none; letter-spacing: 0; }
.ah-payout-net { font-size: 1.7em; font-weight: 800; color: var(--p-86efac); display: flex; align-items: center; gap: 5px; line-height: 1.1; }
.ah-payout-break { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.74em; color: var(--p-718096); }
.ah-payout-break span { display: inline-flex; align-items: center; gap: 3px; }
.ah-payout-tax { color: var(--p-fca5a5); }
.ah-payout-cmp { display: inline-block; margin-top: 2px; font-size: 0.72em; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ah-payout-cmp--up { color: var(--p-f87171); background: rgba(248,113,113,0.14); }
.ah-payout-cmp--down { color: var(--p-86efac); background: rgba(34,197,94,0.14); }
.ah-payout-cmp--even { color: var(--p-94a3b8); background: rgba(148,163,184,0.12); }

.ah-seg { display: flex; gap: 6px; }
.ah-seg-btn { flex: 1; padding: 9px 10px; background: rgba(15,18,28,0.9); color: var(--p-a0aec0); border: 1px solid var(--p-2d3748); border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.82em; transition: all 0.15s; }
.ah-seg-btn:hover { border-color: var(--p-4a5568); color: var(--p-cbd5e0); }
.ah-seg-btn.active { background: rgba(255,215,0,0.12); border-color: rgba(255,215,0,0.55); color: var(--ui-gold); box-shadow: 0 0 8px rgba(255,215,0,0.15); }

.ah-sale-stats { margin-top: 14px; }
.ah-sale-title { font-size: 0.74em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--p-718096); margin-bottom: 8px; }
.ah-sale-loading { display: flex; justify-content: center; padding: 12px 0; }
.ah-sale-empty { color: var(--p-4a5568); font-size: 0.8em; padding: 8px 0; }

.ah-stats-range { display: flex; gap: 4px; margin-bottom: 8px; }
.ah-stats-range-btn { flex: 1; padding: 5px 6px; background: rgba(15,18,28,0.9); color: var(--p-a0aec0); border: 1px solid var(--p-2d3748); border-radius: 5px; cursor: pointer; font-weight: 600; font-size: 0.72em; transition: all 0.15s; }
.ah-stats-range-btn:hover { border-color: var(--p-4a5568); color: var(--p-cbd5e0); }
.ah-stats-range-btn.active { background: rgba(255,215,0,0.12); border-color: rgba(255,215,0,0.5); color: var(--ui-gold); }
.ah-chart-plot { position: relative; overflow: visible; }
.ah-chart-overlay { position: absolute; inset: 0; pointer-events: none; }
.ah-chart-pt { position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; }
.ah-chart-dot { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-gold); transform: translate(-50%, -50%); box-shadow: 0 0 0 rgba(255,215,0,0); transition: width 0.15s, height 0.15s, box-shadow 0.15s; }
.ah-chart-pt:hover .ah-chart-dot { width: 11px; height: 11px; box-shadow: 0 0 10px rgba(255,215,0,0.75); }

.ah-chart-tip { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 5px); margin-bottom: 8px; display: flex; flex-direction: column; gap: 1px; padding: 5px 9px; background: rgba(12,15,24,0.97); border: 1px solid rgba(255,215,0,0.32); border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 6; box-shadow: 0 6px 18px rgba(0,0,0,0.55); transition: opacity 0.15s ease, transform 0.15s ease; }
.ah-chart-pt:hover .ah-chart-tip { opacity: 1; transform: translate(-50%, 0); }
.ah-chart-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(255,215,0,0.32); }
.ah-chart-tip-date { font-size: 0.72em; color: var(--p-cbd5e0); font-weight: 700; letter-spacing: 0.02em; }
.ah-chart-tip-val { font-size: 0.82em; color: var(--ui-gold); font-weight: 800; display: flex; align-items: center; gap: 3px; }
.ah-chart-tip-sub { font-size: 0.66em; color: var(--p-718096); }

.ah-chart-tip--left { left: 0; transform: translate(0, 5px); }
.ah-chart-pt:hover .ah-chart-tip--left { transform: translate(0, 0); }
.ah-chart-tip--left::after { left: 13px; transform: none; }
.ah-chart-tip--right { left: auto; right: 0; transform: translate(0, 5px); }
.ah-chart-pt:hover .ah-chart-tip--right { transform: translate(0, 0); }
.ah-chart-tip--right::after { left: auto; right: 13px; transform: none; }

.ah-chart { background: rgba(10,13,20,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 8px 10px 6px; margin-bottom: 10px; }
.ah-chart-svg { display: block; width: 100%; height: 68px; }
.ah-chart-axis { display: flex; justify-content: space-between; font-size: 0.68em; color: var(--p-718096); margin-top: 4px; font-weight: 600; }

.ah-avg-card { background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02)); border: 1px solid rgba(255,215,0,0.22); border-radius: 8px; padding: 10px 12px; }
.ah-avg-lbl { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p-a0aec0); font-weight: 600; }
.ah-avg-val { font-size: 1.35em; font-weight: 800; color: var(--ui-gold); display: flex; align-items: center; gap: 4px; margin: 2px 0; }
.ah-avg-sub { font-size: 0.72em; color: var(--p-718096); display: flex; align-items: center; gap: 3px; }

@media (max-width: 620px) {
    .ah-sell-body { flex-direction: column; }
}
.ah-modal-lbl { color: var(--p-a0aec0); display: block; margin-bottom: 5px; font-size: 0.82em; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 600; }
.ah-modal-inp { padding: 8px 12px; background: rgba(15,18,28,0.9); color: var(--p-e2e8f0); border: 1px solid var(--p-2d3748); border-radius: 6px; width: 130px; text-align: center; transition: border-color 0.2s; }
.ah-modal-inp:focus { border-color: rgba(255,215,0,0.4); outline: none; }
.ah-modal-hint { color: var(--p-4a5568); font-size: 0.72em; margin-bottom: 14px; line-height: 1.5; }
.ah-modal-sel { padding: 8px 12px; background: rgba(15,18,28,0.9); color: var(--p-cbd5e0); border: 1px solid var(--p-2d3748); border-radius: 6px; transition: border-color 0.2s; }
.ah-modal-sel:focus { border-color: rgba(255,215,0,0.4); outline: none; }
.ah-modal-btn { padding: 9px 22px; border: none; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 0.88em; letter-spacing: 0.03em; transition: all 0.2s; position: relative; overflow: hidden; }
.ah-modal-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); transform: translateX(-100%); transition: transform 0.4s ease; }
.ah-modal-btn:hover::before { transform: translateX(100%); }
.ah-modal-btn--confirm { background: linear-gradient(135deg, var(--p-14532d), var(--p-166534)); color: var(--p-86efac); border: 1px solid rgba(34,197,94,0.25); }
.ah-modal-btn--confirm:hover { box-shadow: 0 0 14px rgba(34,197,94,0.2); }
.ah-modal-btn--bid { background: linear-gradient(135deg, var(--p-3b0764), var(--p-4c1d95)); color: var(--p-c4b5fd); border: 1px solid rgba(139,92,246,0.25); }
.ah-modal-btn--bid:hover { box-shadow: 0 0 14px rgba(139,92,246,0.2); }
.ah-modal-btn--cancel { background: rgba(45,55,72,0.5); color: var(--p-a0aec0); border: 1px solid var(--p-2d3748); }
.ah-modal-btn--danger { background: linear-gradient(135deg, var(--p-7f1d1d), var(--p-991b1b)); color: var(--p-fecaca); border: 1px solid rgba(248,113,113,0.3); }
.ah-modal-btn--danger:hover { box-shadow: 0 0 14px rgba(248,113,113,0.25); }
.ah-cancel-lead { color: var(--p-cbd5e0); margin-bottom: 14px; line-height: 1.5; font-size: 0.9em; }
.ah-buy-qty { margin-bottom: 12px; }
.ah-buy-total { color: var(--p-cbd5e0); font-weight: 700; margin-bottom: 14px; font-size: 1.05em; display: flex; align-items: center; justify-content: center; gap: 5px; }
.ah-star-count-tag { font-size: 0.82em; color: var(--ui-gold); font-weight: 700; margin-left: 4px; }
.ah-modal-btn--cancel:hover { border-color: var(--p-4a5568); color: var(--p-cbd5e0); }

/* ============================================================
   END UI DESIGN SYSTEM
   ============================================================ */