/* COOL ERP · дизайн-система v1 (10.09.2026). Язык Notion в холодной палитре CoolBrew.
   Слои токенов: primitive → semantic → компоненты. Одна светлая тема; тёмная — позже через те же токены. */
@import url(/static/fonts/fonts.css);
:root{
  /* primitive */
  --white:#FFFFFF; --ice-50:#F7F9FA; --ice-100:#EEF2F4; --ice-200:#E3E9EC; --ice-300:#CBD4D9; --ice-500:#8494 9D;
  --ice-500:#84949D; --ice-600:#5F6F78; --ink-900:#1B2A32; --ink-700:#33434D;
  --cool-500:#1FB6D6; --cool-600:#0FA3C4; --cool-700:#0B7E98; --cool-100:#E1F5F9; --cool-50:#F0FAFC;
  --green-600:#2E8B63; --green-100:#E3F2EA; --amber-600:#A6701B; --amber-100:#F8EED8; --red-600:#B5382C; --red-100:#F9E6E3; --violet-600:#6A55B3; --violet-100:#ECE8F6;
  /* semantic */
  --bg:var(--white); --bg-side:var(--ice-50); --bg-hover:var(--ice-100); --bg-soft:var(--ice-50); --bg-sunken:var(--ice-100);
  --fg:var(--ink-900); --fg-2:var(--ink-700); --fg-muted:var(--ice-600); --fg-faint:var(--ice-500);
  --line:var(--ice-200); --line-strong:var(--ice-300);
  --accent:var(--cool-600); --accent-fg:var(--cool-700); --accent-soft:var(--cool-100); --accent-faint:var(--cool-50);
  --ok:var(--green-600); --ok-soft:var(--green-100); --warn:var(--amber-600); --warn-soft:var(--amber-100); --bad:var(--red-600); --bad-soft:var(--red-100); --info:var(--violet-600); --info-soft:var(--violet-100);
  --font-display:"Manrope","Onest",system-ui,sans-serif; --font-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif; --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --muted:var(--fg-muted); --soft:var(--ice-100); --ink:var(--fg); --ink2:var(--fg-2); --cool:var(--cool-500); --cool-ink:var(--cool-700); --paper:var(--white);
  --r-1:4px; --r-2:6px; --r-3:10px; --side-w:272px; --content-w:960px;
  --shadow-1:0 1px 2px rgba(27,42,50,.06),0 0 0 1px rgba(27,42,50,.04); --shadow-2:0 8px 24px rgba(27,42,50,.10),0 0 0 1px rgba(27,42,50,.05);
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit}
/* ---- shell: sidebar + page ---- */
.shell{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh}
.side{background:var(--bg-side);border-right:1px solid var(--line);padding:14px 10px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:14px}
.ws{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:var(--r-2);text-decoration:none}
.ws:hover{background:var(--bg-hover)}
.mark{width:48px;height:48px;border-radius:12px;background:var(--cool-500);color:#fff;display:grid;place-items:center;flex:none}.mark .cb{display:block}
.wordmark{font:800 28px/1 var(--font-display);letter-spacing:-.03em;color:var(--fg);white-space:nowrap}.wordmark span{font-weight:800;color:var(--fg-2);margin-left:7px;letter-spacing:-.02em}.wordmark span i{font-style:normal;color:var(--fg-faint);font-weight:800}
.side nav{display:flex;flex-direction:column;gap:2px}
.side .sec{font:600 11px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);padding:14px 8px 6px}
.side a.item{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-2);color:var(--fg-2);text-decoration:none;font-size:14.5px;line-height:1.3}
.side a.item:hover{background:var(--bg-hover);color:var(--fg)}.side a.item.on{background:var(--ice-200);color:var(--fg);font-weight:600}
.side a.item .ic{flex:none;color:var(--fg-muted)}.side a.item:hover .ic,.side a.item.on .ic{color:var(--fg)}.side a.item.on .ic{color:var(--cool-700)}
.ic{vertical-align:-3px}.side .me .logout{display:inline-flex;align-items:center;gap:4px;text-decoration:none}.side .me .logout:hover{color:var(--fg)}
.side .me{margin-top:auto;padding:10px 8px;border-top:1px solid var(--line);font-size:13px;color:var(--fg-muted);line-height:1.4}.side .me b{color:var(--fg);font-weight:600;display:block}
.side .me a{color:var(--fg-muted)}
.page{min-width:0}
.crumbs{display:flex;gap:6px;align-items:center;padding:12px 40px;font-size:13px;color:var(--fg-muted);border-bottom:1px solid transparent}
.crumbs a{text-decoration:none;color:var(--fg-muted)}.crumbs a:hover{color:var(--fg)}
main{max-width:var(--content-w);margin:0 auto;padding:28px 40px 80px}
main.wide{max-width:1240px}
h1{font:800 30px/1.15 var(--font-display);letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
.sub{color:var(--fg-muted);font-size:14px;margin:0 0 22px}
h2{font:700 18px/1.3 var(--font-display);letter-spacing:-.01em;margin:30px 0 10px}
h3{font:600 15px/1.3 var(--font-body);margin:18px 0 8px}
p{margin:0 0 10px}.muted{color:var(--fg-muted)}.faint{color:var(--fg-faint)}.ok{color:var(--ok)}.bad{color:var(--bad)}
code,.mono{font-family:var(--font-mono);font-size:12.5px}code{background:var(--bg-sunken);padding:1px 5px;border-radius:var(--r-1);color:var(--fg-2)}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
/* ---- blocks (Notion) ---- */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-3);padding:14px 16px;margin-bottom:14px}
.callout{display:flex;gap:12px;background:var(--bg-soft);border-radius:var(--r-3);padding:14px 16px;margin:14px 0;font-size:14.5px;color:var(--fg-2)}
.callout i{font-style:normal;flex:none;font-size:16px}.callout.accent{background:var(--accent-faint)}.callout.warn{background:var(--warn-soft)}.callout.bad{background:var(--bad-soft)}
.flash{display:flex;gap:10px;align-items:center;padding:10px 14px;margin-bottom:14px;border-radius:var(--r-2);background:var(--accent-faint);color:var(--fg-2);font-size:14px;border:1px solid var(--accent-soft)}
.flash.err{background:var(--bad-soft);border-color:#F1CFC9;color:var(--bad)}
/* properties (как свойства страницы в Notion) */
.props{display:grid;grid-template-columns:160px 1fr;gap:6px 16px;font-size:14px;margin:0 0 18px}.props dt{color:var(--fg-muted)}.props dd{margin:0}
/* tags */
.pill{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:var(--r-1);font-size:12.5px;line-height:1.5;background:var(--ice-100);color:var(--fg-2);white-space:nowrap}
.pill.init,.pill.cool{background:var(--accent-soft);color:var(--accent-fg)}.pill.final,.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.block,.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.bad{background:var(--bad-soft);color:var(--bad)}.pill.info{background:var(--info-soft);color:var(--info)}
/* database table */
.scroll{overflow-x:auto;margin:10px 0 18px;border-radius:var(--r-2)}
table{border-collapse:collapse;width:100%;font-size:14px;background:var(--bg)}
th,td{padding:8px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-size:12.5px;font-weight:500;color:var(--fg-muted);background:var(--bg);border-bottom:1px solid var(--line-strong);position:sticky;top:0;white-space:nowrap}
tbody tr:hover td{background:var(--bg-soft)}tr:last-child td{border-bottom:0}
td .mono,td.mono{font-size:12.5px}
.empty{padding:22px 14px;color:var(--fg-muted);font-size:14px;text-align:center}
/* forms & buttons */
form.inline{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:end}form.inline label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--fg-muted)}
label.chk{flex-direction:row!important;align-items:center;gap:6px!important;color:var(--fg-2)!important;font-size:14px!important;padding-bottom:8px}
input,select,textarea{padding:7px 10px;border:1px solid var(--line-strong);border-radius:var(--r-2);font:inherit;font-size:14px;background:var(--bg);color:var(--fg);min-width:120px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[type=checkbox]{min-width:0;width:16px;height:16px;accent-color:var(--accent)}textarea{min-width:320px;font-family:var(--font-mono);font-size:12.5px}
button,.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--bg);color:var(--fg);font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
button:hover,.btn:hover{background:var(--bg-hover)}
button.primary,.btn.primary,form.inline > button:last-of-type{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover,form.inline > button:last-of-type:hover{background:var(--cool-700);border-color:var(--cool-700)}
button.ghost{border-color:transparent;background:transparent;color:var(--fg-muted)}button.ghost:hover{background:var(--bg-hover);color:var(--fg)}
button.danger{color:var(--bad);border-color:#F1CFC9;background:var(--bg)}button.danger:hover{background:var(--bad-soft)}
button.small{padding:3px 9px;font-size:12.5px}button.big{padding:14px 22px;font-size:17px;width:100%;justify-content:center}
/* tiles (галерея как в Notion) */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tiles a{display:block;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-3);padding:14px 16px;text-decoration:none;color:var(--fg);transition:background .12s}
.tiles a:hover{background:var(--bg-soft)}.tiles a b{display:block;margin-bottom:4px;font-weight:600}.tiles a span{color:var(--fg-muted);font-size:13px;line-height:1.45}
/* feed */
.feed{padding:0!important}.feed .item{padding:10px 14px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:start}
.feed .item:last-child{border-bottom:0}.feed time{color:var(--fg-faint);font-variant-numeric:tabular-nums;font-size:13px;padding-top:2px}.feed .t{font-weight:600;font-size:14px}.feed .p{color:var(--fg-muted);font-size:13.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid2.wide-left{grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr)}
.actions form.card{flex-direction:column;align-items:stretch}.actions form.card > b{margin-bottom:6px}.actions form.card > label{width:100%}.actions form.card > label > input{width:100%;min-width:0}.actions form.card > button{width:100%;justify-content:center;margin-top:4px}
/* login */
.login{min-height:100vh;display:grid;place-items:center;background:var(--bg-side)}
.login .box{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:34px 32px;width:min(400px,92vw);box-shadow:var(--shadow-1)}
.login .ws{padding:0;margin-bottom:24px}.login h1{font-size:22px;margin-bottom:6px}.login p{color:var(--fg-muted);font-size:14px;margin-bottom:16px}
.login input{width:100%;padding:11px 12px;font-size:15px}.login button{width:100%;justify-content:center;margin-top:10px;padding:11px}
@media (max-width:900px){.shell{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px}.side nav{flex-direction:row;flex-wrap:wrap}.side .sec{display:none}.side .me{margin:0 0 0 auto;border:0;padding:0}.side .me b{display:inline}
 main,.crumbs{padding-left:18px;padding-right:18px}.grid2{grid-template-columns:1fr}.props{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}