/* Design C — Control Room (dark bento) */
body{background:#0a1224}
.cr{--bg:#0a1224;--t1:#111c36;--t2:#16244a;--ln:rgba(255,255,255,.09);--tx:#e8eefb;--mu:#93a4c6;--ac:#38bdf8;--ac2:#818cf8;--am:#fbbf24;
  color:var(--tx);padding:22px 0 46px;background:radial-gradient(900px 500px at 12% -5%,rgba(56,189,248,.16),transparent 60%),radial-gradient(700px 500px at 100% 10%,rgba(129,140,248,.16),transparent 60%),var(--bg)}
.cr a{color:inherit}.cr a:hover{text-decoration:none}
.cr-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.bt{background:linear-gradient(160deg,var(--t2),var(--t1));border:1px solid var(--ln);border-radius:22px;padding:18px;min-width:0;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.bt h2{font-size:1rem;margin:0 0 12px;display:flex;align-items:center;gap:8px;color:#fff;letter-spacing:.01em}
.bt h2 a{margin-left:auto;font-size:.78rem;font-weight:600;color:var(--ac)}
.hero{grid-column:span 5;grid-row:auto;background:radial-gradient(500px 300px at 90% 0%,rgba(56,189,248,.35),transparent 65%),linear-gradient(135deg,#0d2b66,#0a1a3f);padding:26px;display:flex;flex-direction:column}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.1);border:1px solid var(--ln);border-radius:999px;padding:4px 14px;font-size:.8rem;font-weight:600}
.live{width:9px;height:9px;border-radius:50%;background:#34d399;animation:lv 1.8s infinite}
@keyframes lv{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.clock{font-variant-numeric:tabular-nums;color:var(--mu);font-size:.9rem}
.hero h1{font-size:clamp(2rem,4.4vw,3.4rem);margin:18px 0 6px;color:#fff;line-height:1.05;letter-spacing:-.01em}
.hero p{color:#b8c7e6;margin:0 0 20px;font-size:1.05rem;max-width:520px}
.hero-cta{margin-top:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.sosbtn{position:relative;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#ef4444,#f97316);color:#fff!important;border-radius:20px;padding:14px 26px;box-shadow:0 12px 30px rgba(239,68,68,.4)}
.sosbtn b{font-size:2.4rem;line-height:1}.sosbtn em{font-style:normal;font-weight:700}
.pulse{position:absolute;inset:0;border-radius:20px;border:2px solid #f87171;animation:pl 2s infinite}
@keyframes pl{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.25,1.5);opacity:0}}
.hero-links{display:flex;gap:8px;flex-wrap:wrap}
.hero-links a{background:rgba(255,255,255,.1);border:1px solid var(--ln);border-radius:999px;padding:8px 16px;font-weight:600;font-size:.9rem;transition:.2s}
.hero-links a:hover{background:#fff;color:#0a1a3f}
.rcol{grid-column:span 7;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-content:stretch;grid-template-rows:1fr auto}
.banner{grid-column:1/-1;padding:0;background:#0d1a38}
.banner .bn{border-radius:0;box-shadow:none}
.kpi{text-align:center;padding:14px}
.kpi b{display:block;font-size:2.2rem;line-height:1.1;background:linear-gradient(90deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi span{color:var(--mu);font-size:.82rem}
.hl{grid-column:span 4}
.hl-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hl-g a{background:rgba(255,255,255,.06);border:1px solid var(--ln);border-radius:14px;padding:9px 4px;text-align:center;display:flex;flex-direction:column;transition:.2s}
.hl-g a:hover{background:var(--ac);color:#05213a}
.hl-g strong{font-size:1.15rem}.hl-g span{font-size:.68rem;color:var(--mu)}.hl-g a:hover span{color:#05213a}
.hl-g a.sos{background:linear-gradient(135deg,#ef4444,#f97316);border:0}.hl-g a.sos span{color:#fff}
.sp{grid-column:span 8;display:flex;gap:18px;align-items:flex-start}
.sp .av{width:84px;height:84px;border:3px solid var(--ac)}
.sp small{color:var(--ac);text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:.72rem}
.sp blockquote{margin:6px 0 8px;line-height:1.6;color:#d6e0f5}.sp b{color:#fff}
.alert{grid-column:span 4;background:linear-gradient(160deg,#4a1d2b,#2a1220);border-color:rgba(248,113,113,.3)}
.alert a{display:block;padding:9px 0;border-top:1px solid var(--ln)}.alert a:first-of-type{border:0}
.alert b{display:block;font-size:.93rem}.alert span{font-size:.82rem;color:#e7b5bf}.alert a:hover b{color:var(--am)}
.news{grid-column:span 5}
.news .row{display:flex;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--ln)}.news .row:first-of-type{border:0}
.news .th{width:76px;height:60px;border-radius:12px;object-fit:cover;flex:none;font-size:1.6rem}
.news h3{font-size:.93rem;margin:0 0 2px;line-height:1.35}.news time{color:var(--mu)}.news .row:hover h3{color:var(--ac)}
.stats{grid-column:span 3}
.st{display:grid;grid-template-columns:1fr 38px;gap:2px 8px;margin-bottom:9px;font-size:.82rem}
.st span{color:var(--mu)}.st b{text-align:right;color:#fff}.st .bar{grid-column:1/3;order:3;height:6px;background:rgba(255,255,255,.1);margin:0}
.units{grid-column:span 7}
.u-g{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.u-g a{background:rgba(255,255,255,.05);border:1px solid var(--ln);border-radius:14px;padding:10px 8px;text-align:center;font-size:.78rem;line-height:1.25;display:flex;flex-direction:column;gap:4px;align-items:center;transition:.2s}
.u-g a:hover{background:rgba(56,189,248,.18);border-color:var(--ac);transform:translateY(-3px)}
.u-g i{font-style:normal;font-size:1.5rem}
.stn{grid-column:span 5}
.stn input{width:100%;background:rgba(255,255,255,.07);border:1px solid var(--ln);border-radius:12px;padding:9px 12px;color:#fff;font:inherit;margin-bottom:8px}
.stn input::placeholder{color:var(--mu)}
.stn ul{list-style:none;margin:0;padding:0;max-height:236px;overflow:auto;scrollbar-width:thin}
.stn li{display:flex;align-items:center;border-top:1px solid var(--ln)}.stn li a:first-child{flex:1;padding:8px 2px;font-size:.88rem}.stn li a:first-child:hover{color:var(--ac)}
.stn .ph{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(52,211,153,.18)}
.gal{grid-column:span 4}
.g-g{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.g-g img{aspect-ratio:1;object-fit:cover;width:100%;border-radius:12px;transition:.3s}.g-g a:hover img{transform:scale(1.06)}
.lead{grid-column:span 8}
.l-g{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.l-g>div{text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.l-g .av{width:56px;height:56px;border:2px solid var(--ac2)}.l-g b{font-size:.8rem;line-height:1.25}.l-g small{color:var(--mu);font-size:.7rem;line-height:1.25}
.svc{grid-column:span 7}
.s-g{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.s-g a{display:flex;justify-content:space-between;background:rgba(255,255,255,.05);border:1px solid var(--ln);border-radius:12px;padding:9px 12px;font-size:.86rem;transition:.2s}
.s-g a:hover{background:var(--ac);color:#05213a}
.notice{grid-column:span 5}
.notice a{display:block;padding:8px 0;border-top:1px solid var(--ln);font-size:.9rem}.notice a:first-of-type{border:0}.notice a:hover{color:var(--ac)}
.tag{display:inline-block;border-radius:999px;padding:0 9px;font-size:.68rem;font-weight:700;color:#fff;margin-right:4px}
.cr .bar i{background:linear-gradient(90deg,var(--ac),var(--ac2))}
@media(max-width:1000px){
  .hero,.rcol{grid-column:span 12}
  .hl,.sp,.alert,.news,.stats,.units,.stn,.gal,.lead,.svc,.notice{grid-column:span 6}
  .sp,.lead,.units,.svc{grid-column:span 12}
}
@media(max-width:700px){
  .cr{padding-top:12px}.cr-grid{gap:10px}
  .rcol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hl,.sp,.alert,.news,.stats,.units,.stn,.gal,.lead,.svc,.notice{grid-column:span 12}
  .hero{padding:18px}.sosbtn b{font-size:2rem}.sosbtn{padding:12px 20px;width:100%;justify-content:center}.hero-links{width:100%}.hero-links a{flex:1;text-align:center;padding:8px 6px;font-size:.82rem}
  .u-g{grid-template-columns:repeat(3,1fr)}.l-g{grid-template-columns:repeat(2,1fr)}.s-g{grid-template-columns:1fr}
  .sp{flex-direction:column}
}