:root { --ink:#24332d; --muted:#68746e; --paper:#f6f2e8; --card:#fffdf7; --line:#d9d5c8; --pine:#285a49; --pine-dark:#174437; --sage:#dfe8d8; --amber:#bd7a3b; --shadow:0 18px 50px rgba(43,55,47,.08); font-family:"Noto Serif SC","Songti SC","Microsoft YaHei",serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 90% 0%,rgba(183,203,179,.35),transparent 34rem),linear-gradient(180deg,#f9f6ee,var(--paper)); }
body::before { content:"";position:fixed;inset:0;pointer-events:none;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); }
button,input,textarea { font:inherit; } button,summary,label.file-button,label.photo-button { cursor:pointer; }
.masthead,main { width:min(1040px,calc(100% - 40px));margin-inline:auto; }
.masthead { display:flex;justify-content:space-between;align-items:flex-end;padding:48px 0 30px;border-bottom:1px solid var(--line); }
.eyebrow,.section-kicker { margin:0 0 8px;font:700 .72rem ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;color:var(--pine); }
h1 { margin:0;font-size:clamp(2.7rem,7vw,5rem);line-height:.95;letter-spacing:.08em;font-weight:500; }
.subtitle { margin:14px 0 0;color:var(--muted);letter-spacing:.08em; }.build-id { display:inline-block;margin-top:10px;color:var(--muted);font:600 .68rem ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em; }
.header-actions { display:flex;gap:10px; }
main { padding:34px 0 80px; } section { margin-bottom:52px; }
.capture-panel { background:rgba(255,253,247,.94);border:1px solid var(--line);padding:clamp(22px,4vw,42px);border-radius:30px 30px 8px 30px;box-shadow:var(--shadow); }
.section-heading { display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:20px; }
h2 { margin:0;font-size:clamp(1.45rem,3vw,2rem);font-weight:500; }.time-promise { color:var(--muted);font-size:.84rem; }
textarea,input { width:100%;border:1px solid var(--line);color:var(--ink);background:#fffef9;border-radius:12px;outline:none;transition:.2s border,.2s box-shadow; }
textarea:focus,input:focus { border-color:var(--pine);box-shadow:0 0 0 3px rgba(40,90,73,.12); }
#captureText { min-height:210px;padding:22px;resize:vertical;font-size:1.18rem;line-height:1.8; }
.capture-actions { display:flex;justify-content:space-between;gap:14px;margin-top:18px; }.capture-boundary { margin:14px 0 0;color:var(--muted);font-size:.82rem;line-height:1.6; }
.capture-status { display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border:1px solid #b8cdb9;border-radius:13px;background:#e8f1e4;color:var(--pine-dark); }.capture-status span { flex:1;font-size:.88rem;line-height:1.5; }.capture-status a { color:var(--pine-dark);white-space:nowrap;text-underline-offset:4px; }
.capture-status.error { border-color:#d7afa6;background:#f8e9e4;color:#7b3029; }.capture-status.error span { color:#7b3029; }
.button { display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);text-decoration:none;white-space:nowrap; }
.button.primary { background:var(--pine);color:white;border-color:var(--pine);padding-inline:24px; }.button.primary:hover { background:var(--pine-dark); }.button.danger { background:#8e3b32;color:white;border-color:#8e3b32; }
.button.primary.success { background:#356f58;border-color:#356f58; }
.file-button input,.photo-button input { position:absolute;width:1px;height:1px;opacity:0; }
.photo-preview { display:grid;gap:10px;margin-top:14px;padding:12px;border-radius:14px;background:var(--sage); }.pending-media { display:flex;gap:14px;align-items:center; }.photo-preview img { width:82px;height:82px;object-fit:cover;border-radius:10px; }.photo-preview div { display:grid;gap:3px; }.photo-preview small { color:var(--muted);font-family:ui-sans-serif,system-ui,sans-serif; }
.usage-note { margin:0 0 50px;border:1px solid var(--line);border-radius:16px;background:rgba(255,253,247,.66); }.usage-note summary { padding:17px 20px;font-weight:600;list-style:none; }.usage-note summary::-webkit-details-marker { display:none; }.usage-note summary::after { content:"＋";float:right;color:var(--pine); }.usage-note[open] summary::after { content:"−"; }.note-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:2px 20px 20px;border-top:1px solid var(--line); }.note-grid div { padding-top:16px; }.note-grid p { margin:6px 0 0;color:var(--muted);line-height:1.65;font-size:.92rem; }
.data-management { margin-top:-32px; }.data-management-body { display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:20px;border-top:1px solid var(--line); }.data-management-body p { min-height:3em;color:var(--muted);line-height:1.55;font-size:.86rem; }.data-actions { display:flex;flex-wrap:wrap;gap:9px; }
.inbox-list,.observation-list { display:grid;gap:14px; }.inbox-card,.observation-card { background:rgba(255,253,247,.84);border:1px solid var(--line);border-radius:18px 18px 5px 18px;padding:22px; }.observation-card { padding:0;overflow:hidden; }.inbox-card { border-left:4px solid var(--amber); }.inbox-mark { color:#845625;background:#f4ead7;padding:5px 9px;border-radius:999px;font:.76rem ui-sans-serif,system-ui,sans-serif; }
.card-top { display:flex;justify-content:space-between;gap:18px;align-items:start; }.card-top h3 { margin:0;font-size:1.2rem; }.date { color:var(--muted);font:.78rem ui-sans-serif,system-ui,sans-serif;white-space:nowrap; }
.raw-text { margin:14px 0;line-height:1.75;white-space:pre-wrap; }.working-text { display:grid;gap:5px;padding:12px 14px;border-left:3px solid var(--pine);background:#edf2e9;line-height:1.65; }.working-text small,.interpretation small { color:var(--muted); }
.saved-media-list { display:flex;flex-wrap:wrap;gap:10px; }.saved-photo { display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:74px;margin:8px 0 0;border-radius:12px;overflow:hidden;background:#eeeae0;color:var(--muted);font-size:.8rem; }.saved-photo img { display:block;max-width:220px;max-height:180px;object-fit:cover; }.saved-photo figcaption { width:100%;padding:6px 9px;background:#eeeae0; }
.chips { display:flex;flex-wrap:wrap;gap:7px; }.chip { padding:5px 9px;border-radius:999px;background:var(--sage);color:var(--pine-dark);font:.78rem ui-sans-serif,system-ui,sans-serif; }.chip.tag { background:#eee7d7;color:#72512f; }
.interpretation { margin:15px 0 0;padding:12px 14px;border-left:3px solid var(--amber);background:#faf3e6;line-height:1.6; }.interpretation small { display:block;margin-bottom:3px; }
.card-actions { display:flex;justify-content:flex-end;gap:14px;margin-top:16px; }.card-actions button:not(.button) { border:0;background:none;color:var(--pine);padding:3px; }.card-actions .delete { color:#8e3b32!important; }
.observation-details summary { list-style:none;padding:20px 54px 20px 22px;position:relative; }.observation-details summary::-webkit-details-marker { display:none; }.observation-details summary::after { content:"＋";position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--pine);font-size:1.2rem; }.observation-details[open] summary::after { content:"−"; }.observation-details[open] summary { border-bottom:1px solid var(--line); }.observation-summary { display:flex;justify-content:space-between;align-items:start;gap:18px; }.observation-summary > span { display:grid;gap:6px; }.observation-summary strong { font-size:1.12rem;font-weight:600; }.observation-summary small { color:var(--muted);line-height:1.45; }.observation-body { padding:4px 22px 22px; }
.history-heading { align-items:center; }.search-section { margin-bottom:34px; }.search-wrap { width:min(520px,100%); }.search-wrap > label { display:block;margin-bottom:8px;color:var(--muted);font:.82rem ui-sans-serif,system-ui,sans-serif; }.search-control { position:relative; }.search-control input { padding:12px 72px 12px 16px; }.clear-search { position:absolute;right:7px;top:50%;transform:translateY(-50%);border:0;border-radius:999px;padding:6px 10px;background:var(--sage);color:var(--pine-dark);font-size:.78rem; }.active-filter { color:var(--pine);background:var(--sage);display:inline-block;padding:7px 12px;border-radius:999px;margin:0 0 16px; }
.coverage-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:11px; }.coverage-card { position:relative;overflow:hidden;text-align:left;min-height:92px;padding:16px;border:1px solid var(--line);border-radius:15px 15px 4px 15px;background:rgba(255,253,247,.7);color:var(--ink); }.coverage-card::after { content:"";position:absolute;left:0;bottom:0;height:4px;width:var(--coverage);background:var(--pine); }.coverage-card.active { border-color:var(--pine);background:var(--sage); }.coverage-count { display:block;margin-top:10px;font:600 1.35rem ui-sans-serif,system-ui,sans-serif; }
.organize-dialog { width:min(760px,calc(100% - 24px));max-height:90vh;border:0;border-radius:22px;padding:clamp(20px,4vw,34px);color:var(--ink);background:var(--card);box-shadow:0 30px 90px rgba(0,0,0,.25); }.organize-dialog::backdrop,dialog::backdrop { background:rgba(31,43,37,.48); }.icon-button { border:0;background:none;font-size:2rem;color:var(--muted); }.source-evidence { margin-bottom:18px;padding:14px 16px;border-radius:12px;background:#f2eee3; }.source-evidence small { color:var(--muted); }.source-evidence p { margin:6px 0 0;line-height:1.65;white-space:pre-wrap; }
.sketch-dialog { width:min(900px,calc(100% - 20px));max-height:96vh;border:0;border-radius:22px;padding:clamp(14px,3vw,28px);color:var(--ink);background:var(--card);box-shadow:0 30px 90px rgba(0,0,0,.25); }.sketch-shell { display:grid; }.sketch-dialog canvas { display:block;width:100%;max-height:64vh;aspect-ratio:3/2;border:1px solid var(--line);border-radius:14px;background:#fffdf8;touch-action:none; }.sketch-tools { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:14px; }.sketch-choices,.sketch-history { display:flex;align-items:center;gap:8px; }.color-choice,.width-choice { display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#fff; }.color-choice::after { content:"";width:24px;height:24px;border-radius:50%;background:var(--sketch-color); }.width-choice span { display:block;width:24px;height:var(--sketch-width);border-radius:99px;background:var(--ink); }.color-choice.active,.width-choice.active { outline:3px solid rgba(40,90,73,.25);border-color:var(--pine); }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }.form-grid label { display:grid;gap:7px;color:var(--muted);font:.84rem ui-sans-serif,system-ui,sans-serif; }.form-grid input,.form-grid textarea { padding:11px 13px;font-family:"Noto Serif SC","Microsoft YaHei",sans-serif;line-height:1.55; }.wide { grid-column:1/-1; }.dialog-actions { display:flex;justify-content:flex-end;gap:10px;margin-top:22px; }
.text-button { border:0;padding:4px;background:none;color:var(--pine);text-decoration:underline;text-underline-offset:4px; }.empty-state { text-align:center;padding:34px;color:var(--muted); }.hidden { display:none!important; }.toast { position:fixed;right:24px;bottom:24px;z-index:20;transform:translateY(20px);opacity:0;pointer-events:none;transition:.25s;padding:12px 18px;color:white;background:var(--pine-dark);border-radius:10px;box-shadow:var(--shadow); }.toast.show { transform:none;opacity:1; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@media (max-width:700px) { .masthead { padding-top:28px;align-items:start;gap:22px; }.masthead,.history-heading { flex-direction:column;align-items:stretch; }.header-actions { margin-top:8px; }.header-actions .button { flex:1; }.capture-actions { display:grid;grid-template-columns:1fr 1fr; }.capture-actions .primary { grid-column:1/-1;order:2; }.capture-actions .button { width:100%; }.capture-status { align-items:flex-start;flex-wrap:wrap; }.capture-status span { flex-basis:100%;order:2; }.capture-status a { margin-left:auto; }.note-grid,.form-grid,.data-management-body { grid-template-columns:1fr; }.data-management-body p { min-height:0; }.wide { grid-column:auto; }.capture-panel { border-radius:21px 21px 6px 21px; }.coverage-grid { grid-template-columns:repeat(2,1fr); }.search-wrap { width:100%; }.saved-photo img { max-width:100%; }.dialog-actions { flex-direction:column-reverse; }.dialog-actions .button { width:100%; }.sketch-tools { align-items:flex-start; }.sketch-dialog canvas { max-height:52vh; }.sketch-history { width:100%; }.sketch-history .button { flex:1; } }
@media (max-width:420px) { .masthead,main { width:min(100% - 24px,1040px); }.header-actions { display:grid;grid-template-columns:1fr 1fr; }.subtitle { letter-spacing:.03em;line-height:1.6; }.card-top,.observation-summary { flex-direction:column;gap:6px; }.inbox-card { padding:17px; }.observation-details summary { padding:17px 48px 17px 17px; }.observation-body { padding:3px 17px 17px; } #captureText { min-height:230px; } }