@layer components {
.bank-dialog { width:min(1100px,calc(100vw - 32px)); max-width:1100px; max-height:92dvh; padding:0; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--panel); color:var(--text); font-family:var(--font-ui); }
.bank-dialog::backdrop { background:var(--backdrop); }
.bank-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px; border-bottom:1px solid var(--border); }
.bank-dialog h2 { font-size:22px; margin:0; }
.bank-dialog h3 { font-size:17px; margin:22px 0 12px; }
.bank-body { padding:20px 24px; overflow:auto; }
.bank-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.bank-field { display:grid; gap:6px; font-size:13px; color:var(--muted); }
.bank-dialog input,.bank-dialog select,.bank-dialog textarea,.ink-tools select { min-height:44px; max-width:100%; padding:8px; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); font:inherit; }
.bank-dialog button,.bank-bar button,.ink-tools button { min-height:44px; min-width:44px; }
.bank-actions,.bank-tabs,.bank-filters { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.bank-chips { display:flex; flex-wrap:wrap; gap:6px; width:100%; } .bank-chips button { border-radius:999px; padding:8px 14px; }
.bank-paper > div { min-width:0; } .bank-paper h3,.bank-bar strong { overflow-wrap:anywhere; }
.ink-tools input[type="checkbox"] { width:24px; height:24px; } .ink-tools label { min-height:44px; }
.bank-tabs button[aria-selected="true"],.bank-dialog button[aria-pressed="true"],.ink-tools button[aria-pressed="true"] { background:var(--ink); color:var(--on-ink); }
.bank-status { white-space:pre-wrap; font-size:14px; color:var(--muted); margin:12px 0; }
.bank-table-wrap { overflow:auto; max-height:48dvh; border:1px solid var(--border); }
.bank-table { border-collapse:collapse; width:100%; font-size:13px; }
.bank-table th,.bank-table td { padding:6px; border-bottom:1px solid var(--border); text-align:left; }
.bank-table th { position:sticky; top:0; background:var(--panel-2); z-index:1; white-space:nowrap; }
.bank-table input { width:95px; } .bank-table .wide { width:170px; }
.bank-paper { display:grid; grid-template-columns:1fr auto; gap:14px; padding:18px 0; border-bottom:1px solid var(--border); }
.bank-paper h3 { margin:0 0 8px; } .bank-paper p { margin:5px 0; color:var(--muted); font-size:13px; }
.bank-bar { padding:10px 16px; border-bottom:1px solid var(--border); background:var(--panel-2); color:var(--text); font:13px var(--font-ui); }
.bank-bar strong { display:block; margin-bottom:6px; } .bank-bar .bank-actions { margin:4px 0; }
.bank-result { font-size:32px; padding:14px 0; } .bank-question-image { width:100%; max-height:55dvh; object-fit:contain; background:#fff; }
.answer-sheet { position:fixed; inset:8dvh 16px auto auto; width:min(440px,calc(100vw - 24px)); max-height:85dvh; margin:0; }
.answer-grid { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.answer-grid button[data-result="wrong"],.answer-grid button[data-result="partial"] { border-color:var(--danger); }
.answer-grid button.answered { background:var(--accent-soft); }
.page-ink { position:absolute; inset:0; width:100%; height:100%; z-index:6; pointer-events:none; }
.page-ink.active { pointer-events:auto; touch-action:none; cursor:crosshair; }
.ink-tools { position:fixed; z-index:20; top:120px; left:30%; transform:translateX(-50%); max-width:calc(100vw - 24px); display:flex; flex-wrap:wrap; gap:5px; padding:8px; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); color:var(--text); box-shadow:var(--shadow); font:13px var(--font-ui); }
.ink-tools label { display:flex; align-items:center; gap:5px; } .ink-tools [data-color] { width:44px; border-bottom:5px solid var(--pen-color); }
.ink-quick { display:flex; gap:6px; padding:6px 12px; flex-wrap:wrap; }
@media(max-width:600px) { .bank-dialog { width:calc(100vw - 16px); max-height:94dvh; } .bank-body { padding:14px; } .bank-dialog header { padding:14px; } .bank-paper { grid-template-columns:1fr; } .answer-sheet { top:auto; bottom:8px; right:8px; max-height:85dvh; } .ink-tools { top:auto; bottom:10px; left:50%; width:calc(100vw - 16px); } }
@media(prefers-color-scheme:dark) { .bank-dialog,.bank-bar,.ink-tools { color-scheme:dark; --panel:#242321; --panel-2:#302d29; --text:#f0e8dd; --muted:#bdb4a7; --border:#51483f; --ink:#eee5d8; --on-ink:#242321; --accent-soft:#54392e; --danger:#ff9a83; } }
@media(prefers-reduced-motion:reduce) { .bank-dialog *,.ink-tools * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

}