/* Общая тема: светлая по умолчанию, 4 цветовые схемы, опциональные узоры. */

:root{
  color-scheme: light;
  --page:#f6f7f9; --surface:#ffffff; --surface-2:#f0f2f5;
  --ink:#12141a; --ink2:#4a4f5a; --muted:#868c98;
  --grid:#e6e8ec; --baseline:#c9cdd6; --ring:rgba(18,20,26,.12);
  --shadow:0 1px 2px rgba(18,20,26,.05), 0 8px 24px rgba(18,20,26,.06);
  --empty:#eceef2;
  --good:#0ca30c; --bad:#d03b3b; --warn:#fab219;
  /* схема «Классика» */
  --call:#2a78d6; --amo:#eb6834; --both:#1baf7a; --accent:#2a78d6;
}
[data-scheme="berry"]{   --call:#4a3aa7; --amo:#e87ba4; --both:#eda100; --accent:#4a3aa7; }
[data-scheme="contrast"]{--call:#2a78d6; --amo:#e34948; --both:#008300; --accent:#2a78d6; }
[data-scheme="sunset"]{  --call:#1baf7a; --amo:#4a3aa7; --both:#eb6834; --accent:#eb6834; }

:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#0e0f12; --surface:#1a1c21; --surface-2:#23262c;
  --ink:#ffffff; --ink2:#c5cad3; --muted:#8b919c;
  --grid:#2b2e35; --baseline:#3a3e46; --ring:rgba(255,255,255,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --empty:#24272d;
  --good:#0ca30c; --bad:#e66767; --warn:#fab219;
  --call:#3987e5; --amo:#d95926; --both:#199e70; --accent:#3987e5;
}
:root[data-theme="dark"][data-scheme="berry"]{   --call:#9085e9; --amo:#d55181; --both:#c98500; --accent:#9085e9; }
:root[data-theme="dark"][data-scheme="contrast"]{--call:#3987e5; --amo:#e66767; --both:#0ca30c; --accent:#3987e5; }
:root[data-theme="dark"][data-scheme="sunset"]{  --call:#199e70; --amo:#9085e9; --both:#d95926; --accent:#d95926; }

*{box-sizing:border-box}
body{
  margin:0; background:var(--page); color:var(--ink);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
.wrap{max-width:1200px;margin:0 auto;padding:18px 16px 64px}
h1{font-size:20px;margin:0;letter-spacing:-.01em}
h2{font-size:15px;margin:0 0 10px;letter-spacing:-.005em}
.sub{color:var(--ink2);font-size:12.5px;margin-top:3px}

header.top{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.navlinks{display:flex;gap:6px;align-items:center}

button,.btn{
  border:1px solid var(--ring);background:var(--surface);color:var(--ink);
  border-radius:9px;padding:7px 13px;font:inherit;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  transition:background .12s,border-color .12s,transform .06s;
}
button:hover,.btn:hover{background:var(--surface-2);border-color:var(--baseline)}
button:active,.btn:active{transform:translateY(1px)}
button:disabled{opacity:.55;cursor:default}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent);filter:brightness(1.08);border-color:var(--accent)}
.tab{
  border:1px solid transparent;background:transparent;color:var(--ink2);
  border-radius:9px;padding:7px 13px;cursor:pointer;font:inherit;
}
.tab:hover{background:var(--surface-2)}
.tab.on{background:var(--ink);color:var(--page);border-color:var(--ink)}

input[type=date],input[type=text],input[type=password],input[type=number],select{
  border:1px solid var(--ring);background:var(--surface);color:var(--ink);
  border-radius:9px;padding:7px 10px;font:inherit;
}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}
label.field{display:block;margin-bottom:12px}
label.field span{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:5px}
label.field input,label.field select{width:100%}

.card{
  background:var(--surface);border:1px solid var(--ring);border-radius:14px;
  padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow);
}
.badge{
  background:var(--warn);color:#12141a;border-radius:7px;padding:2px 8px;
  font-size:11.5px;font-weight:700;vertical-align:2px;
}
.chip{
  border:1px solid var(--ring);background:var(--surface-2);border-radius:999px;
  padding:4px 11px;font-size:12.5px;cursor:pointer;color:var(--ink2);user-select:none;
}
.chip.on{background:var(--ink);color:var(--page);border-color:var(--ink)}
.chips{display:flex;gap:5px;align-items:center;flex-wrap:wrap}

.legend{display:flex;gap:16px;align-items:center;font-size:12.5px;color:var(--ink2);
  margin:2px 0 14px;flex-wrap:wrap}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;
  margin-right:6px;vertical-align:-1px;border:1px solid var(--ring)}

#tooltip{
  position:fixed;pointer-events:none;background:var(--ink);color:var(--page);
  padding:7px 10px;border-radius:9px;font-size:12px;max-width:300px;z-index:50;
  display:none;box-shadow:0 6px 20px rgba(0,0,0,.28);line-height:1.4;
}
.note{color:var(--muted);font-size:12px;margin-top:14px;line-height:1.5}
.err{color:var(--bad);font-weight:600}
.ok{color:var(--good);font-weight:600}

/* ---- узоры (включаются в настройках) ---- */
body.patterns .pat-call{
  background-image:repeating-linear-gradient(45deg,
    rgba(255,255,255,.55) 0 2px, transparent 2px 5px);
}
body.patterns .pat-amo{
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.55) 0 2px, transparent 2px 5px);
}
body.patterns .pat-both{
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.5) 0 2px, transparent 2px 5px);
}
:root[data-theme="dark"] body.patterns .pat-call,
:root[data-theme="dark"] body.patterns .pat-amo,
:root[data-theme="dark"] body.patterns .pat-both{
  background-image:repeating-linear-gradient(45deg,
    rgba(0,0,0,.45) 0 2px, transparent 2px 5px);
}
@media print{
  body{background:#fff}
  .card{box-shadow:none;break-inside:avoid}
  .navlinks,button,.chips{display:none !important}
}