:root { color-scheme: light; --paper:#f7f8f5; --ink:#17221d; --muted:#68746c; --line:#dfe5de; --accent:#1c5b47; --accent-soft:#e5f0ea; --card:#fffefa; --shadow:0 12px 35px rgba(31,56,43,.08); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--paper); color:var(--ink); }
button, input, select { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100svh; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem clamp(1rem,4vw,3rem); border-bottom:1px solid var(--line); background:rgba(247,248,245,.9); position:sticky; top:0; z-index:2; backdrop-filter:blur(14px); }
.brand { border:0; background:transparent; color:var(--ink); font-weight:750; letter-spacing:-.03em; padding:0; }
.brand small { display:block; color:var(--muted); font-size:.68rem; font-weight:550; letter-spacing:.08em; text-transform:uppercase; margin-top:.15rem; }
.icon-button { width:2.25rem; height:2.25rem; border:1px solid var(--line); border-radius:50%; background:var(--card); color:var(--accent); font-size:1.35rem; line-height:1; }
.page { width:min(1120px,100%); margin:0 auto; padding:clamp(2.4rem,7vw,6rem) clamp(1rem,4vw,3rem) 4rem; }
.hero { max-width:680px; margin-bottom:2.5rem; }
.eyebrow { color:var(--accent); font-size:.74rem; font-weight:760; letter-spacing:.14em; text-transform:uppercase; }
h1 { font-size:clamp(2.4rem,8vw,5.6rem); line-height:.94; letter-spacing:-.075em; margin:.75rem 0 1rem; }
h2 { font-size:clamp(1.8rem,4vw,3.1rem); line-height:1; letter-spacing:-.055em; margin:.45rem 0 0; }
.lead { max-width:560px; color:var(--muted); font-size:1.03rem; line-height:1.65; }
.market-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.market-card { min-height:190px; padding:1.5rem; border:1px solid var(--line); border-radius:1.25rem; background:var(--card); box-shadow:var(--shadow); text-align:left; transition:transform .18s ease,border-color .18s ease; }
.market-card:hover,.market-card:focus-visible { transform:translateY(-3px); border-color:var(--accent); }
.market-card strong { display:block; font-size:clamp(1.5rem,4vw,2.4rem); letter-spacing:-.06em; }
.market-card span { display:block; margin-top:2.8rem; color:var(--muted); }
.toolbar { display:grid; gap:.85rem; margin:2rem 0 1.6rem; }
.search { width:100%; border:1px solid var(--line); border-radius:.85rem; background:var(--card); padding:.85rem 1rem; color:var(--ink); outline:none; }
.search:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.filters { display:flex; gap:.5rem; overflow:auto; padding-bottom:.2rem; }
.filter { border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); padding:.55rem .8rem; white-space:nowrap; }
.filter.active { background:var(--accent); border-color:var(--accent); color:white; }
.shelf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.book { min-height:220px; display:flex; flex-direction:column; justify-content:space-between; padding:1.25rem; border:1px solid var(--line); border-radius:1rem; background:var(--card); box-shadow:var(--shadow); text-align:left; transition:transform .18s ease,box-shadow .18s ease; }
.book:hover,.book:focus-visible { transform:translateY(-3px); box-shadow:0 17px 42px rgba(31,56,43,.13); }
.book-ticker { font-size:2.35rem; font-weight:800; letter-spacing:-.075em; color:var(--accent); }
.book-name { margin-top:.45rem; font-weight:680; line-height:1.25; }
.book-meta { color:var(--muted); font-size:.82rem; line-height:1.6; }
.empty { color:var(--muted); padding:2rem 0; }
.reader { height:100svh; display:flex; flex-direction:column; background:#fff; }
.reader-bar { flex:0 0 auto; display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); background:var(--paper); }
.back { border:1px solid var(--line); border-radius:999px; background:var(--card); padding:.55rem .8rem; color:var(--accent); }
.reader-title { min-width:0; flex:1; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader-status { color:var(--muted); font-size:.78rem; }
.report-frame { width:100%; flex:1; border:0; background:white; }
.notice { margin-top:1.5rem; border:1px solid #efd9a1; background:#fff8e5; color:#715514; padding:.85rem 1rem; border-radius:.75rem; }
dialog { border:0; border-radius:1rem; padding:1.25rem; width:min(520px,calc(100% - 2rem)); box-shadow:0 20px 70px rgba(0,0,0,.2); }
dialog::backdrop { background:rgba(15,25,19,.35); }
.dialog-row { display:grid; gap:.45rem; margin:.85rem 0; }
.dialog-row input { width:100%; padding:.7rem; border:1px solid var(--line); border-radius:.65rem; }
.dialog-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; }
.primary { border:0; border-radius:.7rem; background:var(--accent); color:white; padding:.7rem 1rem; }
.secondary { border:1px solid var(--line); border-radius:.7rem; background:transparent; padding:.7rem 1rem; }
@media (max-width:620px) { .market-grid { grid-template-columns:1fr; } .market-card { min-height:150px; } .market-card span { margin-top:1.4rem; } .shelf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .book { min-height:190px; padding:1rem; } .book-ticker { font-size:1.9rem; } }