:root{
  --bg:#0b0d12;
  --ink:#0f1421;
  --ink-2:#1a2030;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e6e8ee;
  --brand:#5b5bf5;
  --brand-2:#7c5cff;
  --brand-3:#22d3ee;
  --accent:#10b981;
  --warn:#f59e0b;
  --rose:#f43f5e;
  --surface:#ffffff;
  --soft:#f7f8fb;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --shadow-md:0 10px 30px rgba(15,23,42,.08);
  --shadow-lg:0 30px 60px rgba(15,23,42,.15);
}

*{box-sizing:border-box}
html,body{padding:0;margin:0}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Navbar ---------- */
.stride-nav{
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(15,23,42,.06);
  padding:.85rem 0;
}
.brand-mark{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(91,91,245,.45);
  font-size:1.05rem;
}
.brand-text{font-weight:800;letter-spacing:-.02em;font-size:1.25rem;color:var(--ink)}
.navbar .nav-link{color:#334155;font-weight:500;font-size:.94rem;padding:.5rem .85rem !important}
.navbar .nav-link:hover{color:var(--brand)}

.btn-primary-stride{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border:0;color:#fff;font-weight:600;border-radius:10px;
  padding:.6rem 1.1rem; box-shadow:0 8px 20px rgba(91,91,245,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary-stride:hover{color:#fff;transform:translateY(-1px);box-shadow:0 12px 28px rgba(91,91,245,.45)}
.btn-outline-stride{
  border:1px solid var(--line); color:var(--ink); background:#fff; font-weight:600; border-radius:10px;
}
.btn-outline-stride:hover{border-color:var(--brand);color:var(--brand)}
.btn-ghost{background:transparent;color:var(--ink);font-weight:600;border-radius:10px}
.btn-ghost:hover{background:#f3f4f8;color:var(--ink)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:9rem 0 5rem;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(124,92,255,.12), transparent 50%),
    radial-gradient(ellipse at 85% 10%, rgba(34,211,238,.12), transparent 50%),
    #fbfbfe;
  overflow:hidden;
}
.hero-grid-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events:none;
}
.badge-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.4rem .85rem;
  font-size:.82rem;font-weight:500;color:#334155;
  box-shadow:var(--shadow-sm);
}
.badge-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(16,185,129,.18)}
.hero-title{
  font-weight:800; font-size:clamp(2.3rem, 4.6vw, 4rem);
  letter-spacing:-.035em; line-height:1.05; color:var(--ink);
}
.grad-text{
  background:linear-gradient(135deg,var(--brand),var(--brand-2) 50%, var(--brand-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{font-size:1.15rem;color:#475569;max-width:560px;margin-top:1.25rem;line-height:1.55}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.4rem;color:#475569;font-size:.9rem}
.hero-meta i{color:var(--accent);margin-right:.35rem}

/* hero card */
.hero-card{
  background:#fff;border-radius:18px;border:1px solid var(--line);
  box-shadow:var(--shadow-lg); overflow:hidden;
  transform:perspective(1400px) rotateY(-4deg) rotateX(2deg);
}
.hero-card-header{
  display:flex;align-items:center;gap:.4rem;
  padding:.75rem 1rem;background:#f7f8fb;border-bottom:1px solid var(--line);
}
.hero-card-header .dot-r,.dot-y,.dot-g{width:11px;height:11px;border-radius:50%}
.dot-r{background:#ff5f57}.dot-y{background:#febc2e}.dot-g{background:#28c840}
.hero-card-title{margin-left:.75rem;font-family:'JetBrains Mono',monospace;font-size:.8rem;color:#64748b}
.kanban{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;padding:1rem;background:#fafbfd}
.kanban-col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem;min-height:260px}
.kanban-head{display:flex;justify-content:space-between;font-size:.78rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.6rem}
.kanban-head span{background:#eef0f5;color:#475569;border-radius:999px;padding:0 .5rem}
.kanban-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.65rem;margin-bottom:.55rem;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:transform .15s ease,box-shadow .15s ease}
.kanban-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kanban-card.active{border-color:rgba(91,91,245,.5);box-shadow:0 0 0 3px rgba(91,91,245,.12)}
.kanban-card p{font-size:.85rem;margin:.35rem 0;color:var(--ink);font-weight:500}
.kanban-card .meta{font-size:.72rem;color:#64748b;font-family:'JetBrains Mono',monospace}
.tag{display:inline-block;font-size:.65rem;font-weight:800;padding:.2rem .5rem;border-radius:5px;letter-spacing:.05em}
.tag-blue{background:linear-gradient(135deg,#dbeafe,#e0e7ff);color:#3730a3;box-shadow:inset 0 0 0 1px rgba(99,102,241,.15)}
.tag-purple{background:linear-gradient(135deg,#ede9fe,#fae8ff);color:#6b21a8;box-shadow:inset 0 0 0 1px rgba(168,85,247,.2)}
.tag-orange{background:linear-gradient(135deg,#ffedd5,#fee2e2);color:#9a3412;box-shadow:inset 0 0 0 1px rgba(239,68,68,.2)}
.kanban-card.pr{border-color:rgba(16,185,129,.4);background:linear-gradient(180deg,#f0fdf4,#fff)}
.pr-head{font-size:.78rem;font-weight:600;color:#047857;font-family:'JetBrains Mono',monospace}
.kanban-card .check{color:#047857}

/* logos */
.logo-bar{border-top:1px solid var(--line)}
.logo-text{font-weight:700;color:#64748b;letter-spacing:-.01em;font-size:1.05rem}

/* ---------- Sections ---------- */
.section{padding:6rem 0;position:relative}
.section-soft{background:#fafbfd;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-dark{background:radial-gradient(ellipse at top, #1a2030, #0b0d12 70%);color:#fff;border-radius:32px;margin:2rem 1rem}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.75rem}
.eyebrow.light{color:#a5b4fc}
.section-title{font-size:clamp(1.9rem,3vw,2.6rem);font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.section-sub{color:#475569;font-size:1.05rem;margin-top:.75rem}
.section-dark .section-sub{color:#cbd5e1}

/* feature cards */
.feature-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:1.75rem;height:100%;transition:all .2s ease;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(91,91,245,.25)}
.feature-icon{
  width:48px;height:48px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  font-size:1.35rem;margin-bottom:1rem;
}
.icon-indigo{background:#eef2ff;color:#4f46e5}
.icon-emerald{background:#ecfdf5;color:#059669}
.icon-rose{background:#fff1f2;color:#e11d48}
.icon-amber{background:#fffbeb;color:#d97706}
.icon-cyan{background:#ecfeff;color:#0891b2}
.icon-violet{background:#f5f3ff;color:#7c3aed}
.feature-card h5{font-weight:700;color:var(--ink);margin-bottom:.5rem}
.feature-card p{color:#64748b;font-size:.94rem;margin:0;line-height:1.55}

/* check list */
.check-list{list-style:none;padding:0;margin:0;color:#e2e8f0}
.check-list li{padding:.45rem 0;font-size:1rem;display:flex;align-items:center;gap:.65rem}
.check-list i{color:var(--brand-3)}

/* PR card */
.pr-card{
  background:#0f1421;border:1px solid rgba(255,255,255,.08);border-radius:16px;
  padding:1.5rem;color:#cbd5e1;box-shadow:var(--shadow-lg);
}
.pr-card-head{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:.78rem}
.pr-status{background:rgba(16,185,129,.15);color:#34d399;padding:.2rem .6rem;border-radius:6px;font-weight:600}
.pr-branch{color:#94a3b8}
.pr-title{color:#fff;font-weight:700;margin:1rem 0 .35rem;font-size:1.15rem}
.pr-meta{font-size:.85rem;color:#94a3b8;margin-bottom:1rem}
.diff{background:#0a0e18;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:.85rem;font-family:'JetBrains Mono',monospace;font-size:.82rem;line-height:1.7}
.diff-line.file{color:#94a3b8;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:.35rem;margin-bottom:.35rem}
.diff-line.add{color:#86efac;background:rgba(16,185,129,.07);padding-left:.4rem;border-left:2px solid #10b981}
.diff-line.del{color:#fca5a5;background:rgba(244,63,94,.07);padding-left:.4rem;border-left:2px solid #f43f5e}
.checks{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.check{display:inline-flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.05);padding:.3rem .6rem;border-radius:6px;font-size:.78rem;color:#cbd5e1}
.check.ok i{color:#34d399}
.pr-actions{display:flex;gap:.5rem;margin-top:.5rem}
.btn-merge{background:#7c5cff;color:#fff;border:0;font-weight:600;border-radius:8px;padding:.55rem 1rem}
.btn-merge:hover{background:#6d49ff;color:#fff}
.btn-ghost-light{background:transparent;color:#cbd5e1;border:1px solid rgba(255,255,255,.15);font-weight:500;border-radius:8px;padding:.55rem 1rem}
.btn-ghost-light:hover{background:rgba(255,255,255,.06);color:#fff}

/* stats */
.stat-num{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{color:#64748b;font-weight:500;margin-top:.25rem}

/* quote */
.quote-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:2rem;height:100%;box-shadow:var(--shadow-sm);position:relative}
.quote-mark{position:absolute;top:1rem;right:1.25rem;font-size:3rem;color:#e0e7ff}
.quote-text{font-size:1.1rem;line-height:1.55;color:var(--ink);font-weight:500}
.quote-author{display:flex;align-items:center;gap:.75rem;margin-top:1.25rem}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#5b5bf5,#7c5cff);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.avatar-2{background:linear-gradient(135deg,#10b981,#22d3ee)}

/* pricing */
.price-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:2rem;height:100%;position:relative;transition:all .2s ease}
.price-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.price-card.featured{border-color:transparent;background:linear-gradient(180deg,#fff,#fff) padding-box, linear-gradient(135deg,var(--brand),var(--brand-2)) border-box;border:2px solid transparent;box-shadow:var(--shadow-md)}
.popular{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:.7rem;font-weight:700;padding:.3rem .75rem;border-radius:999px;letter-spacing:.08em}
.plan-name{text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:#64748b;font-weight:700}
.price{font-size:2.5rem;font-weight:800;color:var(--ink);margin:.5rem 0;letter-spacing:-.03em}
.price small{font-size:.95rem;color:#64748b;font-weight:500}
.price-card ul{list-style:none;padding:0;margin:1.25rem 0 1.5rem}
.price-card li{padding:.4rem 0;color:#334155;font-size:.94rem}
.price-card li i{color:var(--accent);margin-right:.4rem}

/* cta */
.cta-banner{
  background:linear-gradient(135deg,#5b5bf5,#7c5cff 60%, #22d3ee);
  color:#fff;border-radius:24px;padding:3rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;
  box-shadow:0 30px 60px rgba(91,91,245,.35);
}
.cta-banner h3{font-weight:800;letter-spacing:-.02em}
.cta-banner .btn-light{font-weight:600;border-radius:10px;color:var(--ink)}
.cta-banner .btn-outline-light{font-weight:600;border-radius:10px;border-width:1.5px}

/* footer */
.footer{padding:4rem 0 2rem;background:#fafbfd;border-top:1px solid var(--line);margin-top:2rem}
.footer h6{font-weight:700;color:var(--ink);margin-bottom:1rem;font-size:.9rem}
.footer ul{list-style:none;padding:0;margin:0}
.footer ul li{margin-bottom:.5rem}
.footer ul a{color:#64748b;text-decoration:none;font-size:.9rem}
.footer ul a:hover{color:var(--brand)}
.footer-divider{margin:2.5rem 0 1.25rem;border-color:var(--line)}

/* ---------- AUTH ---------- */
.auth-body{background:#fafbfd;min-height:100vh;margin:0}
.auth-shell{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}
@media (max-width: 991px){.auth-shell{grid-template-columns:1fr}.auth-left{display:none}}

.auth-left{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at top left, rgba(124,92,255,.45), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(34,211,238,.35), transparent 55%),
    #0b0d12;
  color:#fff;padding:3.5rem;
}
.auth-left-inner{position:relative;z-index:2;max-width:520px}
.auth-left-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
.mini-pr{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1rem 1.1rem;backdrop-filter:blur(10px)}
.mini-pr-head{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:#34d399;font-weight:600;margin-bottom:.5rem}
.mini-line{display:flex;align-items:center;gap:.55rem;font-size:.92rem;color:#e2e8f0;padding:.25rem 0}
.add-dot{width:8px;height:8px;border-radius:2px;background:#10b981}
.check-dot{width:18px;height:18px;border-radius:50%;background:rgba(16,185,129,.25);color:#34d399;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem}
.auth-bullets{list-style:none;padding:0;color:#cbd5e1}
.auth-bullets li{padding:.4rem 0;font-size:.95rem;display:flex;align-items:center;gap:.6rem}
.auth-bullets i{color:#a5b4fc}

.auth-right{display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem;background:#fff}
.auth-form-wrap{width:100%;max-width:420px}
.auth-title{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:.25rem}
.link-stride{color:var(--brand);font-weight:600;text-decoration:none}
.link-stride:hover{text-decoration:underline}

.btn-sso{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600;border-radius:10px;padding:.65rem .9rem;transition:all .15s ease}
.btn-sso:hover{border-color:var(--brand);color:var(--brand);background:#fafbff}

.divider{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0;color:#94a3b8;font-size:.82rem}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

.form-label{font-weight:600;color:var(--ink);font-size:.88rem;margin-bottom:.4rem}
.input-wrap{position:relative}
.input-wrap > i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:1rem;pointer-events:none}
.form-control-stride{
  border:1px solid var(--line);border-radius:10px;padding:.75rem .95rem .75rem 2.5rem;
  font-size:.95rem;background:#fff;transition:all .15s ease;
}
.form-control-stride:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(91,91,245,.12);outline:none}
.pw-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:0;color:#64748b;padding:.4rem .6rem;border-radius:6px}
.pw-toggle:hover{color:var(--brand);background:#f3f4f8}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.invalid-feedback-stride{color:var(--rose);font-size:.82rem;margin-top:.35rem;display:none}
.is-invalid + .invalid-feedback-stride, .invalid-feedback-stride.show{display:block}
.form-control-stride.is-invalid{border-color:var(--rose)}
.form-control-stride.is-invalid:focus{box-shadow:0 0 0 4px rgba(244,63,94,.12)}

/* ---------- Employee 360 card ---------- */
.employee-360{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.5rem;box-shadow:var(--shadow-md)}
.emp-head{display:flex;align-items:center;gap:1rem}
.emp-avatar{width:58px;height:58px;border-radius:14px;background:linear-gradient(135deg,#5b5bf5,#22d3ee);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.25rem}
.emp-name{font-weight:700;color:var(--ink);font-size:1.1rem}
.emp-badge{font-size:.7rem;font-weight:600;background:#eef2ff;color:#4f46e5;padding:.15rem .5rem;border-radius:6px;margin-left:.4rem;letter-spacing:.04em}
.emp-sub{color:#64748b;font-size:.85rem}
.emp-score{text-align:right}
.emp-score-num{font-size:1.7rem;font-weight:800;color:var(--brand);letter-spacing:-.02em}
.emp-score-num small{font-size:.85rem;color:#94a3b8;font-weight:600}
.emp-score-label{font-size:.72rem;color:#64748b;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.emp-stat{background:#fafbfd;border:1px solid var(--line);border-radius:10px;padding:.75rem;text-align:center}
.emp-stat-num{font-size:1.35rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.emp-stat-label{font-size:.72rem;color:#64748b;margin-top:.15rem}
.emp-section{margin-top:1.25rem;border-top:1px solid var(--line);padding-top:1rem}
.emp-section-title{font-size:.78rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem}
.emp-section-title i{color:var(--brand);margin-right:.35rem}
.emp-row{display:flex;justify-content:space-between;align-items:center;padding:.45rem 0;font-size:.9rem;color:var(--ink);border-bottom:1px dashed #eef0f5}
.emp-row:last-child{border-bottom:0}
.emp-tag{font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:5px;letter-spacing:.04em}
.emp-val{color:#475569;font-weight:600;font-size:.88rem}

/* ---------- App Shell (dashboard/kanban/repo/pr) ---------- */
.app-body{background:#f5f6fa;margin:0;min-height:100vh;font-family:'Inter',sans-serif;color:var(--text)}
.app-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
@media(max-width:991px){.app-shell{grid-template-columns:1fr}.app-sidebar{display:none}}
.app-sidebar{background:#0f1421;color:#cbd5e1;padding:1.25rem 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.app-sidebar .brand-text{color:#fff}
.app-sb-brand{display:flex;align-items:center;padding:0 1.25rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:1rem}
.app-sb-section{font-size:.7rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.1em;padding:.75rem 1.25rem .35rem}
.app-sb-link{display:flex;align-items:center;gap:.7rem;padding:.55rem 1.25rem;color:#cbd5e1;text-decoration:none;font-size:.92rem;font-weight:500;border-left:3px solid transparent;transition:all .15s}
.app-sb-link i{font-size:1.05rem;width:18px;text-align:center;color:#94a3b8}
.app-sb-link:hover{background:rgba(255,255,255,.04);color:#fff}
.app-sb-link.active{background:rgba(91,91,245,.15);color:#fff;border-left-color:var(--brand)}
.app-sb-link.active i{color:#a5b4fc}
.app-sb-foot{margin-top:auto;padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:.65rem;font-size:.85rem}
.app-sb-foot .avatar{width:32px;height:32px;font-size:.78rem;border-radius:8px}
.app-main{display:flex;flex-direction:column;min-width:0}
.app-topbar{background:#fff;border-bottom:1px solid var(--line);padding:.75rem 1.5rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:10}
.app-search{flex-grow:1;max-width:480px;position:relative}
.app-search input{width:100%;border:1px solid var(--line);border-radius:9px;padding:.5rem .85rem .5rem 2.2rem;font-size:.9rem;background:#fafbfd}
.app-search input:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(91,91,245,.1)}
.app-search i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:#94a3b8}
.app-topbar .icon-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:#fff;color:#475569;display:inline-flex;align-items:center;justify-content:center;font-size:1rem}
.app-topbar .icon-btn:hover{color:var(--brand);border-color:var(--brand)}
.app-content{padding:1.75rem;flex-grow:1}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.page-title{font-size:1.65rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0}
.page-sub{color:#64748b;margin:.25rem 0 0;font-size:.95rem}

/* KPI cards */
.kpi-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.25rem;height:100%}
.kpi-label{font-size:.78rem;color:#64748b;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.kpi-val{font-size:1.85rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:.35rem 0 .15rem}
.kpi-delta{font-size:.82rem;font-weight:600}
.kpi-delta.up{color:#059669}.kpi-delta.down{color:#dc2626}
.kpi-icon{float:right;width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem}

/* Panel */
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.25rem}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.panel-title{font-weight:700;color:var(--ink);font-size:1rem;margin:0}
.panel-link{font-size:.82rem;color:var(--brand);text-decoration:none;font-weight:600}

/* Chart bars (CSS-only) */
.bars{display:flex;align-items:flex-end;gap:.6rem;height:160px;padding:.5rem 0}
.bar{flex:1;background:linear-gradient(180deg,var(--brand),var(--brand-2));border-radius:6px 6px 0 0;position:relative;min-height:8px;opacity:.85}
.bar.alt{background:linear-gradient(180deg,#22d3ee,#0891b2)}
.bars-x{display:flex;gap:.6rem;font-size:.72rem;color:#94a3b8;margin-top:.25rem}
.bars-x span{flex:1;text-align:center}

/* Activity list */
.act-item{display:flex;gap:.85rem;padding:.7rem 0;border-bottom:1px dashed #eef0f5;font-size:.9rem}
.act-item:last-child{border:0}
.act-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem}
.act-time{color:#94a3b8;font-size:.78rem;margin-top:.15rem}

/* Kanban full */
.kanban-full{display:grid;grid-template-columns:repeat(4,minmax(260px,1fr));gap:1rem;overflow-x:auto;padding-bottom:1rem}
.kcol{background:#eef0f5;border-radius:12px;padding:.85rem;min-height:500px}
.kcol-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.kcol-title{font-weight:700;color:#334155;font-size:.88rem;display:flex;align-items:center;gap:.5rem}
.kcol-count{background:#fff;color:#64748b;font-size:.72rem;padding:.1rem .55rem;border-radius:999px;font-weight:600}
.kdot{width:9px;height:9px;border-radius:50%}
.kdot.gray{background:#94a3b8}.kdot.blue{background:#5b5bf5}.kdot.amber{background:#f59e0b}.kdot.green{background:#10b981}
.kcard{background:#fff;border-radius:9px;padding:.75rem;margin-bottom:.6rem;box-shadow:0 1px 2px rgba(15,23,42,.04);cursor:pointer;transition:transform .15s,box-shadow .15s}
.kcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kcard-title{font-size:.88rem;font-weight:600;color:var(--ink);margin:.35rem 0}
.kcard-meta{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;color:#64748b;font-family:'JetBrains Mono',monospace}
.kcard-foot{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}
.kbadges{display:flex;gap:.3rem;align-items:center;font-size:.74rem;color:#64748b}
.kbadges i{margin-right:.15rem}
.mini-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#5b5bf5,#7c5cff);color:#fff;font-size:.7rem;display:inline-flex;align-items:center;justify-content:center;font-weight:600;border:2px solid #fff}
.mini-avatar.g{background:linear-gradient(135deg,#10b981,#22d3ee)}
.mini-avatar.r{background:linear-gradient(135deg,#f43f5e,#f59e0b)}

/* Repo */
.repo-tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line);margin-bottom:1.25rem}
.repo-tab{padding:.65rem 1rem;font-size:.88rem;font-weight:600;color:#64748b;text-decoration:none;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:.45rem}
.repo-tab i{font-size:.95rem}
.repo-tab.active{color:var(--ink);border-bottom-color:var(--brand)}
.repo-tab:hover{color:var(--ink)}
.repo-tab .count{background:#eef0f5;color:#475569;font-size:.7rem;padding:.05rem .45rem;border-radius:999px;font-weight:600}
.file-row{display:grid;grid-template-columns:24px 1fr 2fr 100px;gap:.75rem;padding:.65rem .9rem;border-top:1px solid var(--line);font-size:.88rem;align-items:center}
.file-row:first-child{border-top:0}
.file-row:hover{background:#fafbfd}
.file-row i{color:#64748b}
.file-row .fname{color:var(--ink);font-weight:500;text-decoration:none}
.file-row .fname:hover{color:var(--brand)}
.file-row .fmsg{color:#64748b;font-size:.82rem}
.file-row .ftime{color:#94a3b8;font-size:.78rem;text-align:right}
.repo-head-row{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;background:#fafbfd;border:1px solid var(--line);border-radius:12px 12px 0 0;font-size:.88rem}
.repo-files{border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:#fff;overflow:hidden}
.branch-pill{background:#fff;border:1px solid var(--line);padding:.3rem .65rem;border-radius:7px;font-size:.82rem;font-family:'JetBrains Mono',monospace;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem}

/* PR detail */
.pr-detail-head{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem;margin-bottom:1.25rem}
.pr-status-pill{display:inline-flex;align-items:center;gap:.35rem;background:#dcfce7;color:#15803d;padding:.3rem .7rem;border-radius:999px;font-size:.78rem;font-weight:700}
.pr-detail-title{font-size:1.4rem;font-weight:700;color:var(--ink);margin:.5rem 0 .25rem;letter-spacing:-.015em}
.pr-detail-meta{color:#64748b;font-size:.88rem}
.pr-detail-meta strong{color:var(--ink)}
.pr-tabbar{display:flex;gap:.25rem;margin-top:1rem;border-bottom:1px solid var(--line);margin-bottom:-.5rem}
.diff-file{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:1rem;overflow:hidden}
.diff-file-head{padding:.65rem 1rem;background:#fafbfd;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:.82rem;color:#334155}
.diff-file-head .stats{font-size:.78rem;color:#64748b}
.diff-file-head .stats .add{color:#059669}.diff-file-head .stats .del{color:#dc2626}
.diff-body{font-family:'JetBrains Mono',monospace;font-size:.82rem;line-height:1.6}
.diff-row{display:grid;grid-template-columns:50px 50px 1fr;padding:0;border-top:1px solid #f1f3f7}
.diff-row .ln{color:#94a3b8;text-align:right;padding:.1rem .6rem;background:#fafbfd;user-select:none;font-size:.78rem}
.diff-row code{padding:.1rem .75rem;white-space:pre;color:#334155}
.diff-row.add{background:#f0fdf4}
.diff-row.add code{color:#166534}
.diff-row.add .ln{background:#dcfce7;color:#16a34a}
.diff-row.del{background:#fef2f2}
.diff-row.del code{color:#991b1b}
.diff-row.del .ln{background:#fee2e2;color:#dc2626}
.diff-row.hunk{background:#eef2ff;color:#4f46e5;font-weight:600}
.diff-row.hunk code{color:#4338ca}
.review-thread{background:#fafbfd;border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;margin:.5rem 1rem 1rem;font-family:'Inter',sans-serif;font-size:.88rem}
.review-thread .author{font-weight:700;color:var(--ink);font-size:.85rem}
.review-thread .text{color:#334155;margin-top:.25rem}
.merge-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.25rem}
.check-row{display:flex;align-items:center;gap:.65rem;padding:.55rem 0;border-bottom:1px dashed #eef0f5;font-size:.88rem}
.check-row:last-child{border:0}
.check-row .ok{color:#059669}
.check-row .pending{color:#d97706}

/* ---------- Story-grouped Kanban (parent: user story, child: tasks) ---------- */
.story-board{display:flex;flex-direction:column;gap:18px}
.story-group{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 16px -8px rgba(30,41,90,.15);overflow:hidden;position:relative}
.story-group::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#6366f1,#a855f7,#ec4899);z-index:1}
.story-group:nth-child(3n+2)::before{background:linear-gradient(180deg,#06b6d4,#3b82f6,#6366f1)}
.story-group:nth-child(3n+3)::before{background:linear-gradient(180deg,#f59e0b,#ef4444,#ec4899)}
.story-head{display:flex;align-items:center;gap:.85rem;padding:1rem 1.15rem 1rem 1.4rem;cursor:pointer;background:linear-gradient(120deg,#f5f3ff 0%,#eef2ff 40%,#ecfeff 100%);border-bottom:1px solid var(--line);user-select:none;transition:filter .2s}
.story-group:nth-child(3n+2) .story-head{background:linear-gradient(120deg,#ecfeff 0%,#eff6ff 50%,#eef2ff 100%)}
.story-group:nth-child(3n+3) .story-head{background:linear-gradient(120deg,#fff7ed 0%,#fef2f2 50%,#fdf2f8 100%)}
.story-head:hover{filter:brightness(1.02)}
.story-chev{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:#6366f1;transition:transform .2s;background:#fff;border-radius:7px;box-shadow:0 2px 6px rgba(99,102,241,.25)}
.story-group.collapsed .story-chev{transform:rotate(-90deg)}
.story-group.collapsed .story-body{display:none}
.story-key{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:#4338ca;background:#fff;padding:.22rem .55rem;border-radius:6px;font-weight:700;box-shadow:0 1px 3px rgba(67,56,202,.2)}
.story-title{font-weight:700;color:var(--ink);font-size:1rem;flex:1;min-width:0}
.story-meta{display:flex;align-items:center;gap:.55rem;color:#475569;font-size:.82rem;flex-wrap:wrap}
.story-meta > span{background:rgba(255,255,255,.75);padding:.22rem .55rem;border-radius:6px;font-weight:600;backdrop-filter:blur(4px)}
.story-progress{height:8px;width:140px;background:rgba(255,255,255,.8);border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.story-progress > span{display:block;height:100%;background:linear-gradient(90deg,#10b981,#06b6d4,#6366f1);border-radius:99px;box-shadow:0 0 8px rgba(99,102,241,.5)}
.story-body{padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:linear-gradient(180deg,#fafbff,#f4f6fc)}
.tcol{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.85rem;min-height:120px;display:flex;flex-direction:column;gap:.6rem;transition:box-shadow .2s}
.tcol:hover{box-shadow:0 6px 16px -8px rgba(30,41,90,.2)}
.tcol[data-status="new"]{background:linear-gradient(180deg,#f8fafc,#fff);border-top:3px solid #94a3b8}
.tcol[data-status="active"]{background:linear-gradient(180deg,#eff6ff,#fff);border-top:3px solid #3b82f6}
.tcol[data-status="closed"]{background:linear-gradient(180deg,#ecfdf5,#fff);border-top:3px solid #10b981}
.tcol-head{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#334155;padding:.15rem .2rem .55rem;border-bottom:1px dashed #e2e8f0}
.tcol-head .kdot{margin-right:.45rem;width:10px;height:10px}
.tcol[data-status="new"] .kcol-count{background:#f1f5f9;color:#475569}
.tcol[data-status="active"] .kcol-count{background:#dbeafe;color:#1e40af}
.tcol[data-status="closed"] .kcol-count{background:#d1fae5;color:#065f46}
.kcol-count{font-size:.72rem;padding:.15rem .6rem;border-radius:999px;font-weight:700}
.tcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;box-shadow:0 2px 6px -3px rgba(30,41,90,.12);font-size:.86rem;cursor:grab;transition:transform .15s, box-shadow .15s, opacity .15s;border-left:3px solid #a855f7}
.tcard:active{cursor:grabbing}
.tcard.dragging{opacity:.45;transform:rotate(-1.5deg)}
.tcol.drop-target{background:linear-gradient(180deg,#eef2ff,#fff);border:2px dashed #6366f1;padding:calc(.85rem - 1px)}
.tcard:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(99,102,241,.4)}
.tcol[data-status="active"] .tcard{border-left-color:#3b82f6}
.tcol[data-status="closed"] .tcard{border-left-color:#10b981;background:linear-gradient(180deg,#f0fdf4,#fff)}
.tcard:has(.tag-orange){border-left-color:#ef4444}
.tcard:has(.tag-blue){border-left-color:#06b6d4}
.tcard .ttitle{font-weight:600;color:var(--ink);margin:.35rem 0 .45rem;line-height:1.35}
.tcard .tfoot{display:flex;align-items:center;justify-content:space-between;color:#64748b;font-size:.76rem;font-weight:600}
.tcard .mini-avatar{width:24px;height:24px;font-size:.66rem;box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.15)}
.tcard small{color:#6366f1;font-weight:700;background:#eef2ff;padding:.12rem .45rem;border-radius:5px;font-size:.7rem}
.add-task{background:transparent;border:1.5px dashed #cbd5e1;border-radius:8px;padding:.55rem;color:#64748b;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s;margin-top:auto}
.add-task:hover{border-color:#6366f1;color:#6366f1;background:rgba(99,102,241,.06)}
@media (max-width: 900px){ .story-body{grid-template-columns:1fr} }

/* ===== Kanban: story card column ===== */
.story-body{grid-template-columns:260px repeat(3,1fr)}
@media (max-width: 1200px){ .story-body{grid-template-columns:220px repeat(3,1fr)} }
@media (max-width: 900px){ .story-body{grid-template-columns:1fr} }
.scol{display:flex;flex-direction:column;gap:.6rem}
.scard{background:linear-gradient(160deg,#ffffff,#f7f5ff);border:1px solid #e3e0f7;border-left:4px solid #6366f1;border-radius:12px;padding:.9rem;cursor:pointer;transition:transform .15s,box-shadow .2s;box-shadow:0 4px 14px -10px rgba(49,46,129,.5)}
.scard:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(49,46,129,.7);border-left-color:#a855f7}
.story-group:nth-child(3n+2) .scard{border-left-color:#0ea5e9;background:linear-gradient(160deg,#fff,#f2fbff)}
.story-group:nth-child(3n+3) .scard{border-left-color:#f59e0b;background:linear-gradient(160deg,#fff,#fff8f1)}
.scard-key{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;color:#6366f1}
.scard-title{font-weight:700;color:var(--ink);font-size:.92rem;line-height:1.35;margin:.4rem 0 .55rem}
.scard-title:hover{text-decoration:underline}
.scard-stats{display:flex;flex-wrap:wrap;gap:.35rem;font-size:.72rem;color:#475569}
.scard-stats span{background:#f1f5f9;border-radius:6px;padding:.18rem .45rem;font-weight:600}
.scard-bar{height:6px;border-radius:99px;background:#e9e9f5;overflow:hidden;margin:.6rem 0 .5rem}
.scard-bar > span{display:block;height:100%;background:linear-gradient(90deg,#10b981,#06b6d4,#6366f1)}
.scol-head{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;padding:.15rem .2rem .5rem;border-bottom:1px dashed #e2e8f0}

/* ===== Burndown mini chart ===== */
.sprint-strip{display:grid;grid-template-columns:minmax(210px,.8fr) 2fr;gap:14px;margin:-.5rem 0 1.25rem}
@media (max-width:991px){.sprint-strip{grid-template-columns:1fr}}
.strip-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.strip-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.55rem .7rem;display:flex;flex-direction:column;gap:.1rem}
.strip-stat span{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;font-weight:700}
.strip-stat b{font-size:1.05rem;font-weight:800;color:var(--ink)}
.burn-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;box-shadow:0 6px 18px -12px rgba(30,41,90,.4)}
.burn-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.15rem}
.burn-toggle{display:inline-flex;background:#f1f5f9;border-radius:99px;padding:2px}
.burn-toggle button{border:none;background:transparent;font-size:.7rem;font-weight:700;color:#64748b;padding:.2rem .6rem;border-radius:99px}
.burn-toggle button.active{background:#fff;color:#4f46e5;box-shadow:0 1px 4px rgba(15,23,42,.12)}
.burn-wrap{position:relative}
.burn-wrap svg{cursor:crosshair;display:block}
.burn-dot{transition:r .12s ease}
.burn-tip{position:absolute;transform:translate(-50%,-100%);background:#0f172a;color:#fff;border-radius:10px;padding:.45rem .6rem;font-size:.7rem;line-height:1.35;pointer-events:none;opacity:0;transition:opacity .12s ease;white-space:nowrap;z-index:5;display:flex;flex-direction:column;gap:1px}
.burn-tip.show{opacity:1}
.burn-tip b{font-size:.72rem}
.burn-tip i{font-style:normal;display:inline-block;width:8px;height:3px;border-radius:2px;margin-right:.35rem;vertical-align:middle}
.burn-tip .ok{color:#4ade80;font-weight:700}
.burn-tip .bad{color:#fca5a5;font-weight:700}
.burn-card h6{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#64748b;font-weight:800;margin:0 0 .15rem}
.burn-legend{display:flex;gap:.7rem;font-size:.68rem;color:#64748b;font-weight:600;margin-top:.15rem}
.burn-legend i{font-style:normal;display:inline-block;width:10px;height:3px;border-radius:2px;vertical-align:middle;margin-right:.25rem}

/* ===== Capacity planning (sprints) ===== */
.cap-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem;box-shadow:0 6px 18px -12px rgba(30,41,90,.35)}
.cap-row{display:grid;grid-template-columns:1.4fr repeat(4,minmax(70px,.7fr)) 1.6fr;gap:.75rem;align-items:center;padding:.6rem 0;border-bottom:1px dashed #eef2f7}
.cap-row:last-child{border-bottom:none}
.cap-head{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#64748b;font-weight:800}
.cap-bar{height:10px;border-radius:99px;background:#eef2f7;overflow:hidden;position:relative}
.cap-bar > span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#10b981,#06b6d4)}
.cap-bar.warn > span{background:linear-gradient(90deg,#f59e0b,#f97316)}
.cap-bar.over > span{background:linear-gradient(90deg,#ef4444,#ec4899)}
.cap-inp{width:70px;border:1px solid var(--line);border-radius:8px;padding:.3rem .45rem;font-size:.85rem;font-weight:600;color:var(--ink)}
.cap-inp:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.cap-pill{font-size:.72rem;font-weight:700;padding:.2rem .5rem;border-radius:99px}
.cap-ok{background:#d1fae5;color:#065f46}
.cap-warn{background:#fef3c7;color:#92400e}
.cap-over{background:#fee2e2;color:#991b1b}
.scard-stats span.mini-avatar{padding:0;border-radius:50%;width:22px;height:22px;font-size:.62rem}


/* ===== Capacity planner modal ===== */
.capm-head{background:linear-gradient(120deg,#4f46e5,#7c3aed 55%,#0ea5e9);color:#fff;padding:1.1rem 1.25rem;border-radius:16px 16px 0 0}
.capm-head h5{font-weight:800;margin:0}
.capm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:1rem 0}
.capm-kpi{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:.6rem .75rem}
.capm-kpi span{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;font-weight:700}
.capm-kpi b{font-size:1.15rem;font-weight:800;color:var(--ink)}
.capm-grid{overflow-x:auto}
.capm-table{min-width:760px;width:100%}
.capm-r{display:grid;grid-template-columns:170px 90px repeat(10,1fr) 90px;gap:6px;align-items:center;padding:.4rem 0;border-bottom:1px dashed #eef2f7}
.capm-r.head{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;font-weight:800;border-bottom:1px solid var(--line)}
.capm-name{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.85rem}
.capm-hrs{width:74px;border:1px solid var(--line);border-radius:8px;padding:.25rem .4rem;font-size:.82rem;font-weight:700}
.capm-cell{border:1px solid var(--line);border-radius:8px;background:#fff;font-size:.72rem;font-weight:700;color:#0f766e;padding:.3rem 0;text-align:center;cursor:pointer;transition:.12s}
.capm-cell:hover{border-color:#6366f1}
.capm-cell.half{background:#fef3c7;border-color:#fcd34d;color:#b45309}
.capm-cell.off{background:#fee2e2;border-color:#fecaca;color:#b91c1c}
.capm-cell.hol{background:#e0e7ff;border-color:#c7d2fe;color:#4338ca;cursor:not-allowed}
.capm-total{font-weight:800;font-size:.85rem;text-align:right;color:var(--ink)}
.capm-day{display:flex;flex-direction:column;align-items:center;gap:2px}
.capm-holbtn{border:1px solid var(--line);background:#fff;border-radius:8px;font-size:.62rem;font-weight:700;color:#64748b;padding:.15rem .3rem;width:100%}
.capm-holbtn.on{background:#4338ca;border-color:#4338ca;color:#fff}
.capm-legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.72rem;color:#64748b;font-weight:600}
.capm-legend i{font-style:normal;width:12px;height:12px;border-radius:4px;display:inline-block;vertical-align:-2px;margin-right:.3rem}

/* ---- User story status (kanban) ---- */
.story-status,.scard-status{display:inline-flex;align-items:center;gap:.32rem;font-size:.72rem;font-weight:700;padding:.22rem .55rem;border-radius:999px;letter-spacing:.01em}
.story-meta > span.story-status{backdrop-filter:none}
.st-new{background:#e2e8f0!important;color:#475569!important}
.st-progress{background:#dbeafe!important;color:#1d4ed8!important}
.st-blocked{background:#fee2e2!important;color:#b91c1c!important}
.st-closed{background:#dcfce7!important;color:#15803d!important}
.scard-status{margin:.45rem 0 .1rem;width:fit-content}
.story-group.is-closed .story-head{background:linear-gradient(135deg,#f1f5f9,#e2e8f0)!important;filter:none}
.story-group.is-closed .story-title{color:#64748b;text-decoration:line-through;text-decoration-color:#cbd5e1}
.story-group.is-closed .story-key{color:#94a3b8}
.story-group.is-closed .story-progress span{background:#94a3b8!important}
.story-group.is-closed .scard{background:#f8fafc;border-color:#e2e8f0}
.story-group.is-closed .scard-title{color:#64748b}
.story-group.is-closed .scard-bar span{background:#94a3b8!important}
.story-group.is-closed .story-body{opacity:.85}
.story-group.is-closed .st-closed{background:#e2e8f0!important;color:#475569!important}

/* ---- Backlog tree view ---- */
.tree-wrap{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tree-node-row{display:grid;grid-template-columns:1fr 120px 110px 66px 96px;gap:.75rem;align-items:center;padding:.5rem 1rem;border-top:1px solid #f1f5f9;cursor:pointer;font-size:.87rem;transition:background .15s}
.tree-wrap > .tree-node > .tree-node-row{border-top:none}
.tree-node-row:hover{background:#fafbff}
.tree-label{display:flex;align-items:center;gap:.5rem;min-width:0}
.tree-toggle{width:20px;height:20px;flex:0 0 20px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;color:#94a3b8;font-size:.7rem;transition:transform .15s,background .15s}
.tree-toggle:hover{background:#eef2ff;color:#5b5bf5}
.tree-node.collapsed > .tree-node-row .tree-toggle{transform:rotate(-90deg)}
.tree-node.collapsed > .tree-children{display:none}
.tree-toggle.leaf{visibility:hidden}
.tree-ic{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;flex:0 0 22px}
.tree-ic.epic{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.tree-ic.feature{background:linear-gradient(135deg,#0ea5e9,#6366f1)}
.tree-ic.story{background:linear-gradient(135deg,#5b5bf5,#8b5cf6)}
.tree-ic.task{background:linear-gradient(135deg,#64748b,#94a3b8)}
.tree-ic.bug{background:linear-gradient(135deg,#ef4444,#f97316)}
.tree-key{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#94a3b8;flex:0 0 auto}
.tree-title{font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-node[data-level="0"] > .tree-node-row{background:#f8fafc}
.tree-node[data-level="0"] > .tree-node-row .tree-title{font-weight:800}
.tree-children{position:relative}
.tree-children:before{content:"";position:absolute;top:0;bottom:0;left:calc(1rem + var(--indent,0px) + 9px);width:1px;background:#e2e8f0}
.tree-count{font-size:.7rem;font-weight:700;color:#64748b;background:#f1f5f9;border-radius:999px;padding:.08rem .45rem}
.tree-node.is-closed .tree-title{color:#94a3b8;text-decoration:line-through;text-decoration-color:#e2e8f0}
.tree-node.is-closed > .tree-node-row .tree-ic{filter:grayscale(1);opacity:.7}