@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap');

:root {
  --ink: #202523;
  --muted: #6d746f;
  --paper: #f4f3ee;
  --card: #fffef9;
  --line: #deded5;
  --green: #184f3e;
  --green-2: #256c55;
  --lime: #d7ef8f;
  --coral: #f2a48d;
  --violet: #c6b6ee;
  --mint: #a8ddc4;
  --shadow: 0 18px 60px rgba(30, 45, 38, .08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", system-ui, sans-serif; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 236px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 20px 20px; display: flex; flex-direction: column; background: #123b30; color: white; }
.brand { display: flex; align-items: center; gap: 11px; color: white; text-decoration: none; font: 700 18px/1.15 "Manrope", sans-serif; letter-spacing: -.7px; padding: 0 8px; }
.brand-mark { width: 26px; height: 26px; display: flex; align-items: end; gap: 2px; }
.brand-mark i { display: block; width: 7px; border-radius: 10px; background: var(--lime); transform: rotate(-18deg); }
.brand-mark i:nth-child(1) { height: 13px; }.brand-mark i:nth-child(2) { height: 23px; }.brand-mark i:nth-child(3) { height: 17px; }
.primary-nav { display: grid; gap: 7px; margin-top: 44px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 11px; padding: 12px 13px; color: #bfd0ca; background: transparent; text-align: left; font-weight: 600; }
.nav-item:hover, .nav-item.is-active { color: white; background: rgba(255,255,255,.1); }
.nav-item > span:first-child { color: var(--lime); font-size: 17px; }
.nav-count { margin-left: auto; min-width: 23px; padding: 2px 7px; border-radius: 20px; text-align: center; color: #123b30; background: var(--lime); font-size: 11px; }
.sidebar-note { margin-top: auto; padding: 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.06); }
.sidebar-note strong { display: block; margin: 5px 0 7px; font: 600 15px "Manrope", sans-serif; }
.sidebar-note p { margin: 0; color: #b9cbc5; font-size: 12px; line-height: 1.55; }
.profile { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; margin-top: 18px; padding: 12px 5px 0; border-top: 1px solid rgba(255,255,255,.1); }
.profile strong, .profile small { display: block; }.profile strong { font-size: 13px; }.profile small { color: #9eb7ae; font-size: 10px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #173f34; background: var(--lime); font-size: 11px; font-weight: 700; }

main { min-width: 0; }
.topbar { height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 4.5vw; border-bottom: 1px solid var(--line); background: rgba(244,243,238,.86); backdrop-filter: blur(12px); }
.topbar h1 { margin: 5px 0 0; font: 600 clamp(20px, 2.2vw, 28px) "Manrope", sans-serif; letter-spacing: -1px; }
.eyebrow { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.system-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.system-status i, .ready-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #58a778; box-shadow: 0 0 0 4px rgba(88,167,120,.12); }
.button { border: 0; border-radius: 9px; padding: 11px 16px; font-weight: 700; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: white; background: var(--green); }.button.primary:hover { background: var(--green-2); }.button.primary:disabled { cursor: not-allowed; transform: none; opacity: .4; }
.button.secondary { border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.text-button, .back-link { border: 0; padding: 0; color: var(--green-2); background: transparent; font-weight: 700; }

.view { display: none; }.view.is-visible { display: block; }
.workspace, .library { padding: 48px 4.5vw 80px; }
.capture-card { min-height: 510px; display: grid; grid-template-columns: minmax(280px,.86fr) minmax(380px,1.14fr); overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.capture-copy { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(36px,5vw,72px); color: white; background: var(--green); overflow: hidden; }
.capture-copy::after { content:""; position:absolute; width:330px; height:330px; right:-170px; bottom:-180px; border:55px solid rgba(215,239,143,.2); border-radius:50%; }
.capture-copy h2 { max-width: 460px; margin: 22px 0 16px; font: 600 clamp(34px,4vw,54px)/1.06 "Manrope", sans-serif; letter-spacing: -2.5px; }
.capture-copy > p { max-width: 470px; color: #c3d4ce; line-height: 1.7; }
.step-pill { display: inline-block; width: fit-content; padding: 6px 9px; border-radius: 5px; color: #183e33; background: var(--lime); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.step-pill.coral { background: var(--coral); }.step-pill.violet { background: var(--violet); }.step-pill.mint { background: var(--mint); }.step-pill.neutral { background: #e7e7df; }
.privacy-note { display: flex; gap: 10px; margin-top: 36px; padding-top: 21px; border-top: 1px solid rgba(255,255,255,.14); color: #a9c1b8; font-size: 12px; line-height: 1.5; }
.capture-form { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(30px,4vw,58px); }
.test-preset { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border:1px solid #cbd8c4; border-radius:10px; background:#f2f7ef; }
.test-preset div { display:grid; gap:2px; }.test-preset strong { color:var(--ink); font-size:11px; }.test-preset span { color:var(--muted); font-size:10px; line-height:1.4; }.test-preset .button { flex:0 0 auto; font-size:10px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
input, textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; outline: none; }
input { height: 43px; padding: 0 12px; } input:focus, textarea:focus { border-color: #79a390; box-shadow: 0 0 0 3px rgba(37,108,85,.08); }
.drop-zone { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #afb9b1; border-radius: 14px; background: #f8f8f3; cursor: pointer; text-align: center; transition: .2s; }
.drop-zone:hover, .drop-zone.is-dragging, .drop-zone.has-file { border-color: var(--green-2); background: #f2f7ef; }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-zone strong { color: var(--ink); font-size: 15px; }.drop-zone > span:not(.upload-icon):not(.choose-file) { color: var(--muted); font-size: 11px; font-weight: 500; }
.upload-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 5px; border-radius: 50%; color: var(--green); background: #e5eddf; font-size: 23px; }
.choose-file { margin-top: 7px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; }
#audio-preview { width: 100%; height: 42px; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.consent-check { display:flex; grid-template-columns:18px 1fr; align-items:center; gap:9px; width:fit-content; color:var(--ink); font-size:11px; cursor:pointer; }.consent-check input { width:18px; height:18px; accent-color:var(--green); }

.processing-card { min-height: 390px; display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 34px; padding: clamp(36px,6vw,90px); border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.processing-card h2 { margin: 9px 0 22px; font: 600 30px "Manrope", sans-serif; }.processing-card p { color: var(--muted); }
.processing-orbit { position: relative; width: 110px; height: 110px; display: grid; place-items: center; border: 1px solid #cbd6cf; border-radius: 50%; }
.processing-orbit::before { content:""; position:absolute; inset:12px; border:1px dashed #8fa99d; border-radius:50%; animation: spin 7s linear infinite; }
.processing-orbit span { width: 48px; height: 48px; display:grid; place-items:center; border-radius:50%; color:var(--green); background:var(--lime); font-size:20px; }
.processing-orbit i { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--coral); }.processing-orbit i:nth-child(1){top:-4px}.processing-orbit i:nth-child(2){right:0;bottom:14px;background:var(--violet)}.processing-orbit i:nth-child(3){left:2px;bottom:16px;background:var(--mint)}
@keyframes spin { to { transform: rotate(360deg); } }
.progress-track { height: 6px; overflow: hidden; border-radius: 20px; background: #e5e7e1; }.progress-track i { display:block; width:8%; height:100%; border-radius:inherit; background:var(--green-2); transition:width .45s ease; }
.progress-value { color: var(--green); font: 600 28px "Manrope", sans-serif; }
.processing-error { grid-column:2 / -1; padding:18px; border:1px solid #e2b8aa; border-radius:12px; background:#fff4ef; }.processing-error strong { color:#7c3d2f; }.processing-error p { margin:7px 0 14px; color:#7a5b52; }.processing-error div { display:flex; gap:9px; }

.results { max-width: 1300px; margin: 0 auto; }
.result-hero { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:28px; }
.back-link { margin-bottom: 28px; }.result-kicker { display:flex; align-items:center; gap:9px; color:var(--green-2); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.result-hero h2 { margin:10px 0 4px; font:600 clamp(36px,5vw,60px) "Manrope", sans-serif; letter-spacing:-2.5px; }.result-hero p { margin:0; color:var(--muted); }
.save-cluster { display:flex; align-items:center; gap:14px; }.save-cluster > span { color:var(--muted); font-size:11px; }
.result-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; }.result-main, .result-aside { display:grid; gap:18px; align-content:start; }
.panel { padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:0 8px 30px rgba(28,43,36,.04); }
.panel-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; margin-bottom:20px; }.panel-heading h3 { margin:10px 0 0; font:600 23px "Manrope",sans-serif; letter-spacing:-.7px; }
.confidence { padding:6px 9px; border-radius:20px; color:var(--green-2); background:#edf5ef; font-size:10px; font-weight:700; }.confidence.needs-review { color:#8a4b3d; background:#fbece6; }
.review-flags { margin:-5px 0 16px; padding:12px 14px; border:1px solid #edc6b8; border-radius:10px; color:#765247; background:#fff5f1; font-size:11px; }.review-flags strong { color:#6f3f34; }.review-flags ul { margin:7px 0 0; padding-left:18px; }.review-flags li + li { margin-top:4px; }
.editable { resize:vertical; padding:13px 14px; line-height:1.65; background:#fcfcf8; }.summary-editor { min-height:150px; }.follow-up-editor { min-height:270px; }.transcript-editor { min-height:460px; }
.topic-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }.topic { padding:7px 10px; border-radius:20px; color:#4d5852; background:#eeeee8; font-size:11px; }
.action-list { display:grid; gap:9px; }.action-row { display:grid; grid-template-columns:22px 1fr auto; align-items:start; gap:11px; padding:13px 0; border-bottom:1px solid #ecece5; }.action-row:last-child { border:0; }.action-row input[type="checkbox"] { width:18px; height:18px; margin-top:8px; accent-color:var(--green); }.action-content { min-width:0; }.action-text { border:0; height:34px; padding:0; background:transparent; font-weight:600; }.action-row.is-done .action-text { color:#939994; text-decoration:line-through; }.action-controls { display:flex; flex-wrap:wrap; align-items:end; gap:8px; margin-top:5px; }.action-controls label { color:var(--muted); font-size:9px; }.action-controls select,.action-controls input { display:block; width:auto; min-width:120px; height:31px; margin-top:3px; padding:4px 8px; font-size:10px; }.action-support { align-self:end; padding:7px 8px; color:var(--muted); font-size:9px; }.action-evidence { margin-top:8px; color:var(--muted); font-size:10px; }.action-evidence summary { cursor:pointer; }.action-evidence p { margin:6px 0 0; line-height:1.5; }.action-remove { margin-top:5px; border:0; color:#9b6d61; background:transparent; opacity:0; }.action-row:hover .action-remove { opacity:1; }
.review-warning { margin-top:14px; padding:11px 13px; border-left:3px solid var(--coral); color:#765f57; background:#fcf0ec; font-size:11px; }
.transcript-panel { padding:0; overflow:hidden; }.transcript-panel summary { display:flex; justify-content:space-between; align-items:center; padding:22px 26px; cursor:pointer; list-style:none; }.transcript-panel summary > span:first-child { display:flex; align-items:center; gap:12px; }.transcript-panel summary > span:last-child { color:var(--muted); font-size:11px; }.transcript-panel textarea { margin:0 26px 26px; width:calc(100% - 52px); }
.contact-card { display:grid; gap:12px; }.contact-avatar { width:58px; height:58px; display:grid; place-items:center; margin-bottom:4px; border-radius:17px; color:var(--green); background:var(--lime); font:700 18px "Manrope",sans-serif; }.contact-card input { height:39px; }
.source-note { display:flex; gap:9px; margin-top:6px; padding:12px; border-radius:10px; background:#f1f5ed; }.source-note > span { color:var(--green-2); }.source-note p { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }.source-note strong { display:block; color:var(--ink); }
.source-card strong { display:block; margin:9px 0 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.source-meta { display:flex; gap:12px; color:var(--muted); font-size:11px; }
.source-card audio { width:100%; height:36px; margin-top:12px; }
.mini-wave { height:45px; display:flex; align-items:center; gap:3px; margin-top:15px; }.mini-wave i { width:4px; height:15px; border-radius:4px; background:#87ad9b; }.mini-wave i:nth-child(3n+1){height:28px}.mini-wave i:nth-child(2n+1){height:35px}

.library { max-width: 1240px; margin:0 auto; }.library-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:36px; }.library-heading h2 { margin:12px 0 5px; font:600 42px "Manrope",sans-serif; letter-spacing:-1.8px; }.library-heading p { margin:0; color:var(--muted); }
.empty-state { min-height:330px; display:grid; place-items:center; align-content:center; text-align:center; border:1px dashed #bfc5be; border-radius:18px; background:rgba(255,255,255,.38); }.empty-state > span { font-size:38px; color:var(--green-2); }.empty-state h3 { margin:14px 0 4px; }.empty-state p { margin:0; color:var(--muted); }
.conversation-list { display:grid; gap:12px; }.conversation-card { display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:17px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--card); transition:.2s; }.conversation-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }.conversation-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:14px; color:var(--green); background:#e7efdf; font-size:20px; }.conversation-card h3 { margin:0 0 4px; }.conversation-card p { margin:0; color:var(--muted); font-size:12px; }.conversation-card .topic-list { margin-top:9px; }.conversation-card time { display:block; margin-bottom:9px; color:var(--muted); font-size:10px; text-align:right; }
.toast { position:fixed; right:24px; bottom:24px; z-index:10; transform:translateY(90px); padding:13px 18px; border-radius:10px; color:white; background:#173e33; box-shadow:var(--shadow); font-size:12px; transition:.25s; }.toast.is-visible { transform:translateY(0); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

@media (max-width: 1000px) {
  .app-shell { grid-template-columns: 78px 1fr; }.sidebar { padding:28px 12px 18px; }.brand span:last-child,.nav-item:not(.is-active) .nav-count,.nav-item { font-size:0; }.brand { justify-content:center; }.primary-nav { place-items:center; }.nav-item { justify-content:center; }.nav-item > span:first-child { font-size:18px; }.sidebar-note,.profile > span:not(.avatar) { display:none; }.profile { display:flex; justify-content:center; }
  .capture-card { grid-template-columns:1fr; }.capture-copy { min-height:310px; }.capture-copy h2 { font-size:40px; }.result-grid { grid-template-columns:1fr; }.result-aside { grid-template-columns:1fr 1fr; }.processing-card { grid-template-columns:90px 1fr; }.progress-value { display:none; }
}
@media (max-width: 700px) {
  .app-shell { display:block; }.sidebar { position:static; width:100%; height:auto; flex-direction:row; align-items:center; padding:14px 18px; }.brand span:last-child { display:block; }.primary-nav { display:flex; margin:0 0 0 auto; }.nav-item { width:auto; }.profile { display:none; }.topbar { height:auto; padding:18px; }.topbar .system-status { display:none; }.workspace,.library { padding:26px 16px 60px; }.field-row,.result-aside { grid-template-columns:1fr; }.capture-form { padding:28px 20px; }.test-preset { align-items:flex-start; flex-direction:column; }.result-hero,.library-heading { align-items:start; flex-direction:column; }.save-cluster { width:100%; justify-content:space-between; }.processing-card { grid-template-columns:1fr; text-align:center; }.processing-orbit { margin:auto; }
}