@font-face{font-family:"Onest";src:url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";src:url("fonts/onest-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:dark;
  --bg:#0d0c0a; --card:#161410; --ink:#f4f1e8; --mut:#a39d8e; --lime:#ffd43b; --lime-t:#ffd43b; --on-lime:#14110a;
  --line:rgba(255,212,59,.14); --line-2:rgba(241,242,234,.1); --soft:rgba(241,242,234,.06);
  --warn:#7db8ff; --dot:rgba(255,212,59,.11); --bar:rgba(13,12,10,.72);
  --ease:cubic-bezier(.23,1,.32,1);
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#F8F5EC; --card:#FFFFFF; --ink:#17140c; --mut:#6b6455; --lime-t:#8A6200;
  --line:rgba(130,95,0,.2); --line-2:rgba(17,23,12,.12); --soft:rgba(17,23,12,.05);
  --warn:#1f6fc7; --dot:rgba(150,110,0,.16); --bar:rgba(248,245,236,.8);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 1rem/1.5 "Onest",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:36px 36px}
.geo{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.geo *{fill:none;stroke:var(--lime);stroke-opacity:.1;stroke-width:1}
.geo circle.n{fill:var(--lime);stroke:none;fill-opacity:.2}
html[data-theme="light"] .geo *{stroke:#B58900;stroke-opacity:.16}
html[data-theme="light"] .geo circle.n{fill:#B58900;fill-opacity:.25}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* верхняя панель */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;min-height:60px;padding:8px clamp(14px,3vw,32px);background:var(--bar);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-2)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:1.15rem}
.logo b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--lime);color:var(--on-lime)}
.logo b svg{width:17px;height:17px}
.crumb{display:flex;flex-direction:column;line-height:1.2;min-width:0;padding-left:14px;border-left:1px solid var(--line-2)}
.crumb strong{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb span{font-size:.78rem;color:var(--mut)}
.sp{flex:1}
.counter{font-size:.9rem;color:var(--mut);white-space:nowrap}
.counter b{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border:0;border-radius:12px;background:var(--lime);color:var(--on-lime);font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap;transition:transform .16s var(--ease),box-shadow .3s var(--ease)}
.btn:active{transform:scale(.97)}
.btn:hover{box-shadow:0 8px 30px rgba(255,212,59,.28)}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(241,242,234,.3)}
html[data-theme="light"] .btn.ghost{box-shadow:inset 0 0 0 1.5px rgba(17,23,12,.32)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.sm{min-height:44px;padding:0 16px}
.btn[disabled]{opacity:.4;pointer-events:none}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:var(--soft);color:var(--ink)}
.theme-sw{position:relative;flex:none;width:48px;height:28px;padding:0;border:0;border-radius:999px;background:rgba(241,242,234,.14);box-shadow:inset 0 0 0 1px rgba(241,242,234,.18)}
html[data-theme="light"] .theme-sw{background:rgba(17,23,12,.1);box-shadow:inset 0 0 0 1px rgba(17,23,12,.16)}
.theme-sw::after{content:"";position:absolute;inset:-8px -4px}
.theme-knob{position:absolute;top:3px;left:3px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--lime);color:var(--on-lime);transform:translateX(20px);transition:transform .25s var(--ease)}
.theme-knob svg{grid-area:1/1;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s,transform .25s var(--ease)}
.i-moon{fill:currentColor!important}
html[data-theme="light"] .theme-knob{transform:none;background:var(--on-lime);color:var(--lime)}
html:not([data-theme="light"]) .i-sun,html[data-theme="light"] .i-moon{opacity:0;transform:scale(.6) rotate(-40deg)}

/* заголовки */
.h1{font-weight:800;font-size:clamp(1.8rem,5vw,3rem);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.acc{color:var(--lime-t)}
html[data-theme="light"] .h1 .acc{background:#14110a;color:#ffd43b;padding:0 .18em;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mut{color:var(--mut)}

/* статусы */
.st{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 11px;border-radius:8px;font-size:.78rem;font-weight:700;white-space:nowrap}
.st.draft{box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--mut)}
.st.new{box-shadow:inset 0 0 0 1.5px var(--lime-t);color:var(--lime-t)}
.st.work{background:rgba(125,184,255,.16);box-shadow:inset 0 0 0 1.5px var(--warn);color:var(--warn)}
.st.done{background:rgba(255,212,59,.14);color:var(--lime-t)}
.st svg{width:13px;height:13px}

/* карточка */
.card{background:var(--card);border-radius:22px;box-shadow:inset 0 0 0 1px var(--line)}
html[data-theme="light"] .card{box-shadow:inset 0 0 0 1px var(--line),0 10px 30px rgba(50,80,10,.07)}

/* поля */
textarea,input[type=text]{width:100%;font:inherit;color:var(--ink);background:var(--soft);border:0;border-radius:14px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--line-2);outline:0;resize:vertical}
textarea:focus,input[type=text]:focus{box-shadow:inset 0 0 0 1.5px var(--lime-t)}
::placeholder{color:var(--mut)}

/* ------- экран клиента ------- */
.c-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;padding:20px clamp(14px,3vw,32px) 40px;max-width:1500px;margin:0 auto;align-items:start}
.c-head{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.hint{display:inline-flex;align-items:center;gap:10px;color:var(--mut);font-size:.95rem}
.hint svg{color:var(--lime-t)}
.hint .m{display:none}
.frame{position:relative;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line-2),0 24px 60px rgba(0,0,0,.35)}
.frame-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#1b1f16;color:#9aa092;font-size:.75rem}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:#3a4030}
.frame-bar span{margin-left:8px;padding:2px 12px;border-radius:999px;background:#0d100a}
html[data-theme="light"] .frame-bar{background:#e4eadb;color:#56604A}
html[data-theme="light"] .frame-bar i{background:#b9c4a8}
html[data-theme="light"] .frame-bar span{background:#fff}
.site{position:relative;height:640px;overflow:auto;background:#faf7f2;color:#2b2118;cursor:crosshair;font-family:Georgia,"Times New Roman",serif}
.site *{cursor:crosshair}
.site .pad{position:relative;min-height:1180px}
.s-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;border-bottom:1px solid #eadfd0}
.s-nav b{font-size:1.35rem;letter-spacing:.02em}
.s-nav span{display:flex;gap:22px;font:500 .9rem "Onest",sans-serif;color:#6b5a48}
.s-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;padding:56px 40px 40px;align-items:center}
.s-hero h2{font-size:2.6rem;line-height:1.1;margin-bottom:16px}
.s-hero p{font:400 1.05rem/1.6 "Onest",sans-serif;color:#6b5a48;margin-bottom:24px}
.s-btn{display:inline-block;padding:14px 28px;border-radius:999px;background:#c2562a;color:#fff;font:700 .95rem "Onest",sans-serif}
.s-img{height:260px;border-radius:24px;background:linear-gradient(135deg,#f2c9a3,#d98d5f 55%,#a8512a)}
.s-sec{padding:30px 40px}
.s-sec h3{font-size:1.7rem;margin-bottom:18px}
.s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.s-card{padding:20px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px #eadfd0;font:400 .95rem/1.5 "Onest",sans-serif;color:#6b5a48}
.s-card b{display:block;margin-bottom:6px;color:#2b2118;font:700 1.05rem "Onest",sans-serif}
.s-price{font:800 1.4rem "Onest",sans-serif;color:#c2562a;margin-top:10px}
.s-foot{padding:30px 40px;background:#2b2118;color:#f3e7d6;font:400 .95rem "Onest",sans-serif}

.pin{position:absolute;z-index:5;display:grid;place-items:center;width:30px;height:30px;margin:-15px 0 0 -15px;border:0;border-radius:50%;background:var(--lime);color:#14110a;font:800 .85rem "Onest",sans-serif;box-shadow:0 0 0 4px rgba(255,212,59,.28),0 6px 16px rgba(0,0,0,.3);cursor:pointer;animation:pop .3s var(--ease)}
.pin.draft{background:#fff;box-shadow:0 0 0 2px #14110a,0 0 0 5px rgba(255,212,59,.5)}
.pin.work{background:var(--warn);box-shadow:0 0 0 4px rgba(125,184,255,.3)}
.pin.done{background:#9aa092;opacity:.7;box-shadow:none}
.pin.act{transform:scale(1.2)}
@keyframes pop{from{transform:scale(.3);opacity:0}}

.pop{position:absolute;z-index:20;width:320px;padding:16px;border-radius:20px;background:var(--card);color:var(--ink);font-family:"Onest",sans-serif;box-shadow:inset 0 0 0 1px var(--line),0 20px 50px rgba(0,0,0,.45);display:none;cursor:default}
.pop *{cursor:auto}.pop button{cursor:pointer}
.pop.on{display:block;animation:pop .22s var(--ease)}
.pop-t{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-weight:700;font-size:.92rem}
.pop-t span{color:var(--mut);font-weight:500}
.pop textarea{min-height:84px}
.pop-a{display:flex;gap:8px;margin:10px 0}
.pop-a .btn{flex:1;padding:0 10px;font-size:.85rem}
.pop .btn.full{width:100%}
.chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;padding:6px 12px;border-radius:12px;background:var(--soft);font-size:.82rem;box-shadow:inset 0 0 0 1px var(--line-2)}
.thumb{width:34px;height:24px;border-radius:5px;background:linear-gradient(135deg,#d98d5f,#7a3d20)}

.list{position:sticky;top:76px;padding:18px;max-height:calc(100vh - 100px);overflow:auto}
.list h3{font-size:1.05rem;font-weight:800;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.item{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:12px;margin:0 -6px;border-radius:14px;cursor:pointer}
.item:hover,.item.act{background:var(--soft)}
.item .n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lime);color:#14110a;font-weight:800;font-size:.82rem}
.item.draft .n{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink)}
.item.work .n{background:var(--warn)}
.item.done{opacity:.55}
.item.done .n{background:var(--soft);color:var(--lime-t);box-shadow:inset 0 0 0 1.5px var(--lime-t)}
.item p{font-size:.92rem;line-height:1.4;margin-bottom:6px}
.item small{display:block;margin-bottom:8px;color:var(--mut);font-size:.78rem}
.empty{padding:18px 0;color:var(--mut);font-size:.9rem}

.mode{display:none}
.toast{position:fixed;left:50%;bottom:90px;z-index:90;transform:translate(-50%,20px);opacity:0;padding:12px 20px;border-radius:12px;background:var(--lime);color:var(--on-lime);font-weight:700;font-size:.9rem;pointer-events:none;transition:.3s var(--ease);white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ------- панель Влада ------- */
.a-wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;padding:20px clamp(14px,3vw,32px) 60px;max-width:1500px;margin:0 auto;align-items:start}
.side{position:sticky;top:76px;padding:16px}
.side .btn{width:100%;margin-bottom:12px}
.proj{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px 12px;margin-bottom:4px;border:0;border-radius:14px;background:none;text-align:left}
.proj:hover{background:var(--soft)}
.proj.act{background:var(--soft);box-shadow:inset 0 0 0 1.5px var(--line)}
.proj div{flex:1;min-width:0;line-height:1.25}
.proj strong{display:block;font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj small{color:var(--mut);font-size:.78rem}
.badge{display:grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:8px;background:var(--lime);color:#14110a;font-weight:800;font-size:.8rem}
.badge.ok{background:none;box-shadow:inset 0 0 0 1.5px var(--lime-t);color:var(--lime-t);font-weight:700;font-size:.72rem;padding:0 10px}
.p-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px}
.p-head p{margin-top:8px;color:var(--mut)}
.p-btns{display:flex;flex-wrap:wrap;gap:10px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tab{min-height:44px;padding:0 16px;border:0;border-radius:12px;background:var(--soft);font-weight:600;font-size:.9rem;box-shadow:inset 0 0 0 1px var(--line-2)}
.tab b{margin-left:6px;color:var(--mut);font-weight:700}
.tab.act{background:var(--lime);color:var(--on-lime);box-shadow:none}
.tab.act b{color:var(--on-lime)}
.e{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px;margin-bottom:12px}
.e.done{opacity:.6}
.e .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lime);color:#14110a;font-weight:800}
.e.work .n{background:var(--warn)}
.e.done .n{background:var(--soft);color:var(--lime-t);box-shadow:inset 0 0 0 1.5px var(--lime-t)}
.e-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:6px}
.e-top strong{font-weight:700}
.e-top time{color:var(--mut);font-size:.82rem}
.e-text{margin-bottom:12px;font-size:1.02rem;line-height:1.45}
.e-att{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.shot{display:block;width:120px;height:78px;border:0;padding:0;border-radius:12px;background:linear-gradient(135deg,#f2c9a3,#d98d5f 55%,#a8512a);box-shadow:inset 0 0 0 1px var(--line-2);position:relative;overflow:hidden}
.shot::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,212,59,.9) 0 7px,transparent 8px)}
.voice{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 16px 6px 6px;border-radius:14px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-2);flex:1;min-width:230px;max-width:420px}
.voice .play{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:var(--lime);color:var(--on-lime)}
.wave{flex:1;display:flex;align-items:center;gap:2px;height:28px}
.wave i{flex:1;min-width:2px;border-radius:2px;background:var(--mut);opacity:.5}
.wave i.on{background:var(--lime-t);opacity:1}
.voice time{font-size:.82rem;color:var(--mut);font-variant-numeric:tabular-nums}
.e-act{display:flex;flex-wrap:wrap;gap:10px}
.empty-big{padding:40px 20px;text-align:center;color:var(--mut)}

.modal{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:20px;background:rgba(0,0,0,.7)}
.modal.on{display:grid}
.modal .big{width:min(900px,100%);aspect-ratio:16/10;border-radius:18px;background:linear-gradient(135deg,#f2c9a3,#d98d5f 55%,#a8512a);position:relative}
.modal .big::after{content:"";position:absolute;left:68%;top:28%;width:40px;height:40px;margin:-20px;border-radius:50%;border:4px solid var(--lime);box-shadow:0 0 0 6px rgba(255,212,59,.25)}
.modal .x{position:absolute;top:16px;right:16px;background:var(--card)}

/* ------- телефон ------- */
@media (max-width:900px){
  .c-wrap{grid-template-columns:1fr;padding-bottom:150px}
  .list{position:static;max-height:none}
  .a-wrap{grid-template-columns:1fr}
  .side{position:static}
  .site{height:62vh;min-height:420px}
}
@media (max-width:640px){
  .top{gap:8px;padding:8px 14px}
  .crumb{padding-left:10px}
  .counter,.logo span{display:none}
  .top .btn{padding:0 14px;font-size:.85rem}
  .hint .d{display:none}.hint .m{display:inline}
  .s-nav{padding:14px 20px}.s-nav span{display:none}
  .s-hero{grid-template-columns:1fr;padding:28px 20px}
  .s-hero h2{font-size:1.8rem}
  .s-sec{padding:20px}
  .s-cards{grid-template-columns:1fr}
  .s-foot{padding:20px}
  .pop{z-index:70;position:fixed;left:0!important;right:0;bottom:0;top:auto!important;width:auto;border-radius:24px 24px 0 0;padding:18px 18px 24px;box-shadow:0 -10px 40px rgba(0,0,0,.5),inset 0 1px 0 var(--line)}
  .mode{position:fixed;left:50%;bottom:18px;z-index:60;transform:translateX(-50%);display:flex;padding:4px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),0 10px 30px rgba(0,0,0,.4)}
  .mode button{min-height:48px;padding:0 18px;border:0;border-radius:12px;background:none;font-weight:700;font-size:.9rem;white-space:nowrap}
  .mode button.act{background:var(--lime);color:var(--on-lime)}
  .toast{bottom:100px}
  .e{grid-template-columns:1fr}
  .e .n{width:36px;height:36px}
  .p-btns .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}