:root{
  --navy:#063f50;
  --navy2:#0d596d;
  --bg:#f3f6f7;
  --card:#fff;
  --text:#17333b;
  --muted:#75898f;
  --line:#dfe7e9;
  --green:#229268;
  --green-soft:#e5f6ed;
  --red:#c95454;
  --red-soft:#fdeaea;
  --amber:#d9902f;
  --shadow:0 10px 30px rgba(6,63,80,.07);

  --s0:#8b999d;
  --s1:#e7a03b;
  --s2:#8367cc;
  --s3:#3c7bca;
  --s4:#2a94c0;
  --s5:#27956a;
  --s6:#22978b;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
body.dragging{user-select:none}
.topbar{
  position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;
  padding:15px 22px;display:flex;justify-content:space-between;align-items:center;
  gap:20px;box-shadow:0 4px 18px rgba(0,0,0,.12)
}
.brand{display:flex;align-items:center;gap:11px;min-width:max-content}
.logo{width:38px;height:38px;border-radius:11px;background:#fff;color:var(--navy);display:grid;place-items:center;font-weight:950}
.brand h1{font-size:17px;margin:0}
.brand small{display:block;color:#bdd1d6;font-size:11px;margin-top:2px}
.top-actions{display:flex;align-items:center;gap:8px;min-width:0}
.search-wrap{position:relative}
.search-wrap>i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;color:#adc5cb}
.search{
  width:330px;max-width:34vw;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.1);color:#fff;border-radius:10px;padding:9px 11px 9px 32px;outline:none
}
.search::placeholder{color:#b9ccd1}.search:focus{background:#fff;color:var(--text)}
.btn{border:0;border-radius:10px;padding:9px 12px;font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn.light{background:#fff;color:var(--navy)}.btn.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.13)}
.btn.primary{background:var(--navy);color:#fff}.btn.secondary{background:#eef3f4;color:var(--navy)}.btn.danger{background:var(--red-soft);color:var(--red)}
.btn.compact{padding:8px 10px}.mr-auto{margin-right:auto}
main{padding:22px}
.flash{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:13px}
.flash.success{background:var(--green-soft);color:#176d4d;border:1px solid #cceadc}.flash.error{background:var(--red-soft);color:#974141;border:1px solid #f0cccc}
.flash ul{margin:4px 0 0;padding-left:18px}
.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:15px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--navy2);font-size:10px;font-weight:900;margin-bottom:6px}
.intro h2{margin:0 0 5px;font-size:27px;letter-spacing:-.03em}.intro p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;max-width:760px}
.summary{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.metric{background:#fff;border:1px solid var(--line);border-radius:11px;padding:8px 10px;min-width:88px;box-shadow:0 3px 12px rgba(6,63,80,.03)}
.metric strong{font-size:17px;display:block;line-height:1}.metric span{font-size:9px;color:var(--muted);text-transform:uppercase;font-weight:800}.metric.green strong{color:var(--green)}.metric.amber strong{color:var(--amber)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}
.filters{display:flex;gap:7px}.filters select{border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--text);padding:8px 9px;font-size:11px;outline:none}
.legend{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.legend-item{background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 7px;display:flex;gap:5px;align-items:center;font-size:9px;color:var(--muted);font-weight:700}
.legend-dot{width:7px;height:7px;border-radius:50%}.legend-dot.s0{background:var(--s0)}.legend-dot.s1{background:var(--s1)}.legend-dot.s2{background:var(--s2)}.legend-dot.s3{background:var(--s3)}.legend-dot.s4{background:var(--s4)}.legend-dot.s5{background:var(--s5)}.legend-dot.s6{background:var(--s6)}
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:11px;align-items:start}
.column{background:#e8eef0;border:1px solid #d9e3e5;border-radius:14px;padding:8px;min-width:0}
.column-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 3px 10px}
.column-title{display:flex;align-items:center;gap:8px;min-width:0}.department-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:12px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.column-title h3{margin:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:155px}.column-title small{font-size:9px;color:var(--muted)}
.column-actions{display:flex;gap:4px}.icon-btn{width:27px;height:27px;border:0;border-radius:8px;background:#fff;color:var(--muted);display:grid;place-items:center;font-size:10px}.icon-btn:hover{color:var(--navy)}
.cards{display:flex;flex-direction:column;gap:7px;min-height:70px}.cards.drag-over{outline:2px dashed #7baab6;outline-offset:2px;border-radius:10px}
.process-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--s0);border-radius:10px;padding:10px;box-shadow:0 3px 12px rgba(6,63,80,.035);cursor:pointer;transition:.15s ease}
.process-card:hover{transform:translateY(-1px);box-shadow:0 7px 17px rgba(6,63,80,.09)}.process-card.dragging-card{opacity:.4;transform:rotate(1deg)}
.process-card.s0{border-left-color:var(--s0)}.process-card.s1{border-left-color:var(--s1)}.process-card.s2{border-left-color:var(--s2)}.process-card.s3{border-left-color:var(--s3)}.process-card.s4{border-left-color:var(--s4)}.process-card.s5{border-left-color:var(--s5)}.process-card.s6{border-left-color:var(--s6)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.card-top h4{font-size:12px;line-height:1.3;margin:0}.process-card p{font-size:10px;line-height:1.35;color:var(--muted);margin:5px 0 8px}
.green-award-icon{display:inline-grid;place-items:center;min-width:23px;height:23px;border-radius:7px;background:var(--green-soft);color:#16724d;font-size:11px}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}.status-chip{font-size:9px;font-weight:900;border-radius:99px;padding:4px 6px;background:#f0f3f4}.owner{font-size:9px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.s0 .status-chip{background:#eef1f2;color:#67787d}.s1 .status-chip{background:#fff0d9;color:#9a6516}.s2 .status-chip{background:#efe9fb;color:#6d50b4}.s3 .status-chip{background:#e8f1fd;color:#2d67af}.s4 .status-chip{background:#e7f7fd;color:#147ca5}.s5 .status-chip{background:#e5f6ed;color:#18764e}.s6 .status-chip{background:#e4f7f3;color:#13796c}
.phase-progress{border-top:1px solid #edf1f2;margin-top:8px;padding-top:7px}.phase-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;font-size:8px;text-transform:uppercase;color:#88989c;font-weight:900;letter-spacing:.04em}
.phase-track{height:5px;border-radius:99px;background:#e5ecee;overflow:hidden}.phase-track.large{height:8px}.phase-fill,.progress-fill{height:100%;border-radius:99px;background:var(--navy2)}
.column-empty{display:flex;flex-direction:column;align-items:center;gap:5px;padding:16px;color:#93a2a6;font-size:10px;border:1px dashed #cddadc;border-radius:10px}
.no-results{text-align:center;color:var(--muted);padding:40px;font-size:13px}
.overlay{position:fixed;inset:0;background:rgba(3,28,35,.38);opacity:0;pointer-events:none;transition:.2s;z-index:40}.overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;width:min(480px,95vw);height:100vh;background:#fff;z-index:50;transform:translateX(100%);transition:.22s;box-shadow:-20px 0 50px rgba(0,0,0,.16);display:flex;flex-direction:column}.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:20px;border-bottom:1px solid var(--line)}.drawer-head .eyebrow{margin-bottom:5px}.drawer-title-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.drawer-head h2{margin:0;font-size:22px;line-height:1.2}.drawer-green{font-size:9px;background:var(--green-soft);color:#16724d;padding:5px 7px;border-radius:99px;font-weight:900}
.close{width:32px;height:32px;border:0;border-radius:9px;background:#eef2f3;color:var(--text);font-size:18px}.drawer-body{padding:18px 20px 30px;overflow:auto}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.detail{border:1px solid var(--line);border-radius:10px;padding:10px}.detail span{display:block;text-transform:uppercase;letter-spacing:.07em;font-weight:850;font-size:8px;color:var(--muted);margin-bottom:4px}.detail strong{font-size:12px}
.drawer-section{margin:19px 0}.drawer-section h3{margin:0 0 7px;font-size:12px}.drawer-section p,.drawer-section li{font-size:12px;line-height:1.5;color:#62777d}.drawer-section ul{margin:0;padding-left:18px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.section-heading h3{margin:0}.section-heading span,.section-heading strong{font-size:10px;color:var(--muted)}
.phase-steps{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:6px}.phase-step{height:5px;border-radius:99px;background:#e4eaec}.phase-step.done{background:var(--navy2)}.phase-step.current{background:#62b4c6}
.info-box{background:#f4f7f8;border-radius:10px;padding:10px 11px}.info-box p{margin:0}.info-box strong{font-size:11px}.green-soft{background:var(--green-soft)}.green-text{color:var(--green)}
.timeline{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.timeline-item{border-left:2px solid #d9e5e7;padding-left:10px}.timeline-item small{display:block;color:#94a3a6;font-size:8px;margin-bottom:2px}.timeline-item p{margin:0;color:#60747a;font-size:11px}
.note-form{display:flex;gap:7px;align-items:flex-end}.note-form textarea{flex:1;border:1px solid var(--line);border-radius:9px;padding:8px;resize:vertical;font-size:11px;outline:none}.drawer-actions{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:8px}.drawer-actions form,.drawer-actions .btn{flex:1}.drawer-actions form .btn{width:100%}
.modal-overlay{position:fixed;inset:0;background:rgba(3,28,35,.44);z-index:70;display:none;align-items:center;justify-content:center;padding:18px}.modal-overlay.open{display:flex}
.modal{width:min(560px,96vw);max-height:94vh;background:#fff;border-radius:15px;box-shadow:0 25px 70px rgba(0,0,0,.22);overflow:hidden;display:flex;flex-direction:column}.modal.wide{width:min(820px,96vw)}.modal.small{width:min(460px,96vw)}
.modal form{display:flex;flex-direction:column;max-height:94vh}.modal-head{padding:17px 19px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between}.modal-head h3{margin:0;font-size:18px}.modal-body{padding:17px 19px;overflow:auto}.modal-actions{padding:13px 19px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.span-2{grid-column:span 2}.field{display:block}.field>span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:850;margin-bottom:5px}.field small{text-transform:none;letter-spacing:0;font-weight:600}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 10px;color:var(--text);outline:none;background:#fff;font-size:12px}.field textarea{resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:#8eb7c0;box-shadow:0 0 0 3px rgba(13,89,109,.07)}
.green-award-box{border:1px solid #cfe9db;background:#f4fbf7;border-radius:11px;padding:11px}.check-row{display:flex;align-items:center;gap:8px;font-size:11px;cursor:pointer}.check-row input{width:16px;height:16px}.green-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
@media(max-width:1200px){.board{grid-template-columns:repeat(3,minmax(235px,1fr))}.legend{display:none}}
@media(max-width:900px){.board{grid-template-columns:repeat(2,minmax(230px,1fr))}.intro{align-items:flex-start;flex-direction:column}.summary{justify-content:flex-start}.toolbar{align-items:flex-start;flex-direction:column}.search{width:260px;max-width:36vw}}
@media(max-width:650px){
  .topbar{align-items:flex-start;flex-wrap:wrap;padding:13px 15px}.top-actions{width:100%}.search-wrap{flex:1}.search{width:100%;max-width:none}.desktop-only{display:none}
  main{padding:15px}.intro h2{font-size:23px}.board{grid-template-columns:1fr}.summary{display:grid;grid-template-columns:1fr 1fr;width:100%}.metric{min-width:0}
  .filters{display:grid;grid-template-columns:1fr 1fr;width:100%}.filters select:last-child{grid-column:span 2}.detail-grid,.form-grid,.green-fields{grid-template-columns:1fr}.span-2{grid-column:span 1}.drawer-actions{flex-direction:column}
}

.login-page{display:grid;place-items:center;min-height:100vh;padding:24px;background:linear-gradient(rgba(6,63,80,.25),rgba(6,63,80,.25)),url('../img/bg.png') center/cover no-repeat}
.login-card{width:100%;max-width:460px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:var(--shadow)}
.login-card h1{margin:8px 0;font-size:28px}
.login-card p{color:var(--muted);line-height:1.6;margin-bottom:24px}
.login-card form{display:grid;gap:18px}
.login-card .btn{padding:13px}
.login-card .login-help{font-size:12px;margin:24px 0 0}
.access-card{max-width:700px;margin:24px auto}
.access-list{list-style:none;padding:0;display:grid;gap:12px}
.access-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}

.process-card.stuck{border-left-color:var(--red)}
.stuck .status-chip{background:var(--red-soft);color:var(--red)}
.legend-dot.stuck{background:var(--red)}
.stuck-note{margin-top:8px;padding-top:7px;border-top:1px solid var(--line);font-size:10px;color:var(--red)}

.drawer-tabs{display:flex;gap:20px;padding:0 20px;border-bottom:1px solid var(--line)}
.drawer-tabs button{padding:13px 2px;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);font-weight:700}
.drawer-tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--navy)}
.update-form{display:flex;flex-direction:column;align-items:stretch;margin-bottom:22px}
.update-form label{font-size:12px;font-weight:700}
.update-form textarea{width:100%;min-height:100px}
.update-form button{align-self:flex-start}
#updateFeedback{font-size:12px;margin:0;color:var(--muted)}
.timeline-item p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.timeline-item small{font-size:10px;overflow-wrap:anywhere}

.drawer-tabs{gap:14px;overflow-x:auto;flex-shrink:0}
.drawer-tabs button{white-space:nowrap;font-size:12px}

.checkpoints{display:grid;gap:10px}
.checkpoint{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:9px;font-size:12px;cursor:pointer;overflow-wrap:anywhere}
.checkpoint input{accent-color:var(--green);flex-shrink:0}
.checkpoint input:checked+span{text-decoration:line-through;color:var(--muted)}
#checkpointFeedback{font-size:12px;color:var(--muted)}

.checkpoint-row{display:flex;gap:8px;align-items:center}
.checkpoint-row .checkpoint{flex:1;min-width:0}
.checkpoint-row .btn{font-size:10px;padding:8px}
.checkpoint-form{display:grid;gap:8px;margin-top:18px;font-size:12px}
.checkpoint-form input{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px}
.checkpoint-form button{justify-self:start}