:root{
  --bg:#f4f6f9;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#3b82f6;
  --success:#10b981;
  --danger:#ef4444;
  --glass: rgba(0,0,0,0.04);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#111827;
}

.container{
  max-width:900px;
  margin:28px auto;
  padding:0 18px;
}
body.modal-open{
  overflow:hidden;
}
body.modal-open .container,
body.modal-open main,
body.modal-open .controls,
body.modal-open header{
  pointer-events:none !important;
  user-select:none;
  -webkit-user-select:none;
  opacity:0.6;
}
body.modal-open .container .btn,
body.modal-open .container input,
body.modal-open .container button{
  pointer-events:none !important;
}
body.modal-open .modal,
body.modal-open .modal-card,
body.modal-open .modal-card *{
  pointer-events:auto !important;
  opacity:1;
}

.hero-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-bottom:16px;
}
.hero-text h1{
  margin:0;
  font-size:30px;
  text-align:center;
}
.subtitle{
  margin:2px 0 0 0;
  font-size:14px;
  color:#111827;
  font-weight:500;
  text-align:center;
}
.hero-logo{
  height:40px;
  width:auto;
  object-fit:contain;
  border-radius:8px;
}

.controls{display:flex;gap:10px;margin-bottom:16px}
.search-bar{
  flex:1;
  padding:12px;
  border-radius:10px;
  border:1px solid #e6e9ee;
  font-size:16px;
}
input[type="password"],input[type="text"]{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid #e6e9ee;
  font-size:16px;
  box-sizing:border-box;
}
label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
}
.btn{
  padding:10px 12px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:600;
  pointer-events:auto !important;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
  position:relative;
  z-index:1001;
}
.btn.primary{background:var(--accent);color:white}
.btn:hover{opacity:0.9}
.btn:active{opacity:0.8}
.btn:focus{outline:2px solid var(--accent);outline-offset:2px}

.category,.subcategory,.subsubcategory{
  background:var(--card);
  border-radius:12px;
  border:1px solid #eef2f7;
  padding:12px;
  margin-bottom:12px
}

.row{display:flex;justify-content:space-between;align-items:center}
.name{font-weight:700}
.items{margin-top:10px;padding-left:8px}
.hidden{display:none}

/* Toast message (optional helper) */
.toast{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  background:#111827;
  color:white;
  padding:10px 14px;
  border-radius:999px;
  font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  z-index:10002;
  max-width:90vw;
  text-align:center;
}

.action-input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #e6e9ee;
  font-size:15px;
  box-sizing:border-box;
  margin-bottom:10px;
}

.qty-controls{display:flex;gap:8px}
.small-btn{padding:6px 10px;border-radius:8px;border:none;font-weight:600;cursor:pointer}
.small-btn.tambah{background:var(--success);color:white}
.small-btn.kurang{background:var(--danger);color:white}

.modal{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  z-index:9999;
  pointer-events:auto;
  -webkit-user-select:none;
  user-select:none;
}
.modal:not(.hidden){
  pointer-events:auto;
}
.modal.hidden{
  display:none;
  pointer-events:none;
}
.modal-card{
  width:340px;
  max-width:90%;
  background:white;
  border-radius:12px;
  padding:18px;
  pointer-events:auto !important;
  position:relative;
  z-index:10000;
  -webkit-user-select:auto;
  user-select:auto;
}
.modal-card * {
  pointer-events:auto !important;
}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}