:root{
  --bg:#0B1422; --surface:#131F33; --surface-2:#16243A;
  --line:rgba(255,255,255,0.07); --line-2:rgba(255,255,255,0.14);
  --text:#E4E9F0; --text-2:#9AA7BD; --text-3:#6E7C92; --white:#F5F7FA;
  --accent:#EC008C; --red:#E24B4A;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;line-height:1.55;font-size:15px;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
main{max-width:880px;margin:0 auto;padding:8px 20px 64px}
.accent{color:var(--accent)}

.site-head{max-width:880px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;
  justify-content:space-between;border-bottom:.5px solid var(--line)}
.brand{font-size:18px;font-weight:500;color:var(--white)}
.brand-sub{color:var(--text-2);font-weight:400;font-size:14px}
.site-head nav{display:flex;align-items:center;gap:18px;font-size:14px}
.site-head nav a{color:var(--text-2)}
.site-head nav a.active{color:var(--white)}

/* Admin segmented tabs */
.tabs{display:inline-flex;border:.5px solid var(--line-2);border-radius:9px;overflow:hidden}
.tabs .tab{padding:8px 14px;color:var(--text-2);border-right:.5px solid var(--line-2)}
.tabs .tab:last-child{border-right:none}
.tabs .tab:hover{background:var(--surface-2);text-decoration:none}
.tabs .tab.active{background:var(--accent);color:#fff}
.tab-utils{display:flex;align-items:center;gap:14px}
@media(max-width:600px){
  body:not(.admin) .site-head{flex-wrap:wrap;padding:14px 16px;gap:12px}
  body:not(.admin) .site-head .brand{flex:0 0 auto;max-width:62%}
  body:not(.admin) .site-head nav{flex:1 1 100%;gap:10px}
  .site-head nav .btn-support,.site-head nav .btn-accent{flex:1;text-align:center;padding:9px 12px;font-size:14px;white-space:nowrap}
  .brand-logo{max-width:100%}
  .admin .site-head{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px}
  .admin .site-head nav{flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .tabs{display:flex;width:100%}
  .tabs .tab{flex:1;text-align:center;padding:10px 2px;font-size:13px}
  .tab-utils{justify-content:space-between}
  .comp-row{flex-wrap:wrap}
  .comp-row input,.comp-row select{flex:1 1 100%}
  .comp-row button{flex:1}
  .inline-form{flex-wrap:wrap}
  .inline-form input,.inline-form select{flex:1 1 100%}
  .inline-form button{flex:1}
}
.btn-accent{background:var(--accent);color:#fff !important;padding:8px 14px;border-radius:8px;font-weight:500}
.btn-accent:hover{text-decoration:none;filter:brightness(1.08)}
.btn-support{background:#1E2F49;color:var(--white) !important;border:.5px solid var(--line-2);padding:8px 14px;border-radius:8px;font-weight:500}
.btn-support:hover{text-decoration:none;background:#26395a;border-color:rgba(236,0,140,.55)}
.contact-rows{margin:6px 0 16px}
.contact-row{display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:.5px solid var(--line)}
.contact-row:last-child{border-bottom:0}
.contact-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);width:54px;flex:none}
.contact-val{font-size:16px;font-weight:500;color:var(--white)}
.contact-val:hover{color:var(--accent)}
.contact-note{background:var(--surface-2);border:.5px solid var(--line-2);border-left:3px solid #E8743B;border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.6;color:var(--text-2)}
.btn-ghost{border:.5px solid var(--line-2);padding:7px 12px;border-radius:8px}

.banner{display:flex;align-items:center;gap:12px;border:.5px solid;border-radius:12px;padding:16px 18px;margin:22px 0}
.banner-title{font-size:18px;font-weight:500;color:var(--white)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.lg{width:12px;height:12px;flex:none}

h1.sec,h2.sec,h3.sec{font-size:12px;font-weight:500;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.6px;margin:26px 0 8px}

.tag{font-size:11px;font-weight:500;text-transform:capitalize;letter-spacing:.3px}

.incident,.maint,.hist{padding:16px 0;border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);margin-bottom:-0.5px}
.incident.solo{border:none;padding-top:6px}
.incident-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.incident-title{font-size:15px;font-weight:500;color:var(--white)}
h1.incident-title{margin:0;font-size:20px}
.meta{color:var(--text-2);font-size:13px;margin:8px 0}

.timeline{margin-top:10px}
.tl-row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding-bottom:12px;margin-bottom:12px;border-bottom:.5px solid var(--line)}
.tl-row:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none}
.tl-type{font-size:12px;font-weight:500;min-width:88px;flex:none}
.tl-time{color:var(--text-3);font-size:12px;min-width:120px;flex:none}
.tl-body{color:#C7D0DD;font-size:13px;flex:1;min-width:200px}
.timeline.solo{border-left:2px solid var(--line-2);padding-left:18px;margin-top:18px}
.tl-block{padding-bottom:18px;margin-bottom:18px;border-bottom:.5px solid var(--line)}
.tl-block:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none}
.tl-meta{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.timeline.solo .tl-body{color:#C7D0DD;font-size:13px;line-height:1.6}

.maint-head{display:flex;align-items:center;gap:10px;color:var(--white);flex-wrap:wrap}
.maint-sub{color:var(--text-2);font-size:13px;margin-top:6px}
.maint-link{color:var(--accent);text-decoration:none;white-space:nowrap}
.maint-cta{display:flex;justify-content:flex-end;margin-top:12px}
.maint-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:8px}
.maint-row .meta{margin:0;flex:1 1 auto}
.maint-row .btn-progress{flex:none}
.btn-progress{font-size:13px;color:var(--text);white-space:nowrap;transition:border-color .15s,color .15s}
.btn-progress:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.maint-link:hover{text-decoration:underline}
.maint-body{color:#C7D0DD;font-size:13px;margin-top:8px}

.cgroup-label{color:var(--text-3);font-size:12px;margin:18px 0 8px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.ccard{background:var(--surface);border:.5px solid var(--line-2);border-radius:12px;padding:14px}
.ccard-stat{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500}
.ccard-stat .dot{width:9px;height:9px;flex:none}
.ccard-name{color:var(--white);font-size:14px;margin-top:8px}

.subscribe{margin-top:32px}
.subscribe-form{padding-top:22px;border-top:.5px solid var(--line)}
.sub-title{font-size:15px;font-weight:500;color:var(--white)}
.sub-sub{color:var(--text-2);font-size:13px;margin:4px 0 12px}
.sub-row{display:flex;gap:8px;max-width:460px}
.sub-row input{flex:1}
.sub-error{color:var(--red);font-size:13px;margin-bottom:10px}
.subscribed-ok{color:#27C281;font-size:14px;padding-top:22px;border-top:.5px solid var(--line)}

input,select,textarea,button{font-family:inherit;font-size:14px}
input,select,textarea{background:var(--bg);border:.5px solid var(--line-2);border-radius:8px;
  padding:9px 12px;color:var(--white);width:100%}
input::placeholder,textarea::placeholder{color:var(--text-3)}
textarea{min-height:80px;resize:vertical}
button{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:9px 16px;
  font-weight:500;cursor:pointer;white-space:nowrap}
button:hover{filter:brightness(1.08)}
button.danger{background:transparent;border:.5px solid var(--red);color:var(--red)}

.site-foot{max-width:880px;margin:0 auto;padding:18px 20px;border-top:.5px solid var(--line);
  display:flex;justify-content:space-between;color:var(--text-3);font-size:12px;gap:12px;flex-wrap:wrap}
.site-foot a{color:var(--text-3)}
.back{display:inline-block;color:var(--text-2);font-size:13px;margin:10px 0}
.empty{color:var(--text-2);font-size:14px}
.result{text-align:center;padding:60px 20px}
.result h1{color:var(--white)}
.result.bad h1{color:var(--red)}

/* Admin */
.login{max-width:340px;margin:50px auto;background:var(--surface);border:.5px solid var(--line);
  border-radius:12px;padding:26px}
.login h1{color:var(--white);font-size:20px;margin:0 0 16px}
.login label{display:block;font-size:13px;color:var(--text-2);margin-bottom:12px}
.login input{margin-top:6px}
.login button{width:100%;margin-top:6px}
.admin main{max-width:1000px}
.admin .site-head,.admin .site-foot{max-width:1000px}
.panel{background:var(--surface);border:.5px solid var(--line);border-radius:12px;padding:16px}
.adm-link{margin-left:auto;color:var(--text-3);font-size:12px}
.adm-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:780px){.adm-grid{grid-template-columns:1fr}}
.adm-card{background:var(--surface);border:.5px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.adm-card-head{display:flex;align-items:center;gap:8px;color:var(--white);margin-bottom:10px;flex-wrap:wrap}
.inline-form{display:flex;gap:6px}
.inline-form input{flex:1}
.inline-form select{width:auto}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}
.del-form{display:inline}
.stack>*{margin-bottom:10px}
.stack .two,.two{display:flex;gap:10px}
.two>*{flex:1}
.field-label{font-size:13px;color:var(--text-2);display:block}
.field-label select,.field-label input{width:100%;margin-top:5px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;background:var(--bg);
  border:.5px solid var(--line);border-radius:8px;padding:12px}
.chk{font-size:13px;color:var(--text);display:flex;align-items:center;gap:7px}
.chk input{width:auto}
.chk.notify{font-size:15px;color:var(--text);gap:9px}
.chk.notify input{width:auto;transform:scale(1.25);transform-origin:left center;margin-right:3px}
.notify-wrap{background:var(--surface-2);border:.5px solid var(--line-2);border-left:3px solid var(--accent);border-radius:8px;padding:11px 13px;margin:8px 0}
.card-foot .notify-wrap{flex:1 1 100%;margin:0}
.notify-hint{font-size:12px;color:var(--text-2);margin-top:6px}
.comp-table .comp-row{display:flex;gap:6px;margin-bottom:6px}
.comp-row input{flex:1}
.comp-row select{width:auto}

/* Subscribe modal (CSS :target, no JS) */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;padding:40px 16px;overflow:auto}
.modal:target{display:flex;align-items:flex-start;justify-content:center}
.modal-card{background:var(--surface);border:.5px solid var(--line-2);border-radius:14px;padding:24px;max-width:440px;width:100%;position:relative}
.modal-close{position:absolute;top:8px;right:14px;color:var(--text-2);font-size:24px;line-height:1;text-decoration:none}
.modal-close:hover{color:var(--white);text-decoration:none}
.modal .sub-row{max-width:none}

/* Admin: past-incident rows */
.row-line{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:.5px solid var(--line);flex-wrap:wrap}
.row-line:last-child{border-bottom:none}
.row-title{color:var(--white);font-size:14px;flex:1;min-width:120px}
.row-line .meta{margin:0}

/* Collapsible history sections */
.disc{border-top:.5px solid var(--line)}
.disc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:16px 0;color:var(--text-3);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.6px}
.disc>summary::-webkit-details-marker{display:none}
.disc>summary::after{content:'\25BE';margin-left:auto;font-size:11px;transition:transform .15s}
.disc[open]>summary::after{transform:rotate(180deg)}
.disc>summary:hover{color:var(--text-2)}
.disc-body{padding-bottom:10px}

/* Component reorder buttons */
.comp-row .move{background:transparent;border:.5px solid var(--line-2);color:var(--text-2);padding:9px 11px;font-size:14px;line-height:1}
.comp-row .move:hover{background:var(--surface-2);color:var(--white);filter:none}

/* Brand area: align logo image / text with the subtitle */
.brand{display:flex;align-items:center;gap:8px}
.brand-logo{display:block;width:auto}

/* In-card edit disclosure (incident/maintenance) */
.adm-card .card-edit{border-top:.5px solid var(--line);margin-top:10px}
.adm-card .card-edit>summary{padding:10px 0;font-size:11px}
.adm-card .card-edit .stack{padding-top:4px}

/* Subscribe modal form (stacked: name pair, email, button) */
.sub-form{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.sub-form .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sub-name{color:var(--white)}

/* Collapsible maintenance with a large right-side arrow */
details.maint{padding-top:0;padding-bottom:0}
.maint-summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 0}
.maint-summary::-webkit-details-marker{display:none}
.maint-headings{flex:1;min-width:0}
.maint-arrow{flex:none;width:12px;height:12px;margin-right:4px;
  border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);
  transform:rotate(-45deg);transition:transform .15s}
details.maint[open] .maint-arrow{transform:rotate(45deg)}
.maint-summary:hover .maint-arrow{border-color:var(--white)}
.maint-detail{padding-bottom:16px}
.maint-detail .maint-body,.maint-detail .timeline{margin-top:0}
.maint-detail .maint-body + .timeline{margin-top:18px;padding-top:16px;border-top:.5px solid var(--line)}

/* Divider between sections */
.sec-div{border:0;border-top:1px solid var(--line-2);margin:30px 0 4px}

/* Larger post/reply composer in admin */
textarea.composer{min-height:74px}

/* Admin: editable posted updates / notes */
.logrow{padding:12px 0;border-bottom:.5px solid var(--line)}
.logrow:last-child{border-bottom:none}
.logrow-top{display:flex;align-items:center;gap:10px}
.logrow-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.logrow-actions{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.logrow-body{color:#C7D0DD;font-size:13px;margin-top:6px;line-height:1.6}
.mini{background:transparent;border:.5px solid var(--line-2);color:var(--text-2);padding:5px 11px;font-size:12px;border-radius:7px;width:auto;cursor:pointer}
.mini:hover{background:var(--surface-2);color:var(--white);filter:none}
.mini.danger-text{color:#E8888A;border-color:rgba(226,75,74,.45)}
.mini.danger-text:hover{background:rgba(226,75,74,.12);color:#F2A6A7}
.logedit{display:none;margin-top:10px}
.logrow.editing .logedit{display:block}
.logrow.editing .logrow-body{opacity:.4}
.lognest{margin:2px 0 12px}

/* Admin flash message */
.flash{background:var(--surface-2);border:.5px solid var(--line-2);border-left:3px solid var(--accent);
  border-radius:8px;padding:12px 14px;margin:0 0 16px;color:var(--text);font-size:14px;line-height:1.5}

/* Admin activity / audit log */
.act-summary{display:flex;flex-wrap:wrap;gap:22px}
.act-stat{display:flex;flex-direction:column;gap:3px}
.act-stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3)}
.act-stat-val{font-size:15px;color:var(--white);font-weight:500}
.act-log{padding:4px 0}
.act-row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:.5px solid var(--line);font-size:13px}
.act-row:last-child{border-bottom:0}
.act-dot{width:8px;height:8px;border-radius:50%;flex:none}
.act-action{color:var(--text);font-weight:500}
.act-detail{color:var(--text-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-ip{color:var(--text-3);font-variant-numeric:tabular-nums;margin-left:auto}
.act-time{color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:600px){
  .act-detail{flex:1 1 100%;order:3;margin-left:18px}
  .act-ip{order:4;margin-left:18px}
}