:root{
  --c-primary:#007aff;  --c-primary-bg:#e8f0fe;
  --c-danger:#ff3b30;   --c-danger-bg:#fff5f5;
  --c-success:#34c759;  --c-success-bg:#d1f0e3;
  --c-warning:#ff9500;  --c-warning-bg:#fff0d0;
  --c-accent:#8b5cf6;
  --c-bg:#fff;  --c-bg-2:#f2f2f7;  --c-bg-3:#f9f9fb;
  --c-text:#1c1c1e;  --c-text-2:#636366;  --c-text-3:#6b6b70;  --c-text-4:#3a3a3c;
  --c-border:#e0e0e0;  --c-border-light:#f0f0f5;
  --c-disabled:#c7c7cc;
  --shadow-sm:0 1px 6px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 -6px 32px rgba(0,0,0,.14);
  --r-sm:8px;  --r-md:10px;  --r-lg:14px;  --r-xl:20px;
  --t-fast:.08s ease;  --t-normal:.15s ease;  --t-slow:.4s ease;
}
/* ── Dark theme via system preference ────────────────────────────────────────*/
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --c-bg:#1c1c1e;  --c-bg-2:#2c2c2e;  --c-bg-3:#3a3a3c;
    --c-text:#fff;  --c-text-2:rgba(235,235,245,.6);  --c-text-3:#98989f;  --c-text-4:#ebebf5;
    --c-border:#3a3a3c;  --c-border-light:#2c2c2e;
    --c-disabled:#48484a;
    --c-accent:#a78bfa;
    --c-primary-bg:#16263f;  --c-success-bg:#0d3b22;  --c-danger-bg:#3b0d0d;  --c-warning-bg:#3b2a0d;
    --shadow-sm:0 1px 6px rgba(0,0,0,.2);
    --shadow-md:0 4px 16px rgba(0,0,0,.3);
    --shadow-lg:0 -6px 32px rgba(0,0,0,.5);
  }
}
/* ── Dark theme forced via toggle button ─────────────────────────────────────*/
:root[data-theme="dark"]{
  --c-bg:#1c1c1e;  --c-bg-2:#2c2c2e;  --c-bg-3:#3a3a3c;
  --c-text:#fff;  --c-text-2:rgba(235,235,245,.6);  --c-text-3:#98989f;  --c-text-4:#ebebf5;
  --c-border:#3a3a3c;  --c-border-light:#2c2c2e;
  --c-disabled:#48484a;
  --c-accent:#a78bfa;
  --c-primary-bg:#16263f;  --c-success-bg:#0d3b22;  --c-danger-bg:#3b0d0d;  --c-warning-bg:#3b2a0d;
  --shadow-sm:0 1px 6px rgba(0,0,0,.2);
  --shadow-md:0 4px 16px rgba(0,0,0,.3);
  --shadow-lg:0 -6px 32px rgba(0,0,0,.5);
}
/* ── Light theme forced via toggle button ────────────────────────────────────*/
:root[data-theme="light"]{
  --c-bg:#fff;  --c-bg-2:#f2f2f7;  --c-bg-3:#f9f9fb;
  --c-text:#1c1c1e;  --c-text-2:#636366;  --c-text-3:#6b6b70;  --c-text-4:#3a3a3c;
  --c-accent:#8b5cf6;
  --c-border:#e0e0e0;  --c-border-light:#f0f0f5;
  --c-disabled:#c7c7cc;
  --shadow-sm:0 1px 6px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 -6px 32px rgba(0,0,0,.14);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* overflow-x:clip (не создаёт scroll container) — фикс прокрутки колёсиком */
html{background:var(--c-bg);overflow-x:clip;overscroll-behavior:none}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--c-bg-2);color:var(--c-text);min-height:100vh;overflow-x:clip;overscroll-behavior:none}
/* touch-action только для мобильных — на десктопе блокирует колёсико */
@media(hover:none){html,body{touch-action:pan-x pan-y}}
/* Тонкий скроллбар для Windows/Chrome/Edge */
.modal-sheet::-webkit-scrollbar,.modal-overlay::-webkit-scrollbar,.gs-results::-webkit-scrollbar{width:4px}
.modal-sheet::-webkit-scrollbar-track,.modal-overlay::-webkit-scrollbar-track,.gs-results::-webkit-scrollbar-track{background:transparent}
.modal-sheet::-webkit-scrollbar-thumb,.modal-overlay::-webkit-scrollbar-thumb,.gs-results::-webkit-scrollbar-thumb{background:var(--c-disabled);border-radius:2px}
.modal-sheet::-webkit-scrollbar-thumb:hover,.modal-overlay::-webkit-scrollbar-thumb:hover,.gs-results::-webkit-scrollbar-thumb:hover{background:#aeaeb2}
.modal-sheet,.modal-overlay,.gs-results{scrollbar-width:thin;scrollbar-color:var(--c-disabled) transparent}
@supports (min-height:100dvh){body{min-height:100dvh}}
button,select,input,textarea{font-family:inherit}
::placeholder{color:var(--c-disabled);opacity:1}
.ic{width:13px;height:13px;vertical-align:-2px;display:inline-block;flex-shrink:0}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--c-text-3);margin-bottom:4px;font-weight:500}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;font-size:15px;border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-bg);color:var(--c-text);-webkit-appearance:none}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--c-primary)}
.field input.err{border-color:var(--c-danger)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--c-danger);box-shadow:0 0 0 3px rgba(255,59,48,.12)}
.field textarea{resize:vertical;min-height:68px}
.field input:disabled,.field select:disabled,.field textarea:disabled{opacity:1;color:var(--c-text);-webkit-text-fill-color:var(--c-text);background:var(--c-bg-3)}
.btn-login{width:100%;padding:13px;font-size:16px;font-weight:700;background:var(--c-primary);color:#fff;border:none;border-radius:var(--r-lg);cursor:pointer;margin-top:4px}
.login-error{font-size:13px;color:var(--c-danger);text-align:center;margin-top:10px;min-height:18px}
.badge{font-size:10px;padding:2px 8px;border-radius:var(--r-xl);white-space:nowrap;font-weight:500;background:var(--c-bg-2);color:var(--c-text-4);border:.5px solid var(--c-border)}
.optype-badge{font-size:11px;padding:2px 9px;border-radius:6px;font-weight:700;color:#fff;white-space:nowrap;display:inline-block}
.empty{text-align:center;padding:40px 20px;color:var(--c-text-3);font-size:14px}
.sync-bar{font-size:11px;color:var(--c-success);text-align:right;padding:2px 16px 1px;cursor:pointer;transition:color var(--t-normal)}
@keyframes spin{to{transform:rotate(360deg)}}
.sync-spin{display:inline-block;animation:spin .7s linear infinite;margin-right:3px}
:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px;border-radius:4px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
/* color задан явно: на светлой теме тёмно-коричневый на светло-жёлтом фоне.
   В тёмной теме --c-warning-bg тёмный, поэтому текст переопределяется на
   светло-янтарный (см. правила ниже) — наследуемый белый был нечитаем. */
.notif-banner{background:var(--c-warning-bg);border:1.5px solid var(--c-warning);border-radius:var(--r-lg);padding:10px 14px;margin-bottom:10px;font-size:13px;display:flex;align-items:center;gap:8px;color:#6d4f00}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .notif-banner{color:#ffd479}}
:root[data-theme="dark"] .notif-banner{color:#ffd479}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Переключение разделов: чистый fade без сдвига — translateY на весь контент
   выглядел как «прыжок» экрана при каждом тапе по нижней навигации */
@keyframes viewFade{from{opacity:0}to{opacity:1}}
.main{animation:viewFade .15s ease}
/* Лоадер раздела: держит высоту экрана, чтобы контент не схлопывался при загрузке */
.view-loading{min-height:55vh;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--c-text-3)}
.day-panel{animation:fadeUp .18s ease;will-change:opacity,transform}

/* Модалки: затемнение фона нарастает плавно (keyframes стартуют при display:none→flex),
   нижний лист выезжает снизу на мобильном и мягко «всплывает» на десктопе */
@keyframes overlayIn{from{background:rgba(0,0,0,0)}}
@keyframes sheetUp{from{opacity:.4;transform:translateY(56px)}to{opacity:1;transform:translateY(0)}}
@keyframes sheetPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-overlay{animation:overlayIn .25s ease}
.modal-sheet{animation:sheetUp .28s cubic-bezier(.32,.72,.33,1);will-change:opacity,transform}
@media(min-width:500px){.modal-sheet{animation:sheetPop .22s ease}}

/* ── Button press ── */
button{-webkit-tap-highlight-color:transparent}
button:active{opacity:.72;transition:opacity .08s ease}
.btn-add:active,.btn-save:active,.btn-login:active,.export-btn:active{transform:scale(.97);opacity:1}
.tab-btn:active{opacity:.6}

/* ── Inputs ── */
.field input,.field select,.field textarea{transition:border-color var(--t-normal),box-shadow var(--t-normal)}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px rgba(0,122,255,.12)}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── Da Vinci Robot ──────────────────────────────────────────────────────── */
@keyframes robot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes robot-sway{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-2px)}}
@keyframes robot-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes dvr-wave-l{0%,100%{transform:rotate(0deg)}30%{transform:rotate(-25deg)}70%{transform:rotate(8deg)}}
@keyframes dvr-wave-r{0%,100%{transform:rotate(0deg)}30%{transform:rotate(25deg)}70%{transform:rotate(-8deg)}}
@keyframes dvr-wink{0%,100%{transform:scaleY(0)}35%,65%{transform:scaleY(1)}}
@keyframes dvr-flash{0%,100%{opacity:1}40%,60%{opacity:.1}}

.dvr-eyelid{transform:scaleY(0);transform-origin:58px 15.5px}
.dvr-arm-l{transform-origin:19px 63px}
.dvr-arm-r{transform-origin:71px 63px}

#login-robot{display:block;margin:0 auto 14px;animation:robot-bob 2.4s ease-in-out infinite}
#login-robot.robot-loading{animation:robot-sway .5s ease-in-out infinite}
#login-robot.robot-shake{animation:robot-shake .4s ease-in-out}
#login-robot.robot-wink .dvr-eyelid{animation:dvr-wink .55s ease-in-out forwards}
#login-robot.robot-wave .dvr-arm-l{animation:dvr-wave-l .7s ease-in-out}
#login-robot.robot-wave .dvr-arm-r{animation:dvr-wave-r .7s ease-in-out}
#login-robot.robot-happy .dl1{animation:dvr-flash .3s ease-in-out 3}
#login-robot.robot-happy .dl2{animation:dvr-flash .3s ease-in-out .1s 3}
#login-robot.robot-happy .dl3{animation:dvr-flash .3s ease-in-out .2s 3}