:root{
  --bg:#0f172a; --card:#111827; --muted:#94a3b8; --text:#e5e7eb;
  --accent:#0E4D92; --accent-2:#0A3A6D; --danger:#ef4444;
  --panel:#111827; --border:#334155;
}
*{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif}

/* ========== APP BAR ========== */
.app-bar{
  position:sticky;top:0;inset-inline:0;z-index:100;
  display:flex;align-items:center;gap:10px;
  height:56px;padding:0 14px;
  background:var(--panel);color:var(--text);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.app-title{font-size:20px;font-weight:500;letter-spacing:.3px;margin:0;user-select:none}
.back-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;background:transparent;border:none;color:var(--text);
  border-radius:10px;cursor:pointer;text-decoration:none;
  transition:background .12s ease,transform .08s ease;
}
.back-btn:hover{background:rgba(255,255,255,.06)}
.back-btn:active{background:rgba(0,0,0,.25);transform:translateY(1px)}
.back-btn:focus-visible{outline:2px solid rgba(255,255,255,.4);outline-offset:2px}
.back-btn svg,.back-btn svg *{stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

body{margin:0;background:linear-gradient(180deg,#0b1220,#0f172a);color:var(--text)}
.wrap{max-width:880px;margin:32px auto;padding:16px;display:grid;gap:16px}
.card{background:rgba(17,24,39,.9);border:1px solid #1f2937;border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card h2{margin:0 0 12px;font-size:18px}
label{display:grid;gap:6px;margin:10px 0}
select,input{width:100%;padding:10px 12px;border:1px solid #334155;border-radius:10px;background:#0b1220;color:var(--text)}
select:focus,input:focus{outline:2px solid #3b82f6}
.row{display:flex;justify-content:space-between;align-items:center;margin:12px 0}
.info{color:var(--muted)}
.price{font-weight:700}

/* tombol ala random.css / lb_all.css */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:#1f2937;color:#fff;border:1px solid var(--border);
  border-radius:12px;padding:12px;cursor:pointer;user-select:none;
  transition:filter .15s ease,transform .06s ease;text-align:center
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(135deg,#0E4D92,#0A3A6D);
  border-color:#0E4D92;
  box-shadow:0 6px 16px rgba(14,77,146,.35)
}
.btn.secondary{background:#1f2937;border-color:var(--border)}
.btn.full{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
.hidden{display:none !important}
.msg{margin-top:8px;color:var(--muted)}
.badge{padding:6px 10px;border-radius:999px;border:1px solid #334155;background:#0b1220}
.hint{color:#93c5fd;margin-top:8px;font-size:12px}
.preview{display:block;max-width:100%;border-radius:10px;margin-top:10px;border:1px solid #334155}

/* ===== Tab Buttons ===== */
.tab-buttons{display:flex;gap:8px}
.tab-btn{flex:1}
.tab-btn.active{
  background:linear-gradient(135deg,#0E4D92,#0A3A6D);
  border-color:#0E4D92;
  box-shadow:0 6px 16px rgba(14,77,146,.35)
}

/* ===== Overlay Spinner ===== */
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:9999}
.sheet{position:relative;display:grid;grid-template-columns:48px 1fr;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 18px;width:min(520px,92vw);box-shadow:0 16px 40px rgba(0,0,0,.45);animation:pop .18s ease-out both}
.icon{width:42px;height:42px;border-radius:50%}
.spinner{border:5px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:spin .9s linear infinite}
.texts .title{font-weight:700;font-size:16px}
.texts .desc{color:var(--muted);font-size:14px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{transform:translateY(6px) scale(.98);opacity:0}to{transform:none;opacity:1}}

@media (max-width:560px){
  .app-title{font-size:clamp(18px,5vw,20px)}
  .back-btn{width:40px;height:40px}
}