:root{
  --bg: #EEEEE4;
  --surface: #FCFBF6;
  --surface-2: #E6E2D2;
  --ink: #1E2A22;
  --ink-soft: #566056;
  --ink-faint: #8A9086;
  --line: #D8D3C1;
  --accent: #D9622B;
  --accent-ink: #FFF8F1;
  --good: #3F7857;
  --good-bg: #E3EEE3;
  --warn: #A8791A;
  --warn-bg: #F2E9D2;
  --critical: #AD3C30;
  --critical-bg: #F3E1DD;
  --sidebar-bg: #1B231D;
  --sidebar-ink: #E7E6DC;
  --sidebar-ink-dim: #8F978A;
  --sidebar-active: #2A342B;
  --shadow: 0 1px 2px rgba(20,20,10,.04), 0 6px 20px -8px rgba(20,20,10,.12);
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-ui: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #121810;
    --surface: #1A2117;
    --surface-2: #212922;
    --ink: #EBEADF;
    --ink-soft: #A7AE9C;
    --ink-faint: #6D7568;
    --line: #2B332A;
    --accent: #F0813F;
    --accent-ink: #1B1006;
    --good: #5FAE84;
    --good-bg: #1D2E24;
    --warn: #D9A441;
    --warn-bg: #2E2917;
    --critical: #E1665A;
    --critical-bg: #2E1E1B;
    --sidebar-bg: #0E130F;
    --sidebar-ink: #E7E6DC;
    --sidebar-ink-dim: #767D71;
    --sidebar-active: #1C2419;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 24px -8px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg: #121810; --surface: #1A2117; --surface-2: #212922; --ink: #EBEADF; --ink-soft: #A7AE9C;
  --ink-faint: #6D7568; --line: #2B332A; --accent: #F0813F; --accent-ink: #1B1006; --good: #5FAE84;
  --good-bg: #1D2E24; --warn: #D9A441; --warn-bg: #2E2917; --critical: #E1665A; --critical-bg: #2E1E1B;
  --sidebar-bg: #0E130F; --sidebar-ink: #E7E6DC; --sidebar-ink-dim: #767D71; --sidebar-active: #1C2419;
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg: #EEEEE4; --surface: #FCFBF6; --surface-2: #E6E2D2; --ink: #1E2A22; --ink-soft: #566056;
  --ink-faint: #8A9086; --line: #D8D3C1; --accent: #D9622B; --accent-ink: #FFF8F1; --good: #3F7857;
  --good-bg: #E3EEE3; --warn: #A8791A; --warn-bg: #F2E9D2; --critical: #AD3C30; --critical-bg: #F3E1DD;
  --sidebar-bg: #1B231D; --sidebar-ink: #E7E6DC; --sidebar-ink-dim: #8F978A; --sidebar-active: #2A342B;
  color-scheme: light;
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); -webkit-font-smoothing:antialiased}
::selection{background:var(--accent); color:var(--accent-ink)}
h1,h2,h3{font-family:var(--font-display); font-weight:400; text-wrap:balance; margin:0}
p{margin:0}
button{font-family:inherit}
a{color:inherit}
.tabular{font-variant-numeric:tabular-nums}

.app{display:grid; grid-template-columns:236px 1fr; min-height:100vh}

/* ---------- sidebar ---------- */
.sidebar{background:var(--sidebar-bg); color:var(--sidebar-ink); padding:1.5rem 1rem; display:flex; flex-direction:column; gap:2rem; position:sticky; top:0; height:100vh}
.brand{display:flex; align-items:center; gap:.6rem; padding:.25rem .5rem}
.brand-mark{width:26px; height:26px; flex:none}
.brand-name{font-family:var(--font-display); font-size:1.15rem; letter-spacing:.02em}
.brand-sub{font-size:.68rem; color:var(--sidebar-ink-dim); text-transform:uppercase; letter-spacing:.09em; margin-top:-2px}
nav.navlist{display:flex; flex-direction:column; gap:.15rem}
.navlist button{display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; padding:.55rem .7rem; border:none; background:none; color:var(--sidebar-ink-dim); border-radius:8px; font-size:.88rem; cursor:pointer; transition:background .15s, color .15s}
.navlist button svg{width:17px; height:17px; flex:none; opacity:.85}
.navlist button:hover{background:var(--sidebar-active); color:var(--sidebar-ink)}
.navlist button.active{background:var(--sidebar-active); color:var(--sidebar-ink)}
.navlist button.active{box-shadow:inset 2px 0 0 var(--accent)}
.navlist button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.sidebar-foot{margin-top:auto; padding:.75rem; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:.6rem}
.mentor-avatar{width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:600; flex:none}
.sidebar-foot-text{font-size:.72rem; color:var(--sidebar-ink-dim); line-height:1.3}
.sidebar-foot-text b{color:var(--sidebar-ink); font-weight:500; display:block; font-size:.8rem}

/* ---------- main ---------- */
main{padding:2.25rem clamp(1.25rem,4vw,3rem) 6rem; display:flex; flex-direction:column; gap:1.75rem; max-width:1180px; width:100%; margin:0 auto}
.view{display:flex; flex-direction:column; gap:1.75rem}
.view[hidden]{display:none}

.placeholder{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:3rem 2rem; text-align:center; display:flex; flex-direction:column; gap:.5rem; align-items:center}
.placeholder h2{font-size:1.4rem}
.placeholder p{color:var(--ink-soft); max-width:32em}
.eyebrow{font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); font-weight:600}

/* ---------- hero ---------- */
.hero{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.75rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; box-shadow:var(--shadow)}
.hero-greeting h1{font-size:1.9rem}
.hero-greeting .role{color:var(--ink-soft); margin-top:.35rem; font-size:.92rem}
.hero-ring{display:flex; align-items:center; gap:1rem; flex:none}
.ring-wrap{position:relative; width:104px; height:104px}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-track{fill:none; stroke:var(--line); stroke-width:9}
.ring-value{fill:none; stroke:var(--accent); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}
.ring-label{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ring-label .pct{font-size:1.35rem; font-weight:600}
.ring-label .pct-of{font-size:.62rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em}
.hero-next{font-size:.82rem; color:var(--ink-soft); max-width:11em; line-height:1.4}
.hero-next b{color:var(--ink); font-weight:600}

/* ---------- trail ---------- */
.section-title{display:flex; align-items:baseline; justify-content:space-between; gap:1rem}
.section-title h2{font-size:1.15rem}
.section-title .eyebrow{margin-bottom:.2rem}

.phase-track{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; position:relative}
.phase-node{position:relative; padding-top:26px}
.phase-node .dot{position:absolute; top:0; left:50%; transform:translateX(-50%); width:14px; height:14px; border-radius:50%; background:var(--surface); border:2px solid var(--ink-faint); z-index:2}
.phase-node.done .dot{background:var(--good); border-color:var(--good)}
.phase-node.current .dot{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent)}
.phase-node:not(:last-child)::after{content:''; position:absolute; top:6px; left:calc(50% + 10px); width:calc(100% - 20px); height:2px; background-image:linear-gradient(to right, var(--ink-faint) 60%, transparent 0%); background-size:8px 2px; background-repeat:repeat-x}
.phase-node.done:not(:last-child)::after{background-image:linear-gradient(to right, var(--good) 60%, transparent 0%)}
.phase-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem; height:100%; display:flex; flex-direction:column; gap:.6rem; box-shadow:var(--shadow)}
.phase-card .phase-days{font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); display:flex; justify-content:space-between}
.phase-card h3{font-size:1.02rem; font-weight:600; font-family:var(--font-ui)}
.phase-bar{height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden}
.phase-bar > span{display:block; height:100%; background:var(--ink-faint); border-radius:99px; transition:width .5s ease}
.phase-node.current .phase-bar > span{background:var(--accent)}
.phase-node.done .phase-bar > span{background:var(--good)}
.phase-pct{font-size:.76rem; color:var(--ink-soft); align-self:flex-end}

/* ---------- two column ---------- */
.cols-2{display:grid; grid-template-columns:1.1fr 1fr; gap:1.5rem; align-items:start}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.4rem; box-shadow:var(--shadow)}
.card-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1rem}
.card-head h2{font-size:1.02rem; font-family:var(--font-ui); font-weight:600}
.card-head .count{font-size:.78rem; color:var(--ink-faint)}

ul.tasklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.15rem}
.task{display:flex; align-items:center; gap:.7rem; padding:.55rem .3rem; border-radius:8px}
.task:hover{background:var(--surface-2)}
.task input[type=checkbox]{appearance:none; width:19px; height:19px; border-radius:6px; border:1.5px solid var(--ink-faint); flex:none; cursor:pointer; position:relative; transition:background .15s, border-color .15s}
.task input[type=checkbox]:checked{background:var(--good); border-color:var(--good)}
.task input[type=checkbox]:checked::after{content:''; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid var(--surface); border-width:0 2px 2px 0; transform:rotate(45deg)}
.task input[type=checkbox]:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.task label{flex:1; font-size:.92rem; cursor:pointer}
.task input:checked + label{color:var(--ink-faint); text-decoration:line-through}
.chip{font-size:.68rem; padding:.2rem .55rem; border-radius:99px; font-weight:600; white-space:nowrap}
.chip.day{background:var(--surface-2); color:var(--ink-soft)}
.chip.done{background:var(--good-bg); color:var(--good)}

.mentor-line{display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid var(--line)}
.mentor-line .mentor-avatar{width:38px; height:38px; font-size:.85rem}
.mentor-line .name{font-size:.9rem; font-weight:600}
.mentor-line .role{font-size:.76rem; color:var(--ink-faint)}

/* ---------- team strip ---------- */
.team-scroll{display:flex; gap:1rem; overflow-x:auto; padding-bottom:.35rem; scrollbar-width:thin}
.team-card{flex:0 0 200px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.1rem; display:flex; flex-direction:column; gap:.6rem; box-shadow:var(--shadow)}
.team-card .mentor-avatar{width:40px; height:40px; font-size:.9rem}
.team-card .name{font-size:.9rem; font-weight:600}
.team-card .role{font-size:.74rem; color:var(--ink-faint)}
.team-card .help{font-size:.78rem; color:var(--ink-soft); line-height:1.4; flex:1}
.team-card .msg-btn{align-self:flex-start; font-size:.76rem; padding:.35rem .75rem; border-radius:8px; border:1px solid var(--line); background:none; color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s}
.team-card .msg-btn:hover{border-color:var(--accent); background:var(--surface-2)}
.team-empty{color:var(--ink-faint); font-size:.85rem; padding:.5rem 0}

/* ---------- feedback ---------- */
.feedback-card .mood-row{display:flex; gap:.6rem; margin-bottom:1rem}
.mood-btn{flex:1; padding:.6rem .5rem; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-size:.82rem; cursor:pointer; transition:all .15s}
.mood-btn[data-mood="hard"]:hover, .mood-btn[data-mood="hard"].sel{border-color:var(--critical); background:var(--critical-bg); color:var(--critical)}
.mood-btn[data-mood="ok"]:hover, .mood-btn[data-mood="ok"].sel{border-color:var(--warn); background:var(--warn-bg); color:var(--warn)}
.mood-btn[data-mood="great"]:hover, .mood-btn[data-mood="great"].sel{border-color:var(--good); background:var(--good-bg); color:var(--good)}
.feedback-card textarea{width:100%; resize:vertical; min-height:64px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-family:inherit; font-size:.88rem; padding:.65rem .75rem; margin-bottom:.85rem}
.feedback-card textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.btn-primary{background:var(--accent); color:var(--accent-ink); border:none; border-radius:9px; padding:.6rem 1.1rem; font-size:.86rem; font-weight:600; cursor:pointer; transition:filter .15s}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.btn-primary:disabled{opacity:.6; cursor:default}
.feedback-confirm{display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; padding:.5rem 0}
.feedback-confirm .ok-dot{width:34px; height:34px; border-radius:50%; background:var(--good-bg); color:var(--good); display:flex; align-items:center; justify-content:center}

/* ---------- assistant dock ---------- */
.assistant{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.25rem 1.4rem; box-shadow:var(--shadow)}
.assistant-head{display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem}
.assistant-head svg{width:18px; height:18px; color:var(--accent)}
.assistant-head h2{font-size:.95rem; font-family:var(--font-ui); font-weight:600}
.assistant-log{display:flex; flex-direction:column; gap:.5rem; margin-bottom:.75rem; max-height:220px; overflow-y:auto}
.assistant-log:empty{display:none}
.msg{max-width:80%; padding:.55rem .8rem; border-radius:11px; font-size:.86rem; line-height:1.4}
.msg.user{align-self:flex-end; background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:3px}
.msg.bot{align-self:flex-start; background:var(--surface-2); color:var(--ink); border-bottom-left-radius:3px}
.suggestion{background:var(--surface-2); border-radius:10px; padding:.7rem .9rem; font-size:.85rem; color:var(--ink-soft); margin-bottom:.85rem; line-height:1.45}
.suggestion b{color:var(--ink)}
.quick-row{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem}
.quick-chip{font-size:.78rem; padding:.4rem .8rem; border-radius:99px; border:1px solid var(--line); background:none; color:var(--ink-soft); cursor:pointer; transition:all .15s}
.quick-chip:hover{border-color:var(--accent); color:var(--ink)}
.assistant-input{display:flex; gap:.6rem}
.assistant-input input{flex:1; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:10px; padding:.6rem .85rem; font-size:.88rem; font-family:inherit}
.assistant-input input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.assistant-input button{border:none; background:var(--ink); color:var(--bg); border-radius:10px; padding:0 1.1rem; font-size:.86rem; cursor:pointer}

.load-error{background:var(--critical-bg); color:var(--critical); border-radius:12px; padding:1rem 1.25rem; font-size:.9rem}

/* ---------- план адаптации (полная страница) ---------- */
.plan-detail{display:flex; flex-direction:column; gap:1rem}
.plan-phase{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.4rem 1.6rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.6rem}
.plan-phase.current{border-color:var(--accent)}
.plan-phase-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap}
.plan-phase-head .days{font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint)}
.plan-phase h3{font-size:1.15rem}
.plan-phase .goal{color:var(--ink-soft); font-size:.9rem; line-height:1.55; max-width:60ch}
.plan-phase-items{margin-top:.3rem; display:flex; flex-direction:column; gap:.35rem}
.plan-phase-items .item{font-size:.86rem; display:flex; align-items:center; gap:.55rem}
.plan-phase-items .item .dot-ico{width:9px; height:9px; border-radius:50%; flex:none; background:var(--ink-faint)}
.plan-phase-items .item.done .dot-ico{background:var(--good)}
.plan-phase-items .item.done label{color:var(--ink-faint); text-decoration:line-through}
.plan-phase-note{font-size:.82rem; color:var(--ink-faint); font-style:italic}

/* ---------- оргструктура ---------- */
ul.org-tree{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem}
.org-node{border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow)}
.org-node.mine{border-color:var(--accent)}
.org-summary{display:flex; align-items:center; gap:.6rem; padding:.75rem 1.1rem; cursor:pointer; list-style:none}
.org-summary::-webkit-details-marker{display:none}
.org-summary::marker{content:''}
.org-summary .name{font-weight:600; font-size:.92rem; flex:1; font-family:var(--font-ui)}
.org-summary .head{font-size:.76rem; color:var(--ink-faint)}
.org-children{list-style:none; margin:.25rem 0 .7rem 1.5rem; padding:0 0 0 1rem; display:flex; flex-direction:column; gap:.5rem; border-left:1px solid var(--line)}
ul.org-employees{list-style:none; margin:0; padding:.15rem 1.1rem .85rem 2.4rem; display:flex; flex-direction:column; gap:.3rem}
.org-employees li{font-size:.82rem; color:var(--ink-soft)}
.org-empty{color:var(--ink-faint); font-size:.85rem; padding:1rem 0}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

@media (max-width: 880px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static; height:auto; flex-direction:row; align-items:center; padding:.85rem 1rem; gap:1rem; overflow-x:auto}
  .sidebar .brand{flex:none}
  .brand-sub{display:none}
  nav.navlist{flex-direction:row}
  .navlist button span.label{display:none}
  .sidebar-foot{display:none}
  .cols-2{grid-template-columns:1fr}
  .phase-track{grid-template-columns:1fr}
  .phase-node:not(:last-child)::after{display:none}
  .hero{flex-direction:column; align-items:flex-start}
}