/* ============================================================
   DROPBOARD — design tokens
   Subject: a live board of free giveaways / offers / drops.
   Metaphor: redeemable ticket stubs pinned to a board.
   Palette:
     --ink       #14161C  (background, deep ink)
     --ink-2     #1D2029  (panel background)
     --paper     #F5EFDD  (ticket paper)
     --paper-dim #E7E0C9  (ticket paper, muted)
     --signal    #FFB020  (amber signal — live / action)
     --teal      #2DD4BF  (secondary signal — new / fresh)
     --coral     #FF5D5D  (expiring / urgent)
     --line      #33384533 (hairline on dark)
   Type:
     Display: "Archivo Black" — blunt, poster-like, for the board title & ticket names
     Body:    "Inter" — quiet workhorse
     Mono:    "IBM Plex Mono" — codes, counters, timestamps
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#14161C;
  --ink-2:#1D2029;
  --ink-3:#252936;
  --paper:#F5EFDD;
  --paper-dim:#E7E0C9;
  --signal:#FFB020;
  --teal:#2DD4BF;
  --coral:#FF5D5D;
  --line:rgba(255,255,255,0.08);
  --text-dim:#9298A8;
  --radius:14px;
  --font-display:'Archivo Black', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button, input, textarea, select{font-family:inherit;}

:focus-visible{outline:2px solid var(--signal); outline-offset:2px;}

.container{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(20,22,28,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:18px;
  letter-spacing:0.5px;
}
.brand .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 4px rgba(255,176,32,0.18);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(255,176,32,0.18);}
  50%{box-shadow:0 0 0 8px rgba(255,176,32,0.05);}
}
@media (prefers-reduced-motion:reduce){ .brand .dot{animation:none;} }

.header-links{display:flex; align-items:center; gap:22px; font-size:14px; color:var(--text-dim);}
.header-links a:hover{color:var(--paper);}

/* ---------- hero ---------- */
.hero{padding:64px 0 40px;}
.hero-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal);
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.hero-eyebrow::before{
  content:''; width:26px; height:1px; background:var(--teal); opacity:0.6;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(38px, 6vw, 68px);
  line-height:0.98;
  margin:0 0 18px;
  letter-spacing:-0.01em;
}
.hero h1 .accent{color:var(--signal);}
.hero p{
  max-width:520px;
  color:var(--text-dim);
  font-size:16px;
  margin:0 0 28px;
}
.hero-stats{display:flex; gap:28px; flex-wrap:wrap;}
.stat{font-family:var(--font-mono);}
.stat .n{font-size:22px; color:var(--paper); display:block;}
.stat .l{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em;}

/* ---------- filter bar ---------- */
.filter-bar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:18px 0 30px;
  border-bottom:1px solid var(--line);
  margin-bottom:36px;
}
.search-wrap{position:relative;}
.search-wrap-main{flex:1; min-width:220px;}
.search-wrap input{
  width:100%;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 16px 12px 36px;
  color:var(--paper);
  font-size:14px;
}
.search-wrap input::placeholder{color:var(--text-dim);}
.search-wrap svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); opacity:0.5;}

.select-box{
  appearance:none;
  -webkit-appearance:none;
  background:var(--ink-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239298A8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 36px 12px 16px;
  color:var(--paper);
  font-size:13.5px;
  font-family:var(--font-mono);
  cursor:pointer;
  min-width:180px;
}
.select-box:hover{border-color:rgba(255,255,255,0.25);}
.select-box option{background:var(--ink-2); color:var(--paper);}

@media (max-width:720px){
  .filter-bar{flex-direction:column; align-items:stretch;}
  .search-wrap-main, .select-box{width:100%; min-width:0;}
}

/* ---------- ticket grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:22px;
  padding-bottom:80px;
  align-items:start;
}
.empty-state{
  grid-column:1/-1;
  text-align:center;
  padding:70px 20px;
  color:var(--text-dim);
  font-family:var(--font-mono);
  font-size:14px;
}

/* Ticket stub card */
.ticket{
  position:relative;
  background:var(--paper);
  color:#1a1810;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.ticket:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px -12px rgba(0,0,0,0.55);
}
.ticket-top{
  padding:18px 20px 16px;
  position:relative;
}
.ticket-badges{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
.badge{
  font-family:var(--font-mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  padding:3px 9px;
  border-radius:5px;
  font-weight:600;
}
.badge.cat{background:rgba(26,24,16,0.08); color:#5b5535;}
.badge.new{background:var(--teal); color:#04302b;}
.badge.expiring{background:var(--coral); color:#3a0a0a;}
.badge.free{background:#1a1810; color:var(--signal);}
.badge.pick{background:var(--signal); color:#1a1200;}
.ticket-name{
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.15;
  margin:0 0 10px;
}
.ticket-from{
  font-family:var(--font-mono);
  font-size:12px;
  color:#7a7150;
  margin-bottom:12px;
}
.ticket-desc{
  font-size:14px;
  color:#3a3626;
  margin-bottom:0;
  max-height:84px;
  overflow-y:auto;
  padding-right:4px;
}
.ticket-desc::-webkit-scrollbar{width:6px;}
.ticket-desc::-webkit-scrollbar-thumb{background:rgba(26,24,16,0.25); border-radius:6px;}

/* perforation divider */
.perf{
  position:relative;
  height:0;
  border-top:2px dashed rgba(26,24,16,0.22);
  margin:16px 0 0;
}
.perf::before, .perf::after{
  content:'';
  position:absolute; top:-9px;
  width:18px; height:18px; border-radius:50%;
  background:var(--ink);
}
.perf::before{left:-29px;}
.perf::after{right:-29px;}

.ticket-bottom{
  padding:16px 20px 20px;
  background:var(--paper-dim);
  margin-top:auto;
}
.process-toggle{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:#5b5535;
  cursor:pointer;
  background:none; border:none; padding:0; margin-bottom:10px;
}
.process-toggle svg{transition:transform .15s ease;}
.process-toggle.open svg{transform:rotate(180deg);}
.process-body{
  display:none;
  font-size:13px;
  color:#4a452e;
  white-space:pre-line;
  margin-bottom:12px;
  line-height:1.55;
  max-height:110px;
  overflow-y:auto;
  padding-right:4px;
}
.process-body::-webkit-scrollbar{width:6px;}
.process-body::-webkit-scrollbar-thumb{background:rgba(26,24,16,0.25); border-radius:6px;}
.process-body.open{display:block;}

.visit-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  background:#1a1810;
  color:var(--signal);
  font-family:var(--font-mono);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:12px 16px;
  border-radius:9px;
  border:none;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.visit-btn:hover{background:#000; color:var(--teal);}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:40px 0;
  color:var(--text-dim);
  font-size:13px;
}
.discord-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--paper);
  font-size:14px;
  font-weight:300;
}
.discord-link:hover{color:var(--signal);}

/* ============================================================
   ADMIN PAGE
   ============================================================ */
.admin-shell{max-width:760px; margin:0 auto; padding:48px 24px 100px;}
.admin-lock{
  max-width:360px; margin:120px auto; text-align:center;
}
.admin-lock h2{font-family:var(--font-display); font-size:24px; margin-bottom:6px;}
.admin-lock p{color:var(--text-dim); font-size:13.5px; margin-bottom:22px;}
.field{margin-bottom:18px;}
.field label{
  display:block;
  font-family:var(--font-mono);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-dim);
  margin-bottom:7px;
}
.field input, .field textarea, .field select{
  width:100%;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:9px;
  padding:11px 13px;
  color:var(--paper);
  font-size:14px;
}
.field textarea{resize:vertical; min-height:90px; font-family:var(--font-mono); font-size:13px;}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--signal);}
.field-hint{font-size:11.5px; color:var(--text-dim); margin-top:5px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}

.btn-primary{
  background:var(--signal); color:#1a1200; border:none;
  font-weight:700; font-size:14px; padding:12px 22px; border-radius:9px;
  cursor:pointer; font-family:var(--font-mono); letter-spacing:0.03em;
}
.btn-primary:hover{background:#ffc451;}
.btn-primary:disabled{opacity:0.5; cursor:default;}
.btn-secondary{
  background:transparent; color:var(--paper); border:1px solid var(--line);
  font-size:13.5px; padding:10px 18px; border-radius:9px; cursor:pointer;
}
.btn-secondary:hover{border-color:rgba(255,255,255,0.3);}
.btn-danger{color:var(--coral); border-color:rgba(255,93,93,0.3);}
.btn-danger:hover{border-color:var(--coral); background:rgba(255,93,93,0.08);}

.admin-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:30px; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.admin-header h1{font-family:var(--font-display); font-size:26px; margin:0;}
.admin-panel{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  margin-bottom:36px;
}
.admin-panel h3{
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--signal); margin:0 0 20px;
}
.status-msg{
  font-family:var(--font-mono); font-size:13px; padding:10px 14px;
  border-radius:8px; margin-bottom:16px; display:none;
}
.status-msg.show{display:block;}
.status-msg.ok{background:rgba(45,212,191,0.12); color:var(--teal);}
.status-msg.err{background:rgba(255,93,93,0.12); color:var(--coral);}

.admin-list-item{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:16px 18px;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:10px;
  margin-bottom:10px;
}
.admin-list-item .info{flex:1; min-width:0;}
.admin-list-item .name{font-weight:600; font-size:14.5px; margin-bottom:2px;}
.admin-list-item .meta{font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.admin-list-item .actions{display:flex; gap:8px; flex-shrink:0;}
.icon-btn{
  background:none; border:1px solid var(--line); color:var(--text-dim);
  width:32px; height:32px; border-radius:7px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover{color:var(--paper); border-color:rgba(255,255,255,0.3);}