/* ZHH Toolkit Maker — Blue + Yellow */
:root{
  --blue-900:#0b2545;
  --blue-800:#13315c;
  --blue-700:#1d4e89;
  --blue-600:#2a69b0;
  --yellow:#facc15;
  --yellow-d:#eab308;
  --white:#ffffff;
  --muted:#cbd5e1;
  --border:rgba(255,255,255,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:linear-gradient(135deg,var(--blue-900),var(--blue-800));
  color:#fff;min-height:100vh;
}
.hidden{display:none!important}
.muted{color:var(--muted);font-size:14px}

/* ===== Premium Loader (orbit) ===== */
.loader-wrap{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 50%,#13315c 0%,#0b2545 70%);
}
.loader-card{text-align:center}
.orbit{
  position:relative;width:140px;height:140px;margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;
}
.orbit-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--yellow);
  animation:spin 1.4s linear infinite;
}
.orbit-ring.r2{inset:14px;border-top-color:#fff;animation-duration:2s;animation-direction:reverse}
.orbit-ring.r3{inset:28px;border-top-color:var(--yellow-d);animation-duration:1s}
.core{
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-d));
  color:var(--blue-900);font-weight:900;font-size:28px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 30px rgba(250,204,21,.6);
}
.loader-text{
  font-weight:800;letter-spacing:4px;color:var(--yellow);font-size:18px;margin-bottom:14px;
}
.loader-bar{
  width:200px;height:4px;border-radius:4px;background:rgba(255,255,255,.15);
  overflow:hidden;margin:0 auto;
}
.loader-bar span{
  display:block;height:100%;width:40%;
  background:linear-gradient(90deg,var(--yellow),#fff,var(--yellow));
  animation:slide 1.2s ease-in-out infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(350%)}
}

/* ===== Auth ===== */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{
  width:100%;max-width:420px;background:rgba(255,255,255,.06);
  border:1px solid var(--border);backdrop-filter:blur(14px);
  border-radius:18px;padding:32px;box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.brand-mini{color:var(--yellow);font-weight:700;font-size:13px;letter-spacing:2px;margin-bottom:10px}
.auth h1{font-size:26px;margin-bottom:6px}
.tabs{display:flex;gap:8px;margin:18px 0}
.tab{
  flex:1;padding:10px;border:none;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.06);color:#fff;font-weight:600;
}
.tab.active{background:var(--yellow);color:var(--blue-900)}
.form{display:flex;flex-direction:column;gap:8px}
.form label{font-size:13px;color:var(--muted);margin-top:6px}
.form input,.sidebar input{
  background:rgba(255,255,255,.08);border:1px solid var(--border);
  color:#fff;padding:11px 13px;border-radius:10px;font-size:14px;outline:none;
}
.form input:focus,.sidebar input:focus{border-color:var(--yellow)}
.btn{
  padding:11px 16px;border-radius:10px;border:none;cursor:pointer;
  font-weight:700;font-size:14px;transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--yellow);color:var(--blue-900)}
.btn.yellow{background:var(--yellow);color:var(--blue-900);box-shadow:0 6px 18px rgba(250,204,21,.35)}
.btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--border)}
.msg{font-size:13px;min-height:18px;margin-top:6px;color:var(--yellow)}

/* ===== Admin ===== */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;background:rgba(11,37,69,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);flex-wrap:wrap;gap:10px;
}
.brand{font-weight:800;color:var(--yellow);letter-spacing:1px}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}

.layout{display:grid;grid-template-columns:380px 1fr;gap:18px;padding:18px;max-width:1500px;margin:0 auto}
.sidebar{
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px;
  max-height:calc(100vh - 110px);overflow-y:auto;
}
.sidebar h2{font-size:15px;color:var(--yellow);margin:6px 0}
.sidebar label{font-size:12px;color:var(--muted);margin-top:6px}
.sidebar hr{border:none;border-top:1px solid var(--border);margin:14px 0}

.tool-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.tool-row{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:10px;
}
.tool-row .ic{font-size:20px}
.tool-row .nm{flex:1;font-weight:600;font-size:14px}
.tool-row button{
  background:#ef4444;color:#fff;border:none;border-radius:6px;
  padding:5px 9px;cursor:pointer;font-size:12px;
}

.preview{
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  min-height:600px;
}
.preview-head{
  display:flex;align-items:center;gap:6px;padding:10px 14px;
  background:rgba(0,0,0,.25);border-bottom:1px solid var(--border);
}
.dot{width:10px;height:10px;border-radius:50%}
.dot.r{background:#ef4444}.dot.y{background:#facc15}.dot.g{background:#22c55e}
.preview-url{margin-left:10px;font-size:12px;color:var(--muted)}
#previewFrame{flex:1;width:100%;border:none;background:#fff;min-height:600px}

/* ===== Mobile ===== */
@media(max-width:900px){
  .layout{grid-template-columns:1fr;padding:12px}
  .sidebar{max-height:none}
  .topbar{padding:12px 14px}
  .brand{font-size:14px}
  .btn{padding:9px 12px;font-size:13px}
  #previewFrame{min-height:500px}
}
@media(max-width:420px){
  .auth-card{padding:22px}
  .auth h1{font-size:22px}
}