:root {
  --bg:      #0d1117;
  --bg2:     #161b22;
  --bg3:     #1c2230;
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.14);
  --text:    #e6edf3;
  --muted:   #8b949e;
  --yellow:  #ffd700;
  --green:   #39d353;
  --blue:    #58a6ff;
  --red:     #ff4757;
  --purple:  #a78bfa;
  --orange:  #ff7043;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; line-height:1.6; }

/* -- HEADER -- */
header { position:sticky; top:0; z-index:100; background:rgba(13,17,23,0.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); height:60px; }
.hdr { max-width:1280px; margin:0 auto; padding:0 1.5rem; height:100%; display:flex; align-items:center; gap:1.5rem; }
.logo { display:flex; align-items:center; gap:0.6rem; text-decoration:none; flex-shrink:0; }
.logo-box { background:var(--yellow); color:#0d1117; font-family:'Press Start 2P',monospace; font-size:0.5rem; padding:0.35rem 0.5rem; border-radius:3px; line-height:1; }
.logo-name { font-family:'Press Start 2P',monospace; font-size:0.65rem; color:var(--text); line-height:1.4; }
.logo-name em { color:var(--yellow); font-style:normal; }
nav { display:flex; align-items:center; gap:0.1rem; margin-left:auto; }
nav a { font-size:0.84rem; font-weight:500; color:var(--muted); text-decoration:none; padding:0.38rem 0.75rem; border-radius:5px; transition:all .15s; }
nav a:hover { color:var(--text); background:rgba(255,255,255,.06); }
nav a.active { color:var(--text); }
.nav-rand { background:var(--yellow); color:#0d1117 !important; font-weight:700; margin-left:.3rem; }
.nav-rand:hover { background:#ffe333 !important; }
.hdr-search { position:relative; display:flex; align-items:center; }
.hdr-search input { background:var(--bg2); border:1px solid var(--border); border-radius:7px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:.83rem; padding:.38rem 2.2rem .38rem .8rem; width:190px; outline:none; transition:border-color .2s,width .25s; }
.hdr-search input:focus { border-color:var(--yellow); width:240px; }
.hdr-search input::placeholder { color:var(--muted); }
.hdr-search svg { position:absolute; right:.6rem; width:14px; color:var(--muted); pointer-events:none; }
.ham { display:none; flex-direction:column; gap:5px; width:36px; height:36px; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:6px; cursor:pointer; padding:0 9px; margin-left:auto; flex-shrink:0; transition:border-color .15s; justify-content:center; }
.ham:hover { border-color:var(--yellow); }
.ham span { height:2px; background:var(--text); border-radius:2px; transition:all .22s; display:block; }
.ham.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.ham.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.drawer { display:none; position:fixed; top:60px; left:0; right:0; background:rgba(13,17,23,.97); backdrop-filter:blur(18px); border-bottom:1px solid var(--border); z-index:99; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s,transform .18s; }
.drawer.open { opacity:1; transform:translateY(0); pointer-events:all; }
.drawer-in { max-width:1280px; margin:0 auto; padding:.9rem 1.25rem 1.25rem; display:flex; flex-direction:column; gap:.25rem; }
.drawer-in a { display:flex; align-items:center; color:var(--muted); text-decoration:none; font-size:.95rem; font-weight:500; padding:.65rem .75rem; border-radius:7px; transition:all .12s; }
.drawer-in a:hover { color:var(--text); background:rgba(255,255,255,.05); }
.drawer-cta { background:var(--yellow) !important; color:#0d1117 !important; font-weight:700; font-family:'Press Start 2P',monospace; font-size:.55rem; justify-content:center; border-radius:7px; margin-top:.4rem; }
.drawer-div { height:1px; background:var(--border); margin:.4rem .75rem; }

/* -- BREADCRUMB -- */
.bc-bar { border-bottom:1px solid var(--border); padding:.45rem 1.5rem; }
.bc { max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--muted); }
.bc a { color:var(--muted); text-decoration:none; }
.bc a:hover { color:var(--yellow); }
.bc .sep { color:var(--border2); }

/* -- PAGE LAYOUT -- */
.page { max-width:1280px; margin:0 auto; padding:2.5rem 1.5rem 5rem; display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start; }

/* -- FORM CARD -- */
.form-card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.form-card-hd { padding:1.5rem 1.75rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:1rem; }
.form-card-icon { width:42px; height:42px; background:var(--yellow); color:#0d1117; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; box-shadow:0 4px 0 rgba(180,140,0,.4); }
.form-card-hd h1 { font-family:'Press Start 2P',monospace; font-size:.85rem; color:var(--text); line-height:1.5; letter-spacing:.05em; }
.form-card-hd p { font-size:.83rem; color:var(--muted); margin-top:.2rem; }
.form-body { padding:1.75rem; }

/* -- NOTICE BAR -- */
.notice {
  display:flex; align-items:flex-start; gap:.75rem;
  background:rgba(88,166,255,.06);
  border:1px solid rgba(88,166,255,.18);
  border-radius:8px;
  padding:.9rem 1rem;
  margin-bottom:1.5rem;
  font-size:.84rem;
  color:var(--muted);
  line-height:1.55;
}
.notice-icon { font-size:1rem; flex-shrink:0; margin-top:.05rem; }
.notice a { color:var(--blue); text-decoration:none; }
.notice a:hover { color:var(--yellow); }

/* -- DROP ZONE -- */
.drop-zone {
  border:2px dashed var(--border2);
  border-radius:10px;
  padding:2.5rem 1.5rem;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s, background .2s;
  position:relative;
  margin-bottom:1.25rem;
}
.drop-zone:hover, .drop-zone.over {
  border-color:var(--yellow);
  background:rgba(255,215,0,.03);
}
.drop-zone input[type="file"] {
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.drop-icon { font-size:2.5rem; margin-bottom:.75rem; line-height:1; }
.drop-title { font-size:1rem; font-weight:600; color:var(--text); margin-bottom:.3rem; }
.drop-sub { font-size:.82rem; color:var(--muted); }
.drop-sub em { color:var(--yellow); font-style:normal; font-weight:600; }
.drop-or { display:flex; align-items:center; gap:.75rem; margin:.9rem 0; color:var(--border2); font-size:.78rem; }
.drop-or::before, .drop-or::after { content:''; flex:1; height:1px; background:var(--border); }
.drop-browse {
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--bg3); border:1px solid var(--border2); border-radius:6px;
  color:var(--text); font-size:.84rem; font-weight:500;
  padding:.5rem 1rem; cursor:pointer; transition:all .15s;
  pointer-events:none; /* click goes to the file input */
}
.drop-zone:hover .drop-browse { border-color:var(--yellow); color:var(--yellow); }

/* Selected file display */
.file-selected {
  display:none;
  align-items:center; gap:.75rem;
  background:rgba(57,211,83,.06);
  border:1px solid rgba(57,211,83,.2);
  border-radius:8px;
  padding:.8rem 1rem;
  margin-bottom:1.25rem;
  font-size:.85rem;
}
.file-selected.show { display:flex; }
.file-icon { font-size:1.4rem; flex-shrink:0; }
.file-info { flex:1; min-width:0; }
.file-name { font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-size { font-size:.75rem; color:var(--muted); font-family:'DM Mono',monospace; }
.file-clear { background:none; border:none; color:var(--muted); cursor:pointer; font-size:1rem; padding:.2rem .4rem; border-radius:4px; transition:all .12s; flex-shrink:0; }
.file-clear:hover { color:var(--red); background:rgba(255,71,87,.08); }

/* -- PROGRESS -- */
.progress-wrap { display:none; margin-bottom:1.25rem; }
.progress-wrap.show { display:block; }
.progress-label { display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); margin-bottom:.4rem; }
.progress-bar { height:6px; background:var(--bg3); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; background:var(--yellow); border-radius:3px; width:0; transition:width .3s; box-shadow:0 0 8px rgba(255,215,0,.4); }

/* -- FIELD -- */
.field { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.field label { font-size:.78rem; font-weight:600; color:var(--muted); letter-spacing:.03em; }
.field input[type="text"], .field select, .field textarea {
  background:var(--bg); border:1px solid var(--border2); border-radius:7px;
  color:var(--text); font-family:'DM Sans',sans-serif; font-size:.92rem;
  padding:.62rem .85rem; outline:none; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,215,0,.08);
}
.field input::placeholder, .field textarea::placeholder { color:rgba(255,255,255,.2); }
.field select { appearance:none; background-image: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='%238b949e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .85rem center; padding-right:2rem; cursor:pointer; }
.field select option { background:var(--bg2); }
.field textarea { resize:vertical; min-height:90px; line-height:1.6; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field-hint { font-size:.74rem; color:var(--muted); opacity:.7; margin-top:.1rem; }

/* -- DIVIDER -- */
.form-divider { height:1px; background:var(--border); margin:1.5rem 0; }

/* -- SUBMIT -- */
.submit-row { display:flex; gap:.75rem; align-items:center; }
.btn-submit {
  flex:1; background:var(--yellow); color:#0d1117; border:none; border-radius:7px;
  font-family:'Press Start 2P',monospace; font-size:.55rem; padding:.85rem 1.25rem;
  cursor:pointer; font-weight:700; letter-spacing:.08em;
  box-shadow:0 4px 0 rgba(180,140,0,.5); transition:all .15s;
}
.btn-submit:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 6px 0 rgba(180,140,0,.4); }
.btn-submit:active:not(:disabled) { transform:translateY(1px); box-shadow:0 2px 0 rgba(180,140,0,.4); }
.btn-submit:disabled { background:var(--bg3); color:var(--muted); cursor:not-allowed; box-shadow:none; }
.btn-reset { background:transparent; color:var(--muted); border:1px solid var(--border2); border-radius:7px; font-family:'DM Sans',sans-serif; font-size:.85rem; font-weight:500; padding:.82rem 1.1rem; cursor:pointer; transition:all .15s; white-space:nowrap; }
.btn-reset:hover { color:var(--text); background:rgba(255,255,255,.04); }

/* -- SUCCESS -- */
.success-state { display:none; flex-direction:column; align-items:center; text-align:center; padding:3rem 1.75rem; gap:1rem; }
.success-icon { width:64px; height:64px; background:rgba(57,211,83,.1); border:2px solid var(--green); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; }
.success-state h2 { font-family:'Press Start 2P',monospace; font-size:.75rem; color:var(--green); line-height:1.7; }
.success-state p { font-size:.88rem; color:var(--muted); max-width:340px; line-height:1.6; }
.success-state a { color:var(--yellow); text-decoration:none; font-weight:600; }

/* -- SIDEBAR -- */
.sidebar { position:sticky; top:76px; display:flex; flex-direction:column; gap:1rem; }
.sb { background:var(--bg2); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.sb-hd { display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; border-bottom:1px solid var(--border); }
.sb-pip { width:6px; height:6px; border-radius:1px; flex-shrink:0; }
.sb-hd h3 { font-family:'Press Start 2P',monospace; font-size:.46rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.sb-bd { padding:.8rem .9rem; }
.sb-bd p { font-size:.83rem; color:var(--muted); line-height:1.65; }
.sb-bd p + p { margin-top:.6rem; }
.sb-bd a { color:var(--blue); text-decoration:none; }
.sb-bd a:hover { color:var(--yellow); }

.guideline-list { display:flex; flex-direction:column; gap:.55rem; }
.guideline { display:flex; align-items:flex-start; gap:.6rem; }
.guideline-icon { font-size:.95rem; flex-shrink:0; margin-top:.05rem; }
.guideline-text { font-size:.81rem; color:var(--muted); line-height:1.5; }
.guideline-text strong { color:var(--text); }

.glist { list-style:none; }
.glist a { display:flex; align-items:center; justify-content:space-between; padding:.38rem .5rem; border-radius:4px; color:var(--muted); text-decoration:none; font-size:.81rem; transition:all .12s; }
.glist a:hover { color:var(--text); background:rgba(255,255,255,.05); }
.gl-l { display:flex; align-items:center; gap:.45rem; }
.gl-ct { font-family:'DM Mono',monospace; font-size:.7rem; color:rgba(255,255,255,.2); }

.az-grid { display:flex; flex-wrap:wrap; gap:3px; }
.az-grid a { width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-family:'Press Start 2P',monospace; font-size:.42rem; color:var(--muted); text-decoration:none; border:1px solid var(--border); border-radius:3px; transition:all .12s; }
.az-grid a:hover { color:#0d1117; background:var(--yellow); border-color:var(--yellow); }

.login-form { display:flex; flex-direction:column; gap:.55rem; }
.lf { display:flex; flex-direction:column; gap:.25rem; }
.lf label { font-size:.7rem; color:var(--muted); font-weight:500; }
.lf input { background:var(--bg); border:1px solid var(--border); border-radius:5px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:.83rem; padding:.45rem .65rem; outline:none; width:100%; transition:border-color .15s; }
.lf input:focus { border-color:var(--yellow); }
.lf input::placeholder { color:rgba(255,255,255,.2); }
.login-btn { background:var(--yellow); color:#0d1117; font-family:'Press Start 2P',monospace; font-size:.48rem; padding:.6rem; border:none; border-radius:5px; cursor:pointer; width:100%; font-weight:700; letter-spacing:.06em; box-shadow:0 3px 0 rgba(180,140,0,.45); transition:all .12s; }
.login-btn:hover { transform:translateY(-1px); }
.lf-links { display:flex; justify-content:space-between; }
.lf-links a { font-size:.73rem; color:var(--blue); text-decoration:none; }
.lf-links a:hover { color:var(--yellow); }

.live-list { display:flex; flex-direction:column; gap:.2rem; }
.live-row { display:flex; align-items:center; gap:.55rem; padding:.4rem .5rem; border-radius:6px; text-decoration:none; transition:background .12s; }
.live-row:hover { background:rgba(255,255,255,.05); }
.live-thumb { width:30px; height:30px; border-radius:5px; background:var(--bg3); overflow:hidden; flex-shrink:0; border:1px solid var(--border); }
.live-thumb img { width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.live-info { flex:1; min-width:0; }
.live-n { font-size:.77rem; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-c { font-size:.66rem; color:var(--muted); }
.live-dot { width:6px; height:6px; background:var(--green); border-radius:50%; flex-shrink:0; box-shadow:0 0 5px var(--green); animation:pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.2} }

/* -- FOOTER -- */
footer { background:var(--bg2); border-top:1px solid var(--border); padding:2rem 1.5rem; }
.ftr { max-width:1280px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.ftr-logo { font-family:'Press Start 2P',monospace; font-size:.62rem; color:var(--muted); }
.ftr-logo em { color:var(--yellow); font-style:normal; }
.ftr-links { display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; }
.ftr-links a { font-size:.8rem; color:var(--muted); text-decoration:none; transition:color .12s; }
.ftr-links a:hover { color:var(--text); }
.ftr-copy { font-size:.72rem; color:rgba(255,255,255,.15); font-family:'DM Mono',monospace; text-align:center; }

/* -- RESPONSIVE -- */
@media(max-width:860px) { .page { grid-template-columns:1fr; } .sidebar { position:static; } }
@media(max-width:640px) {
  .ham { display:flex; }
  .drawer { display:block; }
  nav, .hdr-search { display:none; }
  .page { padding:1.5rem 1rem 4rem; }
  .field-row { grid-template-columns:1fr; }
  .form-body { padding:1.25rem; }
  .form-card-hd { padding:1.1rem 1.25rem 1rem; }
}