/* ══════════════════════════════════════════════════════════
   corner.css — The Corner · Green Terminal System
   Fonts: JetBrains Mono (display) + IBM Plex Mono (body)
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;0,800;1,400;1,700&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,600;1,400&display=swap');

:root {
  --c-bg:       #030b04;
  --c-surface:  #071009;
  --c-surface2: #0c1a0d;
  --c-surface3: #111f12;
  --c-border:   #1a3a1c;
  --c-border2:  #265429;
  --c-text:     #b8ddb4;
  --c-muted:    #4d7a51;
  --c-dim:      #2a4d2d;
  --c-green:    #3ddc5c;
  --c-green2:   #5ae876;
  --c-bright:   #a8ffb4;
  --c-lime:     #b5f03d;
  --c-dark:     #010802;
  --c-display:  'JetBrains Mono', 'Fira Code', monospace;
  --c-mono:     'IBM Plex Mono', 'JetBrains Mono', monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--c-bg)!important}
body{background:var(--c-bg)!important;color:var(--c-text)!important;font-family:var(--c-mono)!important}

h1,h2,h3,h4{font-family:var(--c-display)!important;color:var(--c-bright)!important;letter-spacing:-0.03em!important;font-weight:800!important}
h5,h6{font-family:var(--c-display)!important;color:var(--c-text)!important;font-weight:700!important}
p,span,label,li,td,th{font-family:var(--c-mono)!important;color:var(--c-text)!important}
small,.muted,.hint,.text-muted{color:var(--c-muted)!important;font-family:var(--c-mono)!important}

a{color:var(--c-green)!important;text-decoration:none!important;transition:color 0.15s!important}
a:hover{color:var(--c-bright)!important;text-decoration:underline!important}

header,nav,#top-bar,#main-header,.header-bar{background:var(--c-bg)!important;border-bottom:1px solid var(--c-border)!important;font-family:var(--c-mono)!important}

/* ── Back link ── */
#corner-back-link{display:block;background:var(--c-dark);border-bottom:1px solid var(--c-border);padding:0.5rem 1.5rem;font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--c-muted)!important;text-decoration:none!important;font-family:var(--c-mono)!important}
#corner-back-link::before{content:'> ';color:var(--c-green)}
#corner-back-link:hover{color:var(--c-green)!important;text-decoration:none!important}

/* ── Cards / menu tiles ── */
.card,.column,.column.card,.column.columnfade,.column.pointer.card,
#container-1,#container-2,#container-3,#container-3a,#container-4,
#container-5,#container-6,#container-7,#container-8,
#container-14,#container-15,#container-18,#container-20,#container-21{
  background:var(--c-surface2)!important;
  border:1px solid var(--c-border)!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  color:var(--c-text)!important;
  transition:border-color 0.15s,background 0.15s!important
}
.column:hover,.column.card:hover,.column.pointer:hover{
  background:var(--c-surface3)!important;
  border-color:var(--c-border2)!important;
  box-shadow:0 0 0 1px var(--c-border2)!important;
  transform:none!important
}
.column>h2,.column>h3,.column>p,.column>span,.card>h2,.card>h3{color:var(--c-text)!important;font-family:var(--c-display)!important}
.column .las,.column .la,.column i,.card i{color:var(--c-green)!important}

#mainmenu,#main{background:var(--c-bg)!important}

/* ── Primary GO buttons (green filled) ── */
.gobutton,.gowebcam,.mainScreenShareButton,
button.gobutton,input.gobutton,
#go,#gowebcam,#goToLastSavedRoom,
button[onclick*="createRoom"],
button[onclick*="publishWebcam"],
button[onclick*="publishScreen"],
button[onclick*="jumptoroom"],
button[onclick*="generateQR"]{
  background:var(--c-green)!important;
  border:2px solid var(--c-border2)!important;
  color:var(--c-dark)!important;
  font-family:var(--c-display)!important;
  font-weight:700!important;
  font-size:0.85rem!important;
  letter-spacing:0.06em!important;
  text-transform:uppercase!important;
  border-radius:0!important;
  cursor:pointer!important;
  transition:background 0.15s,color 0.15s!important;
  padding:0.75rem 1.25rem!important
}
.gobutton:hover,.gowebcam:hover,#go:hover,#gowebcam:hover,
button[onclick*="createRoom"]:hover,button[onclick*="publishWebcam"]:hover{
  background:var(--c-green2)!important;
  border-color:var(--c-green)!important;
  color:var(--c-dark)!important
}
.gobutton:disabled,#gowebcam:disabled{
  background:var(--c-surface3)!important;
  border-color:var(--c-border)!important;
  color:var(--c-muted)!important;
  cursor:not-allowed!important
}

/* ── All other buttons ── */
button:not(.gobutton):not(.gowebcam):not(.mainScreenShareButton),
.btn,input[type="button"]:not(.gobutton),input[type="submit"]:not(.gobutton){
  background:var(--c-surface2)!important;
  border:1px solid var(--c-border)!important;
  color:var(--c-text)!important;
  font-family:var(--c-mono)!important;
  border-radius:0!important;
  letter-spacing:0.06em!important;
  transition:border-color 0.15s,color 0.15s!important
}
button:not(.gobutton):not(.gowebcam):hover{border-color:var(--c-green)!important;color:var(--c-green)!important}

/* ── Inputs ── */
input[type="text"],input[type="url"],input[type="search"],
input[type="number"],input[type="password"],input[type="email"],
textarea,select{
  background:var(--c-surface2)!important;
  border:1px solid var(--c-border)!important;
  border-radius:0!important;
  color:var(--c-text)!important;
  font-family:var(--c-mono)!important;
  caret-color:var(--c-green)!important;
  transition:border-color 0.15s!important
}
input:focus,textarea:focus,select:focus{border-color:var(--c-green)!important;outline:none!important;box-shadow:0 0 0 2px rgba(61,220,92,0.1)!important}
input::placeholder,textarea::placeholder{color:var(--c-muted)!important}
select option{background:var(--c-surface2)!important;color:var(--c-text)!important}

/* ── Panels / modals ── */
.panel,.modal,.dialog,.overlay-content,.promptModalInner,
[class*="modal"],[class*="dialog"],[class*="popup"]{
  background:var(--c-surface)!important;
  border:1px solid var(--c-border)!important;
  border-radius:0!important;
  color:var(--c-text)!important
}

/* ── URL / share boxes ── */
.link-box,.url-display,#generatedURL,.share-url,
input[readonly],input[disabled]{
  background:var(--c-dark)!important;
  border:1px solid var(--c-border)!important;
  color:var(--c-green)!important;
  font-family:var(--c-mono)!important;
  border-radius:0!important
}

/* ── Chat ── */
#chat,#chatbox,.chat-container,.chat-messages,[class*="chat"]{
  background:var(--c-surface)!important;
  border:1px solid var(--c-border)!important;
  border-radius:0!important;
  font-family:var(--c-mono)!important;
  font-size:0.85rem!important;
  color:var(--c-text)!important
}

/* ── Footer ── */
footer,#footer,.footer,#credits,#terms{
  background:var(--c-bg)!important;
  border-top:1px solid var(--c-border)!important;
  color:var(--c-muted)!important;
  font-family:var(--c-mono)!important;
  font-size:0.7rem!important
}
footer a,#credits a{color:var(--c-muted)!important}
footer a:hover,#credits a:hover{color:var(--c-green)!important}

/* ── Form controls ── */
input[type="range"]{accent-color:var(--c-green)!important}
input[type="checkbox"]{accent-color:var(--c-green)!important}
input[type="radio"]{accent-color:var(--c-green)!important}

/* ── Active/live states ── */
.active,.live,.recording,.mute-off,.online{color:var(--c-lime)!important}

/* ── Float action buttons ── */
.float{background:var(--c-surface2)!important;border:1px solid var(--c-border)!important;border-radius:0!important;color:var(--c-text)!important}
.float:hover{background:var(--c-surface3)!important;border-color:var(--c-green)!important;color:var(--c-green)!important}
.float.active,.float[aria-pressed="true"]{background:var(--c-green)!important;border-color:var(--c-border2)!important;color:var(--c-dark)!important}

/* ── Copy button ── */
#copyButton,button[onclick*="copy"]{background:var(--c-surface3)!important;border:1px solid var(--c-border2)!important;color:var(--c-green)!important;border-radius:0!important}
#copyButton:hover{background:var(--c-green)!important;color:var(--c-dark)!important}

/* ── Room ID input ── */
#sid,#stream-id,input[id*="room"],input[id*="stream"]{background:var(--c-surface2)!important;border:1px solid var(--c-border2)!important;color:var(--c-bright)!important;font-family:var(--c-display)!important;font-size:1rem!important;letter-spacing:0.06em!important}

/* ── Scrollbars ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--c-bg)}
::-webkit-scrollbar-thumb{background:var(--c-border2);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--c-green)}

::selection{background:var(--c-green);color:var(--c-dark)}

/* ══ CORNER INFO BLOCK ═════════════════════════════════════ */
#info.fullcolumn{padding:0!important;margin:0!important}
.corner-info-block{border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);padding:5rem 3rem 4rem;background:var(--c-bg);box-sizing:border-box}
.corner-info-eyebrow{font-family:var(--c-mono)!important;font-size:0.68rem!important;letter-spacing:0.22em!important;text-transform:uppercase!important;color:var(--c-green)!important;margin-bottom:1.75rem!important;display:flex;align-items:center;gap:1rem;font-weight:400!important}
.corner-info-eyebrow::after{content:'';flex:0 0 60px;height:1px;background:var(--c-border)}
.corner-info-heading{font-family:var(--c-display)!important;font-size:clamp(3rem,6vw,5.5rem)!important;font-weight:800!important;line-height:0.95!important;letter-spacing:-0.04em!important;color:var(--c-bright)!important;margin-bottom:2rem!important;text-align:left!important}
.corner-info-heading em{font-style:italic!important;color:var(--c-green)!important}
.corner-info-desc{font-family:var(--c-mono)!important;font-size:0.95rem!important;line-height:1.85!important;color:var(--c-muted)!important;max-width:44ch!important;margin-bottom:3rem!important}
.corner-info-pillars{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:1px!important;background:var(--c-border)!important;margin-bottom:3rem!important;max-width:760px!important}
.corner-pillar{background:var(--c-bg)!important;padding:1.4rem 1.2rem!important}
.corner-pillar-icon{font-family:var(--c-mono)!important;font-size:0.62rem!important;letter-spacing:0.16em!important;text-transform:uppercase!important;color:var(--c-green)!important;margin-bottom:0.6rem!important;font-weight:400!important}
.corner-pillar-text{font-family:var(--c-display)!important;font-size:1rem!important;font-weight:700!important;color:var(--c-bright)!important;letter-spacing:-0.02em!important;line-height:1.4!important}
.corner-info-back{display:inline-block!important;font-family:var(--c-mono)!important;font-size:0.7rem!important;letter-spacing:0.14em!important;text-transform:uppercase!important;color:var(--c-muted)!important;text-decoration:none!important;border-bottom:1px solid var(--c-border)!important;padding-bottom:2px!important;transition:color 0.15s!important}
.corner-info-back::before{content:'> ';color:var(--c-green)}
.corner-info-back:hover{color:var(--c-green)!important;border-bottom-color:var(--c-green)!important;text-decoration:none!important}

@media(max-width:700px){
  .corner-info-pillars{grid-template-columns:repeat(2,1fr)!important}
  .corner-info-block{padding:3rem 1.5rem 2.5rem!important}
}