:root { --bg:#0b0f14; --card:#121821; --muted:#9fb2c8; --txt:#e6eef7; --accent:#4ea1ff; --accent-2:#7bffb7; --danger:#ff6b6b; }
*{ box-sizing:border-box;}
body{ margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial; background:linear-gradient(180deg,#0b0f14,#0f1520); color:var(--txt);}
.container{ max-width:980px; margin:0 auto; padding:24px;}
header{ display:flex; align-items:center; justify-content:space-between;}
h1{ font-size:28px; margin:0; letter-spacing:.4px;}
nav a{ color:var(--muted); text-decoration:none; margin-left:16px; padding:8px 12px; border-radius:999px;}
nav a.active, nav a:hover{ background:rgba(78,161,255,.15); color:var(--txt);}
.tab{ display:none;} .tab.active{ display:block;}
.hero{ background: radial-gradient(1200px 400px at 10% -20%, rgba(78,161,255,.25), transparent), radial-gradient(1200px 400px at 90% -20%, rgba(123,255,183,.18), transparent); border-bottom:1px solid rgba(255,255,255,.06); }
.hero-inner{ display:grid; grid-template-columns: 1.3fr .7fr; gap:24px; padding: 24px; }
.hero .lead{ color:var(--muted); }
.hero-card{ background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.btn{ display:inline-block; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:700; }
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#081018; }
.btn-ghost{ border:1px solid rgba(255,255,255,.2); color:var(--txt); }
.cta a{ margin-right:8px;}
.muted{ color:var(--muted); }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px;}
.card{ background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.2);}
.card h3{ margin-top:0;}
.form label{ display:block; font-size:14px; color:var(--muted); margin:8px 0;}
.form input,.form textarea{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:#0d141d; color:var(--txt);}
.form button{ margin-top:8px; padding:10px 14px; border:none; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#081018; font-weight:700; cursor:pointer;}
.form-inline{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:12px;}
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
.notice{ margin-top:16px; background:#0f1a11; border:1px solid rgba(123,255,183,.25); color:#b9ffda; padding:12px 14px; border-radius:12px;}
.notice .code{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace; letter-spacing:.5px;}
.hint{ color:var(--muted);} .hidden{ display:none;} .admin-box{ margin-top:16px;}
.tag{ display:inline-block; padding:2px 8px; margin-right:6px; border-radius:999px; border:1px solid rgba(255,255,255,.08); color:var(--muted); font-size:12px;}
.post-time{ color:var(--muted); font-size:12px;}
.ticket-meta{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:10px 0;}
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; background:rgba(78,161,255,.15); border:1px solid rgba(78,161,255,.35); font-size:12px;}
.status{ text-transform:uppercase; letter-spacing:.5px;}
.note{ border-top:1px dashed rgba(255,255,255,.08); padding-top:8px; margin-top:8px;}
.note .by{ color:var(--muted); font-size:12px;}
@media (max-width:640px){ .grid{ grid-template-columns:1fr;} .form-inline{ grid-template-columns:1fr;} .hero-inner{ grid-template-columns:1fr; } }