/* ══════════════════════════════════════════════════════════════
   Акты — дизайн-система «Кабинет» (как в приложении «Ручка»):
   тёмный фон, hairline-линии, Unbounded / Manrope / JetBrains Mono,
   один ледяной акцент, цвет живёт только в данных.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#07080B; --bg-elev:#0E0F13; --surface-1:#14161B; --surface-2:#1C1F26;
  --hairline:rgba(255,255,255,.08); --hairline-strong:rgba(255,255,255,.14);
  --text:#fff; --text-2:#E6E4E2; --text-3:#9A9A9F; --text-4:#5C5C63;
  --accent:#A0BEDC; --accent-ink:#0B0C10; --accent-2:#C9A98A;
  --success:#8FBDA0; --danger:#D98A7E; --warning:#C9A98A;
  --radius:10px; --radius-lg:14px;
  --font-display:"Unbounded","Manrope",system-ui,sans-serif;
  --font-sans:"Manrope",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#FBFBFC; --bg-elev:#fff; --surface-1:#F4F3F1; --surface-2:#ECEAE7;
  --hairline:rgba(20,22,26,.10); --hairline-strong:rgba(20,22,26,.18);
  --text:#1A1C20; --text-2:#45474D; --text-3:#76787E; --text-4:#A8AAAE;
  --accent:#5B7FA8; --accent-ink:#fff; --accent-2:#A8855F;
  --success:#3D8A5C; --danger:#C05548;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--bg);color:var(--text-2);font-family:var(--font-sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3,h4{color:var(--text);font-weight:600}
a{color:var(--accent)}
:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:2px;border-radius:8px}
.hidden,[hidden]{display:none !important}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ── Шапка ── */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline)}
.h-top{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:11px 16px}
.brand{display:flex;flex-direction:column;font-family:var(--font-display);font-weight:500;
  font-size:15px;letter-spacing:.02em;color:var(--text);line-height:1.2}
.brand small{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;
  color:var(--text-3);text-transform:uppercase}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--hairline);
  border-radius:999px;background:var(--bg-elev);font-size:12px;color:var(--text-3);
  cursor:pointer;transition:border-color .25s var(--ease)}
.pill:hover{border-color:var(--hairline-strong);color:var(--text-2)}
.pill b{color:var(--text);font-weight:600}
.dot-ok{width:6px;height:6px;border-radius:50%;background:var(--success)}
.dot-off{width:6px;height:6px;border-radius:50%;background:var(--danger)}

/* ── Вкладки ── */
nav.tabs{max-width:1080px;margin:0 auto;display:flex;gap:4px;padding:0 10px 9px;overflow-x:auto;
  scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;padding:8px 14px;border:1px solid transparent;border-radius:999px;
  background:none;color:var(--text-3);font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap;
  transition:all .25s var(--ease)}
.tab:hover{color:var(--text-2);background:var(--surface-1)}
.tab.on{color:var(--text);background:var(--surface-1);border-color:var(--hairline-strong)}

/* ── Каркас ── */
main{max-width:1080px;margin:0 auto;padding:16px 16px 90px}
.card{background:var(--bg-elev);border:1px solid var(--hairline);border-radius:var(--radius-lg);
  padding:16px;margin-bottom:14px}
.card h3{font-family:var(--font-display);font-size:14px;font-weight:500;letter-spacing:.01em;margin-bottom:3px}
.card .sub{font-size:12.5px;color:var(--text-3);margin-bottom:12px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1 1 200px;min-width:0}
.lbl{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.hint{font-size:12px;color:var(--text-4);margin-top:6px}

/* ── Поля ── */
.inp,.textarea,select{width:100%;background:var(--surface-1);color:var(--text);
  border:1px solid var(--hairline);border-radius:var(--radius);padding:11px 12px;
  font:inherit;font-size:15px;transition:border-color .25s var(--ease)}
.inp:focus,.textarea:focus,select:focus{border-color:var(--accent);outline:none}
.textarea{resize:vertical;min-height:120px;line-height:1.5}
.inp.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
  linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}

/* ── Кнопки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;
  border:none;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);
  font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;transition:opacity .2s var(--ease)}
.btn:hover{opacity:.88}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--surface-1);color:var(--text-2);border:1px solid var(--hairline)}
.btn.ghost:hover{border-color:var(--hairline-strong);opacity:1}
.btn.wide{width:100%}
.btn.big{padding:15px 22px;font-size:16px;border-radius:12px}
.btn-mini{background:none;border:1px solid var(--hairline);color:var(--text-3);border-radius:8px;
  padding:5px 9px;font:inherit;font-size:12px;cursor:pointer;transition:all .2s var(--ease)}
.btn-mini:hover{color:var(--text);border-color:var(--hairline-strong)}
.btn-mini.danger:hover{color:var(--danger);border-color:var(--danger)}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ── Микрофон ── */
.mic{width:56px;height:56px;flex:0 0 auto;border-radius:50%;border:1px solid var(--hairline-strong);
  background:var(--surface-1);color:var(--text-2);font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease)}
.mic:hover{border-color:var(--accent);color:var(--text)}
.mic.rec{background:var(--danger);color:#fff;border-color:transparent;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 55%,transparent)}
  50%{box-shadow:0 0 0 12px transparent}}
.interim{font-size:13px;color:var(--text-3);font-style:italic;min-height:18px;margin-top:8px}

/* ── Записи журнала ── */
.day{margin-top:16px}
.day-h{display:flex;align-items:baseline;gap:9px;padding:0 2px 7px;border-bottom:1px solid var(--hairline)}
.day-h b{font-family:var(--font-display);font-size:13px;font-weight:500;color:var(--text)}
.day-h span{font-family:var(--font-mono);font-size:10.5px;color:var(--text-4)}
.entry{display:flex;gap:10px;align-items:flex-start;padding:11px 2px;border-bottom:1px solid var(--hairline)}
.entry-txt{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word;font-size:14.5px;color:var(--text-2)}
.entry-txt[contenteditable="true"]{background:var(--surface-1);border-radius:8px;padding:8px 10px;outline:1px solid var(--accent)}
.entry-src{font-size:13px;opacity:.55;flex:0 0 auto;padding-top:1px}
.entry-act{display:flex;gap:5px;flex:0 0 auto;opacity:.6}
.entry:hover .entry-act{opacity:1}
.empty{padding:28px 10px;text-align:center;color:var(--text-4);font-size:13.5px}

/* ── Таблица акта ── */
table.act{width:100%;border-collapse:collapse;font-size:14px}
table.act th{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);text-align:left;font-weight:400;padding:0 8px 8px;border-bottom:1px solid var(--hairline)}
table.act td{padding:6px 8px;border-bottom:1px solid var(--hairline);vertical-align:middle}
table.act td:nth-child(2){width:130px}
table.act td:nth-child(3){width:74px}
table.act input{width:100%;background:transparent;border:1px solid transparent;border-radius:8px;
  color:var(--text-2);font:inherit;font-size:14px;padding:7px 8px}
table.act input:hover{border-color:var(--hairline)}
table.act input:focus{border-color:var(--accent);background:var(--surface-1);outline:none;color:var(--text)}
table.act input.price{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums}
.len-bad input{color:var(--warning)}
.total-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 8px 2px;
  font-family:var(--font-mono);font-size:13px;color:var(--text-3)}
.total-line b{font-family:var(--font-display);font-size:16px;color:var(--text);font-weight:500}
.badge{padding:3px 9px;border-radius:999px;font-size:11px;font-family:var(--font-mono)}
.badge.ok{background:color-mix(in srgb,var(--success) 18%,transparent);color:var(--success)}
.badge.bad{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger)}
.phrase{margin-top:10px;padding:11px 13px;background:var(--surface-1);border:1px solid var(--hairline);
  border-radius:var(--radius);font-size:13.5px;color:var(--text-2)}

/* ── Архив ── */
.arch{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.arch b{font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--text);min-width:150px}
.arch .m{font-family:var(--font-mono);font-size:12.5px;color:var(--text-3)}

/* ── Служебное ── */
.err{margin-top:10px;padding:11px 13px;border-radius:var(--radius);font-size:13.5px;
  background:color-mix(in srgb,var(--danger) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);color:var(--text-2)}
.note{margin-top:10px;padding:11px 13px;border-radius:var(--radius);font-size:13px;
  background:var(--surface-1);border:1px solid var(--hairline);color:var(--text-3)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:200;
  padding:12px 18px;border-radius:999px;background:var(--surface-2);color:var(--text);
  border:1px solid var(--hairline-strong);font-size:13.5px;box-shadow:0 10px 34px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:all .3s var(--ease);max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
.spin{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;display:inline-block;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.status{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3);margin-top:4px}
.status span{display:inline-flex;align-items:center;gap:7px}

/* ── Вход ── */
.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:22px}
.login-card{width:100%;max-width:360px}

/* ── Мобильное ── */
@media (max-width:640px){
  main{padding:12px 12px 96px}
  .card{padding:14px;border-radius:12px}
  table.act td:nth-child(2){width:104px}
  table.act td:nth-child(3){width:44px}
  .sticky-save{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50}
}