/* =====================================================================
   Отворање маркет · дизајн-систем v1.1
   Фонтови: Manrope (наслови, бројки, навигација) · Golos Text (текст) · JetBrains Mono (шифри)
   ===================================================================== */

@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-latin-ext-wght-normal.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+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-latin-wght-normal.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}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/golos-text-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/golos-text-latin-400-normal.woff2) format('woff2');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}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/golos-text-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/golos-text-latin-500-normal.woff2) format('woff2');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}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/golos-text-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/golos-text-latin-600-normal.woff2) format('woff2');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}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format('woff2-variations');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/jetbrains-mono-latin-wght-normal.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}

/* ---------- токени ---------- */
:root{
  color-scheme:light;
  --bg:#F3F5F4; --surface:#FFFFFF; --surface-2:#F5F7F6; --surface-3:#ECF0EE; --line:#E2E7E4; --line-2:#EDF1EF; --line-strong:#CFD7D3;
  --ink:#0F1613; --ink-2:#4A5551; --ink-3:#7A8681; --ink-4:#A9B3AE;
  --green:#0E8A4B; --green-d:#0B6F3C; --green-dd:#085A31; --green-soft:#E7F5EC; --green-100:#CFEBDA; --green-ring:rgba(14,138,75,.22);
  --blue:#2563EB; --blue-d:#1D4ED8; --blue-soft:#EAF0FE; --blue-100:#D4E0FC;
  --red:#DC2626; --red-d:#B91C1C; --red-soft:#FDECEC; --red-100:#FBD5D5;
  --yellow:#F59E0B; --yellow-ink:#9A5B00; --yellow-soft:#FEF4E2; --yellow-100:#FDE7BF;
  --accent:var(--green); --accent-ink:#fff; --accent-soft:var(--green-soft);
  --good:var(--green); --good-soft:var(--green-soft); --warn:var(--yellow-ink); --warn-soft:var(--yellow-soft); --bad:var(--red); --bad-soft:var(--red-soft); --info:var(--blue); --info-soft:var(--blue-soft);
  --today:var(--red); --weekend:rgba(15,22,19,.035);
  --sh-1:0 1px 2px rgba(15,22,19,.05),0 1px 3px rgba(15,22,19,.04);
  --sh-2:0 8px 20px -6px rgba(15,22,19,.12),0 2px 6px rgba(15,22,19,.05);
  --sh-3:0 28px 70px -14px rgba(15,22,19,.32),0 8px 20px -8px rgba(15,22,19,.14);
  --shadow:var(--sh-3);
  --font:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Manrope','Golos Text',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:8px; --r-lg:14px; --rowH:28px;
  --sbw:252px; --hdrH:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.012em;text-wrap:balance;line-height:1.25}
h1{font-size:24px} h2{font-size:17px} h3{font-size:14px;font-weight:700}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)}
.small{font-size:12.5px}
.num,.tnum{font-variant-numeric:tabular-nums}
a{color:var(--blue)}
[hidden]{display:none!important}
::selection{background:var(--green-100)}
.ic{width:18px;height:18px;flex:none;vertical-align:-4px}
.ic.sm{width:15px;height:15px;vertical-align:-3px}
.ic.xs{width:13px;height:13px;vertical-align:-2px}
svg.ic{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

/* =====================================================================
   Школка: странична навигација + хедер + содржина
   ===================================================================== */
.shell{display:grid;grid-template-columns:var(--sbw) 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px 14px;gap:14px;overflow:auto}
.sb-brand{display:flex;align-items:center;gap:11px;padding:2px 6px 8px;text-decoration:none;color:inherit}
.sb-brand>span:last-child{display:flex;flex-direction:column;min-width:0}
.sb-brand .mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#12A056,#0B6F3C);color:#fff;display:grid;place-items:center;font:800 17px/1 var(--display);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 10px -4px rgba(11,111,60,.6)}
.sb-brand .t1{font:800 15px/1.1 var(--display);letter-spacing:-.01em}
.sb-brand .t2{font-size:11px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;margin-top:3px;font-family:var(--display);font-weight:600}
.sb-proj{position:relative}
.sb-proj>button{width:100%;text-align:left;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;transition:border-color .15s var(--ease),background .15s}
.sb-proj>button:hover{border-color:var(--line-strong);background:var(--surface)}
.sb-proj .pi{width:30px;height:30px;border-radius:8px;background:var(--green-soft);color:var(--green-d);display:grid;place-items:center;flex:none}
.sb-proj .pt{flex:1;min-width:0}
.sb-proj .pt b{display:block;font:700 13.5px/1.2 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-proj .pt span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-proj .chev{color:var(--ink-3)}
.sb-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);z-index:40;padding:6px;max-height:60vh;overflow:auto}
.sb-menu button,.sb-menu a{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13.5px}
.sb-menu button:hover,.sb-menu a:hover{background:var(--surface-2)}
.sb-menu .cur{background:var(--green-soft);color:var(--green-dd);font-weight:600}
.sb-menu .sm{font-size:11.5px;color:var(--ink-3);margin-left:auto;font-family:var(--display);font-weight:600}
.sb-menu .sep{border-top:1px solid var(--line-2);margin:6px 4px}
.sb-nav{display:flex;flex-direction:column;gap:2px}
.sb-sec{padding:12px 10px 6px;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.sb-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--ink-2);text-decoration:none;font:600 13.5px/1.2 var(--display);letter-spacing:-.005em;transition:background .15s,color .15s;position:relative}
.sb-item .ic{color:var(--ink-3);transition:color .15s}
.sb-item:hover{background:var(--surface-2);color:var(--ink)} .sb-item:hover .ic{color:var(--ink-2)}
.sb-item[aria-current=page]{background:var(--green-soft);color:var(--green-dd)} .sb-item[aria-current=page] .ic{color:var(--green)}
.sb-item[aria-current=page]::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--green)}
.sb-item .badge{margin-left:auto;font:700 11px/18px var(--display);min-width:20px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;text-align:center}
.sb-item .badge.soft{background:var(--surface-3);color:var(--ink-2)}
.sb-foot{margin-top:auto;position:relative}
.sb-user{width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid transparent;background:transparent;border-radius:10px;text-align:left;transition:background .15s}
.sb-user:hover{background:var(--surface-2)}
.av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#1B7F3B,#0E8A4B);color:#fff;display:grid;place-items:center;font:700 12px/1 var(--display);flex:none;letter-spacing:.02em}
.sb-user .ut{flex:1;min-width:0}
.sb-user .ut b{display:block;font:600 13px/1.2 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user .ut span{display:block;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);z-index:40;padding:6px}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border:0;background:transparent;color:var(--ink);text-decoration:none;font-size:13.5px;border-radius:8px}
.menu a:hover,.menu button:hover{background:var(--surface-2)}
.menu .ic{color:var(--ink-3)}
.menu .sep{border-top:1px solid var(--line-2);margin:6px 4px}
.menu .hd{padding:8px 10px 10px;font-size:12px;color:var(--ink-3);border-bottom:1px solid var(--line-2);margin-bottom:4px}

.content{min-width:0;display:flex;flex-direction:column}
.hdr{position:sticky;top:0;z-index:20;height:var(--hdrH);background:rgba(243,245,244,.82);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 28px}
.hdr .ttl{min-width:0}
.hdr .ttl h1{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .ttl .sub{font-size:12.5px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .hdr-r{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative}
.hdr .mob-only{display:none}
.iconbtn{position:relative;border:1px solid var(--line);background:var(--surface);border-radius:10px;width:38px;height:38px;display:grid;place-items:center;padding:0;color:var(--ink-2);transition:background .15s,border-color .15s;box-shadow:var(--sh-1)}
.iconbtn:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
.iconbtn .badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font:700 10.5px/18px var(--display);border-radius:9px;min-width:18px;height:18px;text-align:center;padding:0 5px;box-shadow:0 0 0 2px var(--bg)}
main{padding:24px 28px 80px;max-width:1440px;width:100%;margin:0 auto}
main.wide{max-width:none}

/* временска линија на пресвртници (во хедерот) */
.timeline{display:flex;align-items:center;gap:0;min-width:0;flex:1;max-width:760px;margin-left:8px}
.tl-item{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;position:relative;flex:1}
.tl-item .lbl{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.tl-item .dt{font-size:12.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-item .dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--green);background:var(--surface);box-sizing:border-box}
.tl-item.done .dot{background:var(--green)}
.tl-item.done .dt{color:var(--ink-3)}
.tl-item::after{content:"";position:absolute;top:calc(50% - 1px);left:calc(50% + 8px);right:calc(-50% + 8px);height:2px;background:var(--line-strong);z-index:0}
.tl-item.done::after{background:var(--green-100)}
.tl-item:last-child::after{display:none}
.tl-item.today .dot{border-color:var(--red);background:var(--red);box-shadow:0 0 0 4px rgba(220,38,38,.14)}
.tl-item.today .lbl{color:var(--red)} .tl-item.today .dt{color:var(--red)}
.tl-item .dot{z-index:1}

/* мобилна долна лента */
.bottombar{display:none}

/* =====================================================================
   Компоненти
   ===================================================================== */
.stack{display:flex;flex-direction:column;gap:18px}
.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start}
@media (max-width:1000px){.grid2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-1)}
.card>h2{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.card>h2 .sub{font:400 12.5px/1.4 var(--font);color:var(--ink-3);letter-spacing:0}
.card.flush{padding:0;overflow:hidden}
.card.flush>h2,.card.flush>.toolbar{padding:16px 20px 0}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar h2{margin:0}
select,input[type=text],input[type=search],input[type=date],input[type=number],input[type=email],input[type=password],textarea{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r);padding:8px 11px;min-width:0;transition:border-color .15s,box-shadow .15s;color:var(--ink);line-height:1.3}
select:hover,input:hover,textarea:hover{border-color:#B7C1BC}
select:focus,input:focus,textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px var(--green-ring)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
select{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A8681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
input[type=search]{width:240px;max-width:100%}
input[type=date],input[type=number]{font-variant-numeric:tabular-nums}
textarea{min-height:76px;resize:vertical}
.btn{border:1px solid var(--green);background:var(--green);border-radius:var(--r);padding:8px 14px;font:600 13.5px/1.2 var(--display);color:#fff;display:inline-flex;align-items:center;gap:7px;transition:background .15s,border-color .15s,transform .05s,box-shadow .15s;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 1px 2px rgba(11,111,60,.25);text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--green-d);border-color:var(--green-d)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--sh-1)}
.btn.secondary:hover{background:var(--surface-2);border-color:#B7C1BC}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--surface-3);color:var(--ink)}
.btn.danger{background:var(--surface);color:var(--red);border-color:var(--red-100);box-shadow:var(--sh-1)}
.btn.danger:hover{background:var(--red-soft);border-color:var(--red)}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:7px}
.btn .ic{width:16px;height:16px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:5px 12px;font:600 12.5px/1.2 var(--display);color:var(--ink-2);transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:#B7C1BC;color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip .n{font-variant-numeric:tabular-nums;opacity:.7;font-weight:600}
.tog{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);cursor:pointer;user-select:none}
.tog input{accent-color:var(--green);width:15px;height:15px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 16px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;gap:2px 10px;min-height:104px;box-shadow:var(--sh-1);position:relative;overflow:hidden}
.kpi .l{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);grid-column:1}
.kpi .v{font:800 30px/1.05 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;grid-column:1;margin-top:4px}
.kpi .s{font-size:12px;color:var(--ink-2);grid-column:1;margin-top:4px}
.kpi .ico{grid-column:2;grid-row:1/4;align-self:start;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2);background:var(--surface-3)}
.kpi .ico .ic{width:19px;height:19px}
.kpi.good .ico,.kpi.accent .ico{background:var(--green-soft);color:var(--green-d)} .kpi.good .v,.kpi.accent .v{color:var(--green-dd)}
.kpi.bad .ico{background:var(--red-soft);color:var(--red)} .kpi.bad .v{color:var(--red-d)}
.kpi.warn .ico{background:var(--yellow-soft);color:var(--yellow-ink)} .kpi.warn .v{color:var(--yellow-ink)}
.kpi.info .ico{background:var(--blue-soft);color:var(--blue)} .kpi.info .v{color:var(--blue-d)}

/* пилули / чипови за статус */
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font:600 11.5px/18px var(--display);white-space:nowrap;letter-spacing:.005em}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.pill.todo{background:var(--surface-3);color:var(--ink-2)}
.pill.progress{background:var(--blue-soft);color:var(--blue-d)}
.pill.done{background:var(--green-soft);color:var(--green-dd)}
.pill.late{background:var(--red-soft);color:var(--red-d)}
.pill.conflict,.pill.soon{background:var(--yellow-soft);color:var(--yellow-ink)}
.pill.crit{background:var(--surface);color:var(--blue-d);box-shadow:inset 0 0 0 1px var(--blue-100)}
.pill.prop{background:var(--green-soft);color:var(--green-dd)}
.pill.conf{background:var(--blue-soft);color:var(--blue-d)}
.pill.plain::before{display:none}
.sec{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);white-space:nowrap;font-weight:500}
.sec i{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--sc,var(--ink-3));box-shadow:0 0 0 2px color-mix(in srgb,var(--sc,var(--ink-3)) 22%,transparent)}
.code{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--ink-2);background:var(--surface-3);padding:1px 6px;border-radius:5px;letter-spacing:.01em}
.role{display:inline-block;padding:2px 9px;border-radius:999px;font:600 11.5px/16px var(--display)}
.role.admin{background:var(--red-soft);color:var(--red-d)} .role.lead{background:var(--yellow-soft);color:var(--yellow-ink)} .role.member{background:var(--blue-soft);color:var(--blue-d)} .role.viewer{background:var(--surface-3);color:var(--ink-2)}

/* табели */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tbl th{text-align:left;font-family:var(--display);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface);position:sticky;top:0;z-index:1}
.tbl th.sortable{cursor:pointer;user-select:none} .tbl th.sortable:hover{color:var(--ink)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr.row{cursor:pointer} .tbl tr.row:hover td{background:var(--surface-2)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .name{max-width:460px;font-weight:500}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tblwrap{max-height:72vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1)}
.stat-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--surface-3);min-width:120px;gap:2px}
.stat-bar i{display:block;height:100%;border-radius:2px}
.stat-bar .d{background:var(--green)} .stat-bar .p{background:var(--blue)}

/* листи на задачи */
.tlist{display:flex;flex-direction:column;gap:6px}
.trow{display:grid;grid-template-columns:4px 1fr auto;gap:0 12px;align-items:center;padding:10px 12px 10px 0;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s var(--ease)}
.trow:hover{border-color:var(--line-strong);box-shadow:var(--sh-2);transform:translateY(-1px)}
.trow .stripe{width:4px;height:100%;min-height:36px;border-radius:0 3px 3px 0;background:var(--sc,var(--ink-3))}
.trow .main{min-width:0;display:flex;flex-direction:column;gap:4px}
.trow .title{display:flex;gap:8px;align-items:center;min-width:0;flex-wrap:wrap}
.trow .title .nm{font-weight:600;font-size:14px;letter-spacing:-.005em}
.trow .meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);align-items:center}
.trow .meta span{display:inline-flex;align-items:center;gap:4px}
.trow .meta .wait{color:var(--yellow-ink);font-weight:500}
.trow .right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.trow .due{font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums;font-family:var(--display)}
.trow .due.late{color:var(--red)} .trow .due.soon{color:var(--yellow-ink)}
.section-h{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.section-h:first-child{margin-top:4px}
.section-h .n{font-variant-numeric:tabular-nums;background:var(--surface-3);border-radius:9px;padding:0 7px;color:var(--ink-2);letter-spacing:0;line-height:18px;font-size:11.5px}
.section-h.bad{color:var(--red)} .section-h.bad .n{background:var(--red-soft);color:var(--red-d)}
.section-h.warn{color:var(--yellow-ink)} .section-h.warn .n{background:var(--yellow-soft);color:var(--yellow-ink)}
.empty{padding:26px 16px;color:var(--ink-3);text-align:center;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:8px}
.empty .ic{width:28px;height:28px;color:var(--ink-4);stroke-width:1.5}
.qbtn{border:1px solid var(--green-100);background:var(--surface);border-radius:8px;padding:5px 10px;font:600 12.5px/1.2 var(--display);color:var(--green-dd);display:inline-flex;align-items:center;gap:5px;transition:all .15s}
.qbtn:hover{background:var(--green);border-color:var(--green);color:#fff}
.qbtn.blue{border-color:var(--blue-100);color:var(--blue-d)} .qbtn.blue:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.qbtn .ic{width:14px;height:14px}
.chain{display:flex;flex-direction:column}
.chain .ci{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line-2);cursor:pointer;align-items:start;position:relative;border-radius:8px}
.chain .ci:hover{background:var(--surface-2)}
.chain .ci:last-child{border-bottom:0}
.chain .ci .dot{width:12px;height:12px;border-radius:50%;margin:5px 0 0 6px;background:var(--sc);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 20%,transparent)}
.chain .ci .buf{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--ink-3)}
.chain .ci .buf.tight{color:var(--red)}
.buf{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;font-size:11.5px;padding:2px 8px;border-radius:6px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.buf.tight{background:var(--red-soft);color:var(--red-d)} .buf.zero{background:var(--yellow-soft);color:var(--yellow-ink)} .buf.ok{background:var(--green-soft);color:var(--green-dd)}

/* зависности */
.dep-edge{display:grid;grid-template-columns:1fr 36px 1fr auto;gap:12px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line-2)}
.dep-edge:last-child{border-bottom:0}
.dep-edge .arrow{text-align:center;color:var(--ink-4);display:grid;place-items:center}
.dep-edge .arrow.cross{color:var(--green)}
.dep-edge .node{min-width:0;cursor:pointer;padding:6px 8px;border-radius:8px;transition:background .15s}
.dep-edge .node:hover{background:var(--surface-2)}
.dep-edge .node .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:2px 0}
.dep-edge .ctl{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:12px}
@media (max-width:700px){.dep-edge{grid-template-columns:1fr;gap:4px}.dep-edge .arrow{justify-content:start;transform:rotate(90deg);width:24px}.dep-edge .ctl{align-items:flex-start}}
.tree{font-size:13px}
.tree ul{list-style:none;margin:0;padding-left:20px;border-left:1.5px dashed var(--line-strong)}
.tree>ul{padding-left:0;border:0}
.tree li{padding:4px 0}
.tree .tn{cursor:pointer;display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;padding:3px 6px;border-radius:6px}
.tree .tn:hover{background:var(--surface-2)}
.tree .tn .nm{font-weight:500}

/* =====================================================================
   Гант
   ===================================================================== */
.gantt{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:auto;max-height:78vh;position:relative;box-shadow:var(--sh-1)}
.g-inner{display:grid;grid-template-columns:var(--labelW) 1fr;min-width:max-content}
.g-labels{position:sticky;left:0;z-index:5;background:var(--surface);border-right:1px solid var(--line);width:var(--labelW)}
.g-head{position:sticky;top:0;z-index:6;background:var(--surface);border-bottom:1px solid var(--line);height:48px}
.g-labels .g-head{z-index:7;display:flex;align-items:flex-end;padding:0 12px 8px;font-family:var(--display);font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.07em;text-transform:uppercase}
.g-time{position:relative}
.g-time .g-head{position:sticky;top:0}
.g-months{position:absolute;top:0;left:0;height:22px;white-space:nowrap}
.g-months span{position:absolute;top:4px;font-family:var(--display);font-size:11px;color:var(--ink-2);font-weight:700;padding-left:8px;border-left:1px solid var(--line);height:18px;letter-spacing:.05em;text-transform:uppercase}
.g-days{position:absolute;top:24px;left:0;height:24px}
.g-days span{position:absolute;top:0;height:22px;font-size:10.5px;font-family:var(--display);font-weight:600;color:var(--ink-3);text-align:center;line-height:22px;font-variant-numeric:tabular-nums}
.g-days span.we{color:var(--ink-4)}
.g-days span.today{color:#fff;background:var(--red);border-radius:6px;height:20px;line-height:20px;top:1px}
.g-row{height:var(--rowH);border-bottom:1px solid var(--line-2);position:relative}
.g-labels .g-row{display:flex;align-items:center;gap:8px;padding:0 12px;overflow:hidden;white-space:nowrap;cursor:pointer;font-size:12.5px}
.g-labels .g-row:hover{background:var(--surface-2)}
.g-labels .g-row .code{flex:none;font-size:10.5px;padding:0 5px}
.g-labels .g-row .nm{overflow:hidden;text-overflow:ellipsis;min-width:0;font-weight:500}
.g-labels .g-row .who{color:var(--ink-3);font-size:11px;flex:none;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.g-row.sector{background:var(--surface-2);font-family:var(--display);font-weight:700;font-size:13px}
.g-row.sector .car{width:14px;display:inline-block;color:var(--ink-3);font-size:11px}
.g-row.group{background:var(--surface);color:var(--ink-3);font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding-left:24px}
.g-time .g-row.sector{background:var(--surface-2)}
.g-body{position:relative}
.g-canvas{position:absolute;inset:0;pointer-events:none}
.g-canvas .we{position:absolute;top:0;bottom:0;background:var(--weekend)}
.g-canvas .ms{position:absolute;top:0;bottom:0;border-left:1.5px dashed var(--green);opacity:.55}
.g-canvas .todayl{position:absolute;top:0;bottom:0;border-left:2px solid var(--today);z-index:2;opacity:.9}
.bar{position:absolute;top:7px;height:14px;border-radius:4px;background:var(--sc,var(--ink-3));cursor:pointer;z-index:3;opacity:.92;box-shadow:inset 0 -1px 0 rgba(0,0,0,.12);transition:filter .12s}
.bar.done{opacity:.4}
.bar.todo.past{opacity:.7}
.bar.late{box-shadow:0 0 0 2px var(--red)}
.bar.crit{box-shadow:0 0 0 1.5px var(--ink)}
.bar.crit.late{box-shadow:0 0 0 2px var(--red),0 0 0 3.5px var(--ink)}
.bar:hover{filter:brightness(1.08)}
.bar .clip{position:absolute;left:-11px;top:-1px;font-size:11px;color:var(--ink-3)}
.slip{position:absolute;top:7px;height:14px;z-index:3;border-radius:0 4px 4px 0;background:repeating-linear-gradient(135deg,var(--red) 0 3px,transparent 3px 6px);opacity:.85;pointer-events:none}
.dl{position:absolute;top:10px;width:8px;height:8px;transform:translateX(-50%) rotate(45deg);background:var(--surface);border:2px solid var(--ink);z-index:4;pointer-events:none;border-radius:1px}
.dl.done{border-color:var(--green)} .dl.late{border-color:var(--red);background:var(--red)}
.arrows{position:absolute;top:0;left:0;z-index:2;pointer-events:none;overflow:visible}
.arrows path{fill:none;stroke:var(--ink-4);stroke-width:1.2;opacity:.9}
.arrows path.cross{stroke:var(--green);stroke-width:1.5}
.arrows path.prop{stroke-dasharray:4 3}
.arrows path.tight{stroke:var(--red);stroke-width:1.6}
.g-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);align-items:center}
.g-legend i{display:inline-block;vertical-align:middle;margin-right:6px}
.lg-bar{width:22px;height:10px;border-radius:3px;background:var(--s3,#1baf7a)}
.lg-dl{width:8px;height:8px;border:2px solid var(--ink);background:var(--surface);transform:rotate(45deg)}
.lg-slip{width:22px;height:10px;background:repeating-linear-gradient(135deg,var(--red) 0 3px,transparent 3px 6px)}
.lg-line{width:22px;height:0;border-top:1.5px solid var(--ink-4)} .lg-line.cross{border-color:var(--green)} .lg-line.prop{border-top-style:dashed} .lg-line.tight{border-color:var(--red)}
.lg-today{width:0;height:12px;border-left:2px solid var(--today)}

/* =====================================================================
   Фиока за задача · модал · тост
   ===================================================================== */
.overlay{position:fixed;inset:0;background:rgba(15,22,19,.32);z-index:40;backdrop-filter:blur(2px);animation:fade .18s var(--ease)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--surface);z-index:50;box-shadow:var(--sh-3);overflow:auto;display:flex;flex-direction:column;animation:slide .22s var(--ease)}
.drawer>*{flex-shrink:0}
@keyframes slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer .dh{position:sticky;top:0;z-index:2;background:var(--surface);padding:18px 22px 14px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}
.drawer .dh::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sc,var(--ink-3))}
.drawer .dh h2{font-size:18px;line-height:1.3;flex:1;letter-spacing:-.015em}
.drawer .dbody{padding:16px 22px 28px;display:flex;flex-direction:column;gap:16px}
.drawer .x{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:50%;width:34px;height:34px;display:grid;place-items:center;padding:0;flex:none;transition:background .15s}
.drawer .x:hover{background:var(--surface-2);color:var(--ink)}
.dsec{display:flex;flex-direction:column;gap:8px}
.dsec>h3{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.dsec>h3 .n{font-weight:600;color:var(--ink-3);letter-spacing:0;text-transform:none}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.f{display:flex;flex-direction:column;gap:5px}
.f label{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.f .v{font-size:13.5px;font-weight:500}
.f input,.f select,.f textarea{width:100%}
.segs{display:flex;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:var(--surface-2);padding:3px;gap:3px}
.segs button{flex:1;border:0;background:transparent;padding:8px 6px;font:600 13px/1.2 var(--display);color:var(--ink-2);border-radius:7px;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.segs button:hover{color:var(--ink)}
.segs button[aria-pressed=true]{background:var(--ink-2);color:#fff;box-shadow:var(--sh-1)}
.segs button.done[aria-pressed=true]{background:var(--green)} .segs button.progress[aria-pressed=true]{background:var(--blue)}
.deplist{display:flex;flex-direction:column;gap:5px}
.depi{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line-2);border-radius:9px;font-size:12.5px;cursor:pointer;transition:border-color .15s,background .15s;background:var(--surface)}
.depi:hover{background:var(--surface-2);border-color:var(--line-strong)}
.depi .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.depi .rm{border:0;background:transparent;color:var(--ink-4);padding:2px;display:grid;place-items:center;border-radius:6px}
.depi .rm:hover{color:var(--red);background:var(--red-soft)}
.note{font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border-radius:var(--r);padding:10px 12px;white-space:pre-wrap;line-height:1.5}
.risk{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--yellow-100);background:var(--yellow-soft);color:var(--ink);padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.5}
.risk .ic{color:var(--yellow-ink);margin-top:1px}
.risk.bad{border-color:var(--red-100);background:var(--red-soft)} .risk.bad .ic{color:var(--red)}
.risk.ok{border-color:var(--green-100);background:var(--green-soft)} .risk.ok .ic{color:var(--green-d)}
.risk.info{border-color:var(--blue-100);background:var(--blue-soft)} .risk.info .ic{color:var(--blue)}
details.acc{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1)}
details.acc summary{cursor:pointer;padding:14px 18px;font-family:var(--display);font-weight:700;display:flex;align-items:center;gap:10px;list-style:none;flex-wrap:wrap}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(-45deg);transition:transform .15s;margin:0 4px 0 2px}
details.acc[open] summary::before{transform:rotate(45deg)}
details.acc .body{padding:0 18px 16px}
details.acc summary .n{font-variant-numeric:tabular-nums;font-weight:700;background:var(--surface-3);border-radius:9px;padding:0 8px;font-size:12px;color:var(--ink-2);line-height:20px}
details.acc summary .desc{font-family:var(--font);font-weight:400;font-size:12.5px;color:var(--ink-3)}
.toast{position:fixed;right:24px;bottom:24px;background:var(--ink);color:#fff;padding:11px 16px;border-radius:12px;font-size:13.5px;z-index:70;box-shadow:var(--sh-3);display:flex;align-items:center;gap:10px;animation:toastin .25s var(--ease);max-width:min(420px,calc(100vw - 48px))}
.toast .ic{color:#6EE7A7}
.toast.error .ic{color:#FCA5A5}
@keyframes toastin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.info-box{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);background:var(--blue-soft);border:1px solid var(--blue-100);border-radius:12px;padding:12px 14px;line-height:1.5}
.info-box .ic{color:var(--blue);margin-top:1px}
.info-box b{color:var(--ink)}
.modal-host{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(15,22,19,.36);padding:16px;backdrop-filter:blur(2px);animation:fade .18s var(--ease)}
.modal{background:var(--surface);border-radius:16px;padding:22px 24px;width:min(680px,100%);max-height:90vh;overflow:auto;box-shadow:var(--sh-3);display:flex;flex-direction:column;gap:14px;animation:pop .2s var(--ease)}
@keyframes pop{from{transform:translateY(8px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.modal h2{font-size:18px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px}
.form .f.wide{grid-column:1/-1}
.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
.err{color:var(--red);font-size:13px}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:sp .8s linear infinite;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{padding:60px;text-align:center;color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:10px}
.subtabs{margin-bottom:14px}
.pw-note{font-size:12.5px;color:var(--ink-3)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.kv b{color:var(--ink-3);font-weight:600;font-family:var(--display);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;align-self:center}

/* коментари · прилози · чек-листа · историја */
.comments{display:flex;flex-direction:column;gap:10px}
.cmt{display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:13px}
.cmt .av{width:30px;height:30px;font-size:11px}
.cmt .bub{background:var(--surface-2);border-radius:4px 12px 12px 12px;padding:9px 12px}
.cmt .who{font-weight:600;font-size:12.5px;font-family:var(--display)}
.cmt .when{font-size:11px;color:var(--ink-3);margin-left:8px;font-variant-numeric:tabular-nums}
.cmt .txt{white-space:pre-wrap;margin-top:3px;line-height:1.5}
.att{display:flex;align-items:center;gap:10px;font-size:13px;padding:8px 10px;border:1px solid var(--line-2);border-radius:9px}
.att .ic{color:var(--ink-3)}
.att a{color:var(--ink);text-decoration:none;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .att a:hover{color:var(--blue)}
.att .rm{border:0;background:transparent;color:var(--ink-4);padding:2px;border-radius:6px;display:grid;place-items:center} .att .rm:hover{color:var(--red);background:var(--red-soft)}
.check{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13.5px}
.check input{accent-color:var(--green);width:17px;height:17px;flex:none}
.check.done span{color:var(--ink-3);text-decoration:line-through}
.check .rm{border:0;background:transparent;color:var(--ink-4);cursor:pointer;margin-left:auto;padding:2px;border-radius:6px;display:grid;place-items:center}
.check .rm:hover{color:var(--red);background:var(--red-soft)}
.hist{font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:0}
.hist>div{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.hist>div:last-child{border-bottom:0}
.hist .mono{color:var(--ink-3);font-family:var(--font);font-size:11.5px;font-variant-numeric:tabular-nums}
.assg{display:flex;flex-wrap:wrap;gap:6px}
.assg .tag{background:var(--blue-soft);color:var(--blue-d);border-radius:999px;padding:3px 6px 3px 4px;font-size:12.5px;display:inline-flex;gap:6px;align-items:center;font-weight:500}
.assg .tag .av{width:20px;height:20px;font-size:9px;background:var(--blue)}
.assg .tag button{border:0;background:transparent;color:inherit;cursor:pointer;padding:0;display:grid;place-items:center;border-radius:50%;width:18px;height:18px}
.assg .tag button:hover{background:var(--blue-100)}
.multisel{border:1px solid var(--line);border-radius:var(--r);padding:6px 8px;max-height:150px;overflow:auto;display:flex;flex-direction:column;gap:3px;background:var(--surface)}
.multisel label{display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer}
.multisel input{accent-color:var(--green)}

/* =====================================================================
   Најава
   ===================================================================== */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login .side{background:linear-gradient(160deg,#0B6F3C 0%,#0E8A4B 55%,#13A45A 100%);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login .side::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 10%,rgba(255,255,255,.16),transparent 60%),radial-gradient(50% 40% at 10% 90%,rgba(0,0,0,.18),transparent 60%)}
.login .side>*{position:relative}
.login .side .brandl{display:flex;align-items:center;gap:12px}
.login .side .brandl .mark{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;font:800 20px/1 var(--display)}
.login .side .brandl b{font:800 18px/1.1 var(--display)}
.login .side .brandl>span>span{display:block;font-size:12px;opacity:.8;letter-spacing:.08em;text-transform:uppercase;margin-top:3px;font-family:var(--display);font-weight:600}
.login .side h1{font-size:38px;line-height:1.1;letter-spacing:-.025em;max-width:520px;font-weight:800}
.login .side p{font-size:15px;opacity:.9;max-width:460px;line-height:1.55;margin:14px 0 0}
.login .side .facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px}
.login .side .facts b{display:block;font:800 26px/1 var(--display);letter-spacing:-.02em}
.login .side .facts span{font-size:12px;opacity:.8;font-family:var(--display);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.login .side .foot{font-size:12px;opacity:.7}
.login .pane{display:grid;place-items:center;padding:32px 24px}
.login .box{width:min(400px,100%);display:flex;flex-direction:column;gap:16px}
.login .box h2{font-size:24px;letter-spacing:-.02em}
.login .box .lead{color:var(--ink-2);margin:-8px 0 4px;font-size:14px}
.login .box .btn{padding:11px 16px;font-size:14.5px;justify-content:center;border-radius:10px;margin-top:4px}
.login .err{color:var(--red);font-size:13px;background:var(--red-soft);border:1px solid var(--red-100);padding:9px 12px;border-radius:9px}
@media (max-width:860px){.login{grid-template-columns:1fr}.login .side{padding:28px 24px;min-height:0}.login .side h1{font-size:26px}.login .side .facts{display:none}.login .side .foot{display:none}}

/* =====================================================================
   Маркети (проекти)
   ===================================================================== */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;display:flex;flex-direction:column;gap:12px;cursor:pointer;box-shadow:var(--sh-1);transition:box-shadow .18s var(--ease),transform .18s var(--ease),border-color .18s;position:relative;overflow:hidden}
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green)}
.pcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--line-strong)}
.pcard.archived::before{background:var(--ink-4)} .pcard.archived{opacity:.85}
.pcard h3{font-size:17px;letter-spacing:-.015em}
.pcard .big{font:800 30px/1 var(--display);letter-spacing:-.03em;color:var(--green-dd);font-variant-numeric:tabular-nums}
.pcard .big.bad{color:var(--red-d)}
.pcard .meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.pcard .meta b{color:var(--ink);font-weight:600}

/* шаблон */
.tpl-row{display:grid;grid-template-columns:96px 1fr 70px 140px 90px 170px;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line-2);cursor:pointer;font-size:13px;border-radius:8px}
.tpl-row:hover{background:var(--surface-2)}
.tpl-row.inactive{opacity:.5}
.tpl-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.tpl-head{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);cursor:default}
.tpl-head:hover{background:transparent}
@media (max-width:760px){.tpl-row{grid-template-columns:84px 1fr 56px}.tpl-row>:nth-child(n+4){display:none}}

/* известувања (паѓачко) */
.notifs{position:absolute;right:0;top:calc(100% + 8px);width:min(440px,calc(100vw - 32px));max-height:72vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);z-index:45}
.notifs .hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line-2);font-family:var(--display);font-weight:700;position:sticky;top:0;background:var(--surface)}
.notif{display:grid;grid-template-columns:34px 1fr;gap:10px;width:100%;text-align:left;padding:12px 16px;border:0;border-bottom:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;transition:background .15s}
.notif:hover{background:var(--surface-2)}
.notif.unread{background:var(--blue-soft)}
.notif .nic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface-3);color:var(--ink-2)}
.notif.unread .nic{background:var(--surface);color:var(--blue)}
.notif .t{font-weight:600;font-size:13px;line-height:1.35}
.notif .b{font-size:12.5px;color:var(--ink-2);white-space:pre-line;max-height:84px;overflow:hidden;margin-top:2px}
.notif .d{font-size:11px;color:var(--ink-3);margin-top:4px;font-variant-numeric:tabular-nums}

/* =====================================================================
   Респонзивно
   ===================================================================== */
@media (max-width:1100px){
  :root{--sbw:0px}
  .shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .hdr{padding:0 16px;gap:10px;height:58px;--hdrH:58px}
  .hdr .mob-only{display:grid}
  .hdr .timeline{display:none}
  main{padding:16px 16px 92px}
  .bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .bb-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:10px;text-decoration:none;color:var(--ink-3);font:600 10.5px/1 var(--display);position:relative;border:0;background:transparent}
  .bb-item .ic{width:22px;height:22px}
  .bb-item[aria-current=page]{color:var(--green-dd)} .bb-item[aria-current=page] .ic{color:var(--green)}
  .bb-item .badge{position:absolute;top:2px;right:calc(50% - 20px);background:var(--red);color:#fff;font:700 10px/16px var(--display);min-width:16px;padding:0 4px;border-radius:8px;text-align:center}
  .mob-sheet{position:fixed;inset:0;z-index:50;background:rgba(15,22,19,.36);display:flex;align-items:flex-end;animation:fade .18s}
  .mob-sheet .sheet{background:var(--surface);width:100%;border-radius:18px 18px 0 0;padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:var(--sh-3);max-height:80vh;overflow:auto;animation:up .22s var(--ease)}
  @keyframes up{from{transform:translateY(30px)}to{transform:none}}
  .mob-sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto 12px}
  .mob-sheet a,.mob-sheet button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border:0;background:transparent;border-radius:10px;color:var(--ink);text-decoration:none;font:600 14px/1.2 var(--display)}
  .mob-sheet a:hover,.mob-sheet button:hover,.mob-sheet a[aria-current=page]{background:var(--surface-2)}
  .mob-sheet .ic{color:var(--ink-3)}
  .mob-sheet .sep{border-top:1px solid var(--line-2);margin:6px 0}
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi{padding:14px;min-height:0} .kpi .v{font-size:24px} .kpi .ico{width:32px;height:32px}
  .card{padding:14px 14px;border-radius:12px}
  .tbl .name{max-width:240px}
  .drawer .dh{padding:14px 16px 12px} .drawer .dbody{padding:14px 16px 24px}
  .fgrid{grid-template-columns:1fr 1fr}
  .toast{left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));max-width:none}
  .trow{padding:10px 10px 10px 0}
  .trow .right{flex-direction:column;align-items:flex-end;gap:4px}
}
@media (max-width:480px){.fgrid{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.sidebar,.hdr,.bottombar,.toast{display:none!important}.shell{display:block}main{padding:0;max-width:none}.card{box-shadow:none;break-inside:avoid}}

/* ===================== v1.2 — улоги, подготовка, двостепено завршување ===================== */
.pill.review{background:var(--blue-soft);color:var(--blue-d);box-shadow:inset 0 0 0 1px var(--blue-100)}
.segs button.review[aria-pressed=true]{background:var(--blue-d)}
.role.coordinator{background:var(--green-soft);color:var(--green-dd)}
.sb-item .badge.warn{background:var(--yellow);color:var(--ink)}
.section-h.info{color:var(--blue-d)} .section-h.info .n{background:var(--blue-soft);color:var(--blue-d)}
.linkbtn{background:none;border:0;padding:0;color:var(--green-d);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--green-100)}
.linkbtn:hover{color:var(--green-dd)}
.box .ok{background:var(--green-soft);color:var(--green-dd);border:1px solid var(--green-100);border-radius:10px;padding:10px 12px;font-size:13px}
.btn.lg{padding:12px 20px;font-size:15px;border-radius:12px}
.trow.inactive,.tbl tr.inactive{opacity:.5}
.tbl tr.inactive td{text-decoration:none;font-style:italic}
.bar.review{background:repeating-linear-gradient(135deg,var(--sc,var(--ink-3)) 0 5px,color-mix(in srgb,var(--sc,var(--ink-3)) 55%,#fff) 5px 9px)}

/* потврди за завршување во фиоката */
.confirm-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--blue-soft);border:1px solid var(--blue-100);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--ink-2);margin-top:-4px}
.confirm-bar .ic{color:var(--blue-d);flex:none}
.confirm-bar>span{flex:1;min-width:160px}
.confirm-bar b{color:var(--ink)}

/* банер „во подготовка“ на панелот */
.plan-banner{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,var(--yellow-soft),#fff 70%);border:1px solid var(--yellow-100);border-radius:var(--r-lg);padding:14px 18px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.plan-banner.overdue{border-color:var(--red-soft);background:linear-gradient(135deg,var(--red-soft),#fff 70%)}
.plan-banner .pb-ic{width:36px;height:36px;border-radius:10px;background:var(--yellow);color:var(--ink);display:grid;place-items:center;flex:none}
.plan-banner.overdue .pb-ic{background:var(--red);color:#fff}
.plan-banner .pb-main{flex:1;min-width:220px}
.plan-banner .pb-main b{color:var(--ink)}
.plan-banner .pb-act{flex:none;display:flex;align-items:center}
@media(max-width:720px){.plan-banner{flex-wrap:wrap}.plan-banner .pb-act{width:100%}.plan-banner .pb-act .btn{width:100%;justify-content:center}}

/* страница Подготовка */
.plan-hero{display:flex;gap:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--sh-1);flex-wrap:wrap}
.plan-hero .ph-main{flex:1;min-width:260px}
.plan-hero h2{font-size:20px;letter-spacing:-.02em;margin:4px 0 8px}
.plan-hero p{font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:70ch}
.plan-hero p b{color:var(--ink)}
.plan-hero .ph-side{display:flex;gap:12px;align-items:stretch}
.ph-stat{display:flex;flex-direction:column;gap:2px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:14px;padding:12px 16px;min-width:130px}
.ph-stat .l{font:700 10.5px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ph-stat .v{font:800 26px/1.1 var(--display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:4px}
.ph-stat .s{font-size:12px;color:var(--ink-3)}
.ph-stat.bad{background:var(--red-soft);border-color:var(--red-soft)} .ph-stat.bad .v{color:var(--red-d)}
.ph-stat.good{background:var(--green-soft);border-color:var(--green-100)} .ph-stat.good .v{color:var(--green-dd)}
.conf-strip{display:flex;gap:8px;flex-wrap:wrap}
.conf-strip.compact{margin-top:8px}
.conf-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px 6px 8px;font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:all .15s var(--ease)}
.conf-chip.static{cursor:default;padding:4px 10px 4px 7px;font-size:12px}
.conf-chip i{width:9px;height:9px;border-radius:50%;background:var(--sc);flex:none}
.conf-chip .nm{font-weight:600;color:var(--ink)}
.conf-chip .cnt{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.conf-chip .st{display:inline-flex;align-items:center;gap:4px;font-size:11.5px}
.conf-chip.ok{background:var(--green-soft);border-color:var(--green-100)} .conf-chip.ok .st{color:var(--green-dd);font-weight:600}
.conf-chip.mine{box-shadow:0 0 0 2px var(--sc)}
.conf-chip:not(.static):hover{border-color:var(--line-strong);box-shadow:var(--sh-1)}
.plan-sec summary{border-left:4px solid var(--sc);border-radius:var(--r-lg) 0 0 var(--r-lg)}
.plan-sec summary .sum-l{display:flex;align-items:center;gap:10px;flex:1;min-width:0;flex-wrap:wrap}
.plan-sec summary .sum-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font);font-weight:400}
.conf-ok{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--green-dd);font-weight:600}
.conf-ok .ic{color:var(--green-d)} .conf-ok i{font-weight:400;color:var(--ink-3)}
.plan-head,.plan-row{display:grid;grid-template-columns:28px 78px minmax(0,1fr) 170px 56px 128px;gap:10px;align-items:center;padding:7px 8px;border-radius:8px}
.plan-head{font:700 10.5px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-2);border-radius:0;margin-top:4px}
.plan-grp{display:flex;justify-content:space-between;align-items:center;gap:10px;font:700 11px/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:12px 8px 4px}
.plan-row{cursor:pointer;font-size:13px;transition:background .12s}
.plan-row:hover{background:var(--surface-2)}
.plan-row input{width:16px;height:16px;accent-color:var(--green);cursor:pointer}
.plan-row .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.plan-row .who{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-row .dur,.plan-row .pdl{color:var(--ink-2);text-align:right}
.plan-row.off{opacity:.5} .plan-row.off .nm{text-decoration:line-through;text-decoration-color:var(--ink-4)}
.plan-row.off .pdl{visibility:hidden}
@media(max-width:820px){.plan-head{display:none}.plan-row{grid-template-columns:24px 66px minmax(0,1fr) 110px}.plan-row .who{display:none}.plan-row .dur{display:none}.plan-sec summary .sum-l{flex-basis:calc(100% - 24px)}.plan-sec summary .sum-r{padding-left:24px}details.acc .body{padding:0 8px 12px}}
.start-card{display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;border-color:var(--green-100);background:linear-gradient(135deg,var(--green-soft),#fff 60%)}
.start-card h2{display:flex;align-items:center;gap:8px}

/* картички на маркети: преглед по сектори */
.secline{display:flex;gap:6px;flex-wrap:wrap}
.secmini{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;padding:2px 8px 2px 6px;white-space:nowrap}
.secmini i{width:7px;height:7px;border-radius:50%;background:var(--sc)}
.secmini b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.secmini.ok{background:var(--green-soft);border-color:var(--green-100)} .secmini.ok b{color:var(--green-dd)}
.secmini.bad{background:var(--red-soft);border-color:var(--red-soft)} .secmini.bad b{color:var(--red-d)}
.secmini.rev{background:var(--blue-soft);border-color:var(--blue-100)} .secmini.rev b{color:var(--blue-d)}
.secmini.wait{background:var(--yellow-soft);border-color:var(--yellow-100)}
.secmini.mine{box-shadow:0 0 0 1.5px var(--sc)}
.pcard.planning::before{background:var(--yellow)}
.pcard .big.plan{color:var(--ink)}
.role-legend{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-2);margin:6px 0 12px;line-height:1.45}
.role-legend .role{margin-right:6px}
.tog.small{font-size:12.5px;color:var(--ink-2)}

/* v1.3 */
.plan-row .who.noasg{color:var(--yellow-ink);font-style:italic}
.replace-box{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end}
@media(max-width:720px){.replace-box{grid-template-columns:1fr}}

/* v1.4 — избирач на задачи, празници */
.picker{border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);box-shadow:var(--sh-2);margin-top:8px;overflow:hidden}
.pk-filters{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.pk-filters input{grid-column:1/-1}
.pk-list{max-height:260px;overflow:auto}
.pk-item{display:flex;gap:8px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-2);padding:7px 10px;font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer}
.pk-item:hover{background:var(--green-soft)}
.pk-item i{width:8px;height:8px;border-radius:50%;background:var(--sc);flex:none}
.pk-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-item .small{max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-canvas .hol{position:absolute;top:0;bottom:0;background:var(--weekend);background-image:repeating-linear-gradient(135deg,transparent 0 4px,rgba(0,0,0,.05) 4px 8px)}
.hol-list{font-family:var(--mono);font-size:12px;min-height:160px}