:root { --ink:#101816; --muted:#69736e; --paper:#fff; --canvas:#f2f5f1; --line:#dbe4de; --dark:#0d1714; --lime:#dff04d; --lime-soft:#f4f8cc; --teal:#176c68; --teal-soft:#dcecea; --red:#a13d36; --red-soft:#fbe5e2; --shadow:0 18px 55px rgba(12,32,26,.1); font-family:"Segoe UI",Arial,sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { min-width:320px; min-height:100vh; margin:0; background:radial-gradient(circle at 80% 0,#fbfde5 0,transparent 26rem),linear-gradient(180deg,#f7f9f5,var(--canvas)); } button,input,textarea { font:inherit; } button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid rgba(23,108,104,.25); outline-offset:3px; }
.capture-shell { width:min(860px,100%); min-height:100vh; margin:0 auto; padding:0 24px 32px; }.capture-header { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:88px; }.capture-brand { display:flex; align-items:center; gap:10px; }.capture-brand > span:last-child { display:grid; line-height:1.05; }.capture-brand strong { font-size:1rem; }.capture-brand small { margin-top:4px; color:var(--muted); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; }.capture-mark { width:38px; height:38px; display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:8px; border-radius:11px; background:var(--lime); }.capture-mark i { width:4px; border-radius:5px; background:var(--dark); }.capture-mark i:nth-child(1){height:8px}.capture-mark i:nth-child(2){height:17px}.capture-mark i:nth-child(3){height:12px}.secure-state,.device-ready { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:.7rem; font-weight:700; }.secure-state i,.device-ready i { width:8px; height:8px; border-radius:50%; background:#39a669; box-shadow:0 0 0 4px #e4f5eb; }
.screen-card { border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.94); box-shadow:var(--shadow); }.activation-card { width:min(580px,100%); margin:38px auto 0; padding:clamp(25px,5vw,46px); }.eyebrow { margin:0 0 9px; color:var(--teal); font-size:.68rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }.activation-card h1,.compose-heading h1,.receipt-card h1 { margin:0; font-size:clamp(2rem,6vw,3.2rem); line-height:1; letter-spacing:-.055em; font-weight:630; }.lead,.compose-heading p:last-child { margin:14px 0 0; color:var(--muted); line-height:1.55; }.stack-form { display:grid; gap:16px; margin-top:28px; }.stack-form label,.large-field,.reference-field { display:grid; gap:7px; font-size:.76rem; font-weight:750; }.stack-form label small,.large-field small,.reference-field > small { color:var(--muted); font-size:.67rem; font-weight:500; line-height:1.4; }.stack-form input,.large-field textarea,.reference-field input { width:100%; min-height:48px; padding:12px 13px; border:1px solid #c3d0c8; border-radius:10px; background:#fff; color:var(--ink); }.large-field textarea { min-height:185px; resize:vertical; line-height:1.5; }.large-field > small { justify-self:end; }.primary-action { min-height:52px; display:flex; align-items:center; justify-content:center; gap:12px; padding:0 20px; border:0; border-radius:11px; background:var(--dark); color:#fff; font-weight:800; cursor:pointer; box-shadow:0 9px 22px rgba(13,23,20,.18); }.primary-action:hover { background:#1b2d27; }.primary-action:disabled { cursor:not-allowed; opacity:.45; box-shadow:none; }.boundary-note { display:grid; gap:5px; margin-top:23px; padding:14px 16px; border-radius:11px; background:var(--lime-soft); color:#465014; font-size:.75rem; line-height:1.45; }.boundary-note span { color:#626b2d; }
.compose-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:38px 0 25px; }.compose-heading > div { max-width:650px; }.capture-types { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:13px; }.capture-type { min-height:118px; display:grid; justify-items:start; align-content:center; gap:4px; padding:15px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.72); color:var(--ink); text-align:left; cursor:pointer; transition:.15s ease; }.capture-type:hover { transform:translateY(-1px); border-color:#a8beb3; }.capture-type.is-active { border-color:var(--dark); background:var(--dark); color:#fff; box-shadow:0 10px 25px rgba(13,23,20,.16); }.capture-type small { color:var(--muted); font-size:.66rem; }.capture-type.is-active small { color:#aebbb5; }.type-icon { width:30px; height:30px; display:grid; place-items:center; margin-bottom:7px; border-radius:9px; background:var(--teal-soft); color:var(--teal); font-size:.7rem; font-weight:900; }.capture-type.is-active .type-icon { background:var(--lime); color:var(--dark); }.type-icon.mic::before { content:""; width:8px; height:15px; border:2px solid currentColor; border-radius:8px; }.type-icon.file::before { content:""; width:13px; height:17px; border:2px solid currentColor; border-radius:2px; clip-path:polygon(0 0,70% 0,100% 25%,100% 100%,0 100%); }
.capture-composer { padding:clamp(18px,4vw,34px); }.recording-area { min-height:225px; display:grid; place-items:center; padding:24px; border:1px dashed #b8c8bf; border-radius:15px; background:linear-gradient(145deg,#f9fbf8,#edf4ef); }.record-button { display:grid; justify-items:center; gap:5px; border:0; background:transparent; color:var(--ink); cursor:pointer; }.record-circle { width:78px; height:78px; margin-bottom:10px; border:10px solid #fff; border-radius:50%; background:var(--red); box-shadow:0 0 0 1px #e4cbc8,0 12px 28px rgba(161,61,54,.22); }.record-button small { color:var(--muted); font-size:.68rem; }.recording-state { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; width:min(440px,100%); padding:18px; border-radius:13px; background:#fff; box-shadow:0 8px 25px rgba(14,35,29,.08); }.recording-pulse { width:15px; height:15px; border-radius:50%; background:var(--red); animation:pulse 1.3s infinite; }.recording-state time { grid-column:2; color:var(--muted); font-variant-numeric:tabular-nums; }.recording-state button { grid-column:3; grid-row:1/3; min-height:44px; padding:0 18px; border:0; border-radius:9px; background:var(--red); color:#fff; font-weight:800; cursor:pointer; }.voice-preview { width:100%; }.voice-preview > div,.file-preview { display:flex; align-items:center; gap:11px; }.ready-check { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--teal-soft); color:var(--teal); font-weight:900; }.voice-preview small,.file-preview small { display:block; margin-top:3px; color:var(--muted); font-size:.68rem; }.voice-preview audio { width:100%; margin:18px 0 10px; }.text-action { padding:5px; border:0; background:transparent; color:var(--teal); font-size:.72rem; font-weight:800; cursor:pointer; }.permission-note { margin:10px 0 0; color:var(--muted); font-size:.67rem; line-height:1.5; }
.file-drop { min-height:210px; display:grid; place-items:center; align-content:center; gap:6px; padding:28px; border:1px dashed #adbbb3; border-radius:15px; background:linear-gradient(145deg,#f9fbf8,#edf4ef); text-align:center; cursor:pointer; }.file-drop input { position:absolute; width:1px; height:1px; opacity:0; }.file-drop small { color:var(--muted); font-size:.67rem; }.file-symbol { width:48px; height:48px; display:grid; place-items:center; margin-bottom:6px; border-radius:13px; background:var(--teal-soft); }.file-symbol::before { content:"↑"; color:var(--teal); font-size:1.4rem; font-weight:900; }.file-preview { margin-top:12px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; }.file-preview > div { min-width:0; flex:1; }.file-preview strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.reference-field { margin-top:24px; }.send-action { width:100%; margin-top:15px; justify-content:space-between; }.send-action i { font-size:1.25rem; font-style:normal; }.send-boundary { margin:12px auto 0; max-width:620px; color:var(--muted); text-align:center; font-size:.68rem; line-height:1.45; }.form-status { min-height:0; margin:0; color:var(--muted); font-size:.72rem; line-height:1.4; }.form-status:not(:empty) { padding:11px 13px; border-radius:9px; background:var(--teal-soft); color:var(--teal); }.form-status.error:not(:empty) { background:var(--red-soft); color:var(--red); }.privacy-strip { display:flex; gap:12px; margin-top:13px; padding:14px 17px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.7); }.privacy-strip > span { color:#39a669; }.privacy-strip p { display:grid; gap:3px; margin:0; color:var(--muted); font-size:.69rem; line-height:1.4; }.privacy-strip strong { color:var(--ink); }
.receipt-card { width:min(600px,100%); margin:55px auto 0; padding:clamp(28px,6vw,55px); text-align:center; }.receipt-check { width:72px; height:72px; display:grid; place-items:center; margin:0 auto 22px; border-radius:50%; background:var(--lime); color:var(--dark); font-size:2rem; font-weight:900; box-shadow:0 12px 30px rgba(150,170,36,.22); }.receipt-card > p:not(.eyebrow):not(.receipt-boundary) { color:var(--muted); line-height:1.55; }.receipt-card dl { display:grid; gap:1px; margin:25px 0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--line); text-align:left; }.receipt-card dl div { display:grid; grid-template-columns:110px 1fr; gap:12px; padding:13px 15px; background:#fff; }.receipt-card dt { color:var(--muted); font-size:.71rem; }.receipt-card dd { margin:0; font-size:.76rem; font-weight:750; overflow-wrap:anywhere; }.receipt-card .primary-action { width:100%; }.receipt-boundary { margin:15px 0 0; color:var(--muted); font-size:.68rem; line-height:1.45; }.capture-footer { display:flex; justify-content:center; gap:24px; padding:24px 0 0; color:var(--muted); font-size:.64rem; }
@keyframes pulse { 50% { opacity:.35; transform:scale(.82); } }
@media (max-width:640px) { .capture-shell { padding-inline:15px; }.capture-header { min-height:74px; }.secure-state { font-size:0; }.secure-state::after { content:"Send only"; font-size:.66rem; }.compose-heading { align-items:start; flex-direction:column; padding-top:24px; }.device-ready { align-self:flex-start; }.capture-types { grid-template-columns:1fr; }.capture-type { min-height:74px; grid-template-columns:auto 1fr; justify-items:start; align-items:center; align-content:center; column-gap:12px; }.capture-type .type-icon { grid-row:1/3; margin:0; }.recording-area { min-height:205px; padding:16px; }.recording-state { grid-template-columns:auto 1fr; }.recording-state button { grid-column:1/-1; grid-row:auto; }.capture-footer { justify-content:space-between; gap:10px; }.receipt-card { margin-top:24px; }.receipt-card dl div { grid-template-columns:80px 1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }