
:root{
  --bg:#050d12;--panel:#091820;--panel2:#0d222c;--line:#1a3743;
  --text:#eaf4f5;--muted:#8ca2a9;--teal:#4ce0c1;--green:#62df91;
  --yellow:#efc65d;--red:#ff6675;--blue:#69b9ff;--amber:#f2b85c;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.hidden{display:none!important}
.green{color:var(--green)}.yellow{color:var(--yellow)}.red{color:var(--red)}

.app-header{
  height:70px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);background:#071319;position:sticky;top:0;z-index:20
}
.brand{display:flex;gap:10px;align-items:center}
.brand>b{width:36px;height:36px;border:1px solid var(--teal);border-radius:50%;display:grid;place-items:center;color:var(--teal);font-size:.68rem}
.brand span{font-weight:800;letter-spacing:.12em;font-size:.8rem}
.brand small{display:block;color:var(--muted);font-size:.55rem;margin-top:3px}
.shift-meta{display:flex;gap:20px;align-items:center}
.shift-meta div span,.shift-meta div b{display:block}.shift-meta span{font-size:.55rem;color:var(--muted)}.shift-meta b{font-size:.8rem}
.shift-meta button{width:34px;height:34px;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:7px;cursor:pointer}

.briefing{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:22px;
  background:
    radial-gradient(circle at 50% 0%,rgba(76,224,193,.08),transparent 35rem),
    #03090d;
}
.briefing-card{width:min(840px,100%);border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#0e222c,#07151c);padding:38px;box-shadow:0 35px 100px #0008}
.briefing-kicker,.micro{font-size:.59rem;letter-spacing:.16em;color:var(--teal);font-weight:900}
.briefing-card h1{font-size:clamp(2.6rem,6vw,5rem);line-height:.95;letter-spacing:-.05em;margin:10px 0}
.briefing-card .subtitle{color:var(--muted);font-size:1rem;line-height:1.6}
.briefing-grid{display:grid;grid-template-columns:1fr .8fr;gap:16px;margin:26px 0}
.briefing-note,.briefing-status{border:1px solid var(--line);border-radius:12px;padding:18px;background:#091920}
.briefing-note strong{display:block;margin-bottom:8px}.briefing-note p{color:var(--muted);line-height:1.55;margin:0}
.briefing-status dl{margin:0}.briefing-status div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:.75rem}.briefing-status div:last-child{border-bottom:0}.briefing-status dt{color:var(--muted)}.briefing-status dd{margin:0}
.primary{border:0;background:var(--teal);color:#03110f;border-radius:8px;padding:12px 16px;font-weight:900;cursor:pointer}
.secondary{border:1px solid var(--line);background:#0a1a21;color:var(--text);border-radius:8px;padding:11px 15px;cursor:pointer}

.dashboard{
  min-height:calc(100vh - 70px);padding:10px;display:grid;gap:10px;
  grid-template-columns:250px minmax(520px,1fr) 350px;
  grid-template-rows:minmax(490px,1fr) 245px;
  grid-template-areas:"systems ops mentor" "tickets tickets evidence"
}
.panel{border:1px solid var(--line);border-radius:11px;background:linear-gradient(#0b1d26,#08151c);overflow:hidden}
.systems{grid-area:systems}.operations{grid-area:ops}.mentor{grid-area:mentor}.tickets{grid-area:tickets}.evidence{grid-area:evidence}
.panel-head{padding:14px;border-bottom:1px solid var(--line)}
.panel-head.wide{display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-head span,.panel-head b{display:block}.panel-head span{font-size:.57rem;color:var(--teal);letter-spacing:.15em}.panel-head b{font-size:.88rem;margin-top:4px}
.pill{font-style:normal;border:1px solid var(--line);border-radius:999px;padding:6px 9px;font-size:.57rem;color:var(--muted)}

.location{display:flex;gap:9px;align-items:center;padding:10px 12px;border-bottom:1px solid #1a3743aa;font-size:.78rem}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 9px #62df91aa}
.status-dot.warn{background:var(--yellow)}.status-dot.bad{background:var(--red)}
.location strong{flex:1}.location small{color:var(--muted);text-transform:uppercase;font-size:.62rem}
.summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:13px;border-top:1px solid var(--line)}
.summary span,.summary b{display:block}.summary span{font-size:.55rem;color:var(--muted)}.summary b{font-size:1.4rem}

.diagram{
  min-height:300px;padding:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  background:linear-gradient(#4ce0c108 1px,transparent 1px),linear-gradient(90deg,#4ce0c108 1px,transparent 1px);
  background-size:38px 38px;border-bottom:1px solid var(--line)
}
.node{min-height:100px;border:1px solid var(--line);border-radius:9px;background:#0a1a22;padding:13px;position:relative}
.node:after{content:"";position:absolute;left:14px;right:14px;bottom:13px;height:3px;background:var(--green)}
.node.warn:after{background:var(--yellow)}.node.bad:after{background:var(--red)}
.node span,.node b,.node small{display:block}.node span{font-size:.55rem;color:var(--muted)}.node b{margin-top:12px;font-size:.78rem}.node small{color:var(--muted);font-size:.62rem;margin-top:5px}

.lower{display:grid;grid-template-columns:1fr 1fr}.lower section{padding:11px}.lower section:first-child{border-right:1px solid var(--line)}
.lower h3{font-size:.56rem;color:var(--muted);letter-spacing:.12em}
.alert{border-left:3px solid var(--red);padding:8px;background:#ff66750b;margin-bottom:6px;font-size:.7rem}
.event{display:grid;grid-template-columns:42px 1fr;gap:8px;padding:5px 0;border-bottom:1px dashed #1a3743;font-size:.66rem;color:var(--muted)}
.event time{color:var(--blue)}

#mentorFeed{height:calc(100% - 104px);min-height:375px;padding:13px;overflow:auto}
.message{margin-bottom:12px}.message span{font-size:.61rem;color:var(--teal);font-weight:800}
.message p{margin:4px 0 0;padding:10px;border:1px solid var(--line);border-radius:4px 11px 11px;background:#0d222b;font-size:.78rem;line-height:1.45}
.mentor footer{height:36px;padding:9px 12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:.61rem}

#ticketQueue{height:187px;padding:10px;display:flex;gap:9px;overflow:auto}
.ticket{min-width:220px;max-width:220px;padding:11px;border:1px solid var(--line);border-radius:8px;background:#0b1c24;display:flex;flex-direction:column}
.ticket.closed{opacity:.42}.ticket .top{display:flex;justify-content:space-between;font-size:.61rem;color:var(--muted)}
.ticket h3{font-size:.78rem;margin:12px 0 6px}.ticket p{font-size:.67rem;color:var(--muted);line-height:1.42}
.ticket button{margin-top:auto;border:1px solid var(--line);background:transparent;color:var(--text);padding:6px;border-radius:5px;font-size:.64rem;cursor:pointer}

.tabs{display:flex;border-bottom:1px solid var(--line)}.tab{flex:1;padding:8px;border:0;background:#07151c;color:var(--muted);font-size:.65rem;cursor:pointer}
.tab.active{color:var(--teal);background:#0c2029}.tool-pane{height:145px;padding:9px;overflow:auto}
.evidence-card,.timeline-row{padding:9px;border:1px solid var(--line);border-radius:7px;background:#0b1c24;margin-bottom:6px}
.evidence-card{cursor:pointer}.evidence-card b,.evidence-card span{display:block}.evidence-card b{font-size:.74rem}
.evidence-card span,.timeline-row{font-size:.61rem;color:var(--muted)}.timeline-row time{color:var(--blue);margin-right:7px}
.placeholder{color:var(--muted);font-size:.68rem}

.modal{position:fixed;inset:0;z-index:90;background:#01070ad9;display:grid;place-items:center;padding:18px;backdrop-filter:blur(9px)}
.modal-card{position:relative;width:min(700px,100%);max-height:90vh;overflow:auto;padding:28px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(#0f232d,#08161d)}
.modal-card>span{font-size:.58rem;color:var(--teal);letter-spacing:.15em}.modal-card h2{font-size:1.65rem}.modal-card p{color:var(--muted);line-height:1.6}
.choice{display:block;width:100%;text-align:left;margin-top:9px;padding:12px;border:1px solid var(--line);border-radius:7px;background:#0a1a21;color:var(--text);cursor:pointer}
.choice:hover{border-color:var(--teal)}
.close{position:absolute;right:12px;top:10px;background:none;border:0;color:var(--muted);font-size:1.5rem;cursor:pointer}
.viewer table{width:100%;border-collapse:collapse}.viewer th,.viewer td{border:1px solid var(--line);padding:9px;font-size:.74rem;text-align:left}
.history{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.history>div{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.history b{padding:12px;border:1px solid var(--line);border-radius:7px;text-align:center}
blockquote{border-left:3px solid var(--teal);padding:14px;background:#4ce0c10a}
.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button,.actions a{padding:10px 14px;border:1px solid var(--line);border-radius:7px;background:#0a1a21;color:var(--text);cursor:pointer}

.generation{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:9px;background:#07161d}
.generation-row{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:.7rem;margin-bottom:9px}
.generation-row.done{color:var(--green)}.generation-track{height:7px;background:#041015;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.generation-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--teal),var(--green));transition:width .35s}
.download-box{margin:18px 0;padding:16px;border:1px solid rgba(96,223,145,.35);border-radius:9px;background:rgba(96,223,145,.06)}
.download-box strong,.download-box span{display:block}.download-box strong{color:var(--green);font-size:.72rem;letter-spacing:.1em}.download-box span{color:var(--muted);font-size:.7rem;margin:5px 0 12px}
.download-box a{display:inline-block;background:var(--green);color:#04120a;padding:10px 13px;border-radius:7px;font-weight:900;font-size:.7rem}

.reflection textarea{width:100%;min-height:95px;background:#06151c;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px;resize:vertical}

.certificate{position:relative;width:min(900px,100%);padding:52px;background:#f4efe3;color:#14212a;text-align:center;border:12px double #213b49}
.seal{width:80px;height:80px;margin:auto;border:4px double #b27b22;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#b27b22}
.certificate h2{font:2.2rem Georgia,serif}.certificate h3{font:2rem Georgia,serif;color:#8a5b14}
.certificate input{width:min(500px,90%);border:0;border-bottom:2px solid #233945;background:transparent;text-align:center;font:1.8rem Georgia,serif}
.skills{margin:25px auto;padding:12px;border-top:1px solid #8c989d;border-bottom:1px solid #8c989d}
.cert-foot{display:flex;justify-content:space-between;margin-top:40px}.motto{font-size:.7rem;letter-spacing:.18em}
.print{display:inline-block!important;width:auto!important;background:#213b49!important;color:#fff!important}

@media print{
  body>*:not(#certificateModal){display:none!important}
  #certificateModal{position:static;background:none;padding:0}
  .certificate{box-shadow:none;width:100%;min-height:7.5in}
  .close,.print{display:none!important}
}
@media(max-width:1100px){
  .dashboard{grid-template-columns:230px 1fr;grid-template-areas:"systems ops" "mentor ops" "tickets tickets" "evidence evidence"}
  .diagram{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .shift-meta div:not(:nth-child(2)){display:none}
  .dashboard{grid-template-columns:1fr;grid-template-areas:"systems" "ops" "mentor" "tickets" "evidence"}
  .diagram{grid-template-columns:repeat(2,1fr)}.lower{grid-template-columns:1fr}
  .briefing-grid,.history>div{grid-template-columns:1fr}
}
