/* ============================================================================
   DEARMORE.NET — anonymous terminal landing (Apple IIe green-phosphor look).
   Standalone page: served with Layout=null, so ONLY this stylesheet loads.
   Deliberately embraces CRT phosphor glow + static scanlines for this one
   public screen (the rest of the app keeps the restrained retro theme).
   ============================================================================ */

:root {
  --p-bg:    #010603;              /* near-black with a faint green cast */
  --p:       #38ff6e;              /* bright phosphor green */
  --p-mid:   #21c24e;              /* mid intensity */
  --p-dim:   #108235;             /* dim (status line) */
  --p-faint: #0a5824;             /* faint (rules, faded areas) */
  --glow: 0 0 1px currentColor, 0 0 6px rgba(56,255,110,.55), 0 0 15px rgba(56,255,110,.25);
  --mono: ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono",
          "Liberation Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--p-bg);
  color: var(--p);
  font-family: var(--mono);
  text-shadow: var(--glow);
  overflow: hidden;
}
::selection { background: var(--p); color: var(--p-bg); text-shadow: none; }

/* full-screen column: hero on top, console pinned toward the bottom, status last */
#screen {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(0.75rem, 3vw, 2rem);
  /* respect the notch / status bar / home indicator when installed to the iOS home screen */
  padding-top: max(clamp(0.75rem, 3vw, 2rem), env(safe-area-inset-top));
  padding-bottom: max(clamp(0.75rem, 3vw, 2rem), env(safe-area-inset-bottom));
  padding-left: max(clamp(0.75rem, 3vw, 2rem), env(safe-area-inset-left));
  padding-right: max(clamp(0.75rem, 3vw, 2rem), env(safe-area-inset-right));
  cursor: text;
}

/* ---- hero: rotating ASCII logo (chrome gradient) framed by gradient rule bars ---- */
.hero-wrap { text-align: center; padding-top: clamp(1rem, 7vh, 4.5rem); flex: 0 1 auto; min-height: 0; overflow: hidden; }
.hero { display: inline-block; }          /* shrinks to the logo width so the bars match it */
.bar {
  height: clamp(3px, 0.55vw, 7px);
  margin: 0.7em 0;
  background: linear-gradient(90deg, transparent, var(--p-dim) 12%, var(--p) 50%, var(--p-dim) 88%, transparent);
  box-shadow: 0 0 6px rgba(56,255,110,0.4);
}
.hero-logo {
  display: block;
  margin: 0;
  white-space: pre;
  font-family: var(--mono);
  line-height: 1.02;
  /* elaborate warez "chrome" gradient fill (single hue, many intensity stops) */
  background: linear-gradient(178deg,
    #eafff2 0%, #a6ffc4 10%, #46ff80 26%, #18d454 44%,
    #0c9138 60%, #34ff84 74%, #0e7c34 88%, #063f19 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* glow (text-shadow won't show through transparent text, so use drop-shadow) */
  filter: drop-shadow(0 0 5px rgba(56,255,110,0.5)) drop-shadow(0 0 14px rgba(56,255,110,0.28));
}
/* per-font sizes (each figlet font has a different natural width) */
.logo-a { font-size: clamp(4px,   1.5vw,  12px); }   /* colossal */
.logo-b { font-size: clamp(4px,   1.4vw,  11px); }   /* solid block */
.logo-c { font-size: clamp(3px,   1.15vw,  9px); }   /* dithered warez */
.logo-d { font-size: clamp(2.4px, 0.95vw,  7px); }   /* isometric 3D */

/* ---- console ---- */
.spacer { flex: 1 1 auto; min-height: 0; }
#console {
  font-size: clamp(12px, 1.55vw, 15px);
  line-height: 1.5;
  max-height: 46vh;
  overflow: auto;
  flex-shrink: 0;          /* keep the prompt + recent output; let the hero shrink instead */
}
#console-out .line { white-space: pre-wrap; word-break: break-word; }
.prompt-line { white-space: pre-wrap; word-break: break-word; }
#cursor {
  display: inline-block;
  width: 0.62ch;
  height: 1.15em;
  margin-left: 1px;
  background: var(--p);
  box-shadow: var(--glow);
  vertical-align: text-bottom;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ---- dim status line, pinned to the bottom ---- */
#status {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--p-faint);
  color: var(--p-dim);
  text-shadow: 0 0 4px rgba(56,255,110,0.22);
  font-size: clamp(10px, 1.25vw, 12px);
  letter-spacing: 0.14em;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
}

/* ============================================================================
   Authenticated home: green-phosphor menu where the hero would be, with the
   command prompt + status line docked at the bottom of the screen.
   ============================================================================ */
.menu-wrap {
  flex: 1 1 auto;
  overflow: auto;
  padding-top: clamp(1rem, 6vh, 3.5rem);
}
.menu-head {
  margin: 0 0 1rem;
  white-space: pre;
  text-align: center;
  font-size: clamp(11px, 3.4vw, 22px);
  letter-spacing: 0.14em;
  color: var(--p);
  filter: drop-shadow(0 0 5px rgba(56,255,110,0.5)) drop-shadow(0 0 14px rgba(56,255,110,0.28));
}
.menu-label {
  color: var(--p-mid);
  letter-spacing: 0.3em;
  font-size: clamp(11px, 1.5vw, 14px);
  margin-bottom: 1rem;
}
.term-menu { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.term-menu a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0.4rem;
  text-decoration: none;
  color: var(--p);
  border-bottom: 1px solid var(--p-faint);
  -webkit-tap-highlight-color: transparent;
}
.term-menu a:hover, .term-menu a:focus {
  background: rgba(56, 255, 110, 0.09);
  outline: none;
}
.term-menu .mk { color: var(--p); font-weight: 700; }
.term-menu .mn { color: var(--p); letter-spacing: 0.06em; font-size: clamp(13px, 1.7vw, 16px); }
.term-menu .md { color: var(--p-dim); margin-left: auto; font-size: 0.82em; text-align: right; }
@media (max-width: 400px) { .term-menu .md { display: none; } }
.menu-hint {
  color: var(--p-dim);
  margin-top: 1.1rem;
  font-size: clamp(10px, 1.3vw, 13px);
  letter-spacing: 0.06em;
}
.menu-hint b { color: var(--p-mid); font-weight: 600; }

/* Real (not opacity:0) transparent input over the prompt/cursor strip at the bottom. Being a
   genuine, reasonably sized input — not a 1px opacity:0 one — is what lets iOS raise the
   on-screen keyboard when the strip is tapped. font-size 16px prevents iOS zoom-on-focus. */
#cmd {
  position: fixed;
  left: 0; bottom: 0;
  width: 100%; height: 3.25rem;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  outline: none;
  z-index: 4;
  cursor: text;
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* subtle CRT vignette (no motion) */
#screen::before {
  content: "";
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(130% 130% at 50% 40%, transparent 62%, rgba(0,0,0,0.5) 100%);
  mix-blend-mode: multiply;
}
/* very dim CRT scanlines — only visible in the top-right corner, fading out */
#screen::after {
  content: "";
  position: fixed; inset: 0; z-index: 6; pointer-events: none;
  background: repeating-linear-gradient(0deg,
      rgba(150,255,190,0.05) 0px, rgba(150,255,190,0.05) 1px,
      transparent 1px, transparent 3px);
  -webkit-mask-image: radial-gradient(85% 80% at 100% 0%, #000 0%, rgba(0,0,0,0.45) 20%, transparent 46%);
          mask-image: radial-gradient(85% 80% at 100% 0%, #000 0%, rgba(0,0,0,0.45) 20%, transparent 46%);
}

@media (prefers-reduced-motion: reduce) {
  #cursor { animation: none; opacity: 1; }
}

/* ============================================================================
   Pattern login — 5-point pad, quick-login boxes, and the options page.
   ============================================================================ */
.pat-svg { width: min(66vw, 240px); height: min(66vw, 240px); display: block; }
.pat-dot { fill: var(--p-bg); stroke: var(--p-dim); stroke-width: 1.4; transition: fill .08s, stroke .08s; }
.pat-dot.on { fill: var(--p); stroke: var(--p); filter: drop-shadow(0 0 3px rgba(56,255,110,0.85)); }
.pat-dot.err { stroke: #ff6b6b; }
.pat-path { fill: none; stroke: var(--p); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(56,255,110,0.5)); }
.pat-live { stroke: var(--p-mid); stroke-width: 2; opacity: 0.65; filter: none; }
.pat-svg.pat-error .pat-path { stroke: #ff6b6b; filter: none; }

/* quick-login user boxes on the anonymous terminal */
#quicklogin { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1.3rem 0 0.2rem; }
.ql-hint { text-align: center; color: var(--p-dim); font-size: clamp(10px,1.3vw,13px); margin-top: 0.6rem; letter-spacing: 0.06em; }
.ql-user {
  font-family: var(--mono); font-size: clamp(13px, 1.7vw, 16px);
  color: var(--p); background: rgba(56,255,110,0.06);
  border: 1px solid var(--p-mid); padding: 0.5rem 1.1rem;
  text-shadow: var(--glow); cursor: pointer; letter-spacing: 0.05em;
  -webkit-tap-highlight-color: transparent;
}
.ql-user::before { content: "\25b8 "; color: var(--p-mid); }
.ql-user:hover, .ql-user:focus { background: rgba(56,255,110,0.14); outline: none; }

/* pattern pad overlay (shown when a user box is tapped) */
.patpad-overlay { position: fixed; inset: 0; z-index: 20; background: rgba(1,6,3,0.9); display: flex; align-items: center; justify-content: center; }
.patpad-overlay[hidden] { display: none; }
.patpad-box { text-align: center; padding: 1.5rem; }
.patpad-user { color: var(--p); font-size: clamp(15px,2vw,20px); letter-spacing: 0.1em; margin-bottom: 1rem; text-shadow: var(--glow); }
.patpad-msg { color: var(--p-dim); margin-top: 1rem; font-size: clamp(11px,1.4vw,14px); min-height: 1.2em; }
.patpad-msg.ok { color: var(--p); }
.patpad-msg.err { color: #ff6b6b; }
.term-btn { font-family: var(--mono); font-size: clamp(11px,1.4vw,13px); color: var(--p-dim); background: transparent; border: 1px solid var(--p-faint); padding: 0.4rem 0.9rem; margin-top: 1rem; cursor: pointer; letter-spacing: 0.06em; }
.term-btn:hover, .term-btn:focus { color: var(--p); border-color: var(--p-mid); outline: none; }

/* options page */
.options-screen .opt-section { margin: 1.4rem 0; max-width: 34rem; }
.opt-title { color: var(--p-mid); letter-spacing: 0.18em; font-size: clamp(11px,1.4vw,13px); margin-bottom: 0.7rem; border-bottom: 1px solid var(--p-faint); padding-bottom: 0.3rem; }
.opt-msg { color: var(--p-dim); font-size: clamp(11px,1.4vw,14px); margin-bottom: 0.9rem; }
.opt-msg.ok { color: var(--p); }
.opt-msg.err { color: #ff6b6b; }
.opt-empty { color: var(--p-dim); font-style: italic; }
.dev-row { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.45rem 0.2rem; border-bottom: 1px solid var(--p-faint); }
.dev-label { color: var(--p); }
.dev-meta { color: var(--p-dim); margin-left: auto; font-size: 0.82em; }
.dev-row .term-btn { margin-top: 0; padding: 0.2rem 0.6rem; }
.options-screen a { color: var(--p-mid); }
.options-screen a:hover { color: var(--p); }

/* ============================================================================
   Shared clipboard (pastebin) widget on the authenticated home.
   ============================================================================ */
.pastebin {
  display: flex;
  align-items: stretch;
  margin: 0.2rem 0 0.45rem;
  border: 1px solid var(--p-faint);
  background: rgba(56, 255, 110, 0.03);
}
.pb-adorn {
  flex: 0 0 auto;
  min-width: 2.6ch;
  padding: 0 0.7ch;
  background: transparent;
  border: none;
  color: var(--p-mid);
  font-family: var(--mono);
  font-size: clamp(13px, 1.7vw, 16px);
  line-height: 1;
  cursor: pointer;
  text-shadow: var(--glow);
  -webkit-tap-highlight-color: transparent;
}
.pb-adorn:hover, .pb-adorn:focus-visible { color: var(--p); background: rgba(56, 255, 110, 0.10); outline: none; }
#pb-paste { border-right: 1px solid var(--p-faint); }
#pb-copy  { border-left: 1px solid var(--p-faint); }
.pb-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--p);
  font-family: var(--mono);
  font-size: clamp(12px, 1.55vw, 15px);
  letter-spacing: 0.02em;
  padding: 0.45rem 0.7ch;
  text-shadow: var(--glow);
  text-overflow: ellipsis;   /* hide overflow with "…" when the field isn't focused */
}
.pb-input::placeholder { color: var(--p-dim); opacity: 0.75; text-shadow: none; }
.pb-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.1rem;
  font-size: clamp(10px, 1.25vw, 12px);
  letter-spacing: 0.08em;
}
.pb-history { color: var(--p-mid); text-decoration: none; }
.pb-history:hover, .pb-history:focus-visible { color: var(--p); text-shadow: var(--glow); }
.pb-status { color: var(--p-dim); }
.pb-status.ok { color: var(--p-mid); }
.pb-status.err { color: #ffcf5a; }

/* ---- pastebin history page ---- */
.pbh-wrap { flex: 1 1 auto; overflow: auto; padding-top: clamp(1rem, 5vh, 3rem); }
.pbh-head { margin: 0 0 1rem; white-space: pre; font-size: clamp(11px, 3vw, 20px); letter-spacing: 0.14em; color: var(--p); text-shadow: var(--glow); }
.pbh-row {
  display: flex; gap: 1ch; align-items: baseline;
  padding: 0.5rem 0; border-bottom: 1px solid var(--p-faint);
}
.pbh-when { flex: 0 0 auto; color: var(--p-dim); font-size: clamp(10px, 1.25vw, 12px); min-width: 15ch; }
.pbh-text {
  flex: 1 1 auto; min-width: 0; color: var(--p);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.pbh-copy { flex: 0 0 auto; background: transparent; border: 1px solid var(--p-faint); color: var(--p-mid);
  font-family: var(--mono); font-size: 11px; padding: 0.15rem 0.6ch; cursor: pointer; }
.pbh-copy:hover { color: var(--p); background: rgba(56,255,110,0.10); }
.pbh-empty { color: var(--p-dim); padding: 1rem 0; }
.pbh-pager { display: flex; align-items: center; justify-content: center; gap: 1.5ch; margin: 1rem 0; }
.pbh-pager button {
  background: transparent; border: 1px solid var(--p-faint); color: var(--p-mid);
  font-family: var(--mono); font-size: clamp(11px,1.4vw,13px); padding: 0.35rem 1ch; cursor: pointer; letter-spacing: 0.06em;
}
.pbh-pager button:hover:not(:disabled) { color: var(--p); background: rgba(56,255,110,0.10); }
.pbh-pager button:disabled { color: var(--p-faint); cursor: default; }
.pbh-pageinfo { color: var(--p-dim); font-size: clamp(10px,1.25vw,12px); letter-spacing: 0.1em; }
.pbh-config {
  margin: 0.5rem 0 1.5rem; padding: 0.9rem 1rem; border: 1px solid var(--p-faint); background: rgba(56,255,110,0.03);
}
.pbh-config h2 { margin: 0 0 0.7rem; font-size: clamp(11px,1.5vw,13px); color: var(--p-mid); letter-spacing: 0.14em; font-weight: normal; }
.pbh-config label { display: inline-flex; align-items: center; gap: 0.6ch; color: var(--p-dim); font-size: clamp(11px,1.4vw,13px); margin-right: 1.5ch; }
.pbh-config input {
  width: 8ch; background: var(--p-bg); border: 1px solid var(--p-faint); color: var(--p);
  font-family: var(--mono); font-size: 13px; padding: 0.25rem 0.5ch; text-align: right; outline: none;
}
.pbh-config input:focus { border-color: var(--p-mid); }
.pbh-config button {
  background: transparent; border: 1px solid var(--p-mid); color: var(--p); font-family: var(--mono);
  font-size: 12px; padding: 0.3rem 1.1ch; cursor: pointer; letter-spacing: 0.08em; margin-left: 0.5ch;
}
.pbh-config button:hover { background: rgba(56,255,110,0.12); }
.pbh-back { display: inline-block; margin: 0.5rem 0 1.5rem; color: var(--p-mid); text-decoration: none; letter-spacing: 0.08em; }
.pbh-back:hover { color: var(--p); text-shadow: var(--glow); }

/* ============================================================================
   Speed dial (saved-site grid) on the authenticated home.
   ============================================================================ */
.pb-savesd { color: var(--p-mid); text-decoration: none; }
.pb-savesd:hover, .pb-savesd:focus-visible { color: var(--p); text-shadow: var(--glow); }

.speed-dial { margin: 0 0 1rem; }
.sd-head { display: flex; align-items: center; justify-content: space-between; margin: 0.2rem 0 0.4rem; }
.sd-label { color: var(--p-mid); font-size: clamp(10px, 1.4vw, 13px); letter-spacing: 0.16em; }
.sd-iconbtn {
  background: transparent; border: 1px solid var(--p-faint); color: var(--p-mid);
  font-family: var(--mono); font-size: 12px; cursor: pointer; padding: 1px 7px; -webkit-tap-highlight-color: transparent;
}
.sd-iconbtn:hover, .sd-iconbtn:focus-visible { color: var(--p); background: rgba(56, 255, 110, 0.10); outline: none; }

.sd-config, .sd-add-form {
  display: flex; align-items: center; gap: 0.6ch; flex-wrap: wrap;
  margin: 0 0 0.5rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--p-faint); background: rgba(56, 255, 110, 0.03);
  font-size: clamp(10px, 1.3vw, 12px); color: var(--p-dim); letter-spacing: 0.06em;
}
.sd-config input, .sd-add-form input {
  background: var(--p-bg); border: 1px solid var(--p-faint); color: var(--p);
  font-family: var(--mono); font-size: 12px; padding: 0.22rem 0.5ch; outline: none;
}
.sd-config input { width: 5ch; text-align: right; }
.sd-add-form input[type="url"] { flex: 1 1 12ch; min-width: 10ch; }
.sd-add-form input[type="text"] { flex: 1 1 8ch; min-width: 8ch; }
.sd-config input:focus, .sd-add-form input:focus { border-color: var(--p-mid); }
.sd-config button, .sd-add-form button {
  background: transparent; border: 1px solid var(--p-mid); color: var(--p);
  font-family: var(--mono); font-size: 11px; padding: 0.25rem 0.9ch; cursor: pointer; letter-spacing: 0.06em;
}
.sd-config button:hover, .sd-add-form button:hover { background: rgba(56, 255, 110, 0.12); }

.sd-grid {
  --sd-tileh: clamp(54px, 13vw, 80px);
  display: grid;
  grid-template-columns: repeat(var(--sd-cols, 4), minmax(0, 1fr));
  grid-auto-rows: var(--sd-tileh);
  gap: 0.5rem;
  max-height: calc(var(--sd-rows, 2) * (var(--sd-tileh) + 0.5rem));
  overflow-y: auto;
  padding-right: 2px;
}
.sd-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid var(--p-faint); background: rgba(56, 255, 110, 0.04);
  color: var(--p); text-decoration: none; font-family: var(--mono);
  padding: 4px; overflow: hidden; text-shadow: var(--glow); -webkit-tap-highlight-color: transparent;
}
.sd-tile:hover, .sd-tile:focus-visible { background: rgba(56, 255, 110, 0.10); border-color: var(--p-mid); outline: none; }
.sd-prev {
  display: flex; align-items: center; justify-content: center;
  width: clamp(20px, 5vw, 30px); height: clamp(20px, 5vw, 30px); color: var(--p);
}
.sd-fav { max-width: 100%; max-height: 100%; }
.sd-prev.sd-noimg {
  font-size: clamp(15px, 4vw, 22px); font-weight: bold; color: var(--p-mid);
  border: 1px solid var(--p-faint);
}
.sd-name {
  max-width: 100%; font-size: clamp(9px, 1.3vw, 11px); letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.sd-corner {
  position: absolute; top: 1px; background: transparent; border: none; color: var(--p-dim);
  font-family: var(--mono); font-size: 12px; line-height: 1; cursor: pointer; padding: 1px 3px;
  opacity: 0.55; -webkit-tap-highlight-color: transparent;
}
.sd-corner:hover, .sd-corner:focus-visible { opacity: 1; color: var(--p); outline: none; }
.sd-del { right: 1px; }
.sd-edit { left: 1px; }
.sd-add { border-style: dashed; color: var(--p-mid); cursor: pointer; }
.sd-add .sd-prev.sd-noimg { border: none; font-size: clamp(20px, 5vw, 28px); }
.sd-rename {
  width: 100%; background: var(--p-bg); border: 1px solid var(--p-mid); color: var(--p);
  font-family: var(--mono); font-size: 10px; text-align: center; outline: none; padding: 1px;
}
.sortable-ghost { opacity: 0.35; }
.sortable-chosen { border-color: var(--p); }

/* ---- centered menu headers + home speed-dial strip ---- */
.menu-label { text-align: center; }

.sd-title {
  display: block; text-align: center; text-decoration: none;
  color: var(--p-mid); letter-spacing: 0.2em;
  font-size: clamp(11px, 1.5vw, 14px); margin: 0.2rem 0 0.5rem;
}
.sd-title:hover, .sd-title:focus-visible { color: var(--p); text-shadow: var(--glow); }

.sd-strip {
  --sd-tileh: clamp(54px, 13vw, 80px);
  display: grid;
  grid-template-columns: repeat(var(--sd-cols, 4), minmax(0, 1fr));
  grid-auto-rows: var(--sd-tileh);
  gap: 0.5rem;
  overflow: hidden;                 /* first row only */
}
.sd-more {
  display: block; text-align: center; text-decoration: none;
  color: var(--p-mid); letter-spacing: 0.08em;
  font-size: clamp(10px, 1.3vw, 12px); margin: 0.5rem 0 0;
}
.sd-more:hover, .sd-more:focus-visible { color: var(--p); text-shadow: var(--glow); }
.sd-hint { color: var(--p-dim); font-size: clamp(10px, 1.25vw, 12px); margin: 0.7rem 0 0; letter-spacing: 0.04em; }

/* On-theme phosphor tint for favicons: green monochrome + glow (display-only filter, works on the
   cross-origin favicon images). Tune hue-rotate / saturate to taste. */
.sd-fav {
  width: 100%; height: 100%;
  image-rendering: -webkit-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;   /* upscale the tiny canvas with hard pixels = pixel art */
  filter: grayscale(1) sepia(1) hue-rotate(72deg) saturate(3.2) brightness(1.15)
          drop-shadow(0 0 2px rgba(56, 255, 110, 0.55));
}

/* Authenticated home is tap-driven (no command prompt) — don't show a text caret. */
#screen.authed { cursor: default; }

/* ============================================================================
   Admin console (/Admin): dashboard, users, audit log.
   ============================================================================ */
.adm-wrap { flex: 1 1 auto; overflow: auto; padding-top: clamp(1rem, 4vh, 2.5rem); }
.adm-denied { color: #ffcf5a; letter-spacing: 0.12em; margin: 2rem 0; text-align: center; text-shadow: 0 0 6px rgba(255,207,90,0.4); }

.adm-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--p-faint); margin: 0.5rem 0 1.2rem; flex-wrap: wrap; }
.adm-tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--p-dim); font-family: var(--mono); font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: 0.12em; padding: 0.55rem 1.1ch; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.adm-tab:hover { color: var(--p-mid); }
.adm-tab.active { color: var(--p); border-bottom-color: var(--p); text-shadow: var(--glow); }

.adm-loading { color: var(--p-dim); padding: 1rem 0; }

/* dashboard cards */
.adm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; margin-bottom: 1.4rem; }
.adm-card {
  border: 1px solid var(--p-faint); background: rgba(56,255,110,0.04);
  padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.3rem;
}
.adm-card-val { font-size: clamp(1.6rem, 6vw, 2.4rem); color: var(--p); line-height: 1; text-shadow: var(--glow); }
.adm-card-lbl { font-size: clamp(9px, 1.2vw, 11px); color: var(--p-dim); letter-spacing: 0.16em; }

/* activity chart */
.adm-chart-box { border: 1px solid var(--p-faint); background: rgba(56,255,110,0.02); padding: 0.9rem 1rem 0.6rem; }
.adm-chart-title { color: var(--p-mid); font-size: clamp(10px, 1.3vw, 12px); letter-spacing: 0.12em; margin-bottom: 0.8rem; }
.adm-chart { display: flex; align-items: flex-end; gap: 0.4ch; height: clamp(90px, 20vh, 150px); }
.adm-bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.adm-bar {
  width: 100%; max-width: 22px; background: linear-gradient(180deg, var(--p), var(--p-dim));
  box-shadow: 0 0 6px rgba(56,255,110,0.4); min-height: 2px;
}
.adm-bar-val { color: var(--p-mid); font-size: 9px; margin-bottom: 2px; min-height: 11px; }
.adm-bar-day { color: var(--p-dim); font-size: 8px; margin-top: 3px; white-space: nowrap; transform: rotate(-30deg); transform-origin: center; }

/* tables (users + audit) */
.adm-toolbar { margin: 0 0 0.7rem; }
.adm-link { color: var(--p-mid); text-decoration: none; letter-spacing: 0.06em; font-size: clamp(11px,1.3vw,13px); }
.adm-link:hover { color: var(--p); text-shadow: var(--glow); }
.adm-table { display: flex; flex-direction: column; font-size: clamp(11px, 1.35vw, 13px); }
.adm-row { display: flex; gap: 1ch; align-items: center; padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--p-faint); }
.adm-row-head { color: var(--p-dim); font-size: clamp(9px,1.15vw,11px); letter-spacing: 0.14em; text-transform: uppercase; }
.adm-c { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-c-user { flex: 1.4 1 0; color: var(--p); display: flex; align-items: center; gap: 0.6ch; }
.adm-c-email { flex: 1.8 1 0; color: var(--p-mid); }
.adm-c-roles { flex: 1.6 1 0; display: flex; gap: 0.4ch; flex-wrap: wrap; white-space: normal; }
.adm-c-pro { flex: 0 0 auto; }
.adm-c-created { flex: 0 0 auto; color: var(--p-dim); font-size: 0.85em; }
@media (max-width: 640px) { .adm-c-email, .adm-c-created, .adm-c-ip { display: none; } }

.adm-badge { font-size: 8px; letter-spacing: 0.1em; padding: 1px 4px; border: 1px solid var(--p-faint); color: var(--p-mid); }
.adm-badge-admin { color: #ffcf5a; border-color: rgba(255,207,90,0.5); }
.adm-tagpill { font-size: 9px; padding: 1px 6px; background: rgba(56,255,110,0.08); color: var(--p-mid); letter-spacing: 0.04em; }
.adm-pro {
  background: transparent; border: 1px solid var(--p-faint); color: var(--p-dim);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; padding: 0.2rem 0.7ch; cursor: pointer;
}
.adm-pro:hover { color: var(--p-mid); }
.adm-pro.on { color: var(--p-bg); background: var(--p); border-color: var(--p); box-shadow: 0 0 8px rgba(56,255,110,0.45); font-weight: 700; }

/* audit rows */
.adm-audit-row { font-size: clamp(10px, 1.25vw, 12px); }
.adm-audit-row .adm-c-when { flex: 0 0 auto; color: var(--p-dim); min-width: 14ch; }
.adm-audit-row .adm-c-who { flex: 0 0 auto; color: var(--p-mid); min-width: 8ch; }
.adm-audit-row .adm-c-req { flex: 1 1 auto; color: var(--p); }
.adm-audit-row .adm-c-ms { flex: 0 0 auto; color: var(--p-dim); min-width: 6ch; text-align: right; }
.adm-audit-row .adm-c-ip { flex: 0 0 auto; color: var(--p-dim); min-width: 10ch; }
.adm-audit-row.adm-err .adm-c-req { color: #ff6b6b; }
.adm-status { color: var(--p-dim); font-size: 0.85em; }