/* ============================================================
   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;
    /* 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); }
}

/* ---- 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;
}
.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;
}
.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;
}
.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;
}
.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), #45b7aa);
    transition: width 0.4s ease;
}
.ui-bar__fill--gold, .sect-bar__fill--gold { background: linear-gradient(90deg, var(--sect-gold), #e0b000); }

/* ---- 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; }
.ui-btn:focus-visible, .sect-btn:focus-visible { outline: 2px solid var(--sect-teal); outline-offset: 2px; }
.ui-btn--primary, .sect-btn--primary {
    color: #06231f;
    background: linear-gradient(135deg, var(--sect-teal), #45b7aa);
    border-color: transparent;
}
.ui-btn--primary:hover, .sect-btn--primary:hover {
    background: linear-gradient(135deg, #63e0d7, #4ecdc4);
    color: #06231f;
    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: #06231f;
    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: #ff9800; background: rgba(255,152,0,0.14); }
.ui-badge--workshop, .sect-badge--workshop { color: #2196f3; 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), #1e2a3a);
    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__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: #ccc;
    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: #fff;
}
.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: #aaa;
    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: #888;
    font-size: 0.85em;
    min-width: 25px;
}
.info-guide-realm-name {
    color: #fff;
    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: #ccc;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9em;
}
.info-guide-subtab:hover {
    background: rgba(78, 205, 196, 0.2);
    color: #fff;
}
.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: #bbb;
    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: #aaa;
    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: #aaa; 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: #888; }
.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: #bbb;
    font-size: 0.9em;
    line-height: 1.6;
    margin: 0;
}
.info-guide-highlight { color: var(--ui-gold); font-weight: bold; }

/* ============================================================
   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: #ff0000; box-shadow: 0 0 12px rgba(255,0,0,0.15); }
    16%  { border-color: #ff7f00; box-shadow: 0 0 12px rgba(255,127,0,0.15); }
    33%  { border-color: #ffff00; box-shadow: 0 0 12px rgba(255,255,0,0.15); }
    50%  { border-color: #00ff00; box-shadow: 0 0 12px rgba(0,255,0,0.15); }
    66%  { border-color: #0000ff; box-shadow: 0 0 12px rgba(0,0,255,0.15); }
    83%  { border-color: #8b00ff; box-shadow: 0 0 12px rgba(139,0,255,0.15); }
    100% { border-color: #ff0000; box-shadow: 0 0 12px rgba(255,0,0,0.15); }
}

.fc-wrap { position: relative; max-width: 900px; margin: 0 auto; 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: #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: #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: #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: #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: #e2e8f0; }
.fc-tile-qty--locked { color: #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 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: #9CA3AF; font-size: 0.85em; letter-spacing: 0.05em; }
.fate-balance-value { color: var(--ui-gold); font-size: 1.3em; font-weight: 700; }

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

.fs-card { --fs-accent: #ffd700; --fs-rgb: 255,215,0; position: relative; flex: 1 1 200px; min-width: 200px; 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: #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: #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%, #000) 0%, color-mix(in srgb, var(--fs-accent) 40%, #000) 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: #374151 !important; border-color: #4b5563 !important; box-shadow: none !important; color: #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: #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-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 ah-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ah-orbit   { to { transform: rotate(360deg); } }
@keyframes ah-orbit-r { to { transform: rotate(-360deg); } }

.ah-wrap { position: relative; max-width: 900px; margin: 0 auto; padding: 0 16px; }

.ah-header { position: relative; text-align: center; padding: 26px 0 22px; margin-bottom: 22px; }
.ah-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); }
.ah-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); }

.ah-balance { position: absolute; top: 22px; right: 0; 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: 6px 14px; }
.ah-balance-icon { animation: ah-coin-pulse 3s ease-in-out infinite; display: block; }
.ah-balance-lbl { color: #9CA3AF; font-size: 0.7em; letter-spacing: 0.06em; text-transform: uppercase; }
.ah-balance-val { color: var(--ui-gold); font-size: 1.2em; font-weight: 700; }

.ah-tabs { display: flex; gap: 3px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,215,0,0.06); }
.ah-tab { padding: 7px 16px; border-radius: 6px; cursor: pointer; font-size: 0.82em; font-weight: 600; letter-spacing: 0.03em; border: 1px solid transparent; background: transparent; color: #6B7280; transition: all 0.2s ease; }
.ah-tab:hover { color: #D1D5DB; background: rgba(255,215,0,0.04); }
.ah-tab--on { background: linear-gradient(135deg, rgba(255,215,0,0.14), rgba(255,215,0,0.05)); color: var(--ui-gold); border-color: rgba(255,215,0,0.22); }

.ah-toggle-bar { display: flex; gap: 3px; margin-bottom: 10px; }
.ah-toggle { padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 0.75em; font-weight: 600; border: 1px solid #2d3748; background: rgba(45,55,72,0.4); color: #718096; transition: all 0.2s ease; }
.ah-toggle:hover { border-color: #4a5568; color: #cbd5e0; }
.ah-toggle--on { background: linear-gradient(135deg, rgba(255,215,0,0.18), rgba(255,215,0,0.06)); color: var(--ui-gold); border-color: rgba(255,215,0,0.28); }

.ah-filters { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.ah-field { padding: 5px 10px; background: rgba(15,18,28,0.8); color: #cbd5e0; border: 1px solid #2d3748; border-radius: 6px; font-size: 0.8em; transition: border-color 0.2s; }
.ah-field:focus { border-color: rgba(255,215,0,0.35); outline: none; }
.ah-btn-search { padding: 5px 14px; background: linear-gradient(135deg, rgba(255,215,0,0.18), rgba(255,215,0,0.06)); color: var(--ui-gold); border: 1px solid rgba(255,215,0,0.22); border-radius: 6px; cursor: pointer; font-size: 0.8em; font-weight: 600; letter-spacing: 0.02em; transition: all 0.2s; }
.ah-btn-search:hover { background: linear-gradient(135deg, rgba(255,215,0,0.28), rgba(255,215,0,0.1)); border-color: rgba(255,215,0,0.4); }

.ah-card { position: relative; background: linear-gradient(160deg, rgba(18,18,38,0.9), rgba(13,13,28,0.95)); border: 1px solid rgba(255,215,0,0.06); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; animation: ah-border-glow 5s ease-in-out infinite, ah-fade-in 0.3s ease-out both; transition: border-color 0.25s, box-shadow 0.25s; overflow: hidden; }
.ah-card:hover { border-color: rgba(255,215,0,0.22); box-shadow: 0 0 14px rgba(255,215,0,0.05); }
.ah-card-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 10px 0 0 10px; }
.ah-card-inner { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.ah-card-body { flex: 1; min-width: 0; }

.ah-item-img { border-radius: 6px; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(0,0,0,0.4)); }
.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-rarity { font-weight: 700; font-size: 0.82em; }
.ah-name { color: #e2e8f0; font-weight: 500; }
.ah-id { color: #4a5568; font-size: 0.72em; margin-left: 4px; font-family: monospace; }
.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-skin-stats { color: #718096; font-size: 0.7em; margin-top: 2px; }
.ah-expires { color: #4a5568; font-size: 0.72em; margin-top: 4px; letter-spacing: 0.02em; }

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

.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, #14532d, #166534); color: #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, #3b0764, #4c1d95); color: #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, #7f1d1d, #991b1b); color: #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: #1a202c !important; border-color: #2d3748 !important; box-shadow: none !important; color: #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: #34d399; background: rgba(52,211,153,0.1); }
.ah-status--sold    { color: #60a5fa; background: rgba(96,165,250,0.1); }
.ah-status--expired { color: #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-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 14px; align-items: center; }
.ah-page-btn { padding: 4px 10px; background: rgba(45,55,72,0.4); color: #a0aec0; border: 1px solid #2d3748; border-radius: 5px; cursor: pointer; font-size: 0.82em; transition: all 0.2s; }
.ah-page-btn:hover { border-color: rgba(255,215,0,0.25); color: var(--ui-gold); }
.ah-page-info { color: #4a5568; font-size: 0.78em; letter-spacing: 0.02em; }

.ah-sell-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-sell-item { display: flex; flex-direction: column; align-items: center; padding: 10px 12px; background: linear-gradient(160deg, rgba(18,18,38,0.85), rgba(13,13,28,0.9)); border-radius: 8px; cursor: pointer; color: #e2e8f0; font-size: 0.8em; width: 92px; transition: all 0.25s; border: 1px solid rgba(255,215,0,0.06); }
.ah-sell-item:hover { border-color: rgba(255,215,0,0.22); box-shadow: 0 0 14px rgba(255,215,0,0.05); transform: translateY(-2px); }
.ah-sell-rarity { font-size: 0.72em; font-weight: 600; }
.ah-sell-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; font-size: 0.85em; }
.ah-sell-count { color: #4a5568; font-size: 0.85em; }

.ah-history-row { display: flex; justify-content: space-between; align-items: center; 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-empty { color: #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-modal-lbl { color: #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: #e2e8f0; border: 1px solid #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: #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: #cbd5e0; border: 1px solid #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, #14532d, #166534); color: #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, #3b0764, #4c1d95); color: #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: #a0aec0; border: 1px solid #2d3748; }
.ah-modal-btn--cancel:hover { border-color: #4a5568; color: #cbd5e0; }

.ah-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,215,0,0.04); pointer-events: none; }
.ah-ring-1 { width: 180px; height: 180px; top: -60px; right: -60px; animation: ah-orbit 25s linear infinite; }
.ah-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%); }
.ah-ring-2 { width: 240px; height: 240px; top: -90px; right: -90px; border-color: rgba(255,215,0,0.025); animation: ah-orbit-r 35s linear infinite; }
.ah-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%); }

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