/* nunito-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Nunito Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(./nunito-cyrillic-ext-wght-normal-D4X5GqEv.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* nunito-cyrillic-wght-normal */
@font-face {
  font-family: 'Nunito Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(./nunito-cyrillic-wght-normal-CY6AOgYE.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* nunito-vietnamese-wght-normal */
@font-face {
  font-family: 'Nunito Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(./nunito-vietnamese-wght-normal-U01xdrZh.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* nunito-latin-ext-wght-normal */
@font-face {
  font-family: 'Nunito Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(./nunito-latin-ext-wght-normal-CXYtwYOx.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* nunito-latin-wght-normal */
@font-face {
  font-family: 'Nunito Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(./nunito-latin-wght-normal-BzFMHfZw.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ================= Theme tokens ================= */
:root {
  --accent: #0A84FF; --accent-top: #50A5FF; --accent-strong: #0066D6; --accent-text: #4DA3FF; --on-accent: #fff;
  --g: 1; --blur: 12px;
  --font: 'Nunito Variable', Nunito, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
:root, [data-theme='dark'] {
  color-scheme: dark;
  --text: #F5F5F7; --text-2: #A1A7B3; --text-3: #C9CDD4; --muted: #9AA1AD;
  --line: rgba(255,255,255,0.1); --line-strong: rgba(255,255,255,0.22);
  --hover: rgba(255,255,255,0.08); --track: rgba(255,255,255,0.13);
  --tint: 255 255 255; --base: 14 20 30;
  --fill-a: 0.16; --fill-b: 0.05; --fill-c: 0.10; --base-a: 0.22;
  --glass-border: rgba(255,255,255,0.30);
  --rim-1: rgba(255,255,255,0.55); --rim-2: rgba(255,255,255,0.28); --glow: rgba(255,255,255,0.14); --inner-dark: rgba(0,0,0,0.35);
  --edge: rgba(0,0,0,0.4); --drop: 0 10px 28px rgba(0,0,0,0.32);
  --window-fill: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.05)), rgba(10,14,22,0.28);
  --window-border: rgba(255,255,255,0.26); --window-drop: 0 30px 80px rgba(0,0,0,0.5);
  --field-bg: rgba(10,14,22,0.35); --field-border: rgba(255,255,255,0.26);
  --text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  --active-bg: rgba(255,255,255,0.95); --active-text: #1D1D1F; --active-icon: var(--accent);
  --orange-text: #FFB340; --green-text: #5BE07A; --danger-text: #FF8A80;
  --menu-bg: #232A35;
}
[data-theme='light'] {
  color-scheme: light;
  --text: #1D1D1F; --text-2: #50555E; --text-3: #3A3F47; --muted: #6E7380;
  --line: rgba(0,0,0,0.08); --line-strong: rgba(0,0,0,0.16);
  --hover: rgba(0,0,0,0.05); --track: rgba(0,0,0,0.09);
  --tint: 255 255 255; --base: 255 255 255;
  --fill-a: 0.62; --fill-b: 0.32; --fill-c: 0.48; --base-a: 0.10;
  --glass-border: rgba(255,255,255,0.75);
  --rim-1: rgba(255,255,255,0.95); --rim-2: rgba(255,255,255,0.6); --glow: rgba(255,255,255,0.35); --inner-dark: rgba(0,0,0,0.06);
  --edge: rgba(0,0,0,0.12); --drop: 0 10px 28px rgba(30,40,60,0.14);
  --window-fill: linear-gradient(160deg, rgba(255,255,255,0.32), rgba(255,255,255,0.12) 40%, rgba(255,255,255,0.22)), rgba(255,255,255,0.10);
  --window-border: rgba(255,255,255,0.7); --window-drop: 0 30px 80px rgba(30,40,60,0.22);
  --field-bg: rgba(255,255,255,0.55); --field-border: rgba(0,0,0,0.12);
  --text-shadow: none;
  --active-bg: var(--accent); --active-text: var(--on-accent); --active-icon: var(--on-accent);
  --orange-text: #A35A00; --green-text: #1B7A35; --danger-text: #C0261C;
  --menu-bg: #F2F4F7;
}

* { box-sizing: border-box; }
html, body, #root { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: #1C232E;
  -webkit-font-smoothing: antialiased;
  text-shadow: var(--text-shadow);
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: #1C232E var(--bg-url) center / cover no-repeat;
}
button, input, textarea, select { font: inherit; color: inherit; }
select.field option { background: var(--menu-bg); color: var(--text); }
a { color: var(--accent-text); text-decoration: none; }
a:hover { opacity: .85; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ================= Liquid Glass ================= */
.glass {
  background:
    linear-gradient(160deg, rgb(var(--tint) / calc(var(--fill-a) * var(--g))) 0%, rgb(var(--tint) / calc(var(--fill-b) * var(--g))) 45%, rgb(var(--tint) / calc(var(--fill-c) * var(--g))) 100%),
    rgb(var(--base) / calc(var(--base-a) * var(--g)));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(170%) brightness(1.06);
  backdrop-filter: blur(var(--blur)) saturate(170%) brightness(1.06);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 2px 3px 3px -1px var(--rim-1),
    inset -2px -3px 3px -1px var(--rim-2),
    inset 0 0 18px 1px var(--glow),
    inset 0 -12px 22px -14px var(--inner-dark),
    0 0 0 0.5px var(--edge),
    var(--drop);
}
.glass.accent {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 38%, transparent), color-mix(in srgb, var(--accent) 16%, transparent) 45%, color-mix(in srgb, var(--accent) 28%, transparent)),
    rgb(var(--base) / var(--base-a));
}
.glass.orange {
  background:
    linear-gradient(160deg, rgba(255,159,10,0.32), rgba(255,159,10,0.12) 45%, rgba(255,159,10,0.22)),
    rgb(var(--base) / var(--base-a));
}
.card { border-radius: 22px; padding: 18px; }

.window {
  position: relative; max-width: 1384px; min-height: calc(100vh - 56px); margin: 28px auto;
  display: flex; gap: 10px; padding: 10px; border-radius: 26px;
  background: var(--window-fill); border: 1px solid var(--window-border);
  box-shadow: inset 2px 3px 4px -1px var(--rim-1), inset -2px -3px 4px -1px var(--rim-2), inset 0 0 30px rgba(255,255,255,0.06), 0 0 0 0.5px var(--edge), var(--window-drop);
}

/* ================= Sidebar ================= */
.sidebar {
  flex: 0 0 240px; border-radius: 20px; padding: 16px 12px; display: flex; flex-direction: column; gap: 3px;
  position: sticky; top: 38px; align-self: flex-start; min-height: calc(100vh - 76px);
}
.traffic { display: flex; gap: 8px; padding: 2px 8px 18px; }
.traffic span { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.2); }
.side-label { font-size: 11px; font-weight: 700; color: var(--text-2); padding: 14px 12px 4px; letter-spacing: 0.02em; }
.side-label:first-of-type { padding-top: 0; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px;
  color: var(--text); font-size: 14px; font-weight: 500; border: none; background: none; width: 100%; text-align: left; cursor: pointer;
}
.nav-item:hover { background: var(--hover); color: var(--text); opacity: 1; }
.nav-ic { color: var(--accent); }
.nav-item.active {
  background: var(--active-bg); color: var(--active-text); font-weight: 700; text-shadow: none;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.25), 0 4px 14px rgba(0,0,0,0.22);
}
.nav-item.active .nav-ic { color: var(--active-icon); }
.nav-item .count { margin-left: auto; font-size: 12px; color: var(--text-2); }
.nav-item.active .count { color: inherit; opacity: .7; }

/* ================= Main ================= */
.main { flex: 1; min-width: 0; padding: 22px 30px 40px; display: flex; flex-direction: column; gap: 24px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--text-2); }
.title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; }
.h2 { font-size: 17px; font-weight: 700; }
.sub { font-size: 13px; color: var(--text-2); }
.row { display: flex; align-items: center; gap: 10px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.split { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.split > .wide { flex: 2 1 420px; min-width: 0; }
.split > .narrow { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ================= Buttons & fields ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; white-space: nowrap;
  background: linear-gradient(160deg, rgb(var(--tint) / calc(var(--fill-a) * 1.1)), rgb(var(--tint) / var(--fill-b)));
  border: 1px solid var(--glass-border);
  box-shadow: inset 2px 3px 3px -1px var(--rim-1), inset -2px -2px 3px -1px var(--rim-2), 0 0 0 0.5px var(--edge), 0 4px 12px rgba(0,0,0,0.18);
  color: var(--text);
}
.btn:hover { filter: brightness(1.08); color: var(--text); opacity: 1; }
.btn.primary, .btn.sel {
  background: linear-gradient(180deg, var(--accent-top), var(--accent-strong));
  border-color: rgba(255,255,255,0.4); color: var(--on-accent); text-shadow: none;
  box-shadow: inset 2px 3px 3px -1px rgba(255,255,255,0.6), inset -2px -2px 3px -1px rgba(255,255,255,0.3), inset 0 0 12px rgba(255,255,255,0.15), 0 0 0 0.5px rgba(0,0,0,0.3), 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.btn.primary:hover, .btn.sel:hover { color: var(--on-accent); }
.btn.danger { color: var(--danger-text); }
.btn.small { height: 30px; padding: 0 12px; font-size: 13px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.icon-btn {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(160deg, rgb(var(--tint) / calc(var(--fill-a) * 1.1)), rgb(var(--tint) / var(--fill-b)));
  border: 1px solid var(--glass-border);
  box-shadow: inset 2px 3px 3px -1px var(--rim-1), 0 0 0 0.5px var(--edge), 0 4px 12px rgba(0,0,0,0.15);
  color: var(--text-3);
}
.icon-btn.sel { background: var(--active-bg); color: var(--active-text); }
.ghost-btn { background: none; border: none; color: var(--text-2); cursor: pointer; padding: 6px; border-radius: 8px; display: inline-flex; }
.ghost-btn:hover { color: var(--text); background: var(--hover); }

.field {
  width: 100%; padding: 10px 14px; border-radius: 14px; font-size: 14px;
  border: 1px solid var(--field-border); background: var(--field-bg);
  box-shadow: inset 1px 2px 3px -1px var(--rim-2), inset 0 0 0 0.5px var(--edge); outline: none;
}
.field:focus { border-color: var(--accent); }
.field.warn { border-color: #FF9F0A; }
textarea.field { resize: vertical; line-height: 1.5; }
.label { font-size: 13px; font-weight: 700; color: var(--text-3); display: block; margin-bottom: 6px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; text-shadow: none; white-space: nowrap; }
.chip.warn { background: rgba(255,159,10,0.18); color: var(--orange-text); border: 1px solid rgba(255,159,10,0.4); }
.chip.ok { background: rgba(52,199,89,0.18); color: var(--green-text); border: 1px solid rgba(52,199,89,0.4); }
.chip.plain { background: transparent; color: var(--text-2); border: 1px solid var(--line-strong); }

/* segmented control */
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; flex-wrap: wrap; }
.seg button {
  border: none; background: none; cursor: pointer; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
}
.seg button[aria-pressed='true'] { background: var(--active-bg); color: var(--active-text); text-shadow: none; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

/* ================= Tile (glassy icon) ================= */
.tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.25); }

/* ================= Lists ================= */
.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-top: 1px solid var(--line); }
.check-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 10px 4px; background: none; border: none; text-align: left; cursor: pointer; color: var(--text); }
.check { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--muted); display: flex; align-items: center; justify-content: center; color: var(--on-accent); }
.check.on { background: var(--accent); border-color: var(--accent); }
.done-text { color: var(--muted); text-decoration: line-through; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bar { display: block; height: 6px; border-radius: 3px; background: var(--track); }
.stage-tasks { margin: 8px 0 0 40px; padding-left: 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 8px; }

/* ================= Background picker ================= */
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.bg-opt { display: flex; flex-direction: column; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; color: var(--text); font-size: 12px; font-weight: 600; text-align: left; }
.bg-opt .thumb { aspect-ratio: 16 / 10; width: 100%; border-radius: 14px; background-size: cover; background-position: center; border: 2px solid transparent; box-shadow: 0 0 0 0.5px var(--edge), 0 4px 12px rgba(0,0,0,0.2); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bg-opt[aria-pressed='true'] .thumb { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 4px 12px rgba(0,0,0,0.2); }
.swatch { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 0 0.5px rgba(0,0,0,0.3), 0 3px 8px rgba(0,0,0,0.2); display: inline-flex; align-items: center; justify-content: center; }
.swatch[aria-pressed='true'] { outline: 3px solid var(--text); outline-offset: 2px; }
input[type='range'] { accent-color: var(--accent); width: 100%; }

/* ================= Tab bar (phone) ================= */
.tabbar { display: none; }

/* ================= Timeline ================= */
.tl { position: relative; overflow-x: auto; }
.tl-inner { min-width: 680px; position: relative; }
.tl-head, .tl-row { display: grid; grid-template-columns: 180px 1fr; align-items: center; }
.tl-months { display: grid; }
.tl-month { font-size: 12px; font-weight: 700; color: var(--text-2); padding: 0 6px; border-left: 1px solid var(--line); }
.tl-track { position: relative; height: 34px; }
.tl-bar { position: absolute; top: 3px; height: 28px; border-radius: 10px; display: flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-shadow: none; }
.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #FF453A; border-radius: 1px; box-shadow: 0 0 8px rgba(255,69,58,0.6); }

.empty { padding: 24px; text-align: center; color: var(--text-2); font-size: 14px; }

/* ================= Phone ================= */
@media (max-width: 760px) {
  .window { margin: 0; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; min-height: 100vh; }
  .sidebar { display: none; }
  .main { padding: calc(env(safe-area-inset-top) + 20px) 16px 120px; }
  .title { font-size: 32px; }
  .stage-tasks { margin-left: 12px; padding-left: 10px; }
  .card { padding: 16px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px);
    height: 64px; border-radius: 32px; padding: 0 5px; z-index: 20;
  }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 26px; font-size: 10.5px; font-weight: 600; color: var(--text-3); }
  .tab.active { background: var(--active-bg); color: var(--active-text); text-shadow: none; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
  .tab.active .nav-ic { color: var(--active-icon); }
}