:root{
  --navy:#0a2e52;
  --navy2:#123f70;
  --blue:#1677cf;
  --green:#63be3f;
  --green2:#2eaa56;
  --bg:#f3f7fb;
  --card:#fff;
  --text:#17314d;
  --muted:#718397;
  --line:#dce7f1;
  --orange:#f59e0b;
  --red:#d84c4c;
  --shadow:0 12px 32px rgba(12,45,78,.09);
  --radius:18px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--muted)}
.error{margin-top:12px;background:#ffeaea;color:#a42222;padding:10px 12px;border-radius:10px;font-weight:800}
.login{min-height:100vh;display:grid;place-items:center;padding:18px;background:
radial-gradient(circle at 15% 15%,rgba(22,119,207,.13),transparent 30%),
radial-gradient(circle at 85% 82%,rgba(99,190,63,.13),transparent 34%),#f8fbfe}
.login-card{width:min(440px,94vw);background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:var(--shadow)}
.login-logo{width:100%;height:74px;object-fit:contain;margin-bottom:8px}
.login-card h1{margin:10px 0 4px}
.demo-box{margin-top:18px;padding:12px;border-radius:12px;background:#f4f8fc;font-size:12px;color:var(--muted);line-height:1.7}
label{display:grid;gap:7px;margin:16px 0 8px;font-weight:800}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{border-color:#95bde3;box-shadow:0 0 0 3px rgba(22,119,207,.08)}
textarea{min-height:100px;resize:vertical}
.app{min-height:100vh;display:grid;grid-template-columns:224px 1fr}
.sidebar{position:sticky;top:0;height:100vh;color:#fff;background:linear-gradient(180deg,var(--navy),#061f38);display:flex;flex-direction:column}
.brand{background:#fff;padding:14px}
.brand img{width:100%;height:52px;object-fit:contain}
.sidebar nav{padding:16px 10px;display:grid;gap:6px}
.nav-item{width:100%;border:0;background:transparent;color:#fff;text-align:left;padding:13px 14px;border-radius:11px;display:flex;align-items:center;gap:12px}
.nav-item span{width:22px;text-align:center}
.nav-item.active,.nav-item:hover{background:linear-gradient(90deg,var(--green2),var(--blue))}
.side-bottom{margin-top:auto;padding:22px 18px;border-top:1px solid rgba(255,255,255,.12);font-weight:800;line-height:1.45}
.main{min-width:0}
.topbar{position:sticky;top:0;z-index:10;height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:12px}
.top-title{font-size:18px;font-weight:900}
.top-spacer{flex:1}
.role-pill{padding:8px 11px;border-radius:999px;background:#eaf3fd;color:var(--navy2);font-size:12px;font-weight:900}
.icon-btn{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:#fff}
.mobile-only{display:none}
#view{padding:24px;max-width:1550px;margin:auto}
.page-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.page-head h1,.page-head h2{margin:0}
.back{border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px 12px;color:var(--navy);font-weight:800}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.dashboard-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:16px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.section-head h2{font-size:20px;margin:0}
.list{display:grid;gap:10px}
.row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fff}
.row.clickable:hover{border-color:#b8d0e7;background:#fbfdff}
.grow{flex:1}
.sub{font-size:12px;color:var(--muted);margin-top:3px}
.btn{border:0;border-radius:12px;padding:11px 15px;font-weight:900}
.btn.primary{background:linear-gradient(90deg,var(--green2),var(--blue));color:#fff}
.btn.secondary{background:#edf3f8;color:var(--navy)}
.btn.danger{background:#ffe7e7;color:#a72222}
.btn.full{width:100%}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick{min-height:106px;border:0;border-radius:17px;padding:18px;text-align:left;color:#fff;font-weight:900;font-size:17px;box-shadow:var(--shadow)}
.quick small{display:block;font-size:12px;font-weight:700;opacity:.9;margin-top:5px}
.qgreen{background:linear-gradient(135deg,#2aaa52,#68c744)}
.qblue{background:linear-gradient(135deg,#176bb6,#258dde)}
.qnavy{background:linear-gradient(135deg,#0b3158,#14548f)}
.qgray{background:linear-gradient(135deg,#5b6876,#7e8a95)}
.status,.priority{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:12px 11px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{font-size:12px;color:var(--muted);background:#f9fbfd}
tbody tr:hover{background:#fbfdff}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar .spacer{flex:1}
.search{max-width:390px}
.project-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.project-top h1{margin:0 0 4px}
.status-flow{display:grid;gap:8px;margin:20px 0;grid-auto-flow:column;grid-auto-columns:minmax(110px,1fr);overflow:auto;padding-bottom:6px}
.flow{text-align:center;font-size:12px;color:var(--muted)}
.flow-line{height:11px;background:#dfe7ef;border-radius:999px;margin-bottom:7px}
.flow.active{font-weight:900;color:var(--text)}
.flow.active .flow-line{background:linear-gradient(90deg,var(--green),var(--blue))}
.project-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.stat{border:1px solid var(--line);border-radius:15px;padding:16px;background:#fff}
.stat b{font-size:26px;display:block;margin-top:4px}
.material-summary{margin-top:14px}
.material-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.work-list{margin-top:16px}
.work-card{border:1px solid var(--line);border-radius:15px;padding:14px;background:#fff}
.work-card + .work-card{margin-top:10px}
.work-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:6px}
.tag{background:#eef4f9;padding:5px 8px;border-radius:999px}
.donut-wrap{display:grid;place-items:center;min-height:290px}
.donut{width:190px;height:190px;border-radius:50%;position:relative}
.donut::after{content:"";position:absolute;inset:31px;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
.legend{display:grid;gap:8px;width:100%;margin-top:14px}
.legend-item{display:flex;justify-content:space-between;font-size:13px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px}
.modal-backdrop{position:fixed;inset:0;background:rgba(5,29,51,.56);display:grid;place-items:center;padding:18px;z-index:50}
.modal{background:#fff;border-radius:22px;padding:22px;width:min(760px,96vw);max-height:92vh;overflow:auto;box-shadow:0 35px 90px rgba(0,0,0,.25)}
.modal h2{margin:0 0 12px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inline-select{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.plus-btn{height:44px;width:44px;border:0;border-radius:12px;background:var(--green2);color:#fff;font-size:24px;font-weight:900}
.material-editor{border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:14px;background:#fbfdff}
.material-edit-row{display:grid;grid-template-columns:1.8fr .65fr .6fr auto auto;gap:8px;margin-top:8px;align-items:center}
.material-edit-row .unit{padding:10px 8px;border-radius:10px;background:#eef4f9;text-align:center;font-weight:800;color:var(--muted)}
.material-edit-row button{border:0;border-radius:10px;height:42px}
.material-edit-row .add-material{background:#eaf8ed;color:#168242;font-size:21px;font-weight:900}
.material-edit-row .remove-material{background:#ffe8e8;color:#a72020}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.setting-row{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:12px;margin-top:8px}
.setting-row input{margin:0}
.setting-row button{border:0;border-radius:9px;padding:8px 10px;background:#eef3f8;color:var(--navy);font-weight:900}
.setting-row button.danger{background:#ffe8e8;color:#a72020}

.material-master-row{display:grid;grid-template-columns:1.6fr 1fr .55fr .65fr auto;gap:8px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:12px;margin-top:8px}
.report-filters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.report-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:16px 0}
.report-section{margin-top:16px}
.report-materials{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.report-chip{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}

.mobile-nav{display:none}
@media(max-width:1100px){
  .dashboard-grid{grid-template-columns:1fr 1fr}
  .dashboard-grid>*:last-child{grid-column:1/-1}
  .stats-grid,.report-summary{grid-template-columns:repeat(3,1fr)}
  .report-filters{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
  .app{display:block}
  .sidebar{position:fixed;left:-235px;width:224px;z-index:30;transition:.2s}
  .sidebar.open{left:0}
  .topbar{height:62px;padding:0 12px}
  .mobile-only{display:block}
  #view{padding:14px 14px 84px}
  .dashboard-grid,.project-grid,.settings-grid{grid-template-columns:1fr}
  .dashboard-grid>*:last-child{grid-column:auto}
  .quick-grid{grid-template-columns:1fr}
  .stats-grid,.report-summary{grid-template-columns:1fr 1fr}
  .form-grid,.report-filters{grid-template-columns:1fr}
  .material-edit-row{grid-template-columns:1fr .65fr .55fr auto auto}
  .material-edit-row select{grid-column:1/-1}
  .material-master-row{grid-template-columns:1fr 1fr}
  .material-master-row>*:first-child{grid-column:1/-1}
  .report-materials{grid-template-columns:1fr}
  .mobile-nav{display:grid;position:fixed;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid var(--line);grid-template-columns:repeat(4,1fr);z-index:20}
  .mobile-nav button{border:0;background:#fff;color:var(--navy);display:grid;place-items:center;font-size:20px}
  .mobile-nav small{font-size:10px}
}