:root { color-scheme: dark; --bg:#0d0d12; --panel:#171720; --panel2:#20202b; --text:#f5f3ff; --muted:#aaa7b7; --accent:#9b7cff; --accent2:#7255d8; --danger:#d65c72; --border:#323240; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:radial-gradient(circle at top,#1b1630 0,#0d0d12 38rem); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.app-shell { min-height:100vh; }
.topbar { height:64px; display:flex; align-items:center; gap:18px; padding:0 5vw; border-bottom:1px solid var(--border); background:rgba(13,13,18,.8); backdrop-filter:blur(12px); position:sticky; top:0; z-index:5; }
.brand { text-decoration:none; font-weight:800; letter-spacing:.02em; }
.tagline { color:var(--muted); font-size:.9rem; }
.main-content { width:min(1200px,92vw); margin:0 auto; padding:52px 0 80px; }
.hero { margin-bottom:42px; }
.eyebrow { margin:0 0 8px; color:#bba9ff; font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:.1em 0 .25em; font-size:clamp(2.4rem,6vw,4.8rem); line-height:1; letter-spacing:-.05em; }
h2 { margin:0; letter-spacing:-.025em; }
.lead { max-width:700px; color:var(--muted); font-size:1.1rem; line-height:1.65; }
.home-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.choice-card,.roll-panel,.section-block,.info-panel { background:linear-gradient(180deg,rgba(32,32,43,.96),rgba(23,23,32,.96)); border:1px solid var(--border); border-radius:22px; padding:28px; box-shadow:0 18px 50px rgba(0,0,0,.18); }
.choice-card { min-height:310px; display:flex; flex-direction:column; align-items:flex-start; }
.choice-card p { color:var(--muted); line-height:1.6; }
.choice-icon { font-size:2rem; width:52px; height:52px; display:grid; place-items:center; border-radius:15px; background:#2b2543; margin-bottom:22px; }
.btn { border:1px solid var(--border); border-radius:12px; padding:10px 15px; color:var(--text); background:var(--panel2); font-weight:700; transition:.15s ease; }
.btn:hover:not(:disabled) { transform:translateY(-1px); border-color:#5b566e; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent2)); border-color:transparent; }
.btn-secondary { background:#292936; }
.btn-ghost { background:transparent; }
.btn-danger { color:#ffb1bf; border-color:#63313e; }
.btn-large { padding:13px 18px; margin-top:auto; }
.file-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.info-panel { margin-top:20px; display:flex; gap:12px; color:var(--muted); }
.info-panel strong { color:var(--text); }
.page-header { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:28px; }
.muted { color:var(--muted); }
.header-actions,.roll-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.roll-panel { margin-bottom:30px; }
.roll-controls label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:.85rem; font-weight:700; }
.roll-controls input { width:110px; border:1px solid var(--border); border-radius:10px; background:#0f0f15; color:var(--text); padding:11px 12px; }
.status-message,.error-message { margin-top:14px; padding:11px 13px; border-radius:10px; background:#28243b; color:#d8cffd; }
.error-message { background:#3b2229; color:#ffb1bf; }
.section-block { margin-top:28px; }
.section-heading { display:flex; justify-content:space-between; margin-bottom:20px; }
.section-heading div { display:flex; align-items:baseline; gap:12px; }
.section-heading span { color:var(--muted); font-size:.9rem; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; }
.card-tile { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:15px; background:#111118; }
.card-image-button { display:block; width:100%; padding:0; border:0; background:transparent; }
.card-image-button img { width:100%; display:block; aspect-ratio:5/7; object-fit:cover; transition:transform .2s ease; }
.card-image-button:hover img { transform:scale(1.015); }
.no-image { aspect-ratio:5/7; display:grid; place-items:center; padding:20px; text-align:center; background:#28283a; }
.tile-footer { min-height:48px; padding:9px 10px 9px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tile-footer strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icon-button { width:34px; height:34px; border:1px solid var(--border); border-radius:9px; background:#22222d; color:var(--text); flex:0 0 auto; }
.icon-button.danger:hover { color:#ffb1bf; border-color:#6b3341; }
.empty-state { border:1px dashed #3a3947; border-radius:14px; padding:30px; color:var(--muted); text-align:center; }
.history-list { display:grid; gap:9px; }
.history-item { display:flex; align-items:center; gap:12px; padding:9px; border:1px solid var(--border); border-radius:12px; background:#121219; }
.history-item img { width:44px; height:62px; object-fit:cover; border-radius:6px; }
.history-name { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.history-name span { color:var(--muted); font-size:.8rem; }
.text-button { background:none; border:0; color:var(--text); padding:0; text-align:left; font-weight:750; }
.text-button:hover { color:#c4b7ff; }
.btn-small { padding:7px 10px; font-size:.8rem; }
.modal-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.78); }
.modal-card { position:relative; width:min(900px,96vw); max-height:92vh; overflow:auto; background:#171720; border:1px solid #464452; border-radius:20px; box-shadow:0 30px 100px rgba(0,0,0,.6); padding:24px; }
.modal-close { position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:#22222d; color:var(--text); font-size:1.4rem; z-index:2; }
.detail-layout { display:grid; grid-template-columns:minmax(220px,340px) 1fr; gap:28px; }
.detail-image img { width:100%; border-radius:14px; }
.detail-content { padding:14px 8px 10px 0; }
.detail-content h2 { font-size:2rem; margin-bottom:7px; }
.type-line { color:#c9c5d3; }
.oracle-text { white-space:pre-wrap; font:inherit; line-height:1.55; color:#e6e2ee; }
.external-link { display:inline-block; margin-top:10px; color:#c7b8ff; }
@media (max-width:760px) { .home-grid,.detail-layout { grid-template-columns:1fr; } .page-header { align-items:flex-start; flex-direction:column; } .history-item { flex-wrap:wrap; } .history-name { flex-basis:calc(100% - 70px); } .topbar { padding:0 4vw; } .tagline { display:none; } }

.export-modal { width:min(1000px,96vw); }
.export-content { padding:10px 4px 4px; }
.json-output { width:100%; min-height:420px; resize:vertical; margin-top:12px; padding:14px; border:1px solid var(--border); border-radius:12px; background:#0d0d13; color:#e9e5f2; font:0.82rem/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }
.export-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }

/* Export dialog: explicit visibility rule so it cannot be hidden by a generic dialog/modal rule. */
.export-dialog-backdrop { display: grid !important; visibility: visible !important; opacity: 1 !important; }
.export-dialog-backdrop .export-modal { display: block !important; visibility: visible !important; opacity: 1 !important; }