:root{
      --bg:#0b0b0b;
      --ink:#fff2e0;
      --muted:#c7a37d;
      --accent:#ff5a00;
      --accent2:#ff8a00;
      --line:rgba(255,90,0,.35);
      --max:1200px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: "Arial Black", "Impact", "Segoe UI", sans-serif;
      color:var(--ink);
      background:
        linear-gradient(135deg, rgba(255,90,0,.18), transparent 45%),
        radial-gradient(900px 500px at 80% 0%, rgba(255,138,0,.14), transparent 60%),
        var(--bg);
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }
    a{color:inherit;text-decoration:none}
    main{flex:1 0 auto}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 18px}

    .topbar{
      position:sticky; top:0; z-index:50;
      background:linear-gradient(90deg, #0b0b0b, #1a0f06 45%, #0b0b0b);
      border-bottom:2px solid var(--accent);
      text-transform:uppercase;
      letter-spacing:.14em;
    }
    .topbar-inner{
      display:flex; align-items:center; justify-content:space-between; gap:16px;
      padding:14px 0;
    }
    .brand{display:flex; align-items:center; gap:12px}
    .logo{
      width:44px; height:44px;
      background:#120b06 url("/assets/logo_hex.png") center/cover no-repeat;
      border:2px solid #fff2e0;
      box-shadow:0 0 0 4px rgba(255,90,0,.35);
      border-radius:10px;
    }
    .brand h1{margin:0; font-size:16px; letter-spacing:.22em}
    .brand .sub{font-size:11px; color:var(--muted); letter-spacing:.18em}

    .status{
      display:inline-flex; align-items:center; gap:10px;
      padding:8px 12px; border:2px solid var(--accent);
      background:rgba(255,90,0,.08);
      font-size:12px;
      border-radius:999px;
    }
    .dot{
      width:8px; height:8px; background:var(--accent2);
      box-shadow:0 0 0 6px rgba(255,138,0,.2);
      border-radius:999px;
    }

    .hero{
      padding:26px 0 18px;
      border-bottom:2px dashed rgba(255,90,0,.35);
    }
    .hero-grid{
      display:grid;
      grid-template-columns: minmax(0, 760px);
      gap:16px;
      justify-content:center;
    }
    .panel{
      border:2px solid var(--accent);
      background:linear-gradient(180deg, rgba(255,90,0,.10), rgba(0,0,0,.6));
      padding:16px;
      border-radius:18px;
    }
    .hero-title{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    }
    .hero-title h2{
      margin:0;
      font-size:40px;
      letter-spacing:.08em;
      line-height:1;
      text-transform:uppercase;
    }
    .live{
      font-size:12px; color:#000; background:var(--accent2);
      padding:8px 10px; border:2px solid #fff2e0;
      border-radius:8px;
    }
    .desc{
      margin-top:10px; color:var(--muted); font-size:13px; letter-spacing:.1em;
    }
    .nowbox{
      margin-top:14px; padding:12px; border:2px solid rgba(255,90,0,.45);
      background:rgba(0,0,0,.45);
      border-radius:14px;
    }
    .nowlabel{font-size:11px; letter-spacing:.2em; color:var(--muted)}
    .nowrow{display:flex; align-items:center; gap:12px; margin-top:6px}
    .nowtext{min-width:0}
    .nowtitle{margin:0 0 8px; font-size:18px; letter-spacing:.06em}
    .nowmeta{display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--muted)}

    .art{
      width:34px; height:34px; flex:0 0 auto;
      border:2px solid rgba(255,90,0,.6);
      background:linear-gradient(135deg, rgba(255,90,0,.35), rgba(0,0,0,.6));
      box-shadow:0 0 0 3px rgba(255,90,0,.18);
      border-radius:8px;
    }

    .controls{
      margin-top:12px; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    }
    .btn{
      border:2px solid var(--accent);
      background:transparent;
      color:var(--ink);
      padding:10px 14px;
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:.18em;
      cursor:pointer;
      border-radius:999px;
    }
    .btn.primary{
      background:linear-gradient(135deg, var(--accent), var(--accent2));
      color:#100600;
      border-color:#fff2e0;
    }
    .btn:active{transform:translateY(1px)}

    .slider{
      border:2px solid var(--accent);
      padding:8px 10px;
      display:flex; align-items:center; gap:10px;
      font-size:11px; color:var(--muted);
      border-radius:12px;
    }
    input[type="range"]{width:140px}

    .section{
      padding:18px 0;
      border-bottom:2px dashed rgba(255,90,0,.35);
    }
    .section h3{
      margin:0 0 10px; font-size:14px; letter-spacing:.24em; text-transform:uppercase;
    }

    .history{
      display:grid;
      gap:10px;
      border-left:3px solid var(--accent);
      padding-left:12px;
    }
    .item{
      border:none;
      padding:10px 12px;
      display:flex; justify-content:space-between; gap:12px;
      background:linear-gradient(90deg, rgba(255,90,0,.18), rgba(0,0,0,.35));
      font-size:12px; color:var(--muted);
      position:relative;
      border-radius:12px;
    }
    .item:before{
      content:"";
      position:absolute;
      left:-12px; top:50%; transform:translateY(-50%);
      width:8px; height:8px; background:var(--accent2);
      box-shadow:0 0 0 4px rgba(255,138,0,.2);
      border-radius:999px;
    }
    .item .tline{display:flex; align-items:center; gap:10px; min-width:0}
    .item .tline strong{display:block; color:var(--ink)}
    .item span{flex:0 0 auto}

    .footer{
      margin-top:auto;
      padding:20px 0 30px;
      border-top:2px solid var(--accent);
      background:linear-gradient(90deg, #0b0b0b, #1a0f06 50%, #0b0b0b);
      text-transform:uppercase;
      letter-spacing:.14em;
      font-size:11px;
      color:var(--muted);
    }

    .toast{
      position:fixed;
      right:18px;
      bottom:18px;
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      color:#100600;
      padding:10px 14px;
      border:2px solid #fff2e0;
      font-size:12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      opacity:0;
      transform:translateY(6px);
      transition:opacity .2s ease, transform .2s ease;
      z-index:100;
    }
    .toast.show{opacity:1; transform:translateY(0)}

    @media (max-width:900px){
      .hero-title h2{font-size:32px}
    }

/* Admin */
body.admin{
  background:
    repeating-linear-gradient(135deg, rgba(255,90,0,.08) 0 12px, transparent 12px 24px),
    radial-gradient(800px 420px at 80% 0%, rgba(255,138,0,.22), transparent 60%),
    var(--bg);
}
.admin-wrap{max-width:820px; margin:26px auto; padding:0 18px}
.admin-card{
  border:2px solid var(--accent);
  background:linear-gradient(180deg, rgba(255,90,0,.12), rgba(0,0,0,.65));
  padding:18px;
  border-radius:16px;
  box-shadow:0 18px 50px rgba(255,90,0,.2);
}
.admin-title{margin:0 0 6px 0; font-size:18px; letter-spacing:.18em; text-transform:uppercase}
.admin-muted{color:var(--muted); font-size:12px; letter-spacing:.1em}
.admin-row{margin-top:16px}
.admin-label{display:block; margin:10px 0 8px 0; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.admin-input{
  width:100%; padding:10px; background:rgba(0,0,0,.5); border:2px solid var(--accent);
  color:var(--ink); font-size:12px; border-radius:10px;
}
.admin-controls{
  display:flex; gap:10px; align-items:center; margin:10px 0 12px;
}
.admin-controls .admin-input{flex:1}
.admin-list{display:grid; gap:10px; margin-top:6px}
.admin-item{
  border:2px solid rgba(255,90,0,.6);
  background:rgba(0,0,0,.45);
  padding:12px; border-radius:14px;
}
.admin-item-title{
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
}
.admin-item-meta{
  margin-top:4px; font-size:11px; color:var(--muted); letter-spacing:.1em; word-break:break-all;
}
.admin-item-actions{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
}
.btn.small{padding:8px 10px; font-size:11px}
.btn.danger{border-color:#ff4d4f; color:#ff9ea0}
.admin-msg.ok{color:#33d17a}
.admin-msg.err{color:#ff4d4f}