/* =========================================================================
   Ferri Panel — shared design system for the gateway pages (public + private)
   A homelab control-panel look: brushed enclosure, nameplate type, real LEDs.
   Include after the theme FOUC snippet + ferri-theme.js. Pairs with
   [data-theme] set by ferri-theme.js — do not hardcode dark/light elsewhere.
   ========================================================================= */

:root{
  --bg:#12151a;
  --bg-2:#181c23;
  --panel:#1b1f26;
  --panel-2:#20242c;
  --edge:#2c313b;
  --edge-soft:#242830;
  --ink:#eef1f5;
  --ink-dim:#94a0b2;
  --ink-faint:#5a6272;
  --amber:#ffb020;
  --amber-ink:#3a2705;
  --green:#3ddc84;
  --red:#ff5c5c;
  --brass:#c9a877;
  --shadow: 0 24px 60px rgba(0,0,0,.45);
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
[data-theme="light"]{
  --bg:#e7e9e3;
  --bg-2:#dfe2da;
  --panel:#f5f6f2;
  --panel-2:#ecefe8;
  --edge:#cdd1c5;
  --edge-soft:#d7dace;
  --ink:#20242b;
  --ink-dim:#565f6c;
  --ink-faint:#8890998f;
  --amber:#b3720a;
  --amber-ink:#fff3dc;
  --green:#1c8a56;
  --red:#c8362f;
  --brass:#9c8352;
  --shadow: 0 18px 44px rgba(30,34,28,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, color-mix(in srgb, var(--amber) 6%, transparent), transparent),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) .6px, transparent .6px);
  background-size:16px 16px;
  mask-image:radial-gradient(circle at 50% 0%, black, transparent 75%);
}

a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ---- LED ---- */
.led{
  --c: var(--green);
  width:9px;height:9px;border-radius:50%;flex:none;position:relative;
  background:var(--c);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--c) 20%, transparent),
    0 0 10px 1px color-mix(in srgb, var(--c) 65%, transparent);
}
.led::after{
  content:'';position:absolute;inset:1px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), transparent 60%);
}
.led.amber{--c: var(--amber)}
.led.red{--c: var(--red)}
.led.pulse{animation:led-breathe 2.6s ease-in-out infinite}
@keyframes led-breathe{0%,100%{opacity:1}50%{opacity:.55}}

/* ---- Panel shell (the whole enclosure) ---- */
.wrap{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:clamp(18px,4vw,40px) 18px 48px}

.panel{
  position:relative;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--edge);
  border-radius:18px;
  box-shadow:var(--shadow), inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
}
.rivets .panel::before,.rivets .panel::after,
.panel.riveted::before,.panel.riveted::after{
  content:'';position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--edge);box-shadow:inset 0 1px 1px rgba(0,0,0,.5), 0 1px 0 color-mix(in srgb, white 8%, transparent);
  top:10px;
}
.panel.riveted::before{left:10px}
.panel.riveted::after{right:10px}

/* ---- Header nameplate ---- */
.hdr{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:20px 24px;border-bottom:1px solid var(--edge-soft);
}
.hdr .mark{
  width:38px;height:38px;border-radius:9px;flex:none;
  background:linear-gradient(160deg, var(--amber), color-mix(in srgb, var(--amber) 55%, #7a4a00));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;color:var(--amber-ink);font-size:1.05rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px color-mix(in srgb, var(--amber) 35%, transparent);
}
.hdr .id{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.hdr .id b{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.hdr .id span{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase}
.hdr .status-strip{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.status-chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink-dim);letter-spacing:.04em;
}
.status-chip b{color:var(--ink);font-weight:600}

.hdr .login-link{
  font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.03em;
  padding:8px 14px;border-radius:8px;border:1px solid var(--edge);
  background:var(--panel-2);text-decoration:none;color:var(--ink);
  transition:border-color .15s ease, transform .15s ease;
}
.hdr .login-link:hover{border-color:var(--amber);transform:translateY(-1px)}
.hdr .user-chip{display:flex;align-items:center;gap:10px}
.hdr .user-chip .who{font-family:var(--font-mono);font-size:.78rem;color:var(--ink)}

/* ---- Body ---- */
.body-pad{padding:26px 24px 30px}

.hero h1{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.7rem,4vw,2.5rem);margin:6px 0 10px;
}
.hero p{color:var(--ink-dim);max-width:52ch;line-height:1.6;font-size:.98rem;margin:0}

/* ---- Featured switch row ---- */
.switch-row{
  margin-top:22px;display:flex;align-items:center;gap:16px;
  padding:16px 18px;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--edge-soft);
  text-decoration:none;color:var(--ink);
  transition:border-color .15s ease, transform .15s ease;
}
.switch-row:hover{border-color:var(--amber);transform:translateX(2px)}
.switch-row .lbl{display:flex;flex-direction:column;gap:2px}
.switch-row .lbl b{font-family:var(--font-mono);letter-spacing:.03em;font-size:.92rem}
.switch-row .lbl span{font-size:.82rem;color:var(--ink-dim)}
.switch-row .go{margin-left:auto;font-family:var(--font-mono);font-size:.78rem;color:var(--ink-faint)}
.switch-row:hover .go{color:var(--amber)}

/* ---- Console / quick-open input ---- */
.console{
  margin-top:22px;display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--edge);
  font-family:var(--font-mono);
}
.console .prompt{color:var(--amber);font-weight:700}
.console input{
  flex:1;border:0;outline:0;background:transparent;color:var(--ink);
  font:inherit;font-size:.88rem;
}
.console input::placeholder{color:var(--ink-faint)}
.console kbd{
  font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);
  border:1px solid var(--edge);border-radius:5px;padding:2px 6px;
}

/* ---- Banks (grouped tiles) ---- */
.bank{margin-top:30px}
.bank-label{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
.bank-label::after{content:'';flex:1;height:1px;background:var(--edge-soft)}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{
  display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--edge-soft);text-decoration:none;color:var(--ink);
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.tile:hover{border-color:var(--amber);transform:translateY(-2px);background:var(--panel)}
.tile .socket{
  width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-2);border:1px solid var(--edge);color:var(--ink-dim);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.25);
}
.tile:hover .socket{color:var(--amber)}
.tile .socket svg{width:17px;height:17px;stroke:currentColor}
.tile b{font-family:var(--font-mono);font-size:.82rem;font-weight:600;letter-spacing:.01em}
.tile p{margin:0;font-size:.74rem;color:var(--ink-dim);line-height:1.4}
.tile .badge{
  align-self:flex-start;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 7px;border-radius:5px;
}
.tile .badge.public{color:var(--green);background:color-mix(in srgb, var(--green) 14%, transparent)}
.tile .badge.auth{color:var(--amber);background:color-mix(in srgb, var(--amber) 14%, transparent)}
.tile .badge.tailnet{color:var(--brass);background:color-mix(in srgb, var(--brass) 16%, transparent)}

/* ---- Footer strip ---- */
.foot-strip{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--edge-soft);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);
}

@media(max-width:560px){
  .hdr .status-strip{width:100%;margin-left:0}
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}