:root{
  --navy:#0A1B4D; --blue:#104BD3; --cyan:#00A8E1; --purple:#6A2BFF; --teal:#22d3ee;
  --bg:#f3f5fa; --card:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --green:#16a34a; --amber:#f59e0b; --red:#dc2626;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px}
h2{font-size:16px;font-weight:700;margin:0 0 12px}
h2 .muted{font-weight:500;font-size:13px;margin-left:8px}
h3{font-size:14px;font-weight:700;margin:16px 0 8px}
.muted{color:var(--muted)}.small{font-size:12px}
code{background:#eef2ff;padding:1px 5px;border-radius:4px;font-size:12px}

header.top{background:linear-gradient(90deg,var(--navy),#0f2a7a 60%,var(--blue));color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:60px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:15px}
.brand img{height:34px}.brand span{opacity:.85;border-left:1px solid rgba(255,255,255,.3);padding-left:10px}
header nav{display:flex;align-items:center;gap:18px;font-size:13px}
header nav a{color:#fff;opacity:.9}header nav .who{opacity:.75}header nav .who em{font-style:normal;background:rgba(255,255,255,.15);padding:2px 8px;border-radius:999px;margin-left:4px}
button.link{background:none;border:0;color:#fff;cursor:pointer;font:inherit;padding:0}
main{max-width:1100px;margin:0 auto;padding:28px 20px 48px}main.wide{max-width:1400px}
@media(max-width:700px){
  header.top{height:auto;padding:10px 14px;flex-wrap:wrap;gap:6px}
  header nav{gap:12px;flex-wrap:wrap;font-size:12px}header nav .who{display:none}
  main{padding:18px 14px 36px}h1{font-size:22px}
  .page-head{flex-direction:column}.head-right{width:100%;justify-content:space-between}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
footer{text-align:center;color:var(--muted);font-size:12px;padding:20px}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.card-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.card.notice{border-color:#c7d2fe;background:#eef2ff}
.flash{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:10px 14px;border-radius:8px;margin-bottom:16px;word-break:break-all}
.error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:10px 14px;border-radius:8px;margin-bottom:12px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.cols{grid-template-columns:1fr}}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.crumbs{font-size:12px;color:var(--muted);margin-bottom:6px}
.btn{display:inline-block;background:var(--blue);color:#fff;padding:9px 14px;border-radius:8px;font-weight:600;font-size:13px}
.btn:hover{background:#0d3fb3;text-decoration:none}

/* forms */
form.stack{display:flex;flex-direction:column;gap:12px}
form.row,.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
form.inline{display:inline}
label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:13px}
label.check{flex-direction:row;align-items:center;gap:6px;font-weight:500}
input,select,textarea{font:inherit;padding:9px 11px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid #bfdbfe;border-color:var(--blue)}
button{font:inherit;padding:9px 14px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;font-weight:600}
button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}button.primary:hover{background:#0d3fb3}
main button.link{color:var(--blue);font-weight:500;padding:0}main button.link.danger{color:var(--red)}
fieldset{border:1px solid var(--line);border-radius:8px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:6px 16px}
legend{font-weight:600;font-size:12px;color:var(--muted);padding:0 4px}
.mt{margin-top:16px}
.list{list-style:none;padding:0;margin:0 0 14px}.list li{padding:8px 0;border-bottom:1px solid var(--line)}.list li:last-child{border-bottom:0}
.list .actions{display:flex;gap:14px;margin-top:4px;font-size:12px}
.invite{margin-top:6px;font-size:12px}.invite input{width:100%;font-size:12px;margin-top:4px}
.tag{font-size:11px;background:#fef3c7;color:#92400e;padding:1px 7px;border-radius:999px;margin-left:4px}

/* auth */
.auth{max-width:420px;margin:40px auto;text-align:center}
.auth-logo{height:56px;margin-bottom:12px}
.auth form{display:flex;flex-direction:column;gap:12px;text-align:left;margin-top:12px}

/* project cards */
.group{margin-bottom:28px}.group h2{font-size:18px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pcard{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;color:inherit;transition:box-shadow .15s,transform .15s}
.pcard:hover{text-decoration:none;box-shadow:0 6px 18px rgba(16,75,211,.12);transform:translateY(-1px)}
.pcard-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.pcard h3{margin:8px 0 4px;font-size:16px}
.pcard-meta{font-size:12px;color:var(--muted)}
.pcard-progress{height:6px;background:#e2e8f0;border-radius:999px;margin:12px 0 6px;overflow:hidden}.pcard-progress div{height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.pcard-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}

/* pills */
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#fff}
.pill-green{background:var(--green)}.pill-amber{background:var(--amber)}.pill-red{background:var(--red)}.pill-none{background:#cbd5e1;color:#475569}
.status{display:inline-block;padding:1px 8px;border-radius:6px;font-size:12px;font-weight:600;background:#f1f5f9;color:#334155;white-space:nowrap}
.status-done,.status-closed,.status-complete,.status-completed,.status-approved{background:#dcfce7;color:#166534}
.status-in-progress,.status-active{background:#dbeafe;color:#1e40af}
.status-open,.status-planned{background:#fef9c3;color:#854d0e}
.status-on-hold,.status-blocked,.status-rejected{background:#fee2e2;color:#991b1b}
.sev{font-weight:700}.sev-high{color:var(--red)}.sev-medium{color:var(--amber)}.sev-low{color:var(--green)}
.badge{display:inline-block;background:#e2e8f0;color:#334155;border-radius:999px;font-size:11px;padding:0 7px;margin-left:4px}.badge-warn{background:#fee2e2;color:#991b1b}
.neg{color:var(--red)}.pos{color:var(--green)}

/* project head */
.project-head h1 .code{font-size:13px;font-weight:600;color:var(--muted);background:#eef2ff;padding:2px 8px;border-radius:6px;vertical-align:middle;margin-left:6px}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}.meta b{color:var(--ink);font-weight:600;margin-right:4px}
.head-right{display:flex;align-items:center;gap:16px}
.rag-big{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted)}.rag-big .pill{font-size:14px;padding:4px 14px}

/* stages */
.stages{list-style:none;padding:0;margin:0;display:flex;gap:6px;flex-wrap:wrap}
.stages li{flex:1;min-width:110px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:#f1f5f9;color:var(--muted);font-weight:600;font-size:13px}
.stages li span{display:inline-flex;width:22px;height:22px;border-radius:50%;background:#cbd5e1;color:#fff;align-items:center;justify-content:center;font-size:11px}
.stages li.done{background:#ecfdf5;color:#065f46}.stages li.done span{background:var(--green)}
.stages li.current{background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff}.stages li.current span{background:rgba(255,255,255,.3)}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.kpi-v{font-size:22px;font-weight:800;color:var(--navy)}.kpi-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kpi.warn .kpi-v{color:var(--amber)}.kpi.bad .kpi-v{color:var(--red)}
.fin-summary{display:flex;gap:32px;flex-wrap:wrap}.fin-summary div{display:flex;flex-direction:column}.fin-summary strong{font-size:20px}

/* tables */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#f8fafc;white-space:nowrap;position:sticky;top:0}
td.num,th.num{text-align:right;white-space:nowrap}
tbody tr:hover{background:#f8fafc}
.bar{position:relative;background:#e2e8f0;border-radius:4px;height:16px;min-width:70px;overflow:hidden}.bar div{height:100%;background:var(--cyan)}.bar span{position:absolute;inset:0;font-size:10px;line-height:16px;text-align:center;font-weight:600}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tab{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:8px 12px;font-weight:600;color:var(--muted);cursor:pointer}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.panel{display:none}.panel.active{display:block}

/* gantt */
.gantt-wrap{overflow-x:auto;padding-bottom:6px;border:1px solid var(--line);border-radius:10px}
.gantt{font-family:inherit;font-size:11px;display:block}
.gantt .past{fill:#f8fafc}
.gantt .month-hdr{fill:#f1f5f9}
.gantt .grid-line{stroke:var(--line)}.gantt .grid-month{stroke:#cbd5e1}.gantt .grid-week{stroke:#eef2f7}
.gantt .hdr{fill:var(--navy);font-weight:700;font-size:12px}.gantt .hdr-week{fill:#94a3b8;font-size:10px}
.gantt .lane-label{fill:var(--muted);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.gantt .stage-row{fill:#e8eefb}.gantt .stage-label{fill:var(--navy);font-size:12px;font-weight:700}.gantt .stage-meta{fill:var(--muted);font-weight:500;font-size:11px}
.gantt .stage-bar-bg{fill:#c7d2e8}.gantt .stage-bar-fg{fill:var(--navy)}
.gantt .row-alt{fill:rgba(15,23,42,.02)}
.gantt .row-label{fill:var(--ink);font-size:12px;font-weight:500}.gantt .row-wbs{fill:var(--muted);font-weight:600}.gantt .row-sub{fill:var(--muted);font-size:10px}
.gantt .bar-bg{fill:#dbe4f3}.gantt .bar-fg{fill:var(--blue)}
.gantt .bar-done .bar-fg{fill:var(--green)}.gantt .bar-done .bar-bg{fill:#bbf7d0}
.gantt .bar-late .bar-fg{fill:var(--red)}.gantt .bar-late .bar-bg{fill:#fecaca}
.gantt .bar-hold .bar-bg{fill:#fde68a}.gantt .bar-hold .bar-fg{fill:var(--amber)}
.gantt .bar-todo .bar-bg{fill:#e2e8f0}.gantt .bar-todo .bar-fg{fill:#94a3b8}
.gantt .bar-text{fill:#fff;font-size:10px;font-weight:700;pointer-events:none}
.gantt .dep{stroke:#b6c2d6;fill:none;stroke-width:1.2}.gantt .dep-head{fill:#b6c2d6}
.gantt .milestone{fill:var(--purple);stroke:#fff;stroke-width:1.5}.gantt .milestone-label{font-size:10.5px;font-weight:600;fill:#fff}
.gantt .ms-chip{fill:var(--purple)}
.gantt .ms-drop{stroke:var(--purple);stroke-opacity:.18;stroke-dasharray:2 3}
.gantt .ms-done .milestone,.gantt .ms-done .ms-chip{fill:var(--green)}.gantt .ms-done .ms-drop{stroke:var(--green)}
.gantt .ms-late .milestone,.gantt .ms-late .ms-chip{fill:var(--red)}.gantt .ms-late .ms-drop{stroke:var(--red);stroke-opacity:.35}
.gantt .ms-today .milestone,.gantt .ms-today .ms-chip{fill:var(--amber)}.gantt .ms-today .ms-drop{stroke:var(--amber);stroke-opacity:.5;stroke-dasharray:none}
.gate{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;border-radius:6px;background:#f3e8ff;color:#6b21a8;white-space:nowrap}
.ms-state{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.ms-state.done{background:#dcfce7;color:#166534}.ms-state.today{background:#fef3c7;color:#92400e}.ms-state.late{background:#fee2e2;color:#991b1b}.ms-state.open{background:#ede9fe;color:#5b21b6}
td.ms-name{font-weight:600}
tr.ms-today td{background:#fffbeb}tr.ms-late td{background:#fff5f5}
.gantt .today{stroke:var(--red);stroke-width:1.5}.gantt .today-tag{fill:var(--red)}.gantt .today-label{fill:#fff;font-weight:700;font-size:10px}
.gantt .sprint{fill:#eef2ff;stroke:#c7d2fe}.gantt .sprint-label{fill:#4338ca;font-size:10px}
.legend{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--muted);flex-wrap:wrap}
.lg{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}
.lg.done{background:var(--green)}.lg.prog{background:var(--blue)}.lg.todo{background:#94a3b8}.lg.late{background:var(--red)}.lg.hold{background:var(--amber)}.lg.ms{background:var(--purple);transform:rotate(45deg);width:10px}

/* today banner */
.today-banner{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px;background:#fff}
.today-banner>div{padding:16px 18px;border-right:1px solid var(--line);min-width:0}.today-banner>div:last-child{border-right:0}
.today-banner h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.today-banner h2 .badge{font-size:11px}
.today-banner .update{background:linear-gradient(135deg,#0f2a7a,var(--blue));color:#fff}
.today-banner .update h2{color:rgba(255,255,255,.75)}.today-banner .update p{margin:0 0 6px;font-size:14px;line-height:1.5;white-space:pre-line}
.today-banner .update .when{font-size:12px;opacity:.75}
.today-banner ul{list-style:none;padding:0;margin:0}.today-banner li{padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.4}.today-banner li:last-child{border-bottom:0}
.today-banner li .id{font-weight:700;color:var(--muted);font-size:11px;margin-right:6px}
.today-banner li .due{color:var(--muted);font-size:11px;white-space:nowrap;margin-left:6px}.today-banner li .due.over{color:var(--red);font-weight:600}
.today-banner .more{font-size:12px;color:var(--muted);padding-top:6px}
.today-banner .empty{color:var(--green);font-size:13px}
@media(max-width:860px){.today-banner{grid-template-columns:1fr}.today-banner>div{border-right:0;border-bottom:1px solid var(--line)}}