:root { --bg:#f3f6f8; --ink:#18202a; --muted:#687484; --panel:#fff; --line:#d9e2ea; --blue:#1f5e8c; --dark:#162331; --green:#4d7c43; --amber:#9a6700; --red:#b83232; --shadow:0 12px 30px rgba(24,32,42,.08); }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; grid-template-columns:230px minmax(0,1fr); background:var(--bg); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; min-height:38px; border:0; border-radius:8px; padding:0 12px; background:var(--blue); color:#fff; font-weight:700; }
input,select,textarea { width:100%; min-height:38px; border:1px solid var(--line); border-radius:8px; padding:0 10px; background:#fff; color:var(--ink); }
textarea { padding-top:9px; resize:vertical; }
.sidebar { display:flex; flex-direction:column; gap:24px; padding:22px 16px; background:var(--dark); color:#fff; }
.brand { display:flex; align-items:center; gap:12px; }
.brand span { display:grid; place-items:center; width:42px; height:42px; border-radius:8px; background:#f2b705; color:#17202a; font-weight:800; }
.brand h1,.brand p,.topbar h2,.topbar p,.panel-title h3 { margin:0; }
.brand h1 { font-size:18px; }
.brand p,.topbar p,.muted,.panel-title span,.note { color:var(--muted); font-size:13px; }
nav { display:grid; gap:8px; }
.nav,.save { border:1px solid rgba(255,255,255,.16); background:transparent; color:#fff; text-align:left; }
.nav.active { background:#23384d; border-color:#49677f; }
.save { margin-top:auto; background:#4d7c43; text-align:center; }
main { min-width:0; padding:24px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; }
#status { color:var(--muted); font-size:13px; }
.summary { display:grid; grid-template-columns:repeat(6,minmax(120px,1fr)); gap:10px; margin-bottom:16px; }
.metric,.table-box,.panel,.card,.plan-card { background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
.metric { padding:12px; }
.metric span { display:block; color:var(--muted); font-size:12px; margin-bottom:7px; }
.metric strong { font-size:22px; }
.view { display:none; }
.view.active { display:block; }
.form-row { display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)); gap:10px; margin-bottom:12px; }
.toolbar { display:grid; grid-template-columns:minmax(260px,1fr) 180px 180px; gap:10px; margin-bottom:12px; }
.work-area { display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:14px; align-items:start; }
.table-box { overflow:auto; max-height:calc(100vh - 250px); }
table { width:100%; min-width:900px; border-collapse:collapse; }
th,td { padding:10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:13px; }
th { position:sticky; top:0; background:#edf3f7; z-index:1; color:#2e3b48; }
tbody tr:hover, tbody tr.selected { background:#eef6fb; }
.pill { display:inline-flex; min-height:24px; align-items:center; border-radius:999px; padding:2px 9px; background:#eef1f4; color:#344252; font-size:12px; font-weight:700; }
.danger { background:var(--red); }
.secondary { background:#e9eef2; color:#263241; }
.panel { display:grid; gap:10px; padding:14px; position:sticky; top:20px; }
.panel-title { display:flex; justify-content:space-between; gap:10px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:10px; }
.panel label { display:grid; gap:5px; color:#3b4652; font-size:12px; font-weight:700; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.cards,.planning-board { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.card,.plan-card { padding:14px; }
.plan-card { grid-column:1/-1; }
.plan-row { display:grid; grid-template-columns:170px minmax(360px,1fr); gap:10px; align-items:center; margin:8px 0; }
.timeline { height:30px; position:relative; border:1px solid var(--line); border-radius:8px; background:repeating-linear-gradient(90deg,#f8fafc 0,#f8fafc 16.5%,#edf2f6 16.5%,#edf2f6 16.8%); }
.bar { position:absolute; top:5px; height:18px; min-width:8px; border-radius:6px; background:var(--blue); color:white; font-size:11px; line-height:18px; padding:0 6px; overflow:hidden; }
.bar.overlap { background:var(--red); }
@media (max-width:1100px) { body{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:3;flex-direction:row;align-items:center;overflow:auto}nav{display:flex}.save{margin-left:auto;margin-top:0}.work-area{grid-template-columns:1fr}.panel{position:static} }
@media (max-width:760px) { main{padding:14px}.form-row,.toolbar,.grid2{grid-template-columns:1fr}.summary{grid-template-columns:repeat(2,minmax(120px,1fr))}.topbar{flex-direction:column}.plan-row{grid-template-columns:1fr} }