:root {
  --blue: #1b8fe0;
  --blue-dark: #0f5f9e;
  --ink: #17324a;
  --muted: #5d7387;
  --line: #d9e4ee;
  --paper: #ffffff;
  --wash: #eef5fb;
  --danger: #b3261e;
  --ok: #1d7a4a;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%231b8fe0' stroke-opacity='.13' stroke-width='1'%3E%3Crect x='16' y='16' width='32' height='32'/%3E%3Crect x='16' y='16' width='32' height='32' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font: 400 15px/1.55 'Poppins', system-ui, sans-serif;
  color: var(--ink);
  background: var(--wash) var(--pattern);
}
a { color: var(--blue-dark); }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.3; }
h1 { font-size: 1.5rem; color: var(--blue); }
h2 { font-size: 1.15rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
:focus-visible { outline: 3px solid #ffb000; outline-offset: 2px; }

/* Bar atas */
.top { background: var(--paper); border-bottom: 3px solid var(--blue); }
.top-in { max-width: 1080px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { font-weight: 600; font-size: 1.05rem; color: var(--blue); margin-right: auto; text-decoration: none; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 6px 12px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.nav a[aria-current="page"] { background: var(--wash); color: var(--blue-dark); font-weight: 500; }
.who { font-size: .85rem; color: var(--muted); }

/* Bekas utama: kotak putih bersempadan biru, macam galeri rujukan */
.page { max-width: 1080px; margin: 24px auto; padding: 0 16px 48px; }
.panel { background: var(--paper); border: 1px solid var(--blue); border-radius: 12px; padding: 24px; }
.panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.panel-head h1, .panel-head h2 { margin-right: auto; }

/* Grid kad program */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pcard {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 14px 14px 14px 16px; border-right: 4px solid transparent;
  box-shadow: 0 1px 3px rgba(23, 50, 74, .08);
}
.pcard:hover, .pcard:focus-visible { border-right-color: var(--blue); }
.pcard.past { background: #fafcfe; }
.pcard.past h3 { color: var(--muted); }
.pcard h3 { font-size: .95rem; margin-bottom: 8px; }
.pcard p { margin: 0; font-size: .85rem; color: var(--muted); }
.tag { display: inline-block; margin-bottom: 8px; padding: 1px 8px; font-size: .75rem; border-radius: 99px; background: #e2f2e9; color: var(--ok); }
.tag.past { background: #e8edf2; color: var(--muted); }

/* Butang */
.btn {
  font: inherit; font-weight: 500; cursor: pointer;
  padding: 8px 16px; border-radius: 6px; border: 1px solid var(--blue);
  background: var(--blue); color: #fff;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.ghost { background: var(--paper); color: var(--blue-dark); }
.btn.ghost:hover { background: var(--wash); }
.btn.danger { background: var(--paper); color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: #fdecea; }
.btn.sm { padding: 4px 10px; font-size: .85rem; }

/* Borang */
label { display: block; font-weight: 500; font-size: .9rem; margin: 12px 0 4px; }
input, select, textarea {
  width: 100%; font: inherit; padding: 8px 10px; color: var(--ink);
  border: 1px solid #b9c9d8; border-radius: 6px; background: #fff;
}
input:focus { border-color: var(--blue); }
.row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.hint { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.err { color: var(--danger); font-size: .88rem; margin: 10px 0 0; min-height: 1.2em; }
.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }

/* Log masuk */
.login { max-width: 420px; margin: 56px auto 0; }
.login h1 { margin-bottom: 4px; }
.tabs { display: flex; margin: 18px 0 4px; border-bottom: 1px solid var(--line); }
.tabs button {
  flex: 1; font: inherit; padding: 8px; cursor: pointer; background: none; border: 0;
  border-bottom: 3px solid transparent; color: var(--muted); margin-bottom: -1px;
}
.tabs button[aria-selected="true"] { color: var(--blue-dark); border-bottom-color: var(--blue); font-weight: 500; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-top: 12px; }
.check input { width: auto; }

/* Butiran program */
.facts { display: grid; gap: 4px 16px; grid-template-columns: max-content 1fr; margin: 0 0 20px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--wash); border-radius: 99px; padding: 2px 10px; font-size: .82rem; }
.sect { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.sect > h2 { margin-bottom: 12px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 160px; }
.list .grow strong { display: block; font-weight: 500; }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; }
progress { width: 100%; height: 8px; margin-top: 8px; accent-color: var(--blue); }

/* Dialog */
dialog { border: 1px solid var(--blue); border-radius: 12px; padding: 22px; width: min(520px, 94vw); color: var(--ink); }
dialog::backdrop { background: rgba(23, 50, 74, .45); }
dialog h2 { margin-bottom: 4px; }
.picklist { max-height: 220px; overflow: auto; border: 1px solid #b9c9d8; border-radius: 6px; padding: 4px 10px; }
.picklist .check { margin: 6px 0; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 50;
  max-width: 92vw; font-size: .9rem;
}
.toast.bad { background: var(--danger); }

@media (max-width: 560px) {
  .panel { padding: 16px; }
  .row { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Tambahan untuk pautan butang & skrin tetapan */
a.btn { display: inline-block; text-decoration: none; }
.steps { margin: 12px 0 0; padding-left: 20px; }
.steps li { margin: 6px 0; }
.status { list-style: none; padding: 0; margin: 14px 0; }
.status li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; }
.status .ok { color: var(--ok); font-weight: 600; }
.status .no { color: var(--danger); font-weight: 600; }
code { background: var(--wash); padding: 1px 6px; border-radius: 4px; font-size: .88em; }

.sect form { margin-top: 26px; }

/* ===== FiqueX Ocean Islamic — reka bentuk v2.0 ===== */
:root {
  --blue:#0879c8;--blue-dark:#075a9b;--blue-deep:#06375f;
  --ink:#163b57;--muted:#657f96;--line:#dceaf4;--paper:#fff;
  --wash:#f1f7fc;--ok:#09845e;--danger:#c53f49;
  --shadow:0 12px 34px rgba(9,62,104,.075);
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%231679ad' stroke-opacity='.065' stroke-width='1'%3E%3Cpath d='M44 3 57 31 85 44 57 57 44 85 31 57 3 44 31 31z'/%3E%3Crect x='22' y='22' width='44' height='44' transform='rotate(45 44 44)'/%3E%3Ccircle cx='44' cy='44' r='11'/%3E%3C/g%3E%3C/svg%3E");
}
body { background:linear-gradient(180deg,#e8f5ff 0,#f5faff 320px,#f3f8fd 100%); min-height:100svh; }
body::before {content:'';position:fixed;inset:0;pointer-events:none;background:var(--pattern);opacity:.75;z-index:-1}
.ico { flex:none;vertical-align:middle;display:inline-block; }
h1 { color:var(--blue-deep);font-size:clamp(1.35rem,2vw,1.85rem);letter-spacing:-.045em; }
h2 {color:var(--blue-deep);letter-spacing:-.025em}
h2 .ico,h3 .ico {color:var(--blue);margin-right:5px}
.top { background:rgba(255,255,255,.96); border-bottom:1px solid #deecf7;box-shadow:0 3px 18px rgba(11,69,119,.07); position:sticky;top:0;z-index:12;backdrop-filter:blur(18px)}
.top-in { max-width:1220px; padding:12px 22px; gap:23px;min-height:76px}
.brand {display:inline-flex;align-items:center;gap:11px;text-decoration:none;min-width:max-content;margin-right:16px;color:var(--blue-deep)}
.brand strong {font-size:.98rem;letter-spacing:.09em;line-height:1.1;display:block}
.brand small {font-size:.66rem;color:var(--muted);font-weight:500;letter-spacing:.05em;display:block}
.brand-mark,.login-symbol {background:linear-gradient(145deg,#13aee0,#0879c8 54%,#064476);color:white;display:grid;place-items:center;border-radius:16px;box-shadow:0 7px 20px rgba(5,105,176,.22)}
.brand-mark {width:45px;height:45px}
.nav {display:flex;align-items:center;gap:5px}
.nav a {display:flex;align-items:center;gap:8px;border-radius:11px;padding:9px 13px;font-weight:500;font-size:.86rem;transition:background .2s,color .2s}
.nav a:hover {background:#eff7fc}
.nav a[aria-current=page] {background:#e8f5ff;color:var(--blue-dark)}
.top-right {margin-left:auto;display:flex;align-items:center;gap:9px}
.who {font-size:.8rem;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page {max-width:1220px;margin:32px auto 0;padding:0 22px 48px}
.panel {border:1px solid #e1edf7;padding:30px;border-radius:23px;box-shadow:var(--shadow);background:rgba(255,255,255,.98)}
.panel-head {gap:12px;margin-bottom:23px}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:10px 16px;font-weight:600;font-size:.86rem;line-height:1.25;box-shadow:0 3px 9px rgba(10,98,164,.06);transition:background .18s,border-color .18s,transform .18s}
.btn:not(:disabled):hover {transform:translateY(-1px)}
.btn.sm {padding:8px 12px;font-size:.8rem}
.btn.ghost {border-color:#d5e6f3;color:var(--blue-dark);box-shadow:none}
.btn.danger {border-color:#f1d2d7;color:var(--danger);box-shadow:none}
.btn.wa {background:#11a875;border-color:#11a875;color:white}
.btn.wa:hover {background:#07875a;border-color:#07875a}
a.btn {display:inline-flex}
.grid {grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.pcard {position:relative;padding:23px;min-height:202px;border:1px solid #e0ecf5;border-radius:18px;background:linear-gradient(154deg,#fff 42%,#f6fbff 100%);box-shadow:0 6px 22px rgba(15,80,130,.06);border-right:1px solid #e0ecf5;transition:transform .2s,box-shadow .2s,border .2s;overflow:hidden}
.pcard::after {content:'✧';font-size:65px;position:absolute;right:-2px;top:-24px;color:#d5edfa;font-weight:400;pointer-events:none}
.pcard:hover,.pcard:focus-visible {transform:translateY(-4px);border-color:#98d1ed;box-shadow:0 15px 32px rgba(8,97,158,.13)}
.pcard.past {background:#fbfcfd}
.pcard h3 {font-size:1.03rem;margin:14px 0 12px;color:var(--blue-deep);max-width:93%;line-height:1.45}
.pcard p {margin-top:7px;display:flex;align-items:center;font-size:.82rem;line-height:1.6}
.icon-label {display:inline-flex;align-items:center;gap:8px}
.icon-label .ico {color:#238bbb}
.tag {background:#e0f7ec;color:#187550;font-size:.7rem;padding:4px 10px;font-weight:600}
.tag.past {background:#edf2f7}
input,select,textarea {border:1px solid #cbdfea;border-radius:11px;padding:11px 13px;min-height:45px;box-shadow:0 1px 1px rgba(8,61,92,.02);transition:border .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus {border-color:#0b95ce;box-shadow:0 0 0 3px #0b95ce20;outline:none}
label {font-size:.84rem;font-weight:600;margin:15px 0 6px;color:#31566f}
.check {font-weight:400}
.check input {min-height:initial}
.auth-page {display:grid;place-items:center;min-height:calc(100svh - 90px);margin:0 auto;padding:32px 18px}
.login {width:min(460px,100%);max-width:none;margin:0;padding:34px 35px}
.login-symbol {width:62px;height:62px;border-radius:19px;margin-bottom:18px}
.login h1 {font-size:1.65rem}
.tabs {border-bottom:1px solid #e2ecf3}
.tabs button {font-size:.87rem;padding:13px 7px}
.title-wrap {margin-right:auto;min-width:170px}
.eyebrow {display:block;font-size:.69rem;color:#1394c9;font-weight:700;letter-spacing:.16em;margin-bottom:5px}
.detail-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0;margin-top:24px}
.detail-item {display:flex;gap:14px;align-items:flex-start;background:#f3f9fe;padding:20px 18px;border:1px solid #e1f0f9;border-radius:15px;min-width:0}
.detail-item>.ico {color:#1496c8;margin-top:2px}
.detail-item span {display:block;color:var(--muted);font-size:.73rem;margin-bottom:4px}
.detail-item strong {display:block;color:#123c5a;font-size:.88rem;overflow-wrap:anywhere;font-weight:600}
.sect {margin-top:30px;padding-top:26px;border-color:#e5edf6}
.sect .panel-head {margin-bottom:15px}
.sect .panel-head h2 {display:flex;align-items:center;gap:5px;margin-right:auto}
.pill-count {background:#e9f5fc;color:#167aab;font-size:.75rem;border-radius:99px;padding:4px 10px}
.assignment-list {border:1px solid #e2edf6;border-radius:16px;overflow:hidden}
.assignment-row {padding:13px 15px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #e9f0f6}
.assignment-row:last-child {border-bottom:0}
.assignment-row>.grow {flex:1;min-width:120px}
.assignment-row strong {display:block;font-size:.87rem}
.assignment-row .muted {display:block}
.avatar {width:42px;height:42px;background:linear-gradient(135deg,#d4f0ff,#e9f6ff);color:#127cab;border-radius:13px;display:grid;place-items:center;font-weight:700;flex:none}
.assignment-actions {display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.share-status {display:inline-flex;align-items:center;gap:5px;padding:3px 8px;font-size:.71rem;font-weight:600;border-radius:20px;margin-top:6px}
.share-status.sent {background:#e0f7e9;color:#137c52}
.share-status.unsent {background:#fff4e0;color:#9f6b14}
.list li {padding:16px 0}
.list .grow strong {font-weight:600}
.list .muted {display:block;font-size:.76rem;margin-top:4px}
.empty {border-radius:14px;padding:30px 18px;background:#f8fbfd;border-color:#d0e3f1}
.hint {line-height:1.75}
dialog {width:min(620px,96vw);border-radius:21px;padding:27px;border:1px solid #d6eaf7;box-shadow:0 20px 65px #052c4655;max-height:94svh;overflow-y:auto}
dialog::backdrop {background:rgba(2,28,52,.59);backdrop-filter:blur(3px)}
dialog .picklist {border-radius:12px;padding:8px 15px;border-color:#d9e8f3}
.preview-dialog {width:min(1010px,97vw);height:min(900px,94svh);display:flex;flex-direction:column;gap:10px}
.preview-dialog .panel-head {margin:0}
.preview-frame {display:block;width:100%;flex:1;min-height:230px;border:1px solid #d9e7f2;border-radius:10px;background:white}
.preview-img {max-width:100%;max-height:70svh;object-fit:contain;align-self:center;flex:1;min-height:0}
.preview-dialog .actions {margin-top:5px}
.footer {text-align:center;color:#8da5b6;font-size:.7rem;padding:0 20px 26px}
@media (max-width:900px) { .top-in {flex-wrap:wrap;gap:10px}.top-right {margin-left:auto}.nav {order:3;width:100%;justify-content:center}.nav a {flex:1;justify-content:center}.detail-grid {grid-template-columns:1fr 1fr} }
@media (max-width:620px) { .page {padding:0 12px 26px;margin-top:16px}.panel{padding:18px;border-radius:17px}.top-in{padding:10px 12px}.brand{margin:0}.brand strong{font-size:.85rem}.brand small{font-size:.59rem}.brand-mark{width:40px;height:40px}.top-right{gap:6px}.who{display:none}.hide-mobile{display:none!important}.detail-grid{grid-template-columns:1fr;gap:9px}.detail-item{padding:14px}.assignment-row{flex-wrap:wrap}.assignment-actions{width:100%;justify-content:flex-start;padding-left:54px}.panel-head{align-items:flex-start}.grid{grid-template-columns:1fr}.btn{font-size:.83rem}.login{padding:26px 22px}.row{grid-template-columns:1fr}.preview-dialog{padding:13px}.preview-dialog .panel-head{align-items:center} }
@media print { .top,.footer,.actions,.btn,.tabs,.sect form{display:none!important}body{background:#fff}.page{margin:0;padding:0}.panel{border:0;box-shadow:none;padding:0}.detail-item{border:1px solid #ddd}.pcard{box-shadow:none} }