/* ===================================================================
   КОМАНДА — общая тема (единый источник стиля).
   Чтобы сделать редизайн РАЗОМ — меняй токены в :root ниже.
   Все компоненты и календарь flatpickr используют эти переменные.
=================================================================== */
:root{
  /* — палитра — */
  --bg-0:#0e0f13; --bg-grad:#1a1e27;
  --surface-1:#171a21; --surface-2:#1d212b; --surface-3:#222734; --field:#0f1218;
  --line:#262b36; --line-2:#3a4252;
  --txt:#e9ecf1; --mut:#9aa3b2; --dim:#5b6472;
  --gold:#c9a25c; --gold-2:#a9854a; --gold-ink:#1a1407;
  --accent:#5b8cff; --ok:#7ee0a4; --err:#ff8b8b;
  --danger-bg:#2a1518; --danger-line:#5a2a2a; --danger-txt:#ff9b9b;
  /* — форма/размеры — */
  --radius:14px; --radius-sm:9px; --radius-xs:8px; --pill:999px;
  --pad:16px; --gap:10px;
  --maxw:920px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 10px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:radial-gradient(1200px 600px at 50% -10%,var(--bg-grad),var(--bg-0));color:var(--txt);min-height:100vh}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:28px 18px 80px}

/* — header — */
header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.logo{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--gold),var(--gold-2));display:grid;place-items:center;font-weight:800;color:var(--gold-ink);font-size:20px}
h1{font-size:20px;margin:0;font-weight:700}.spacer{flex:1}.who{color:var(--mut);font-size:13px}

/* — кнопки — */
.btn{background:var(--surface-2);color:var(--txt);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 14px;font-size:14px;cursor:pointer;transition:.15s;font-family:var(--font)}
.btn:hover{border-color:var(--line-2);background:var(--surface-3)}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--gold-ink);border:0;font-weight:650}
.btn.danger{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger-txt)}
.btn.danger:hover{background:#3a1d20;border-color:#7a3636}

/* — вкладки/панель — */
.tabs{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.tab{padding:9px 16px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface-1);cursor:pointer;font-size:14px;color:var(--mut)}
.tab.on{color:var(--txt);border-color:var(--line-2);background:var(--surface-2)}
.toolbar{display:flex;gap:8px;margin-bottom:14px}
.title{font-weight:650;font-size:15px;margin:-2px 0 12px;color:var(--gold)}

/* — карточки (сворачиваемые) — */
.card{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.chead{display:flex;align-items:center;gap:10px;padding:14px var(--pad);cursor:pointer;user-select:none}
.chead:hover{background:#1b1f28}
.chev{color:var(--mut);font-size:12px;transition:.15s;flex:none}
.card:not(.collapsed) .chev{transform:rotate(90deg)}
.ctitle{font-weight:600;font-size:15px}.ctitle .sub{color:var(--mut);font-weight:400;font-size:13px;margin-left:8px}
.cbody{padding:2px var(--pad) var(--pad)}
.card.collapsed .cbody{display:none}
.cardfoot{display:flex;align-items:center;gap:12px;margin-top:6px}

/* — форма — */
.row{margin-bottom:10px}.row label{display:block;font-size:12px;color:var(--mut);margin-bottom:5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
input,select,textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--txt);padding:10px;font-size:14px;font-family:var(--font)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent)}
fieldset{border:0;padding:0;margin:0;min-width:0}
input:disabled,select:disabled,textarea:disabled,.chk input:disabled{opacity:.6;cursor:not-allowed}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.chk{display:flex;align-items:center;gap:7px;background:var(--field);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 11px;font-size:13px;cursor:pointer}
.chk input{width:auto;margin:0}
.hint{font-size:13px;color:var(--mut)}.hint.ok{color:var(--ok)}.hint.err{color:var(--err)}
.prow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow.tot{margin-top:6px;border-top:1px solid var(--line-2);border-bottom:0;padding-top:10px;font-size:15px}
.mut{color:var(--mut)}.note{color:var(--mut);font-size:12px;margin:-6px 0 12px}

/* — лендинг (главная) — */
.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.sub-lead{color:var(--mut);margin:8px 0 36px;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
a.tile{display:block;text-decoration:none;color:inherit;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:.15s}
a.tile:hover{background:var(--surface-2);border-color:var(--line-2);transform:translateY(-2px)}
a.tile.soon{opacity:.5;pointer-events:none}
.tile .ic{font-size:26px}.tile .ct{font-size:17px;font-weight:650;margin:12px 0 4px}.tile .cd{color:var(--mut);font-size:13.5px;line-height:1.5}
.tag{display:inline-block;font-size:11px;color:var(--gold);border:1px solid #3a3220;background:#1c1810;border-radius:var(--pill);padding:2px 9px;margin-top:12px}
.tag.ok{color:var(--ok);border-color:#1f3a29}
.foot{color:var(--dim);font-size:12px;margin-top:40px;text-align:center}

/* — логин — */
.login{max-width:360px;margin:12vh auto;background:var(--surface-1);border:1px solid var(--line);border-radius:16px;padding:26px}
.login h2{margin:0 0 4px;font-size:19px}.login p{margin:0 0 18px;color:var(--mut);font-size:13px}.login .row{margin-bottom:12px}
.msg{font-size:13px;color:var(--err);min-height:18px;margin-top:6px}
.hidden{display:none}

/* ===== flatpickr — тёмная тема через те же переменные ===== */
.flatpickr-calendar{background:var(--surface-1);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;color:var(--txt)}
.flatpickr-months,.flatpickr-month{background:transparent;color:var(--txt);fill:var(--txt)}
.flatpickr-current-month .flatpickr-monthDropdown-months,.flatpickr-current-month input.cur-year{color:var(--txt)}
.flatpickr-monthDropdown-months{background:var(--surface-1)}
.flatpickr-weekday{color:var(--mut)}
.flatpickr-day{color:var(--txt);border-radius:var(--radius-xs);border-color:transparent}
.flatpickr-day:hover{background:var(--surface-3);border-color:var(--surface-3)}
.flatpickr-day.today{border-color:var(--accent)}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:linear-gradient(135deg,var(--gold),var(--gold-2));border-color:var(--gold);color:var(--gold-ink)}
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.flatpickr-disabled{color:var(--dim)}
.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{fill:var(--mut)}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--gold)}
.numInputWrapper span{border-color:var(--line)}
.numInputWrapper span:hover{background:var(--surface-3)}
.flatpickr-calendar.arrowTop:before{border-bottom-color:var(--line)}
.flatpickr-calendar.arrowTop:after{border-bottom-color:var(--surface-1)}
.flatpickr-calendar.arrowBottom:before{border-top-color:var(--line)}
.flatpickr-calendar.arrowBottom:after{border-top-color:var(--surface-1)}