@import url("https://fonts.googleapis.com/css2?family=DotGothic16&display=swap");

:root {
  --black:#020402; --bg:#050805; --panel:#091009; --panel2:#0d160d;
  --green:#9cff73; --bright:#c2ff9d; --dark:#21341d; --amber:#ffc45d;
  --text:#d9f8cf; --muted:#789071; --border:rgba(156,255,115,.28);
  --strong:rgba(156,255,115,.58); --dot:"DotGothic16","Courier New",monospace;
}
*{box-sizing:border-box} html{min-height:100%;background:var(--black)}
body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(circle at 50% 0%,rgba(65,110,55,.16),transparent 42%),linear-gradient(#020402,#050805 35%,#020402);font-family:var(--dot);letter-spacing:.03em;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;background:linear-gradient(rgba(255,255,255,.018) 50%,transparent 50%);background-size:100% 4px;opacity:.55}
.crt-overlay{position:fixed;inset:0;z-index:91;pointer-events:none;box-shadow:inset 0 0 110px rgba(0,0,0,.84);animation:flicker 8s infinite steps(1)}
button,input,a{font:inherit} [hidden]{display:none!important}
.boot-screen{min-height:100vh;display:grid;place-items:center;padding:20px}
.boot-panel{width:min(100%,560px);padding:clamp(20px,5vw,38px);border:1px solid var(--strong);background:rgba(3,7,3,.92);box-shadow:0 0 16px rgba(156,255,115,.12),inset 0 0 50px rgba(156,255,115,.035);text-align:center}
.boot-kicker,.boot-device-name,.boot-owner,.boot-location{margin:8px 0;text-transform:uppercase}
.boot-kicker{color:var(--amber);font-size:.72rem;letter-spacing:.16em}
.boot-logo{display:block;width:min(78vw,310px);margin:14px auto;object-fit:cover;filter:grayscale(1) sepia(.2) hue-rotate(55deg) saturate(1.5)}
.boot-device-name{color:var(--bright);font-size:clamp(.95rem,3vw,1.25rem);letter-spacing:.12em}
.boot-owner{line-height:1.7}.boot-location{color:var(--muted);font-size:.78rem}
.boot-log{min-height:4.7em;margin-top:20px;padding:14px;border:1px dashed var(--dark);color:var(--green);background:#010301;text-align:left;line-height:1.55}
.boot-enter{width:100%;margin-top:14px;padding:14px;border:1px solid var(--green);background:var(--dark);color:var(--bright);cursor:pointer}
.app-shell{min-height:100vh;padding:18px 16px 170px}
.app-header{position:relative;display:grid;grid-template-columns:1fr auto;gap:14px;max-width:980px;margin:0 auto 16px;padding:14px;border:1px solid var(--border);background:rgba(5,10,5,.94)}
.header-brand{display:flex;align-items:center;gap:14px;min-width:0}
.header-pad-logo{width:92px;height:92px;object-fit:cover;border:1px solid var(--dark);filter:grayscale(1) sepia(.2) hue-rotate(55deg) saturate(1.5)}
.header-brand h1{margin:2px 0;color:var(--green);font-size:clamp(2rem,8vw,4rem);font-weight:400;letter-spacing:.14em;line-height:.95}
.header-brand p,.header-brand small,.micro-label{margin:0;text-transform:uppercase}
.header-brand p{font-size:.78rem}.header-brand small,.micro-label{color:var(--muted);font-size:.62rem}
.ktx-seal-link{display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--dark);background:#020402}
.ktx-seal-link img{max-width:54px;max-height:54px;object-fit:contain}
.system-status{position:absolute;right:14px;bottom:10px;display:flex;align-items:center;gap:7px;color:var(--green);font-size:.64rem}
.system-status span,.live-indicator span{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(156,255,115,.9)}
.screen-area{max-width:980px;margin:0 auto}
.screen{display:none;min-height:440px;padding:clamp(18px,4vw,30px);border:1px solid var(--border);background:rgba(7,13,7,.94)}
.screen.active-screen{display:block}
.screen-code,.app-footer{margin:0;color:var(--muted);text-transform:uppercase;letter-spacing:.13em;font-size:.68rem}
.screen h2{margin:9px 0 12px;color:var(--green);font-size:clamp(1.5rem,5vw,2.75rem);font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.screen-intro{max-width:720px;margin:0 0 24px;color:#b5cfad;line-height:1.65}
.status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.status-grid article{padding:14px;border-left:3px solid var(--dark);background:var(--panel2)}
.status-grid span,.status-grid strong{display:block}.status-grid span{color:var(--muted);font-size:.66rem}.status-grid strong{margin-top:5px;font-size:.86rem;font-weight:400}
.external-links,.case-grid{display:grid;gap:12px}
.external-links a,.disabled-link,.case-card,.decoder-form button{width:100%;padding:15px 16px;border:1px solid var(--border);background:var(--panel);color:var(--text);text-align:left;text-decoration:none;cursor:pointer}
.disabled-link{display:grid;gap:5px;color:var(--muted);cursor:not-allowed}.disabled-link small{color:var(--amber)}
.case-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.case-card{min-height:180px;display:flex;flex-direction:column;justify-content:center;gap:9px}
.case-card span{color:#ff6262;font-size:.6rem}.case-card strong{color:var(--green);font-size:1.25rem;font-weight:400}.case-card em{font-style:normal}.case-card small{color:var(--muted)}
.dossier-response,.decoder-response{margin-top:16px;padding:15px;border:1px dashed var(--dark);background:#020402;color:var(--amber);line-height:1.55}
.decoder-form{display:grid;gap:12px;max-width:660px}.decoder-form label{color:var(--muted);font-size:.72rem;letter-spacing:.12em}
.decoder-form input{width:100%;padding:16px;border:1px solid var(--border);background:#010301;color:var(--bright);text-transform:uppercase}
.decoder-form button{text-align:center}.decoder-response a{color:var(--green)}
.radio-player{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:10px;width:min(calc(100% - 24px),700px);min-height:62px;padding:8px 12px 8px 8px;border:1px solid var(--strong);border-radius:999px;background:#050905}
.play-button,.mute-button{display:grid;place-items:center;flex:0 0 auto;border:0;border-radius:50%;background:var(--green);color:#061005;cursor:pointer}
.play-button{width:44px;height:44px}.mute-button{width:34px;height:34px}
.live-indicator{display:flex;align-items:center;gap:6px;color:var(--green);font-size:.65rem}
.track-details{display:grid;flex:1 1 auto;min-width:0;overflow:hidden}.track-details strong,.track-details span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-details strong{font-size:.78rem}.track-details span{color:var(--muted);font-size:.68rem}
.bottom-nav{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:51;display:grid;grid-template-columns:repeat(4,1fr);width:min(calc(100% - 24px),700px);border:1px solid var(--border);background:#060b06}
.nav-button{min-height:48px;padding:8px 5px;border:0;border-right:1px solid var(--border);background:transparent;color:var(--muted);font-size:.62rem;cursor:pointer}
.nav-button:last-child{border-right:0}.nav-button.active{background:var(--dark);color:var(--green)}
.app-footer{max-width:980px;margin:16px auto 0;text-align:center}
@keyframes flicker{0%,96%,100%{opacity:1}97%{opacity:.92}98%{opacity:.98}}
@media(max-width:700px){.app-shell{padding:10px 10px 158px}.app-header{padding:10px}.header-pad-logo{width:70px;height:70px}.header-brand h1{font-size:2.4rem}.header-brand p{font-size:.65rem}.header-brand small{display:none}.ktx-seal-link{width:48px;height:48px}.ktx-seal-link img{max-width:42px;max-height:42px}.system-status{display:none}.screen{min-height:430px;padding:17px}.status-grid,.case-grid{grid-template-columns:1fr}.case-card{min-height:125px}.live-indicator{display:none}.nav-button{font-size:.54rem}}


.external-links a {
  display: grid;
  gap: 5px;
}

.external-links a small {
  color: var(--amber);
}

.case-card {
  overflow: hidden;
  padding: 0;
  text-align: left;
}

.case-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--border);
  filter: saturate(.82) contrast(1.04);
}

.case-card span,
.case-card strong,
.case-card em,
.case-card small {
  margin-left: 14px;
  margin-right: 14px;
}

.case-card small {
  margin-bottom: 14px;
}

.dossier-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .94);
  overflow: auto;
}

.dossier-modal img {
  display: block;
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  width: auto;
  height: auto;
  border: 1px solid var(--strong);
  box-shadow: 0 0 24px rgba(156,255,115,.18);
}

.dossier-close {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 121;
  width: 44px;
  height: 44px;
  border: 1px solid var(--green);
  background: var(--black);
  color: var(--green);
  font-size: 1.6rem;
  cursor: pointer;
}

@media (max-width:700px) {
  .case-card img {
    aspect-ratio: 16 / 9;
  }
}


/* ===== P.A.D. SECURE COMMUNICATIONS ===== */

.comms-panel {
  margin-top: 24px;
  border: 1px solid var(--border);
  background: rgba(1, 9, 9, 0.65);
  padding: 22px;
}

#comms-auth-view {
  display: grid;
  gap: 14px;
  max-width: 620px;
}

.comms-status {
  color: var(--amber);
  letter-spacing: .14em;
  font-size: .8rem;
  margin: 0 0 6px;
}

#comms-auth-view input,
#comms-message-input {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, .55);
  color: var(--bright);
  outline: none;
}

#comms-auth-view input:focus,
#comms-message-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 10px rgba(156, 255, 115, .15);
}

#comms-auth-view button,
#comms-sign-out,
#comms-send {
  padding: 12px 16px;
  border: 1px solid var(--green);
  background: rgba(156, 255, 115, .08);
  color: var(--bright);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#comms-auth-view button:hover,
#comms-sign-out:hover,
#comms-send:hover {
  background: rgba(156, 255, 115, .18);
}

#comms-auth-message {
  min-height: 1.2em;
  color: var(--amber);
}

.comms-user-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

#comms-user-label {
  color: var(--bright);
  letter-spacing: .08em;
}

#comms-messages {
  min-height: 320px;
  max-height: 480px;
  overflow-y: auto;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, .45);
}

.comms-compose {
  display: grid;
 grid-template-columns: auto 1fr auto;
  gap: 10px;
}

@media (max-width: 600px) {
  .comms-compose {
    grid-template-columns: 1fr;
  }

  .comms-user-bar {
    align-items: stretch;
    flex-direction: column;
  }
}
/* COMMS ROLE COLORS — LOCKED */
.comms-message.role-cadet {
  color: #7CFF4F;
}

.comms-message.role-moderator {
  color: #CC5500;
}

.comms-message.role-owner {
  color: #0047AB;
}
.comms-message.role-system {
  color: #FF0000;
}
.comms-message.selected {
  outline: 2px solid currentColor;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}
.comms-image-thumbnail {
  display: block;
  max-width: 180px;
  max-height: 180px;
  width: auto;
  height: auto;
  margin-top: 8px;
  border: 1px solid currentColor;
  cursor: pointer;
}
#comms-image-button {
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 44px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
#comms-image-viewer[hidden] {
  display: none;
}

#comms-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#comms-image-viewer-full {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
}

#comms-image-viewer-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
#comms-image-preview[hidden] {
  display: none;
}

#comms-image-preview {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.comms-image-preview-box {
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

#comms-image-preview-image {
  max-width: 92vw;
  max-height: 75vh;
  width: auto;
  height: auto;
}

.comms-image-preview-actions {
  display: flex;
  gap: 12px;
}