/* Tema "Panel hijau + iOS": sidebar/kepala hijau gelap, panel kandungan terang bersudut besar, kad putih berbayang lembut.
   Elemen iOS: kaca (blur) HANYA pada elemen terapung (bar tab, kepala melekat, sheet), kawalan bersegmen, suis togol.
   Palet: signal (lalai) atau aeux, melalui <html data-tema> (shared/tema.js). Tukar warna di blok palet sahaja.
   Ikon: shared/ikon.js (JANGAN guna emoji). */
:root[data-tema="aeux"] {
  --kaca-gelap: rgba(15, 61, 54, .8);
  --kaca-terang: rgba(238, 245, 241, .78);
  --gelap: #0f3d36;        /* sidebar, kepala, kad pil gelap */
  --gelap-2: #0a2c27;      /* butang gelap / hover */
  --gelap-teks: #eaf4f0;
  --gelap-lembut: #8fb3aa;
  --gelap-aktif: rgba(255, 255, 255, .09);
  --panel: #eef5f1;        /* latar kandungan */
  --kad: #ffffff;
  --kad-2: #f3f8f5;
  --garis: #e1ebe6;
  --teks: #10201c;
  --teks-lembut: #6b7d77;
  --aksen: #2ecc71;        /* isian butang / bar / graf */
  --aksen-teks: #08291a;   /* teks atas aksen */
  --aksen-garis: #1faa5a;  /* garisan graf & pautan atas latar terang */
  --aksen-lembut: #dff3e6;
  --oren: #f26b3a;
  --oren-lembut: #fde7dd;
  --ais: #d6f1ec;
  --ok: #1faa5a;
  --amaran: #c98a0b;
  --bahaya: #e0533a;
}
:root, :root[data-tema="signal"] {
  --kaca-gelap: rgba(15, 59, 39, .8);
  --kaca-terang: rgba(247, 249, 247, .78);
  --gelap: #0f3b27;
  --gelap-2: #0a2a1c;
  --gelap-teks: #f7f9f7;
  --gelap-lembut: #93ad9e;
  --gelap-aktif: rgba(146, 255, 95, .12);
  --panel: #f7f9f7;
  --kad: #ffffff;
  --kad-2: #f0f5f1;
  --garis: #e2e9e4;
  --teks: #0f3b27;
  --teks-lembut: #5f7468;
  --aksen: #92ff5f;
  --aksen-teks: #0f3b27;
  --aksen-garis: #2f9e44;
  --aksen-lembut: #cff1d2;
  --oren: #ff7036;
  --oren-lembut: #ffe3d7;
  --ais: #bff2f0;
  --ok: #2f9e44;
  --amaran: #c98a0b;
  --bahaya: #e5532a;
}
:root {
  --jejari: 22px;
  --kabur: blur(20px) saturate(180%);
  --bayang: 0 1px 2px rgba(15, 59, 39, .04), 0 8px 24px rgba(15, 59, 39, .06);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-tajuk: 'Outfit', -apple-system, 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body { background: var(--panel); color: var(--teks); font-family: var(--font); font-size: 15px; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: var(--aksen-garis); }
h1, h2, h3 { font-family: var(--font-tajuk); font-weight: 600; letter-spacing: -.015em; margin: 0; }
.tengah { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--gelap); }
.kad { background: var(--kad); border: 0; box-shadow: var(--bayang); border-radius: var(--jejari); padding: 22px; }
.kad.gelap { background: var(--gelap); border-color: transparent; color: var(--gelap-teks); }
.kad.gelap .lembut { color: var(--gelap-lembut); }
.kad-log { width: 100%; max-width: 410px; }
.logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-tajuk); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.logo::before { content: ""; width: 24px; height: 24px; flex: none; background: var(--aksen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7c6-4 11-2 11 4-6 4-11 2-11-4zM11 15c6-4 11-2 11 4-6 4-11 2-11-4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7c6-4 11-2 11 4-6 4-11 2-11-4zM11 15c6-4 11-2 11 4-6 4-11 2-11-4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.label-kecil { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teks-lembut); }
.lembut { color: var(--teks-lembut); font-size: 13px; }
.ikon-svg { flex: none; display: block; }
.ikon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--aksen-lembut); color: var(--gelap); flex: none; }
.ikon.oren { background: var(--oren-lembut); color: var(--oren); }
.ikon.ais { background: var(--ais); color: var(--gelap); }
label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
input, textarea, select { width: 100%; padding: 12px 14px; background: var(--kad-2); border: 1px solid var(--garis); border-radius: 12px; color: var(--teks); font: inherit; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--aksen-garis); box-shadow: 0 0 0 3px var(--aksen-lembut); background: var(--kad); }
input[type=file] { padding: 8px; font-size: 13px; color: var(--teks-lembut); }
input[type=file]::file-selector-button { border: 0; border-radius: 8px; padding: 7px 12px; margin-right: 10px; background: var(--gelap); color: var(--gelap-teks); font: inherit; font-weight: 600; cursor: pointer; }
.butang { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border-radius: 12px; border: 0;
  background: var(--gelap); color: var(--gelap-teks); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; transition: transform .12s, background .15s; }
.butang:hover { background: var(--gelap-2); }
.butang:active { transform: scale(.97); }
.butang:disabled { opacity: .6; cursor: wait; }
.butang.aksen { background: var(--aksen); color: var(--aksen-teks); }
.butang.aksen:hover { filter: brightness(.96); }
.butang.penuh { width: 100%; margin-top: 18px; padding: 13px 18px; }
.butang.hantu { background: var(--kad); color: var(--teks); box-shadow: inset 0 0 0 1px var(--garis); }
.butang.hantu:hover { background: var(--kad-2); }
.butang.kecil { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
.butang .ikon-svg { width: 17px; height: 17px; }
.ralat { color: var(--bahaya); font-size: 13px; min-height: 1.2em; margin-top: 10px; }
.tersembunyi { display: none !important; }
.atas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; flex-wrap: wrap; }
.isi { max-width: 1100px; margin: 0 auto; padding: 16px 16px 60px; }
.nombor-besar { font-family: var(--font-tajuk); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--garis); font-size: 14px; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th { color: var(--teks-lembut); font-weight: 500; font-size: 12px; }
.jadual { overflow-x: auto; }
.lencana { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--kad-2); white-space: nowrap; }
.lencana.ok { color: var(--ok); background: var(--aksen-lembut); }
.lencana.tutup { color: var(--bahaya); background: var(--oren-lembut); }
.lencana.tunggu { color: var(--oren); background: var(--oren-lembut); }
.baris { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.baris > * { flex: 1 1 180px; }
.baris > .butang { flex: 0 0 auto; }
.bar-kemajuan { height: 6px; background: var(--kad-2); border-radius: 3px; overflow: hidden; }
.kad.gelap .bar-kemajuan { background: var(--gelap-aktif); }
.bar-kemajuan i { display: block; height: 100%; border-radius: 3px; background: var(--aksen); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--aksen-lembut); color: var(--gelap); display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: none; }
/* ---- Elemen iOS ---- */
.kaca-gelap { background: var(--kaca-gelap); -webkit-backdrop-filter: var(--kabur); backdrop-filter: var(--kabur); }
.kaca-terang { background: var(--kaca-terang); -webkit-backdrop-filter: var(--kabur); backdrop-filter: var(--kabur); }
@media (prefers-reduced-transparency: reduce) { .kaca-gelap { background: var(--gelap); } .kaca-terang { background: var(--panel); } .kaca-gelap, .kaca-terang { -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Kawalan bersegmen: trek kelabu, pilihan aktif = "ibu jari" putih */
.segmen { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(15, 59, 39, .07); }
.segmen button { border: 0; background: none; color: var(--teks); font: inherit; font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 9px; cursor: pointer; transition: background .2s, box-shadow .2s; }
.segmen button[aria-pressed="true"] { background: var(--kad); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
/* Suis togol iOS: <input type="checkbox" class="togol"> */
input.togol { -webkit-appearance: none; appearance: none; width: 51px; height: 31px; padding: 0; border: 0; border-radius: 999px; background: rgba(120, 130, 125, .28);
  position: relative; cursor: pointer; flex: none; transition: background .2s; }
input.togol::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1); transition: transform .2s cubic-bezier(.3, .7, .4, 1.2); }
input.togol:checked { background: var(--aksen-garis); }
input.togol:checked::after { transform: translateX(20px); }
input.togol:focus { box-shadow: 0 0 0 3px var(--aksen-lembut); }
/* Senarai berkumpulan (grouped inset list) */
.senarai-ios { padding: 2px 0 2px 18px; }
.senarai-ios > * { padding-right: 18px; }
.chevron { color: var(--teks-lembut); opacity: .6; }
/* Suis variasi (shared/tema.js, bila SUIS = true) */
.suis-tema { position: fixed; left: 50%; transform: translateX(-50%); top: 10px; z-index: 50; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #111; box-shadow: 0 6px 20px rgba(0,0,0,.25); font: 600 12px var(--font); }
@media (max-width: 600px) { .suis-tema { top: auto; bottom: 96px; } }
.suis-tema button { border: 0; background: none; color: #aaa; padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; }
.suis-tema button[aria-pressed="true"] { background: #fff; color: #111; }