:root { --ink:#17201d; --muted:#6b746f; --paper:#f7f7f3; --line:#d9ddd5; --panel:#ffffff; --yellow:#f2c453; --green:#64c998; --gray:#c7cbc6; --red:#cf4e49; --shadow:0 14px 38px rgba(23,32,29,.07); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:#ecefe9; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font:inherit; cursor:pointer; }
.app-shell { max-width:1500px; min-height:100vh; margin:auto; padding:20px clamp(16px, 3vw, 42px) 32px; }
.app-header { height:56px; display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.brand { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:750; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:27px; height:27px; border-radius:9px; background:var(--ink); color:white; font-family:Georgia, serif; font-style:italic; font-size:21px; }
.header-actions { display:flex; gap:14px; align-items:center; }.save-status { font-size:13px; color:var(--muted); }
.icon-button { border:1px solid var(--line); background:var(--panel); border-radius:10px; width:36px; height:36px; color:var(--ink); font-size:22px; line-height:1; }
.workspace { display:grid; grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr); gap:20px; min-height:calc(100vh - 126px); }
.panel { background:var(--panel); border:1px solid rgba(23,32,29,.08); border-radius:19px; box-shadow:var(--shadow); min-height:0; overflow:hidden; }
.transcript-panel { display:flex; flex-direction:column; }.ink-panel { display:flex; flex-direction:column; }
.panel-heading { padding:25px 28px 18px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid #edf0eb; }.ink-heading { padding-bottom:17px; }
.eyebrow { margin:0 0 5px; color:#8a938d; font-size:10px; font-weight:800; letter-spacing:.12em; }.panel h1,.panel h2 { margin:0; font-size:19px; letter-spacing:-.035em; }.panel h2 { font-size:17px; }
.format-toolbar,.ink-tools { display:flex; align-items:center; gap:5px; }.format-toolbar button,.tool,.text-tool { min-height:31px; border:1px solid #e2e6df; background:#fafbf9; border-radius:7px; color:#4c5650; padding:4px 8px; font-size:13px; }.format-toolbar button:hover,.tool:hover,.text-tool:hover { background:#eff2ed; }.tool.active { background:#e4f5ec; color:#176142; border-color:#bce6ce; }.text-tool { border-color:transparent; background:transparent; color:var(--muted); }
.transcript-wrap { position:relative; flex:1; padding:26px 28px 18px; min-height:280px; }.transcript { min-height:100%; outline:none; font-family:Georgia, "Times New Roman", serif; color:#26312c; font-size:19px; line-height:1.65; }.transcript:empty:before { content:attr(data-placeholder); color:#a2aaa4; }.transcript p { margin:0 0 1em; }.transcript ul,.transcript ol { padding-left:1.4em; }.review-word { color:var(--red); border-bottom:1.5px dotted var(--red); cursor:text; }.review-word.reviewing { color:inherit; border-color:transparent; }.empty-copy { position:absolute; top:27px; left:28px; right:28px; color:#a2aaa4; font-family:Georgia, "Times New Roman", serif; font-size:19px; line-height:1.65; pointer-events:none; }.review-legend { border-top:1px solid #edf0eb; padding:13px 28px 15px; color:#7d8781; font-size:12px; }.review-dot { display:inline-block; width:7px; height:7px; background:var(--red); border-radius:50%; margin-right:6px; }
.canvas-frame { position:relative; flex:1; min-height:360px; margin:22px 28px 16px; border:1.5px solid #dce2da; border-radius:12px; overflow:hidden; background:linear-gradient(#fff,#fdfefc); touch-action:none; }.canvas-frame:before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(84,109,95,.042) 1px,transparent 1px); background-size:100% 34px; }.canvas-frame canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; cursor:crosshair; }.canvas-guide { position:absolute; inset:0; display:grid; place-items:center; z-index:0; color:#b1b9b3; font-family:Georgia,serif; font-size:18px; pointer-events:none; transition:opacity .2s; }.canvas-guide.hidden { opacity:0; }
.batch-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 28px 22px; border-top:1px solid #edf0eb; }.batch-status { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }.status-dot { display:block; width:8px; height:8px; border-radius:999px; }.status-dot.gray { background:#b4bbb5; }.status-dot.yellow { background:#e0aa24; }.status-dot.green { background:#36a56f; }.status-dot.loading { background:#3c9e76; animation:pulse 1s infinite; }
.transcribe-button { min-width:162px; border:0; border-radius:11px; padding:9px 13px; text-align:left; transition:transform .15s, box-shadow .15s, background .15s; }.transcribe-button:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 5px 13px rgba(23,32,29,.12); }.button-label { display:block; font-weight:760; font-size:13px; }.button-detail { display:block; margin-top:2px; opacity:.72; font-size:11px; }.state-empty { color:#737b76; background:#e5e8e4; cursor:not-allowed; }.state-small { color:#604b12; background:#f8de92; }.state-ready { color:#0b5031; background:#a9e8c6; }.state-loading { color:#15573a; background:#d5f2e1; cursor:wait; }
.toast { position:fixed; z-index:10; bottom:26px; left:50%; display:flex; align-items:center; gap:14px; padding:11px 14px 11px 16px; color:white; background:#223129; border-radius:11px; box-shadow:0 10px 30px rgba(0,0,0,.18); font-size:13px; transform:translate(-50%, 90px); opacity:0; transition:all .25s ease; }.toast.visible { transform:translate(-50%,0); opacity:1; }.toast button { border:0; border-radius:6px; padding:4px 7px; color:#173a29; background:#b8edcf; font-size:12px; font-weight:700; }
@keyframes pulse { 50% { opacity:.35; } }
@media (max-width:850px) { .workspace { grid-template-columns:1fr; grid-template-rows:minmax(290px,.8fr) minmax(430px,1.2fr); }.transcript-wrap { min-height:230px; }.panel-heading { padding:20px 20px 15px; }.canvas-frame { margin:17px 20px 14px; min-height:330px; }.batch-bar { padding:12px 20px 18px; }.review-legend { padding:12px 20px; }.transcript-wrap { padding:20px; }.empty-copy { top:20px; left:20px; }.format-toolbar { gap:3px; }.format-toolbar button { padding:4px 6px; }.save-status { display:none; } }
@media (max-width:480px) { .app-shell { padding:12px 10px 20px; }.app-header { height:42px; margin-bottom:11px; }.panel-heading { align-items:flex-start; }.ink-heading { gap:10px; }.ink-tools { flex-wrap:wrap; justify-content:flex-end; }.batch-bar { align-items:flex-end; }.batch-status { max-width:42%; line-height:1.25; }.transcribe-button { min-width:155px; }.canvas-frame { min-height:310px; } }