:root{
  --bg:        #0f2338;
  --bg-2:      #16324f;
  --panel:     #123049;
  --line:      #2c4a6b;
  --paper:     #eaf2f8;
  --muted:     #9fb3c8;
  --amber:     #ffb020;
  --green:     #35c674;
  --red:       #ff5d5d;
  --radius:    2px;
  --font-display: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  background-image:
    linear-gradient(var(--bg-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-2) 1px, transparent 1px);
  background-size:28px 28px;
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1.5;
}
.wrap{ max-width:1100px; margin:0 auto; padding:0 24px; }

/* ===== Header ===== */
.site-head{ padding:30px 0 22px; border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ color:var(--amber); display:flex; }
.brand-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:28px;
  letter-spacing:0.16em;
  color:var(--paper);
}
.brand-tag{ margin:8px 0 0; color:var(--muted); font-size:13px; }

/* ===== Layout ===== */
.layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  padding:32px 24px 20px;
  align-items:start;
}
@media (max-width:880px){ .layout{ grid-template-columns:1fr; padding:24px 16px 16px; } }

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
}

/* ===== Form ===== */
.field-group{ margin-bottom:20px; }
.field-label{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--paper);
  margin-bottom:8px;
}
.field-label em{ font-style:normal; color:var(--muted); font-size:12px; text-transform:none; letter-spacing:0; }

input[type="url"], input[type="text"]{
  width:100%;
  font-family:var(--font-mono);
  font-size:14px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--paper);
}
input::placeholder{ color:#5f7995; }
input:focus{ outline:none; border-color:var(--amber); }

.slug-row{ display:flex; align-items:stretch; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg); }
.slug-prefix{ padding:11px 0 11px 12px; color:var(--muted); font-size:13px; white-space:nowrap; display:flex; align-items:center; }
.slug-row input{ border:none; background:none; flex:1; min-width:0; }
.slug-row input:focus{ outline:none; }

.hint{ font-size:12px; color:var(--muted); margin:8px 0 0; }
.hint.error{ color:var(--red); font-weight:600; }

/* Lever / submit button — signal-box switch metaphor */
.lever{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:6px;
  padding:14px;
  background:var(--amber);
  color:#1a1200;
  border:none;
  border-radius:var(--radius);
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
}
.lever:hover{ filter:brightness(1.08); }
.lever:active{ transform:translateY(1px); }
.lever:disabled{ opacity:0.5; cursor:not-allowed; }
.lever-lamp{ width:10px; height:10px; border-radius:50%; background:#1a1200; opacity:0.5; }
.lever.busy .lever-lamp{ background:#fff; opacity:1; animation:pulse 0.8s infinite ease-in-out; }
@keyframes pulse{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }

/* ===== Result board ===== */
.board{ display:flex; flex-direction:column; gap:16px; }
.signal-diagram{ position:relative; }
.track{ stroke:var(--line); stroke-width:3; fill:none; }
.track.spur-track{ stroke:var(--muted); transition:stroke 0.3s ease; }
.track.spur-track.live{ stroke:var(--green); }
.switch-point{ fill:var(--muted); }
.lamp{ fill:var(--muted); transition:fill 0.3s ease; }
.lamp.amber{ fill:var(--amber); }
.lamp.green{ fill:var(--green); filter:drop-shadow(0 0 5px var(--green)); }
.diagram-label{ position:absolute; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.main-label{ left:2%; top:52%; }
.spur-label{ right:0%; top:8%; }

.empty-state{ color:var(--muted); font-size:13px; text-align:center; padding:20px 10px; }
.empty-state.small{ padding:10px 0; }

.result-content{ display:flex; flex-direction:column; gap:14px; }
.short-link-display{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.short-link-display a{
  font-family:var(--font-mono);
  font-size:18px;
  font-weight:600;
  color:var(--green);
  text-decoration:none;
  word-break:break-all;
}
.short-link-display a:hover{ text-decoration:underline; }
.long-url-echo{ font-size:12px; color:var(--muted); word-break:break-all; margin:0; }

.result-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:13px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--paper);
  cursor:pointer;
}
.btn:hover{ border-color:var(--amber); }
.btn.small{ padding:6px 10px; font-size:12px; }
.btn.ghost{ background:none; }
.btn.danger{ color:var(--red); border-color:#5a2a2a; }
.btn.danger:hover{ border-color:var(--red); }

.qr-box{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:14px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); }
#qr-canvas{ background:#fff; }

.admin-note{ font-size:11.5px; color:var(--amber); margin:0; line-height:1.5; }
.stats-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px; }

/* ===== My links ===== */
.my-links-section{ padding:20px 24px 40px; }
.section-heading{ font-family:var(--font-display); font-size:20px; letter-spacing:0.04em; margin:0 0 4px; }
.my-links-list{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.my-link-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
}
.my-link-row .info{ min-width:0; }
.my-link-row .slug{ color:var(--green); font-weight:600; font-size:14px; }
.my-link-row .url{ color:var(--muted); font-size:12px; word-break:break-all; }
.my-link-row .clicks{ color:var(--muted); font-size:12px; white-space:nowrap; }

/* ===== Footer ===== */
.site-foot{ border-top:1px solid var(--line); padding:22px 0 40px; }
.site-foot p{ font-size:12px; color:var(--muted); margin:0 0 6px; max-width:70ch; }
.site-foot code{ background:var(--bg-2); padding:1px 5px; border-radius:2px; }

@media (max-width:640px){
  .brand-name{ font-size:22px; }
  .result-actions{ flex-direction:column; }
  .result-actions .btn{ width:100%; }
}