/* CLAVIS8 COMMAND / NYC UNDERGROUND '88 — design system v3.
   Exact campaign tokens from the CLAVIS8 NYC88 master identity.
   Visual system: #090909 / #f6f4ed / #e8ff00 / #ff168a.
   Archivo Black display, DM Mono operational labels, Inter copy. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  color-scheme:dark;
  --black:#090909;--white:#f6f4ed;--muted:#a9a9a3;
  --pink:#ff168a;--acid:#e8ff00;--line:#3a3a36;
  --font:Inter,Arial,sans-serif;
  --display:'Archivo Black',Impact,'Arial Black',sans-serif;
  --mono:'DM Mono','Space Mono',monospace;
  --warning:#ff7eac;
  --success:#e8ff00;
  font:16px/1.55 var(--font);
}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%}
body{min-height:100vh;margin:0;background:var(--black);color:var(--white);font-family:var(--font);-webkit-font-smoothing:antialiased}
::selection{background:var(--pink);color:var(--black)}
a{color:var(--white);text-decoration:underline;text-underline-offset:4px}
a:hover{color:var(--acid)}
.shell{width:min(1440px,100% - 10vw);margin:auto;padding:0 0 80px}
header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);margin-bottom:clamp(40px,6vw,80px)}
.brand{display:flex;align-items:center;gap:13px;margin:0;color:var(--white);font-size:clamp(14px,1.8vw,20px);font-weight:800;letter-spacing:.12em;line-height:1}
.brand img{display:block;width:64px;height:54px;object-fit:contain;flex:0 0 auto}
.brand span{white-space:nowrap}
.environment,.eyebrow,.mono,small,label,legend,th{
  font-family:var(--mono);font-weight:500;letter-spacing:.105em;text-transform:uppercase
}
.environment{font-size:11px;line-height:1.4;color:var(--acid);border:1px solid var(--line);padding:10px 12px}
.eyebrow{margin:0 0 20px;color:var(--pink);font-size:12px;line-height:1.6}
main{min-height:28vh}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;letter-spacing:-.055em;line-height:.99;font-weight:400}
h1{font-size:clamp(50px,7vw,104px);margin:10px 0 24px;max-width:18ch}
h2{font-size:clamp(27px,3.4vw,49px);margin:0 0 28px}
h3{font-size:clamp(17px,2vw,23px);margin:0 0 16px}
p{margin:0 0 22px}
.muted,small{color:var(--muted)}
.panel{padding:clamp(24px,3.5vw,44px);margin-bottom:26px;background:#111;outline:1px solid var(--line);border:0;border-radius:0;box-shadow:none}
.panel::before{content:none}
.panel.narrow{max-width:575px;border-top:6px solid var(--acid)}
.panel.narrow h1{font-size:clamp(44px,5vw,71px);max-width:11ch}
.panel.narrow>.muted{font-size:15px;line-height:1.75;max-width:45ch}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.stack{display:grid;gap:17px}
label{color:var(--white);font-size:12px;line-height:1.5;display:grid;gap:8px}
input:not([type=checkbox]),select,textarea{
  width:100%;min-width:0;min-height:50px;padding:14px 13px;
  font:500 15px/1.4 var(--font);color:var(--white);background:#171717;
  border:1px solid #595959;border-radius:0;
  appearance:none;-webkit-appearance:none
}
input[type=file]{padding:10px}
input[type=checkbox]{width:19px;height:19px;accent-color:var(--pink);flex:none}
input::placeholder{color:var(--muted)}
input:hover,select:hover,textarea:hover{border-color:var(--white)}
button{
  border:1px solid var(--acid);background:var(--acid);color:var(--black);
  min-height:50px;padding:14px 22px;border-radius:0;
  font:800 13px/1.2 var(--font);letter-spacing:.085em;text-transform:uppercase;
  cursor:pointer;display:inline-flex;justify-content:center;align-items:center;
  transition:background-color .16s ease,transform .16s ease;
}
button:hover:not(:disabled){background:var(--white);border-color:var(--white);transform:translateY(-2px)}
button.secondary{background:transparent;color:var(--white);border:1px solid #696965}
button.secondary:hover:not(:disabled){color:var(--acid);border-color:var(--acid);background:transparent}
button:disabled{opacity:.45;cursor:not-allowed}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:15px 0 2px}
.status{min-height:36px;margin:8px 0 0;padding:14px 16px;max-width:800px;background:#181818;border-left:4px solid var(--acid);color:var(--white);overflow-wrap:anywhere;font-size:14px}
.status:empty{display:none}
.status.error{border-left-color:var(--pink);color:var(--warning)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
thead{background:#171717}
th,td{padding:14px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
th{color:var(--muted);font-size:11px}
.clean-list{list-style:none;margin:0 0 24px;padding:0}
.clean-list li{padding:14px 0;border-top:1px solid var(--line)}
.track-list label{display:flex;align-items:center;gap:10px;padding:10px 0}
fieldset{padding:18px;margin:6px 0 14px;border:1px solid var(--line)}
legend{padding:0 8px;color:var(--pink);font-size:12px}
#show-recovery{display:inline-block;margin-top:20px;padding:0;min-height:40px;color:var(--white);font:500 12px var(--mono);text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:5px;border:0;background:none;letter-spacing:.04em;text-transform:none}
#show-recovery:hover{color:var(--acid);border:0;background:none;transform:none}
#recovery{border-top:1px solid var(--line);margin-top:20px;padding-top:24px}
[hidden]{display:none!important}
@media(max-width:900px){.grid{grid-template-columns:1fr}.shell{width:calc(100% - 48px)}.panel{padding:28px}header{margin-bottom:42px}}
@media(max-width:600px){:root{font-size:15px}.shell{width:calc(100% - 28px);padding-bottom:50px}header{padding:12px 0;margin-bottom:28px;gap:10px}.brand{gap:8px;font-size:14px;letter-spacing:.06em}.brand img{width:48px;height:48px}.environment{font-size:9px;letter-spacing:.05em;padding:7px 8px}.panel{padding:23px 20px}.panel.narrow h1{font-size:clamp(44px,12vw,68px)}.actions button{width:100%}h1{font-size:clamp(45px,11vw,80px)}h2{font-size:clamp(29px,8vw,50px)}th,td{padding:10px 8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
