/* ============================================================
   Roto-Rooter Voucher System — Design System
   Brand: #2F246C (indigo), #ED1B2E (red)
   ============================================================ */

:root {
  /* Brand */
  --rr-blue: #2F246C;
  --rr-blue-600: #3E3190;
  --rr-blue-050: #EEEDF7;
  --rr-red: #ED1B2E;
  --rr-red-600: #C81325;
  --rr-red-050: #FDECEE;
  --rr-gold: #F5A623;

  /* Neutrals */
  --ink: #1B2233;
  --ink-2: #3F4a5c;
  --muted: #6B7688;
  --line: #E5E9F0;
  --line-2: #EEF1F6;
  --bg: #F4F6FB;
  --bg-2: #EDF0F7;
  --card: #FFFFFF;
  --white: #FFFFFF;

  /* Status */
  --ok: #159E5B;
  --ok-bg: #E7F6EE;
  --warn: #E08600;
  --warn-bg: #FBF0DC;
  --danger: #DC2626;
  --danger-bg: #FCEBEB;
  --info: #2563EB;
  --info-bg: #E7EEFD;

  /* Radius & shadow */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --shadow-sm: 0 1px 2px rgba(20,28,50,.06), 0 1px 3px rgba(20,28,50,.04);
  --shadow: 0 4px 14px rgba(21,28,54,.08);
  --shadow-lg: 0 18px 48px rgba(21,28,54,.16);
  --ring: 0 0 0 3px rgba(46,45,130,.18);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; color: var(--ink); font-weight: 700; }
h1 { font-size: 1.55rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; letter-spacing: -.01em; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 1rem; }
a { color: var(--rr-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
small { font-size: .82rem; }
code, kbd { font-family: var(--mono); font-size: .86em; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

.eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.muted { color: var(--muted); }
.text-sm { font-size: .86rem; }
.text-xs { font-size: .76rem; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.hidden{display:none!important}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: inherit; font-weight: 600; font-size: .92rem;
  padding: .62rem 1.1rem; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  background: var(--rr-blue); color: #fff;
  transition: transform .04s ease, background .15s ease, box-shadow .15s ease, border-color .15s;
  text-decoration: none; line-height: 1.1; white-space: nowrap;
}
.btn:hover { background: var(--rr-blue-600); text-decoration: none; box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-loading { opacity: .6; cursor: not-allowed; }
.btn svg { width: 1.05em; height: 1.05em; }
.btn-red { background: var(--rr-red); }
.btn-red:hover { background: var(--rr-red-600); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-2); border-color: #d9deea; }
.btn-soft { background: var(--rr-blue-050); color: var(--rr-blue); }
.btn-soft:hover { background: #e3e6fa; }
.btn-danger { background: #fff; color: var(--danger); border-color: #f3c6c6; }
.btn-danger:hover { background: var(--danger-bg); }
.btn-success { background: var(--ok); }
.btn-success:hover { filter: brightness(.95); }
.btn-sm { padding: .4rem .72rem; font-size: .82rem; border-radius: 7px; }
.btn-lg { padding: .82rem 1.5rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-icon { padding: .5rem; width: 2.2rem; height: 2.2rem; }

.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%;
  animation: spin .6s linear infinite;
}
.btn-ghost.is-loading::after, .btn-soft.is-loading::after { border-color: rgba(46,45,130,.3); border-top-color: var(--rr-blue); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 1.25rem 1.35rem; }
.card-head {
  padding: 1rem 1.35rem; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-body { padding: 1.25rem 1.35rem; }
.card-foot { padding: .9rem 1.35rem; border-top: 1px solid var(--line-2); background: #fcfdff; border-radius: 0 0 var(--r) var(--r); }

/* ---------- Forms ---------- */
.field { margin-bottom: 1.05rem; }
.field > label, .label {
  display: block; font-weight: 600; font-size: .85rem;
  color: var(--ink-2); margin-bottom: .38rem;
}
.req { color: var(--rr-red); }
.input, .select, .textarea {
  width: 100%; font: inherit; font-size: .92rem; color: var(--ink);
  padding: .62rem .8rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.input:hover, .select:hover, .textarea:hover { border-color: #cfd6e4; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--rr-blue); box-shadow: var(--ring); outline: none; }
.input::placeholder, .textarea::placeholder { color: #9aa4b5; }
.input:disabled, .select:disabled { background: var(--bg-2); color: var(--muted); cursor: not-allowed; }
.textarea { resize: vertical; min-height: 88px; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7688' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2.2rem;
}
.hint { font-size: .78rem; color: var(--muted); margin-top: .32rem; }
.field-error .input, .field-error .select, .field-error .textarea { border-color: var(--danger); }
.error-text { color: var(--danger); font-size: .78rem; margin-top: .3rem; }

.input-group { display: flex; }
.input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.input-prefix {
  display: inline-flex; align-items: center; padding: 0 .7rem;
  background: var(--bg-2); border: 1px solid var(--line); border-right: none;
  border-radius: var(--r-sm) 0 0 var(--r-sm); color: var(--muted); font-size: .88rem;
}
.input-prefix + .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.check { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-size: .9rem; }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--rr-blue); flex: none; }
/* Toggle + teks berdampingan.
   Sebelumnya .switch span dipakai sebagai gagang toggle, padahal seluruh markup
   menaruh teks label di dalam span itu — akibatnya tulisan dijejalkan ke dalam
   pil 42x24px. Kini input-nya sendiri yang menjadi toggle, span murni teks. */
.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.switch input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
  width: 42px; height: 24px; background: #cbd3e1; border-radius: 20px; border: 0;
  transition: background .2s; cursor: pointer;
}
.switch input[type="checkbox"]::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: var(--shadow-sm);
}
.switch input[type="checkbox"]:checked { background: var(--rr-blue); }
.switch input[type="checkbox"]:checked::before { transform: translateX(18px); }
.switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--rr-red); outline-offset: 2px; }
.switch > span { font-size: .88rem; color: var(--ink); line-height: 1.35; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 780px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 0; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.stack { display: flex; flex-direction: column; gap: .6rem; }
.inline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  padding: .24rem .58rem; border-radius: 20px; white-space: nowrap;
  background: var(--bg-2); color: var(--ink-2);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-green { background: var(--ok-bg); color: var(--ok); }
.badge-blue { background: var(--info-bg); color: var(--info); }
.badge-red { background: var(--danger-bg); color: var(--danger); }
.badge-amber { background: var(--warn-bg); color: var(--warn); }
.badge-gray { background: var(--bg-2); color: var(--muted); }
.badge-indigo { background: var(--rr-blue-050); color: var(--rr-blue); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: #fff; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tbl th {
  text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding: .7rem .9rem; background: #fafbfe;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: .72rem .9rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: #f8faff; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Alerts / flash ---------- */
.alert {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem 1rem; border-radius: var(--r-sm); font-size: .9rem;
  border: 1px solid; margin-bottom: 1rem;
}
.alert svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 1px; }
.alert-success { background: var(--ok-bg); border-color: #bfe6cf; color: #0f7a45; }
.alert-error { background: var(--danger-bg); border-color: #f3c6c6; color: #b91c1c; }
.alert-info { background: var(--info-bg); border-color: #c5d6fb; color: #1d4ed8; }
.alert-warning { background: var(--warn-bg); border-color: #f0dcac; color: #b45309; }

/* ---------- Toast ---------- */
#toasts { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; max-width: 340px; }
.toast {
  background: var(--ink); color: #fff; padding: .8rem 1rem; border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); font-size: .88rem; display: flex; gap: .6rem; align-items: center;
  animation: toastIn .25s ease; 
}
.toast.ok { background: #0f7a45; } .toast.err { background: #b91c1c; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Stat cards ---------- */
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.1rem 1.2rem; position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
}
.stat .stat-label { font-size: .76rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stat .stat-value { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; margin-top: .2rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .stat-sub { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.stat .stat-ic {
  position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; background: var(--rr-blue-050); color: var(--rr-blue);
}
.stat .stat-ic svg { width: 20px; height: 20px; }
.stat.accent-red .stat-ic { background: var(--rr-red-050); color: var(--rr-red); }
.stat.accent-green .stat-ic { background: var(--ok-bg); color: var(--ok); }
.stat.accent-gold .stat-ic { background: #fdf1dc; color: #b8790f; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 3rem 1.5rem; color: var(--muted); }
.empty svg { width: 46px; height: 46px; opacity: .5; margin-bottom: .8rem; }
.empty h3 { color: var(--ink-2); }

/* ---------- Pagination ---------- */
.pager { display: flex; gap: .3rem; align-items: center; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .5rem; border-radius: 8px; border: 1px solid var(--line); background: #fff;
  color: var(--ink-2); font-size: .85rem; text-decoration: none;
}
.pager a:hover { background: var(--bg-2); text-decoration: none; }
.pager .active { background: var(--rr-blue); color: #fff; border-color: var(--rr-blue); }
.pager .disabled { opacity: .45; pointer-events: none; }

/* ---------- Modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(18,22,40,.55); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(2px); }
.modal-back.open { display: flex; animation: fadeIn .18s; }
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  background: #fff; border-radius: var(--r-lg); width: 100%; max-width: 480px;
  box-shadow: var(--shadow-lg); animation: modalUp .22s ease; max-height: 90vh; overflow: auto;
}
@keyframes modalUp { from { transform: translateY(16px); opacity: 0; } }
.modal-head { padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { margin: 0; }
.modal-body { padding: 1.35rem; }
.modal-foot { padding: 1rem 1.35rem; border-top: 1px solid var(--line-2); display: flex; gap: .6rem; justify-content: flex-end; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: .3rem; border-radius: 6px; }
.modal-close:hover { background: var(--bg-2); }

/* ---------- Skeleton ---------- */
.skel { background: linear-gradient(90deg, #eef1f6 25%, #e3e8f0 37%, #eef1f6 63%); background-size: 400% 100%; animation: shimmer 1.3s infinite; border-radius: 6px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Divider ---------- */
.divider { height: 1px; background: var(--line-2); margin: 1.2rem 0; border: none; }
.divider-text { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .8rem; margin: 1.2rem 0; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* progress */
.progress { height: 8px; background: var(--bg-2); border-radius: 20px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--rr-blue), var(--rr-blue-600)); border-radius: 20px; transition: width .4s ease; }
.progress.warn > i { background: linear-gradient(90deg, var(--rr-gold), #e08600); }
.progress.danger > i { background: linear-gradient(90deg, #f87171, var(--danger)); }

/* ============================================================
   SUPPLEMENT — kelas tambahan untuk view (dashboard, redemption,
   settings, users, mobile, claim, wallet, template)
   ============================================================ */

/* Badge & teks util */
.badge-purple{background:#F3EAFB;color:#7A3EAB}
.text-success{color:var(--ok)}
.text-danger{color:var(--danger)}
.text-lg{font-size:1.25rem;font-weight:700}
.no-pad{padding:0 !important}
.crumb-link{color:var(--muted);text-decoration:none}
.crumb-link:hover{color:var(--rr-blue)}

/* Dropdown item (topbar & aksi) */
.dropdown-menu.align-right{right:0;left:auto}
.dd-item{display:block;padding:.55rem .85rem;color:var(--ink);text-decoration:none;font-size:.9rem;border-radius:var(--r-sm)}
.dd-item:hover{background:var(--bg)}
.dd-user{padding:.7rem .85rem;border-bottom:1px solid var(--line);margin-bottom:.25rem}
.dd-user .uc-name{font-weight:600;font-size:.9rem}

/* Notifikasi dropdown & halaman */
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:.6rem .85rem;border-bottom:1px solid var(--line)}
.notif-all{font-size:.78rem;color:var(--rr-blue);background:none;border:0;cursor:pointer}
.ni-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--bg);flex:none}
.notif-full{display:flex;flex-direction:column}
.notif-full-row{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;border-bottom:1px solid var(--line-2);text-decoration:none;color:var(--ink)}
.notif-full-row:hover{background:var(--bg)}
.notif-full-row.unread{background:var(--rr-blue-050)}
.nfr-ic{font-size:1.1rem;flex:none;width:30px;text-align:center}

/* Definition list */
.def-list{display:flex;flex-direction:column;gap:0}
/* Label & nilai tetap berdampingan. Sebelumnya space-between membuat nilai
   terlempar ke tepi kanan pada panel lebar (jarak bisa 700px) sehingga terlihat kosong. */
.dl-row{display:grid;grid-template-columns:minmax(6.5rem,30%) 1fr;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--line-2)}
.dl-row:last-child{border-bottom:0}
.dl-row b{text-align:left;min-width:0;overflow-wrap:anywhere}
.dl-row > .muted{min-width:0}

/* Form layout kolom */
.form-main,.form-side{display:flex;flex-direction:column;gap:1rem}

/* Copy field */
.copy-field{display:flex;gap:.5rem;align-items:stretch}
.copy-field .input{flex:1}

/* Mode tabs (single/bulk, dsb) */
.mode-tabs{display:inline-flex;background:var(--bg);border-radius:var(--r);padding:4px;gap:4px;margin-bottom:1rem}
.mode-tab{border:0;background:none;padding:.5rem 1rem;border-radius:var(--r-sm);cursor:pointer;font-weight:600;font-size:.88rem;color:var(--muted)}
.mode-tab.active{background:var(--card);color:var(--rr-blue);box-shadow:var(--shadow-sm)}

/* Kotak kalkulasi diskon */
.calc-box{background:var(--rr-blue-050);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem;margin:.4rem 0 .8rem}

/* Dashboard: barchart */
.barchart{display:flex;align-items:flex-end;gap:.5rem;height:150px;padding-top:.5rem}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;height:100%;justify-content:flex-end}
.bar-col .bar{width:100%;max-width:34px;background:linear-gradient(180deg,var(--rr-blue-600),var(--rr-blue));border-radius:6px 6px 0 0;min-height:3px;transition:height .3s}
.bar-col .bar.p-red{background:linear-gradient(180deg,var(--rr-red),var(--rr-red-600))}
.bar-x{font-size:.68rem;color:var(--muted);white-space:nowrap}

/* Dashboard: konversi */
.conv-row{margin-bottom:.9rem}
.progress.sm{height:6px}

/* Dashboard: activity list */
.activity{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.activity li{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem 0;border-bottom:1px dashed var(--line-2)}
.activity li:last-child{border-bottom:0}
.act-dot{width:8px;height:8px;border-radius:50%;background:var(--rr-blue);margin-top:.4rem;flex:none}
.act-txt{font-size:.86rem;min-width:0}

/* Dashboard: mini-card & ranking */
.mini-card{border:1px solid var(--line);border-radius:var(--r);padding:.85rem;background:var(--card)}
.mc-title{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.35rem}
.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.rank li{display:flex;align-items:center;gap:.6rem}
.rk-n{width:22px;height:22px;border-radius:6px;background:var(--rr-blue-050);color:var(--rr-blue);font-weight:700;font-size:.78rem;display:grid;place-items:center;flex:none}
.rk-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}
.rk-v{font-weight:700;font-size:.9rem}

/* Timeline (detail voucher) */
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}
.timeline li{display:flex;gap:.7rem;align-items:flex-start;padding-bottom:.9rem;position:relative}
.tl-dot{width:10px;height:10px;border-radius:50%;background:var(--rr-blue);margin-top:.3rem;flex:none;box-shadow:0 0 0 3px var(--rr-blue-050)}
.tl-txt{font-size:.86rem;min-width:0}
.tl-txt .tl-time{color:var(--muted);font-size:.75rem}

/* Scanner */
.scan-frame{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:1;background:#0d1220;border-radius:var(--r-lg);overflow:hidden}
.scan-frame video{width:100%;height:100%;object-fit:cover}
.scan-reticle{position:absolute;inset:16%;border:3px solid rgba(255,255,255,.85);border-radius:16px;box-shadow:0 0 0 100vmax rgba(8,12,22,.45)}
.m-scan{max-width:100%}

/* Template swatch */
.tpl-swatch{height:130px;border-radius:var(--r);overflow:hidden;position:relative;background:var(--rr-blue);color:#fff;display:flex;flex-direction:column}
.tpl-swatch .ts-head{height:44px;background:rgba(255,255,255,.14)}
.tpl-swatch .ts-body{flex:1;display:grid;place-items:center}
.tpl-swatch .ts-amount{font-size:1.5rem;font-weight:800}
.tpl-swatch.tpl-corporate{background:linear-gradient(135deg,#2F246C,#3E3190)}
.tpl-swatch.tpl-premium{background:linear-gradient(135deg,#1B2233,#3F4a5c);border:1px solid var(--rr-gold)}
.tpl-swatch.tpl-premium .ts-amount{color:var(--rr-gold)}
.tpl-swatch.tpl-minimalist{background:#fff;color:var(--ink);border:1px solid var(--line)}
.tpl-swatch.tpl-minimalist .ts-head{background:var(--bg)}
.tpl-swatch.tpl-compensation{background:linear-gradient(135deg,#0E7C5A,#159E5B)}
.tpl-swatch.tpl-loyalty{background:linear-gradient(135deg,#B4231F,#ED1B2E)}

/* RBAC permissions */
.role-list{display:flex;flex-direction:column}
.role-item{text-align:left;border:0;background:none;padding:.7rem .95rem;border-bottom:1px solid var(--line-2);cursor:pointer;font-size:.9rem;font-weight:600;color:var(--ink-2);display:flex;justify-content:space-between;align-items:center;width:100%}
.role-item:hover{background:var(--bg)}
.role-item.active{background:var(--rr-blue-050);color:var(--rr-blue);box-shadow:inset 3px 0 0 var(--rr-blue)}
.perm-group{margin-bottom:1.1rem}
.perm-group-title{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--rr-blue);margin-bottom:.5rem;padding-bottom:.3rem;border-bottom:1px solid var(--line-2)}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem .9rem}

/* Mini login log */
.mini-log{list-style:none;margin:0;padding:0}
.mini-log li{display:flex;justify-content:space-between;gap:.5rem;padding:.5rem .9rem;border-bottom:1px solid var(--line-2)}
.mini-log li:last-child{border-bottom:0}

/* Claim page extras */
.claim-tc{margin-top:1rem;border-top:1px solid var(--line);padding-top:.8rem}
.claim-tc summary{cursor:pointer;font-weight:600;font-size:.88rem;color:var(--rr-blue)}
.claim-tc>div{margin-top:.6rem}
.claim-success-badge{text-align:center;margin:.5rem 0 1rem}

/* Campaign public hero */
.camp-hero{text-align:center;padding:1.4rem 1rem .4rem}
.camp-eyebrow{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rr-red);font-weight:700}
.camp-title{font-size:1.7rem;line-height:1.15;margin:.4rem 0;color:var(--rr-blue)}
.camp-benefit{display:inline-block;background:var(--rr-red);color:#fff;font-weight:800;font-size:1.05rem;padding:.4rem 1rem;border-radius:999px;margin:.3rem 0}
.camp-sub{font-weight:600;margin:.5rem 0 0}
.camp-desc{font-size:.92rem;margin:.5rem auto 0;max-width:34ch}

/* Wallet list */
.wallet-list{display:flex;flex-direction:column;gap:.7rem}
.wallet-card{display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--rr-red);border-radius:var(--r);padding:.9rem 1rem;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm)}
.wallet-card:hover{box-shadow:var(--shadow)}
.wc-left{min-width:0}
.wc-benefit{font-weight:800;color:var(--rr-red);font-size:1.05rem}
.wc-title{font-weight:600;font-size:.92rem}

/* ============ MOBILE (view spesifik) ============ */
.m-hero{padding:.4rem 0 1rem}
.m-hello{font-size:1.3rem;font-weight:800;color:var(--rr-blue)}
.m-sub{font-size:.85rem}
.m-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.m-stat-grid .m-stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.85rem;box-shadow:var(--shadow-sm)}
.m-stat-n{font-size:1.5rem;font-weight:800;color:var(--rr-blue);line-height:1}
.m-stat-l{font-size:.74rem;color:var(--muted);margin-top:.25rem}
.m-actions{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1rem 0}
.m-action{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.1rem .5rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:var(--rr-blue);font-weight:700;font-size:.9rem;box-shadow:var(--shadow-sm)}
.m-action:active{transform:scale(.97)}
.m-action-red{background:var(--rr-red);color:#fff;border-color:var(--rr-red)}
.m-section-title{font-weight:700;font-size:.95rem;margin:1.2rem 0 .6rem}
.m-list{display:flex;flex-direction:column;gap:.5rem}
.m-list .m-list-item{display:flex;align-items:center;justify-content:space-between;gap:.7rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.75rem .9rem;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm)}
.m-page-title{font-size:1.35rem;font-weight:800;color:var(--rr-blue);margin:.2rem 0 1rem}
.m-form{display:flex;flex-direction:column;gap:.85rem;margin-top:1rem}
.m-search{display:flex;gap:.5rem;margin-bottom:.8rem}
.m-search .input{flex:1}
.m-chips{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:.6rem;-webkit-overflow-scrolling:touch}
.m-chip{white-space:nowrap;padding:.4rem .85rem;border-radius:999px;background:var(--bg);color:var(--muted);text-decoration:none;font-size:.82rem;font-weight:600;border:1px solid transparent}
.m-chip.active{background:var(--rr-blue);color:#fff;border-color:var(--rr-blue)}
.m-success{text-align:center;padding:1.5rem 0 .5rem}
.m-success h2{margin:.6rem 0 .2rem}
.m-account-head{display:flex;align-items:center;gap:.9rem;padding:.5rem 0}
.m-avatar{width:56px;height:56px;border-radius:50%;background:var(--rr-blue);color:#fff;display:grid;place-items:center;font-size:1.5rem;font-weight:800;flex:none}
.m-acc-name{font-weight:800;font-size:1.15rem}

@media (max-width:520px){
  .check-grid{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* Penyesuaian akhir */
.dd-item.danger{color:var(--danger)}
.uc-name{font-weight:600;font-size:.9rem}
.act-txt{font-size:.86rem}

/* ---- Logo brand (logo asli Roto-Rooter, rasio 2.07:1 dijaga) ---- */
.brand-logo{height:30px;width:auto;display:block}
.m-brand-logo{height:22px;width:auto;display:block;flex:none}
.auth-head img,.claim-brandbar .cb-logo img,.result-card img{height:auto;max-width:100%}

/* ============================================================
   TEMA "SURAT KERJA" — tegas, kontras tinggi, miring tebal
   seperti wordmark Roto-Rooter. Merah = aksi, navy = struktur.
   ============================================================ */

/* -- Band judul halaman: navy + motif ombak dari logo -- */
.page-band{
  background:var(--rr-blue); color:#fff; padding:1.15rem 1.6rem .2rem;
  position:relative; margin-bottom:1.5rem;
}
.page-band .pb-k{font-size:.63rem;letter-spacing:.22em;font-weight:800;opacity:.75;text-transform:uppercase}
.page-band .pb-h{font-size:1.75rem;font-style:italic;font-weight:900;letter-spacing:-.035em;margin:.1rem 0 0;color:#fff;line-height:1.1}
.page-band .pb-back{color:#fff;opacity:.8;text-decoration:none;font-weight:800}
.page-band .pb-back:hover{opacity:1;text-decoration:none}
.page-band .pb-wave{
  height:11px;margin-top:.85rem;margin-bottom:-1px;
  background-image:radial-gradient(circle at 50% 100%, var(--bg) 6.5px, transparent 7px);
  background-size:18px 11px;background-repeat:repeat-x;background-position:0 100%;
}
.page-band .pb-tabs{position:absolute;right:1.6rem;top:1.15rem}

/* -- Grid kerja 2 kolom -- */
.issue-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:start}
@media(max-width:900px){.issue-grid{grid-template-columns:1fr;gap:1.4rem}}

/* -- Label langkah: garis navy + penanda merah -- */
.step-lbl{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.63rem;font-weight:900;letter-spacing:.16em;color:var(--rr-blue);
  text-transform:uppercase;border-bottom:2px solid var(--rr-blue);
  padding-bottom:.4rem;margin-bottom:.9rem;
}
.step-lbl b{color:var(--rr-red)}

/* -- Pemilih promo -- */
.promo-list{display:grid;gap:.5rem}
.promo-opt{
  border:2px solid var(--line);border-radius:9px;padding:.7rem .85rem;
  display:flex;align-items:center;gap:.85rem;cursor:pointer;background:#fff;transition:border-color .12s,background .12s;
}
.promo-opt:hover{border-color:#B9BECD}
.promo-opt.on{border-color:var(--rr-red);background:var(--rr-red-050)}
.promo-opt.off{opacity:.45;cursor:not-allowed}
.promo-opt .po-amt{
  font-style:italic;font-weight:900;font-size:1rem;color:var(--rr-blue);
  letter-spacing:-.03em;white-space:nowrap;flex:none;min-width:5.2rem;
}
.promo-opt.on .po-amt{color:var(--rr-red)}
.promo-opt .po-txt{min-width:0}
.promo-opt .po-txt b{display:block;font-size:.85rem;font-weight:700;color:var(--ink)}
.promo-opt .po-txt span{font-size:.72rem;color:var(--muted)}

/* -- Input bergaya garis (bukan kotak) -- */
.fld-line{margin-bottom:.85rem}
.fld-line label{display:block;font-size:.62rem;font-weight:900;letter-spacing:.11em;color:var(--muted);text-transform:uppercase;margin-bottom:.25rem}
.line-input{
  width:100%;border:0;border-bottom:2px solid var(--ink);background:transparent;
  padding:.45rem .15rem;font-size:.95rem;font-family:inherit;font-weight:600;color:var(--ink);
  border-radius:0;transition:border-color .12s;
}
.line-input:focus{outline:none;border-bottom-color:var(--rr-red);box-shadow:none}
.line-input::placeholder{font-weight:400;color:#A8AEBD}
select.line-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F246C' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .1rem center;background-size:15px;padding-right:1.3rem;cursor:pointer}
textarea.line-input{resize:vertical;font-weight:500;line-height:1.5}
.line-input.mono{font-family:var(--mono,ui-monospace,monospace);letter-spacing:.02em}

/* -- Tombol aksi utama -- */
.btn-issue{
  width:100%;background:var(--rr-red);color:#fff;border:0;border-radius:8px;
  padding:.95rem 1rem;font-size:.95rem;font-weight:900;font-style:italic;
  letter-spacing:.02em;cursor:pointer;margin-top:.5rem;font-family:inherit;
  transition:background .12s,transform .06s;
}
.btn-issue:hover{background:var(--rr-red-600)}
.btn-issue:active{transform:translateY(1px)}
.btn-issue:focus-visible{outline:3px solid var(--rr-blue);outline-offset:2px}
.issue-note{font-size:.68rem;color:var(--muted);text-align:center;margin-top:.5rem}

/* -- Pengaturan lanjutan (terlipat) -- */
.adv{margin-top:1.4rem;border-top:2px solid var(--line);padding-top:.7rem}
.adv > summary{
  cursor:pointer;font-size:.68rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);list-style:none;display:flex;align-items:center;gap:.4rem;padding:.25rem 0;
}
.adv > summary::-webkit-details-marker{display:none}
.adv > summary::before{content:"+";font-size:1rem;font-style:normal;color:var(--rr-red);font-weight:900}
.adv[open] > summary::before{content:"–"}
.adv > summary:hover{color:var(--rr-blue)}
.adv-body{padding-top:.9rem}
.adv-sect{
  font-size:.6rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--rr-blue);
  border-bottom:1px solid var(--line);padding-bottom:.3rem;margin:1.2rem 0 .7rem;
}
.adv-body > .adv-sect:first-child{margin-top:0}

/* -- Halaman "Lainnya" -- */
.sect-rule{
  display:flex;align-items:center;gap:.7rem;margin:1.6rem 0 .8rem;
  font-size:.62rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--rr-blue);
}
.sect-rule::after{content:"";flex:1;height:2px;background:var(--rr-blue);opacity:.15}
.more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.6rem}
.more-card{
  display:flex;align-items:center;gap:.85rem;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:.85rem .95rem;text-decoration:none;color:var(--ink);
  transition:border-color .12s,box-shadow .12s,transform .06s;
}
.more-card:hover{border-color:var(--rr-blue);box-shadow:0 4px 14px rgba(47,36,108,.1);text-decoration:none}
.more-card:active{transform:translateY(1px)}
.more-card .mc-ic{
  width:38px;height:38px;border-radius:9px;background:var(--rr-blue-050);color:var(--rr-blue);
  display:grid;place-items:center;flex:none;
}
.more-card .mc-ic svg{width:19px;height:19px}
.more-card .mc-txt{min-width:0;flex:1}
.more-card .mc-txt b{display:block;font-size:.86rem;font-weight:700}
.more-card .mc-txt span{font-size:.72rem;color:var(--muted)}
.more-card .mc-go{color:var(--muted);flex:none}
.more-card:hover .mc-go{color:var(--rr-red)}

/* -- Judul halaman ikut karakter miring tebal -- */
.page-head h1{font-style:italic;font-weight:900;letter-spacing:-.03em}

/* -- Semua halaman lama ikut band navy + ombak, tanpa mengubah view -- */
.page-head{
  background:var(--rr-blue); color:#fff;
  padding:1.15rem 1.6rem 1.4rem; margin-bottom:1.5rem; position:relative;
  align-items:center;
}
.page-head::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:11px;
  background-image:radial-gradient(circle at 50% 100%, var(--bg) 6.5px, transparent 7px);
  background-size:18px 11px; background-repeat:repeat-x; background-position:0 100%;
}
.page-head h1{color:#fff;font-size:1.75rem;line-height:1.1}
.page-head .eyebrow{color:rgba(255,255,255,.75);font-weight:800;letter-spacing:.22em}
.page-head .eyebrow a,.page-head .crumb-link{color:#fff;opacity:.85;font-weight:800}
.page-head .eyebrow a:hover,.page-head .crumb-link:hover{opacity:1;text-decoration:none}
.page-head p,.page-head .muted{color:rgba(255,255,255,.8)}
.page-head .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
.page-head .btn-ghost:hover{background:rgba(255,255,255,.14)}
.page-head .badge{background:rgba(255,255,255,.18);color:#fff;border-color:transparent}

/* -- Perbaikan responsif: grid item harus boleh menyusut -- */
.issue-grid > *{min-width:0}
.promo-opt{flex-wrap:wrap}
.promo-opt .po-txt{flex:1 1 60%}
@media(max-width:560px){
  .page-band{padding:1rem 1rem .2rem}
  .page-band .pb-h{font-size:1.4rem}
  .page-band .pb-tabs{position:static;margin-top:.7rem}
  .page-head{padding:1rem 1rem 1.3rem}
  .page-head h1{font-size:1.4rem}
  .promo-opt .po-amt{min-width:0;font-size:.92rem}
  .step-lbl{font-size:.58rem}
  .more-grid{grid-template-columns:1fr}
}