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

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0c0b0b;
  --bg2:#111010;
  --surface:#181717;
  --surface2:#1e1d1d;
  --border:#252323;
  --border2:#2f2d2d;
  --text:#ddd8d0;
  --text2:#a09890;
  --muted:#635e58;
  --accent:#d95f2b;
  --accent-dim:#a8461e;
  --accent2:#e8a07a;
  --green:#4a9e6b;
  --red:#c44a3a;
  --yellow:#c9953a;
  --mono:'IBM Plex Mono',monospace;
  --serif:'Instrument Serif',serif;
  --display:'Syne',sans-serif;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13px;line-height:1.6}

.noise{
  position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}

a{color:inherit;text-decoration:none}

.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:3px;font-family:var(--mono);font-size:12px;cursor:pointer;border:1px solid transparent;transition:all .15s;text-decoration:none}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-dim);border-color:var(--accent-dim)}
.btn-ghost{background:transparent;color:var(--text2);border-color:var(--border2)}
.btn-ghost:hover{border-color:var(--muted);color:var(--text)}
.btn-danger{background:transparent;color:var(--red);border-color:var(--red)}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-sm{padding:5px 12px;font-size:11px}

input,select,textarea{
  background:var(--bg);border:1px solid var(--border2);border-radius:3px;
  padding:9px 12px;color:var(--text);font-family:var(--mono);font-size:12px;
  outline:none;transition:border-color .2s;width:100%
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input::placeholder{color:var(--muted)}
select option{background:var(--bg)}

label{display:block;font-size:11px;color:var(--text2);margin-bottom:6px;letter-spacing:.03em}

.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:2px;font-size:10px;font-family:var(--mono);letter-spacing:.04em}
.tag-green{background:rgba(74,158,107,.12);color:var(--green);border:1px solid rgba(74,158,107,.2)}
.tag-red{background:rgba(196,74,58,.12);color:var(--red);border:1px solid rgba(196,74,58,.2)}
.tag-yellow{background:rgba(201,149,58,.12);color:var(--yellow);border:1px solid rgba(201,149,58,.2)}
.tag-muted{background:rgba(99,94,88,.1);color:var(--muted);border:1px solid var(--border)}

.card{background:var(--surface);border:1px solid var(--border);border-radius:4px}

@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.spinner{width:16px;height:16px;border:1.5px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}