:root{
  --bg:#050505;
  --panel:#111111;
  --panel-2:#151515;
  --border:#262626;
  --text:#f5f5f5;
  --muted:#b8b8b8;
  --accent:#c8a35d;
  --danger:#5e1d1d;
  --danger-text:#ffd3d3;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;display:block}
.site-shell{min-height:100vh;background:linear-gradient(180deg,#050505 0%,#090909 100%)}
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(5,5,5,.95);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(6px)
}
.site-header-inner{
  max-width:1200px;margin:0 auto;padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px
}
.site-logo img{height:34px;width:auto}
.site-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.site-nav .welcome{color:var(--muted);font-size:14px}
.page-wrap{max-width:1200px;margin:0 auto;padding:32px 20px 60px}
.auth-card,.panel-card{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.35)
}
.auth-card{max-width:460px;margin:56px auto;padding:30px}
.auth-card h1{margin:0 0 10px;font-size:32px}
.auth-card .intro{color:var(--muted);line-height:1.5;margin-bottom:24px}
.form-row{margin-bottom:14px}
label{display:block;font-size:14px;color:var(--muted);margin:0 0 7px}
input{
  width:100%;padding:13px 14px;border-radius:12px;
  border:1px solid #333;background:#0b0b0b;color:var(--text);outline:none
}
input:focus{border-color:var(--accent)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 18px;border:none;border-radius:12px;
  background:var(--accent);color:#000;font-weight:700;cursor:pointer
}
.btn.full{width:100%}
.alert{
  padding:12px 14px;border-radius:12px;margin:0 0 16px;
  font-size:14px;line-height:1.45
}
.alert.error{background:var(--danger);color:var(--danger-text)}
.alert.success{background:#14331e;color:#c8ffd6}
.hero-card{padding:28px;margin-bottom:22px}
.hero-card h1{margin:0 0 8px;font-size:34px}
.hero-card p{margin:0;color:var(--muted);line-height:1.6}
.section-title{margin:0 0 16px;font-size:24px}
.watch-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px
}
.watch-card{padding:20px}
.watch-render{
  position:relative;width:100%;aspect-ratio:1/1;margin:0 auto 18px;
  background:radial-gradient(circle at center,#171717 0%,#0d0d0d 55%,#080808 100%);
  border:1px solid #1f1f1f;border-radius:18px;overflow:hidden
}
.watch-render img.layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain
}
.watch-render .fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#8f8f8f;font-size:14px;padding:20px;text-align:center
}
.spec-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 18px
}
.spec-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.spec-value{font-size:15px;word-break:break-word}
.watch-meta{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.badge{
  display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;
  font-size:12px;background:#1f1f1f;border:1px solid #2c2c2c;color:#ddd
}
.badge.gold{background:rgba(200,163,93,.12);border-color:rgba(200,163,93,.35);color:#f1d7a2}
.empty-state{padding:24px;color:var(--muted)}
@media (max-width: 720px){
  .site-header-inner{padding:14px 16px}
  .page-wrap{padding:24px 16px 40px}
  .hero-card h1{font-size:28px}
  .auth-card{margin:28px auto;padding:22px}
  .spec-grid{grid-template-columns:1fr}
}

.nav-form{margin:0}.nav-link-button{background:none;border:none;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;padding:0}.nav-link-button:hover{text-decoration:underline}