:root{--pine:#123C36;--pine-2:#1B5E55;--mist:#EAF3F0;--gold:#C8973B;--ink:#17302C;--line:#D5E0DB;--muted:#5B6F6A}
html{-webkit-text-size-adjust:100%}
body{font-family:'Figtree',system-ui,sans-serif;color:var(--ink);background:#FAFBF9;font-size:1.0625rem;line-height:1.6}
.font-display{font-family:'Young Serif',Georgia,serif;font-weight:400}
.text-pine{color:var(--pine)}.bg-mist{background:var(--mist)}

/* Tombol besar, mudah disentuh */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.5rem;padding:.75rem 1.5rem;border-radius:1rem;font-weight:700;font-size:1.125rem;line-height:1.2;text-align:center;cursor:pointer;transition:background .15s,transform .05s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--pine);color:#fff}.btn-primary:hover{background:var(--pine-2)}
.btn-gold{background:var(--gold);color:#2B1D00}.btn-gold:hover{background:#B98630}
.btn-ghost{border:2px solid var(--pine);color:var(--pine);background:transparent}.btn-ghost:hover{background:var(--mist)}
.btn-danger{background:#fff;color:#9B2C2C;border:2px solid #E5B4B4}.btn-danger:hover{background:#FDF2F2}
.btn-sm{min-height:2.75rem;padding:.4rem 1rem;font-size:1rem;border-radius:.75rem}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed}
a:focus-visible,.btn:focus-visible,.field:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Form */
.field{width:100%;min-height:3.5rem;border:2px solid var(--line);border-radius:.875rem;padding:.75rem 1rem;font-size:1.125rem;background:#fff;color:var(--ink)}
.field:focus{border-color:var(--pine-2);outline:none;box-shadow:0 0 0 4px rgba(27,94,85,.15)}
.field[readonly],.field:disabled{background:#F1F4F2;color:var(--muted)}
textarea.field{min-height:8rem}
.label{display:block;font-weight:700;margin-bottom:.375rem}
.help{font-size:.95rem;color:var(--muted)}
.panel{background:#fff;border:1px solid var(--line);border-radius:1.25rem}

/* Pilihan jawaban (radio besar) */
.opt{display:flex;gap:.75rem;align-items:flex-start;width:100%;text-align:left;padding:1rem;border:2px solid var(--line);border-radius:1rem;cursor:pointer;background:#fff;font-size:1.0625rem;line-height:1.45}
.opt:hover{border-color:var(--pine-2)}
.opt input{margin-top:.2rem;width:1.35rem;height:1.35rem;flex:none;accent-color:var(--pine)}
.opt:has(input:checked){border-color:var(--pine-2);background:var(--mist)}
.opt.is-right{border-color:#2F855A;background:#F0FFF4}
.opt.is-wrong{border-color:#C53030;background:#FFF5F5}

/* Isi materi dari admin */
.prose-bs h2{font-size:1.5rem;font-weight:700;margin:1.5rem 0 .5rem;color:var(--pine)}
.prose-bs h3{font-size:1.25rem;font-weight:700;margin:1.25rem 0 .5rem}
.prose-bs p{margin:.75rem 0}
.prose-bs ul{list-style:disc;padding-left:1.5rem;margin:.75rem 0}
.prose-bs ol{list-style:decimal;padding-left:1.5rem;margin:.75rem 0}
.prose-bs img{max-width:100%;height:auto;border-radius:1rem}
.prose-bs blockquote{border-left:4px solid var(--gold);padding-left:1rem;color:var(--muted)}

.badge{display:inline-block;padding:.15rem .7rem;border-radius:999px;font-size:.875rem;font-weight:700}
.badge-ok{background:#E6F4EA;color:#1E6B3A}.badge-wait{background:#FFF4D6;color:#8A5A00}
.badge-off{background:#EEF1F0;color:#5B6F6A}.badge-bad{background:#FDE8E8;color:#9B2C2C}

[x-cloak]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}