/* ── Empty state ── */
.empty { text-align: center; padding: 2rem; color: #6a6250; font-style: italic; }

/* ── Loading ── */
.loading { text-align: center; color: var(--gold); font-style: italic; padding: 2rem; opacity: 0.7; }

:root {
    --gold:    #c9a84c;
    --gold-lt: #e8c97a;
    --ink:     #0a0a0f;
    --ink2:    #13131c;
    --ink3:    #1c1c2e;
    --parch:   #f0e6c8;
    --mist:    rgba(201,168,76,0.12);
    --border:  rgba(201,168,76,0.3);
    --red:     #c0392b;
    --green:   #27ae60;
    --text:    #d4c9a8;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--ink);
    color: var(--text);
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 17px;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
}

/* ── Background texture ── */
body::before {
    content: '';
    position: fixed; inset: 0;
    background:
            radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201,168,76,0.07) 0%, transparent 60%),
            repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(201,168,76,0.015) 40px, rgba(201,168,76,0.015) 41px),
            repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(201,168,76,0.015) 40px, rgba(201,168,76,0.015) 41px);
    pointer-events: none;
    z-index: 0;
}

/* ── Header ── */
header {
    position: relative;
    text-align: center;
    padding: 3.5rem 2rem 2.5rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(201,168,76,0.06) 0%, transparent 100%);
    z-index: 1;
}
header h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold);
    text-shadow: 0 0 40px rgba(201,168,76,0.4);
}
header p {
    color: #8a7f6a;
    font-style: italic;
    font-size: 1.05rem;
    margin-top: 0.4rem;
    letter-spacing: 0.03em;
}
.divider {
    display: flex; align-items: center; gap: 1rem;
    max-width: 360px; margin: 1.2rem auto 0;
}
.divider span { flex: 1; height: 1px; background: var(--border); }
.divider em { color: var(--gold); font-style: normal; font-size: 1.1rem; }

/* ── Layout ── */
.container {
    position: relative; z-index: 1;
    max-width: 1400px; margin: 0 auto;
    padding: 3rem 1.5rem;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 2.5rem;
}
@media (max-width: 900px) { .container { grid-template-columns: 1fr; } }

/* ── Panel ── */
.panel {
    background: var(--ink2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
}
.panel::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.6;
}
.panel:hover { border-color: rgba(201,168,76,0.5); }
.panel-title {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.8rem;
    display: flex; align-items: center; gap: 0.8rem;
}
.panel-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Tabs ── */
.tabs { display: flex; gap: 0; margin-bottom: 1.8rem; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.tab {
    flex: 1; padding: 0.6rem 1rem;
    background: transparent;
    border: none; border-right: 1px solid var(--border);
    color: #6a6250; cursor: pointer;
    font-family: 'Cinzel', serif; font-size: 0.72rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    transition: all 0.2s;
}
.tab:last-child { border-right: none; }
.tab.active { background: var(--mist); color: var(--gold); }
.tab:hover:not(.active) { color: var(--text); background: rgba(255,255,255,0.02); }

/* ── Form ── */
.form-section { display: none; }
.form-section.active { display: block; }

.field { margin-bottom: 1.2rem; }
label {
    display: block; margin-bottom: 0.4rem;
    font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: #8a7f6a;
}
input[type=text], input[type=number], input[type=url],input[type= password], select {
    width: 100%; padding: 0.65rem 0.9rem;
    background: var(--ink3); color: var(--text);
    border: 1px solid rgba(201,168,76,0.2); border-radius: 3px;
    font-family: 'Crimson Pro', serif; font-size: 1rem;
    outline: none; transition: border-color 0.2s;
    appearance: none;
}
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,0.08); }
select option { background: var(--ink3); }

.toggle-row {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.65rem 0.9rem;
    background: var(--ink3); border: 1px solid rgba(201,168,76,0.2); border-radius: 3px;
}
.toggle-label { font-size: 0.95rem; flex: 1; }
.toggle {
    position: relative; width: 42px; height: 22px;
    flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; inset: 0; cursor: pointer;
    background: rgba(255,255,255,0.08); border-radius: 22px;
    transition: 0.25s;
}
.slider::before {
    content: ''; position: absolute;
    width: 16px; height: 16px; left: 3px; top: 3px;
    background: #6a6250; border-radius: 50%; transition: 0.25s;
}
.toggle input:checked + .slider { background: rgba(201,168,76,0.25); }
.toggle input:checked + .slider::before { transform: translateX(20px); background: var(--gold); }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Buttons ── */
.btn {
    width: 100%; padding: 0.85rem 1.5rem; margin-top: 0.5rem;
    border: 1px solid var(--gold); border-radius: 3px;
    background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(201,168,76,0.06));
    color: var(--gold-lt);
    font-family: 'Cinzel', serif; font-size: 0.8rem;
    letter-spacing: 0.15em; text-transform: uppercase;
    cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden;
}
.btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(201,168,76,0.15), transparent);
    opacity: 0; transition: opacity 0.2s;
}
.btn:hover::after { opacity: 1; }
.btn:hover { box-shadow: 0 0 20px rgba(201,168,76,0.2); }
.btn:active { transform: translateY(1px); }
.btn.danger { border-color: var(--red); color: #e57373; background: rgba(192,57,43,0.08); }
.btn.danger:hover { box-shadow: 0 0 20px rgba(192,57,43,0.2); }

/* ── Feedback ── */
.toast {
    position: fixed; bottom: 2rem; right: 2rem;
    padding: 0.9rem 1.5rem;
    border-radius: 3px; font-size: 0.95rem;
    border: 1px solid; z-index: 9999;
    transform: translateY(20px); opacity: 0;
    transition: all 0.3s; pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.ok  { background: rgba(39,174,96,0.15); border-color: rgba(39,174,96,0.5); color: #81c784; }
.toast.err { background: rgba(192,57,43,0.15); border-color: rgba(192,57,43,0.5); color: #e57373; }

/* ════ MAIN STYLES (from index.html <style>) ════ */
        /* ════════════════════════════════
           LAYOUT
        ════════════════════════════════ */
        .app-layout { display:flex; min-height:100vh; width:100%; max-width:1600px; position:relative; z-index:1; }

        /* ── Sidebar ── */
        .sidebar { width:280px; flex-shrink:0; background:var(--ink2); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:2rem 1.2rem; overflow-y:auto; position:sticky; top:0; height:100vh; }
        .sidebar-brand { text-align:center; margin-bottom:0.5rem; }
        .sidebar-logo { font-size:2rem; color:var(--gold); text-shadow:0 0 20px rgba(201,168,76,0.5); margin-bottom:0.4rem; }
        .sidebar-title { font-family:'Cinzel',serif; font-size:1.1rem; font-weight:700; letter-spacing:0.1em; color:var(--gold); }
        .sidebar-sub { font-size:0.72rem; color:#6a6250; font-style:italic; margin-top:0.2rem; }
        .sidebar-hr { height:1px; background:var(--border); margin:1rem 0; }
        .sidebar-nav { display:flex; flex-direction:column; gap:0.3rem; }

        /* ── Nav buttons ── */
        .snav { width:100%; text-align:left; padding:0.6rem 0.9rem; background:transparent; border:1px solid transparent; border-radius:3px; color:#6a6250; cursor:pointer; font-family:'Cinzel',serif; font-size:0.75rem; letter-spacing:0.1em; transition:all 0.2s; }
        .snav:hover { color:var(--text); background:rgba(255,255,255,0.03); border-color:rgba(201,168,76,0.1); }
        .snav.active { color:var(--gold); background:var(--mist); border-color:rgba(201,168,76,0.25); }

        /* ── Logout ── */
        .logout-btn { width:100%; padding:0.45rem 0.8rem; background:transparent; border:1px solid rgba(192,57,43,0.25); border-radius:3px; color:#8a6a6a; cursor:pointer; font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.12em; transition:all 0.2s; margin-top:0.5rem; }
        .logout-btn:hover { color:#e57373; border-color:rgba(192,57,43,0.5); background:rgba(192,57,43,0.06); }

        /* ── Main area ── */
        .forge-main { flex:1; padding:2rem; display:flex; flex-direction:column; min-height:100vh; overflow-y:auto; }
        .forge-main .panel { max-width:560px; width:100%; }
        .forge-main.wide .panel { max-width:100%; }

        /* ════════════════════════════════
           CARD GRID / ITEMS
        ════════════════════════════════ */
        .card-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:1rem; margin-top:0; }
        .card-item { display:flex; flex-direction:column; background:var(--ink3); border:1px solid rgba(201,168,76,0.15); border-radius:6px; overflow:hidden; transition:border-color 0.2s,transform 0.2s,box-shadow 0.2s; cursor:default; }
        .card-item:hover { border-color:var(--gold); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.5),0 0 16px rgba(201,168,76,0.12); }
        .card-item.clickable { cursor:pointer; }
        .card-item.clickable:hover { border-color:var(--gold); box-shadow:0 0 16px rgba(201,168,76,0.2); }
        .card-thumb { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; background:var(--ink2); display:block; }
        .card-thumb-placeholder { width:100%; aspect-ratio:3/4; background:var(--ink2); display:flex; align-items:center; justify-content:center; color:rgba(201,168,76,0.18); font-size:2.5rem; }
        .card-info { padding:0.55rem 0.65rem; display:flex; flex-direction:column; gap:0.3rem; }
        .card-name { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.05em; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .card-meta { display:flex; align-items:center; justify-content:space-between; }
        .card-badge { font-family:'Cinzel',serif; font-size:0.58rem; padding:1px 5px; border-radius:2px; background:var(--mist); color:var(--gold); border:1px solid var(--border); white-space:nowrap; }
        .card-cost { color:var(--gold); font-weight:600; font-size:0.8rem; }
        .card-actions { display:flex; justify-content:flex-end; padding:0 0.5rem 0.5rem; }
        .icon-btn { background:none; border:1px solid transparent; border-radius:3px; color:#6a6250; cursor:pointer; padding:3px 7px; font-size:0.85rem; transition:all 0.2s; }
        .icon-btn:hover { color:var(--red); border-color:rgba(192,57,43,0.3); }
        .doblecard { display:flex; gap:2px; align-items:stretch; }
        .doblecard img, .doblecard .card-thumb-placeholder { width:100%; border-radius:0; }

        /* ════════════════════════════════
           DROP ZONE
        ════════════════════════════════ */
        .drop-zone { position:relative; width:100%; padding:0.75rem 1rem; background:var(--ink3); border:1px solid rgba(201,168,76,0.2); border-radius:3px; display:flex; align-items:center; gap:0.75rem; cursor:pointer; transition:border-color 0.2s,background 0.2s; overflow:hidden; }
        .drop-zone:hover, .drop-zone.over { border-color:var(--gold); background:rgba(201,168,76,0.06); }
        .drop-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
        .drop-icon { flex-shrink:0; width:28px; height:28px; border:1px solid rgba(201,168,76,0.3); border-radius:3px; display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:14px; background:var(--mist); }
        .drop-text { display:flex; flex-direction:column; gap:2px; }
        .drop-main { font-size:0.92rem; color:var(--text); }
        .drop-sub { font-size:0.72rem; color:#6a6250; letter-spacing:0.05em; }
        .drop-zone.has-file .drop-main { color:var(--gold-lt); }
        .drop-zone.has-file .drop-icon { background:rgba(201,168,76,0.2); border-color:var(--gold); }
        .clear-btn { margin-left:auto; flex-shrink:0; background:none; border:none; cursor:pointer; color:#6a6250; font-size:1rem; padding:2px 6px; transition:color 0.2s; position:relative; z-index:1; }
        .clear-btn:hover { color:#e57373; }

        /* ════════════════════════════════
           BULK UPLOAD
        ════════════════════════════════ */
        .bulk-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; padding-bottom:0.8rem; border-bottom:1px solid var(--border); }
        .bulk-header-info { display:flex; flex-direction:column; gap:0.2rem; }
        .bulk-header-title { font-family:'Cinzel',serif; font-size:0.85rem; color:var(--gold); letter-spacing:0.05em; }
        .bulk-header-count { font-size:0.75rem; color:#6a6250; }
        .bulk-clear-btn { background:none; border:1px solid rgba(192,57,43,0.3); color:#e57373; padding:0.4rem 0.8rem; border-radius:3px; cursor:pointer; font-family:'Cinzel',serif; font-size:0.68rem; letter-spacing:0.08em; transition:all 0.2s; }
        .bulk-clear-btn:hover { background:rgba(192,57,43,0.1); border-color:rgba(192,57,43,0.5); }
        .bulk-dropzone { position:relative; padding:2.5rem 2rem; background:var(--ink3); border:2px dashed rgba(201,168,76,0.25); border-radius:6px; text-align:center; cursor:pointer; transition:all 0.25s; margin-bottom:1.5rem; }
        .bulk-dropzone:hover, .bulk-dropzone.over { border-color:var(--gold); background:rgba(201,168,76,0.04); }
        .bulk-dropzone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
        .bulk-dropzone-icon { font-size:2.2rem; margin-bottom:0.6rem; color:var(--gold); opacity:0.6; }
        .bulk-dropzone-text { font-size:0.95rem; color:var(--text); margin-bottom:0.3rem; }
        .bulk-dropzone-hint { font-size:0.72rem; color:#6a6250; letter-spacing:0.05em; }
        .bulk-preview-container { display:none; }
        .bulk-preview-container.active { display:block; }
        .bulk-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; max-height:420px; overflow-y:auto; padding-right:0.5rem; margin-bottom:1.2rem; }
        .bulk-cards-grid::-webkit-scrollbar { width:6px; }
        .bulk-cards-grid::-webkit-scrollbar-track { background:var(--ink3); border-radius:3px; }
        .bulk-cards-grid::-webkit-scrollbar-thumb { background:rgba(201,168,76,0.3); border-radius:3px; }
        .bulk-card-item { background:var(--ink3); border:1px solid rgba(201,168,76,0.15); border-radius:6px; overflow:hidden; transition:all 0.2s; }
        .bulk-card-item:hover { border-color:rgba(201,168,76,0.4); box-shadow:0 4px 16px rgba(0,0,0,0.3); }
        .bulk-card-preview { position:relative; width:100%; aspect-ratio:3/4; background:var(--ink2); overflow:hidden; }
        .bulk-card-preview img { width:100%; height:100%; object-fit:cover; object-position:top; }
        .bulk-card-remove { position:absolute; top:6px; right:6px; width:24px; height:24px; background:rgba(10,10,15,0.85); border:1px solid rgba(192,57,43,0.4); border-radius:50%; color:#e57373; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.75rem; transition:all 0.2s; opacity:0; }
        .bulk-card-item:hover .bulk-card-remove { opacity:1; }
        .bulk-card-remove:hover { background:rgba(192,57,43,0.3); }
        .bulk-card-fields { padding:0.65rem; display:flex; flex-direction:column; gap:0.5rem; }
        .bulk-card-field { display:flex; flex-direction:column; gap:0.2rem; }
        .bulk-card-field label { font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:#6a6250; }
        .bulk-card-field input, .bulk-card-field select { padding:0.4rem 0.6rem; font-size:0.82rem; background:var(--ink2); border:1px solid rgba(201,168,76,0.15); border-radius:3px; color:var(--text); width:100%; }
        .bulk-card-field input:focus, .bulk-card-field select:focus { border-color:var(--gold); outline:none; }
        .bulk-card-field-row { display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; }
        .bulk-global-settings { background:rgba(201,168,76,0.04); border:1px solid var(--border); border-radius:4px; padding:1rem; margin-bottom:1.2rem; }
        .bulk-global-title { font-family:'Cinzel',serif; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:0.8rem; display:flex; align-items:center; gap:0.5rem; }
        .bulk-global-title::before { content:'⚙'; opacity:0.7; }
        .bulk-global-row { display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem; }
        .bulk-global-field { display:flex; flex-direction:column; gap:0.3rem; }
        .bulk-global-field label { font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:#8a7f6a; }
        .bulk-apply-btn { background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.3); color:var(--gold-lt); padding:0.5rem 1rem; border-radius:3px; cursor:pointer; font-family:'Cinzel',serif; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; margin-top:0.8rem; transition:all 0.2s; }
        .bulk-apply-btn:hover { background:rgba(201,168,76,0.15); border-color:var(--gold); }
        .bulk-progress { display:none; margin-top:1rem; }
        .bulk-progress.active { display:block; }
        .bulk-progress-bar { width:100%; height:6px; background:var(--ink3); border-radius:3px; overflow:hidden; margin-bottom:0.5rem; }
        .bulk-progress-fill { height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-lt)); border-radius:3px; width:0; transition:width 0.3s; }
        .bulk-progress-text { font-size:0.78rem; color:#8a7f6a; text-align:center; }

        /* ════════════════════════════════
           GRIMORIO
        ════════════════════════════════ */
        .grimorio-filter-bar { display:flex; gap:0.5rem; margin-bottom:0.75rem; align-items:center; flex-wrap:wrap; }
        .grimorio-type-bar { display:flex; gap:0.4rem; margin-bottom:1rem; align-items:center; }
        .gtab { flex:1; padding:0.3rem 0.2rem; background:transparent; border:1px solid rgba(201,168,76,0.15); border-radius:2px; color:#6a6250; cursor:pointer; font-family:'Cinzel',serif; font-size:0.58rem; letter-spacing:0.08em; transition:all 0.2s; }
        .gtab:hover { color:var(--text); border-color:rgba(201,168,76,0.3); }
        .gtab.active { color:var(--gold); background:var(--mist); border-color:rgba(201,168,76,0.3); }
        .type-filter-btn { padding:0.25rem 0.6rem; background:transparent; border:1px solid rgba(201,168,76,0.15); border-radius:2px; color:#6a6250; cursor:pointer; font-family:'Cinzel',serif; font-size:0.55rem; letter-spacing:0.07em; transition:all 0.2s; white-space:nowrap; }
        .type-filter-btn:hover { color:var(--text); border-color:rgba(201,168,76,0.3); }
        .type-filter-btn.active { color:var(--gold); background:var(--mist); border-color:rgba(201,168,76,0.3); }
        .type-filter-btn[data-type="0"].active { border-color:rgba(100,160,255,0.5); color:#7ab0ff; background:rgba(100,160,255,0.07); }
        .type-filter-btn[data-type="1"].active { border-color:rgba(255,180,50,0.5); color:var(--gold); background:rgba(255,180,50,0.07); }
        .type-filter-btn[data-type="2"].active { border-color:rgba(200,60,60,0.5); color:#e57373; background:rgba(200,60,60,0.07); }
        .picker-search-bar { display:flex; gap:0.5rem; margin-bottom:0.6rem; align-items:center; }
        .picker-search-input { flex:1; padding:0.3rem 0.6rem 0.3rem 1.8rem; background:var(--ink3); border:1px solid rgba(201,168,76,0.15); border-radius:2px; color:var(--text); font-size:0.78rem; font-family:'Crimson Pro',serif; transition:border-color 0.2s; }
        .picker-search-input:focus { outline:none; border-color:var(--gold); }
        .picker-search-wrap { position:relative; flex:1; }
        .picker-search-icon { position:absolute; left:0.55rem; top:50%; transform:translateY(-50%); color:#6a6250; font-size:0.7rem; pointer-events:none; }
        .picker-qty-badge { position:absolute; top:5px; left:5px; background:var(--gold); color:#0a0a0f; font-family:'Cinzel',serif; font-size:0.52rem; font-weight:700; padding:1px 5px; border-radius:2px; min-width:18px; text-align:center; opacity:0; transition:opacity 0.15s; z-index:3; pointer-events:none; }
        .picker-card.selected .picker-qty-badge { opacity:1; }
        .picker-qty-row { display:flex; align-items:center; justify-content:center; gap:0.2rem; margin-top:0.3rem; opacity:0; transition:opacity 0.15s; }
        .picker-card.selected .picker-qty-row { opacity:1; }
        .picker-qty-btn { background:none; border:1px solid rgba(201,168,76,0.25); border-radius:2px; color:#6a6250; cursor:pointer; padding:0 5px; font-size:0.78rem; line-height:1.4; transition:all 0.15s; }
        .picker-qty-btn:hover { color:var(--gold); border-color:rgba(201,168,76,0.5); }
        .picker-qty-input { width:36px; padding:0.1rem 0.2rem; background:var(--ink3); border:1px solid rgba(201,168,76,0.2); border-radius:2px; color:var(--text); font-size:0.72rem; text-align:center; -moz-appearance:textfield; }
        .picker-qty-input::-webkit-inner-spin-button, .picker-qty-input::-webkit-outer-spin-button { -webkit-appearance:none; }
        .grimorio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:1rem; max-height:calc(100vh - 260px); overflow-y:auto; padding-right:0.3rem; }
        .grimorio-grid::-webkit-scrollbar { width:5px; }
        .grimorio-grid::-webkit-scrollbar-track { background:transparent; }
        .grimorio-grid::-webkit-scrollbar-thumb { background:rgba(201,168,76,0.25); border-radius:3px; }

        /* ════════════════════════════════
           DECK
        ════════════════════════════════ */
        .deck-topbar { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1rem; background:var(--ink2); border:1px solid var(--border); border-radius:4px; margin-bottom:1.2rem; position:sticky; top:0; z-index:10; }
        .deck-topbar-left { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
        .deck-topbar-center { flex:1; position:relative; }
        .deck-topbar-right { display:flex; gap:0.5rem; flex-shrink:0; }
        .deck-select { padding:0.42rem 0.75rem; background:var(--ink3); border:1px solid rgba(201,168,76,0.2); border-radius:3px; color:var(--text); font-family:'Cinzel',serif; font-size:0.72rem; letter-spacing:0.05em; cursor:pointer; transition:border-color 0.2s; max-width:160px; }
        .deck-select:focus { outline:none; border-color:var(--gold); }
        .deck-new-btn { background:none; border:1px solid rgba(201,168,76,0.2); border-radius:3px; color:#6a6250; cursor:pointer; padding:0.42rem 0.65rem; font-size:0.8rem; transition:all 0.2s; line-height:1; flex-shrink:0; }
        .deck-new-btn:hover { color:var(--gold); border-color:rgba(201,168,76,0.5); }
        .deck-delete-btn { background:none; border:1px solid rgba(192,57,43,0.2); border-radius:3px; color:#6a6250; cursor:pointer; padding:0.42rem 0.65rem; font-size:0.75rem; font-family:'Cinzel',serif; transition:all 0.2s; flex-shrink:0; }
        .deck-delete-btn:hover { color:#e57373; border-color:rgba(192,57,43,0.4); }
        .deck-search { width:100%; padding:0.42rem 0.75rem 0.42rem 2rem; background:var(--ink3); border:1px solid rgba(201,168,76,0.15); border-radius:3px; color:var(--text); font-size:0.82rem; font-family:'Crimson Pro',serif; transition:border-color 0.2s; }
        .deck-search:focus { outline:none; border-color:var(--gold); }
        .deck-search-icon { position:absolute; left:0.6rem; top:50%; transform:translateY(-50%); color:#6a6250; font-size:0.75rem; pointer-events:none; }
        .deck-action-btn { padding:0.42rem 0.9rem; background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.25); border-radius:3px; color:var(--gold-lt); cursor:pointer; font-family:'Cinzel',serif; font-size:0.68rem; letter-spacing:0.1em; transition:all 0.2s; white-space:nowrap; }
        .deck-action-btn:hover { background:rgba(201,168,76,0.15); border-color:var(--gold); }
        .deck-action-btn:disabled { opacity:0.4; cursor:not-allowed; }
        .deck-action-btn.secondary { background:rgba(201,168,76,0.04); border-color:rgba(201,168,76,0.15); color:#6a6250; }
        .deck-action-btn.secondary:hover:not(:disabled) { color:var(--gold-lt); border-color:rgba(201,168,76,0.3); }
        .deck-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:1rem; max-height:calc(100vh - 220px); overflow-y:auto; padding-right:0.3rem; }
        .deck-grid::-webkit-scrollbar { width:5px; }
        .deck-grid::-webkit-scrollbar-track { background:transparent; }
        .deck-grid::-webkit-scrollbar-thumb { background:rgba(201,168,76,0.25); border-radius:3px; }
        .deck-card-item { position:relative; }
        .deck-card-remove { position:absolute; top:6px; right:6px; width:22px; height:22px; background:rgba(10,10,15,0.85); border:1px solid rgba(192,57,43,0.4); border-radius:50%; color:#e57373; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.65rem; opacity:0; transition:all 0.2s; z-index:2; }
        .deck-card-item:hover .deck-card-remove { opacity:1; }
        .deck-card-remove:hover { background:rgba(192,57,43,0.3); }
        .deck-card-count { display:flex; align-items:center; gap:0.35rem; margin-top:0.25rem; }
        .deck-card-count-btn { background:none; border:1px solid rgba(201,168,76,0.2); border-radius:2px; color:#6a6250; cursor:pointer; padding:0 5px; font-size:0.8rem; line-height:1.4; transition:all 0.2s; }
        .deck-card-count-btn:hover { color:var(--gold); border-color:rgba(201,168,76,0.5); }
        .deck-card-count-val { font-family:'Cinzel',serif; font-size:0.7rem; color:var(--gold); min-width:20px; text-align:center; }
        .deck-empty { grid-column:1/-1; text-align:center; padding:3rem 1rem; color:#6a6250; font-style:italic; font-size:0.85rem; }

        /* ── Card Picker modal ── */
        .deck-card-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:0.6rem; max-height:50vh; overflow-y:auto; padding-right:0.3rem; margin-top:0.8rem; }
        .deck-card-picker::-webkit-scrollbar { width:5px; }
        .deck-card-picker::-webkit-scrollbar-thumb { background:rgba(201,168,76,0.2); border-radius:3px; }
        .picker-card { cursor:pointer; border:1px solid rgba(201,168,76,0.1); border-radius:5px; overflow:hidden; transition:all 0.2s; background:var(--ink3); position:relative; }
        .picker-card:hover { border-color:rgba(201,168,76,0.4); transform:translateY(-2px); }
        .picker-card.selected { border-color:var(--gold); box-shadow:0 0 12px rgba(201,168,76,0.3); }
        .picker-card .card-name { font-size:0.58rem; }
        .picker-card .card-cost { font-size:0.68rem; }
        .picker-card .card-badge { font-size:0.5rem; }
        .picker-footer { display:none; margin-top:0.8rem; padding-top:0.8rem; border-top:1px solid var(--border); align-items:center; gap:0.8rem; }
        .picker-footer.visible { display:flex; }
        .picker-count-input { width:56px; padding:0.3rem 0.5rem; background:var(--ink3); border:1px solid rgba(201,168,76,0.3); border-radius:3px; color:var(--text); font-size:0.85rem; text-align:center; }

        /* ════════════════════════════════
           CUENTAS
        ════════════════════════════════ */
        .cuentas-list { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:0.5rem; }
        .cuenta-item { display:flex; align-items:center; justify-content:space-between; padding:0.6rem 0.9rem; background:var(--ink3); border:1px solid rgba(201,168,76,0.15); border-radius:3px; transition:border-color 0.2s; }
        .cuenta-item:hover { border-color:rgba(201,168,76,0.35); }
        .cuenta-item-name { font-family:'Cinzel',serif; font-size:0.8rem; color:var(--text); }
        .cuenta-item-id { font-size:0.7rem; color:#6a6250; margin-left:0.5rem; }
        .cuenta-edit-btn { background:none; border:1px solid rgba(201,168,76,0.2); border-radius:3px; color:#6a6250; cursor:pointer; padding:3px 10px; font-size:0.75rem; font-family:'Cinzel',serif; transition:all 0.2s; }
        .cuenta-edit-btn:hover { color:var(--gold); border-color:rgba(201,168,76,0.5); }

        /* ════════════════════════════════
           MODAL
        ════════════════════════════════ */
        .modal-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.25s; }
        .modal-overlay.open { opacity:1; pointer-events:all; }
        .modal { background:var(--ink2); border:1px solid var(--border); border-radius:6px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; position:relative; transform:translateY(20px); transition:transform 0.25s; }
        .modal-overlay.open .modal { transform:translateY(0); }
        .modal::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
        .modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.5rem 0; }
        .modal-title { font-family:'Cinzel',serif; font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); }
        .modal-close { background:none; border:none; color:#6a6250; cursor:pointer; font-size:1rem; padding:4px 8px; border-radius:3px; transition:color 0.2s; }
        .modal-close:hover { color:var(--red); }
        .modal-body { padding:1.2rem 1.5rem 1.5rem; }
        .modal-body .btn { margin-top:1rem; }
        .modal-preview { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; border-radius:4px; margin-bottom:1.2rem; border:1px solid var(--border); display:block; }
        .modal-preview-placeholder { width:100%; aspect-ratio:3/4; background:var(--ink3); border:1px solid var(--border); border-radius:4px; margin-bottom:1.2rem; display:flex; align-items:center; justify-content:center; color:rgba(201,168,76,0.2); font-size:3rem; }
        .modal-btn-row { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin-top:1rem; }