/* Akuntansi Seru: jurnal umum, persamaan akuntansi, buku besar, dan laporan keuangan */
.ak { --ak: #166534; --ak-soft: #dcfce7; --ak-ink: #14532d; --g-harta: #1d4ed8; --g-utang: #c2410c; --g-modal: #6d28d9; --g-pendapatan: #047857; --g-beban: #be123c; }
.ak .g-harta { --gc: #2563eb; --gb: #dbeafe; --gt: #1e3a8a; }
.ak .g-utang { --gc: #ea580c; --gb: #ffedd5; --gt: #7c2d12; }
.ak .g-modal { --gc: #7c3aed; --gb: #ede9fe; --gt: #4c1d95; }
.ak .g-pendapatan { --gc: #059669; --gb: #d1fae5; --gt: #064e3b; }
.ak .g-beban { --gc: #e11d48; --gb: #ffe4e6; --gt: #881337; }
.ak-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: clamp(8px, 1.6vw, 18px); overflow-y: auto; overflow-x: hidden; background: linear-gradient(180deg, #f0fdf4, #fff 55%); -webkit-overflow-scrolling: touch; }
.ak-view { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px); min-width: 0; width: 100%; max-width: 980px; margin: 0 auto; }
.ak-view[hidden] { display: none; }
.ak-hud { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.ak-hud:empty { display: none; }
.ak-chip { background: #fff; border: 3px solid var(--c); color: var(--ink); border-radius: 999px; padding: 2px 14px; font-weight: 800; font-size: clamp(13px, 1.6vw, 19px); display: inline-flex; gap: 6px; align-items: baseline; }
.ak-chip b { font-size: 1.2em; font-variant-numeric: tabular-nums; }
.ak-chip i { font-style: normal; }
.ak-chip.on { background: var(--c); color: #fff; }
.ak-qn { font-weight: 800; color: var(--muted); font-size: clamp(13px, 1.5vw, 17px); margin-left: 6px; }
.ak h2 { margin: 0; font-size: clamp(18px, 2.4vw, 26px); }
.ak h3 { margin: 0 0 6px; font-size: clamp(16px, 1.9vw, 20px); }
.ak-names { display: grid; gap: 6px; }
.ak-names input { font: 700 16px var(--font); padding: 8px 14px; border: 2px solid var(--line); border-radius: 999px; min-width: 0; width: 100%; box-sizing: border-box; text-align: center; }
.ak-names input[hidden] { display: none; }
#game-opts[hidden], #g-level[hidden], #g-total[hidden] { display: none; }
.ak-tip { margin: 0; text-align: center; color: var(--muted); font-weight: 700; font-size: 14px; }
.ak-turn { text-align: center; font-weight: 800; font-size: clamp(14px, 1.7vw, 18px); color: var(--c); }

/* kartu dan kepala usaha */
.ak-card { background: #fff; border: 3px solid var(--ak-soft); border-radius: 20px; padding: 8px 12px 12px; min-width: 0; }
.ak-card > h3 { color: var(--ak-ink); }
.ak-head { display: flex; align-items: center; gap: 10px; background: #fff; border: 3px solid var(--ak); border-radius: 20px; padding: 6px 12px; min-width: 0; }
.ak-ic { display: inline-block; width: var(--ps, 48px); height: var(--ps, 48px); flex: none; line-height: 0; }
.ak-ic svg { width: 100%; height: 100%; display: block; }
.ak-head .who { min-width: 0; font-weight: 800; color: var(--ink); line-height: 1.25; font-size: clamp(14px, 1.7vw, 18px); }
.ak-head .who small { display: block; font-weight: 700; color: var(--muted); font-size: 13px; }
.ak-head .ak-ic { --ps: 52px; }
.ak-story { background: #fff; border: 4px solid var(--ak); border-radius: 22px; padding: 10px 14px; color: var(--ink); font-weight: 700; line-height: 1.5; font-size: clamp(15px, 1.9vw, 21px); overflow-wrap: anywhere; }
.ak-story small { display: block; color: var(--ak); font-size: .62em; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
.ak-num { display: inline-block; background: #fef9c3; border-radius: 6px; padding: 0 5px; font-weight: 800; white-space: nowrap; }
.ak-stars { font-size: 1.25em; letter-spacing: 2px; color: #d97706; white-space: nowrap; }
.ak-stars .off { color: #cbd5e1; }

/* pilihan ganda dan golongan */
.ak-qcard { background: #fff; border: 4px solid var(--ak); border-radius: 24px; padding: 12px 16px; text-align: center; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.ak-qcard small { display: block; color: var(--ak); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ak-qcard .nm { display: block; font-weight: 800; font-size: clamp(22px, 4vw, 34px); color: var(--ink); line-height: 1.2; overflow-wrap: anywhere; }
.ak-qcard .q { display: block; margin-top: 4px; font-weight: 700; font-size: clamp(15px, 2vw, 20px); color: var(--muted); }
.ak-qcard.disabled { cursor: default; touch-action: auto; }
.ak-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: clamp(8px, 1.2vw, 14px); }
.ak-opts.two { grid-template-columns: 1fr 1fr; }
.ak-opts.one { grid-template-columns: 1fr; }
.ak-opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: clamp(56px, 9vh, 84px); padding: 6px 12px 6px 28px; border-radius: 18px; border: 4px solid var(--gc, var(--ak-soft)); background: var(--gb, #fff); color: var(--gt, var(--ink)); font: 800 clamp(15px, 2vw, 22px)/1.25 var(--font); cursor: pointer; text-align: center; overflow-wrap: anywhere; touch-action: manipulation; }
.ak-opt kbd { position: absolute; top: 3px; left: 8px; font: 800 12px var(--font); color: var(--muted); }
.ak-opt:hover:not(:disabled) { box-shadow: 0 0 0 3px var(--ak); }
.ak-opt.hot { box-shadow: 0 0 0 5px #facc15; transform: scale(1.03); }
.ak-opt:disabled { cursor: default; opacity: .75; }
.ak-opt.good { background: #bbf7d0; border-color: var(--ok); opacity: 1; color: var(--ink); }
.ak-opt.bad { background: #fecdd3; border-color: var(--bad); opacity: 1; color: var(--ink); }
.ak-opt.long { font-size: clamp(14px, 1.6vw, 18px); justify-content: flex-start; text-align: left; }
.ak-ghost { position: fixed; z-index: 99; pointer-events: none; transform: translate(-50%, -60%); opacity: .92; margin: 0; }

/* umpan balik dan tombol */
.ak-fb { min-height: 1.4em; text-align: center; font-weight: 800; color: var(--muted); font-size: clamp(14px, 1.7vw, 19px); line-height: 1.4; }
.ak-fb.ok b.r { color: var(--ok); } .ak-fb.bad b.r { color: var(--bad); }
.ak-fb p { margin: 4px 0 0; font-weight: 700; color: var(--ink); text-align: left; background: #f8fafc; border: 2px solid var(--line); border-radius: 14px; padding: 8px 12px; font-size: clamp(14px, 1.5vw, 16px); line-height: 1.5; }
.ak-fb ul { margin: 4px 0 0; padding: 8px 12px 8px 30px; text-align: left; color: var(--ink); font-size: clamp(13px, 1.5vw, 16px); font-weight: 700; background: #f8fafc; border: 2px solid var(--line); border-radius: 14px; }
.ak-act { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
.ak-next { align-self: center; min-height: 52px; padding: 0 34px; font-size: clamp(18px, 2vw, 24px); }
.ak-next[hidden] { display: none; }
.ak-btn { min-height: 48px; padding: 0 18px; border-radius: 999px; border: 3px solid var(--line); background: #fff; font: 800 15px var(--font); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.ak-btn:hover:not(:disabled) { border-color: var(--ak); background: var(--ak-soft); }
.ak-btn:disabled { opacity: .45; cursor: not-allowed; }
.ak-check { min-height: 52px; padding: 0 28px; font-size: 20px; margin-top: 0; }
.ak-check:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }

/* tabel jurnal */
.ak-jwrap { overflow-x: auto; border: 2px solid var(--line); border-radius: 14px; background: #fff; }
.ak-jt { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 0; font-size: clamp(12px, 1.5vw, 16px); color: var(--ink); }
.ak-jt th { background: #f1f5f9; padding: 6px 3px; font-weight: 800; font-size: .92em; text-align: left; border-bottom: 2px solid var(--line); }
.ak-jt th:nth-child(3), .ak-jt th:nth-child(4), .ak-jt td.am { text-align: right; }
.ak-jt .c-tgl { width: 13%; } .ak-jt .c-akun { width: auto; } .ak-jt .c-am { width: 27%; }
.ak-jt .sh { display: none; }
@media (max-width: 420px) { .ak-jt { font-size: 11.5px; } .ak-jt th .lg { display: none; } .ak-jt th .sh { display: inline; } .ak-jt td { padding: 3px 3px; overflow-wrap: break-word; } .ak-jt .gdot { display: none; } .ak-jt td.ac.k { padding-left: 10px; } .ak-jt td.tgl { font-size: 10.5px; line-height: 1.2; } }
.ak-jt td { padding: 4px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; min-height: 44px; overflow-wrap: anywhere; font-weight: 700; }
.ak-jt tr.ak-jr { cursor: pointer; height: 46px; }
.ak-jt tr.ak-jr:hover td { background: #f0fdf4; }
.ak-jt tr.ak-jr.sel td { background: #fef9c3; }
.ak-jt tr.ak-jr:focus-visible { outline: 3px solid var(--ak); outline-offset: -3px; }
.ak-jt tr.ak-jr.good td { background: #dcfce7; }
.ak-jt tr.ak-jr.bad td { background: #ffe4e6; }
.ak-jt td.tgl { font-size: .9em; color: var(--muted); }
.ak-jt td.am { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-jt td .ph { color: #94a3b8; font-weight: 700; }
.ak-jt td.ac.k { padding-left: 16px; }
.ak-jt td.ac .gdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gc, #94a3b8); margin-right: 4px; }
.ak-jt tr.ak-jm td { font-size: .9em; font-weight: 700; color: var(--bad); background: #fff1f2; padding: 4px 8px; }
.ak-jt tr.ak-jm.ok td { color: var(--ok); background: #f0fdf4; }
.ak-bal { margin-top: 6px; text-align: center; font-weight: 800; font-size: clamp(13px, 1.5vw, 16px); border-radius: 12px; padding: 4px 8px; background: #f1f5f9; color: var(--ink); }
.ak-bal.ok { background: #dcfce7; color: #14532d; }
.ak-bal.bad { background: #fef3c7; color: #78350f; }
.ak-edit { margin-top: 8px; background: #fffbeb; border: 2px solid #fcd34d; border-radius: 14px; padding: 8px 10px 10px; }
.ak-edit h4 { margin: 0 0 4px; font-size: 14px; color: #78350f; }
.ak-edit h4 + .ak-chips, .ak-edit .ak-sides, .ak-edit .ak-nom { margin-bottom: 8px; }
.ak-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ak-ch { min-height: 44px; padding: 4px 10px; border-radius: 12px; border: 3px solid var(--gc, var(--line)); background: var(--gb, #fff); color: var(--gt, var(--ink)); font: 800 clamp(13px, 1.5vw, 15px)/1.2 var(--font); cursor: pointer; touch-action: manipulation; text-align: center; }
.ak-ch[aria-pressed="true"] { background: var(--gc, var(--ak)); color: #fff; box-shadow: 0 0 0 3px rgba(250,204,21,.8); }
.ak-ch:disabled { opacity: .5; cursor: not-allowed; }
.ak-legend { margin: 4px 0 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.ak-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--gc); margin: 0 3px 0 6px; vertical-align: middle; }
.ak-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ak-sd { min-height: 48px; border-radius: 12px; border: 3px solid var(--ak); background: #fff; color: var(--ak-ink); font: 800 17px var(--font); cursor: pointer; touch-action: manipulation; }
.ak-sd[aria-pressed="true"] { background: var(--ak); color: #fff; box-shadow: 0 0 0 3px rgba(250,204,21,.8); }
.ak-nom { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ak-nom .ak-ch { --gc: #ca8a04; --gb: #fef9c3; --gt: #422006; font-variant-numeric: tabular-nums; }
.ak-nom input { font: 700 16px var(--font); width: 9.5em; min-height: 44px; border: 2px solid var(--line); border-radius: 12px; padding: 0 10px; box-sizing: border-box; min-width: 0; }
.ak-ed-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* akun T */
.ak-tw { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.ak-t { background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 6px 8px 8px; color: var(--ink); min-width: 0; }
.ak-t .tn { text-align: center; font-weight: 800; font-size: 14px; padding-bottom: 3px; border-bottom: 3px solid var(--ink); }
.ak-t .tb { display: grid; grid-template-columns: 1fr 1fr; }
.ak-t .tb > div { padding: 4px 6px; min-height: 28px; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; }
.ak-t .tb > div:first-child { border-right: 3px solid var(--ink); }
.ak-t .hd { font-size: 11px; color: var(--muted); font-weight: 800; text-transform: uppercase; }
.ak-t .row { display: flex; justify-content: space-between; gap: 6px; }
.ak-t .row.pend { background: #fef9c3; border-radius: 6px; padding: 0 3px; }
.ak-t .row.new { background: #dcfce7; border-radius: 6px; padding: 0 3px; }
.ak-t .row span:first-child { color: var(--muted); }
.ak-t .sal { margin-top: 4px; border-top: 2px solid var(--line); padding-top: 4px; font-weight: 800; font-size: 13px; display: flex; justify-content: space-between; }
.ak-journal-list { display: grid; gap: 6px; }
.ak-je { border: 2px solid var(--line); border-radius: 12px; padding: 5px 8px; background: #fff; font-size: clamp(13px, 1.5vw, 15px); color: var(--ink); line-height: 1.4; }
.ak-je .tx { font-weight: 700; overflow-wrap: anywhere; }
.ak-je table { width: 100%; border-collapse: collapse; margin-top: 3px; font-size: .93em; }
.ak-je td { padding: 1px 3px; font-weight: 700; }
.ak-je td.am { text-align: right; width: 28%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-je td.k { padding-left: 16px; }
.ak-je tr.tg td { background: #fef9c3; }
.ak-it { display: grid; gap: 6px; }
.ak-itm { border: 3px solid var(--line); border-radius: 14px; padding: 6px 10px; background: #fff; color: var(--ink); font-size: clamp(13px, 1.5vw, 15px); line-height: 1.4; }
.ak-itm.good { border-color: var(--ok); background: #f0fdf4; }
.ak-itm.bad { border-color: var(--bad); background: #fff1f2; }
.ak-itm .tx { font-weight: 700; overflow-wrap: anywhere; }
.ak-itm .jm { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.ak-itm .jm b { font-variant-numeric: tabular-nums; font-size: 1.05em; }
.ak-itm .why { color: var(--bad); font-weight: 700; margin-top: 3px; }
.ak-itm .sd { display: flex; gap: 6px; margin-left: auto; }
.ak-itm .sd button { min-height: 44px; min-width: 76px; border-radius: 10px; border: 3px solid var(--ak); background: #fff; font: 800 15px var(--font); color: var(--ak-ink); cursor: pointer; touch-action: manipulation; }
.ak-itm .sd button[aria-pressed="true"] { background: var(--ak); color: #fff; }

/* timbangan persamaan */
.ak-scale { display: grid; gap: 4px; background: #fff; border: 3px solid var(--ak-soft); border-radius: 20px; padding: 8px 10px 10px; }
.ak-bw { position: relative; height: 44px; }
.ak-beam { position: absolute; left: 8%; right: 8%; top: 8px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #1d4ed8, #475569 50%, #ea580c); transform: rotate(var(--tilt, 0deg)); transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.ak-fulc { position: absolute; left: 50%; top: 10px; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 30px solid #1e293b; transform: translateX(-50%); }
.ak-pans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.ak-pan { border: 3px solid var(--gc); background: var(--gb); border-radius: 14px; padding: 6px 8px 8px; transform: translateY(var(--dy, 0px)); transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); min-width: 0; color: var(--ink); }
.ak-pan h4 { margin: 0 0 3px; font-size: 14px; color: var(--gt); }
.ak-pan .ln { display: flex; justify-content: space-between; gap: 6px; font-size: clamp(12px, 1.5vw, 15px); font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; }
.ak-pan .ln span:first-child { color: var(--gt); }
.ak-pan .ln.z { opacity: .5; }
.ak-pan .ln.tot { border-top: 2px solid var(--gt); margin-top: 3px; padding-top: 3px; font-weight: 800; font-size: clamp(13px, 1.7vw, 17px); }
.ak-pan .ln.tot span:first-child { color: var(--ink); }
.ak-pan .chg { animation: ak-pulse .9s; }
.ak-eq { text-align: center; font-weight: 800; font-size: 13px; color: var(--ok); margin-top: 2px; }
.ak-eq.off { color: var(--bad); }
.ak-form { display: grid; gap: 6px; background: #f8fafc; border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px; font-weight: 800; color: var(--ink); font-size: clamp(13px, 1.5vw, 16px); text-align: center; }
.ak-form b { color: var(--ak); }
.ak-ef { display: grid; gap: 8px; }
.ak-ef .r { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; background: #fff; border: 3px solid var(--gc, var(--line)); border-radius: 14px; padding: 6px 8px; }
.ak-ef .r > b { color: var(--ink); font-size: 15px; }
.ak-ef .r.good { border-color: var(--ok); background: #f0fdf4; }
.ak-ef .r.bad { border-color: var(--bad); background: #fff1f2; }
.ak-ef .tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ak-ef .tri button { min-height: 48px; border-radius: 12px; border: 3px solid var(--line); background: #fff; font: 800 clamp(14px, 1.7vw, 17px) var(--font); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.ak-ef .tri button[aria-pressed="true"] { background: var(--ak); border-color: var(--ak); color: #fff; }
.ak-ef .tri button:disabled { cursor: default; }
@keyframes ak-pulse { 0% { background: #fde047; } 100% { background: transparent; } }

/* laporan */
.ak-ns { width: 100%; border-collapse: collapse; font-size: clamp(12px, 1.5vw, 15px); color: var(--ink); table-layout: fixed; }
.ak-ns th { background: #f1f5f9; padding: 5px 4px; font-weight: 800; text-align: right; border-bottom: 2px solid var(--line); }
.ak-ns th:first-child { text-align: left; width: 38%; }
.ak-ns td:not(:first-child), .ak-ns th:not(:first-child) { white-space: nowrap; }
@media (max-width: 420px) { .ak-ns { font-size: 11.5px; } }
.ak-ns td { padding: 3px 4px; border-bottom: 1px solid var(--line); text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ak-ns td:first-child { text-align: left; }
.ak-ns tfoot td { font-weight: 800; border-top: 3px double var(--ink); border-bottom: 0; }
.ak-det > summary { cursor: pointer; font-weight: 800; color: var(--ak-ink); min-height: 44px; display: flex; align-items: center; font-size: clamp(15px, 1.8vw, 18px); }
.ak-rep { display: grid; gap: 6px; }
.ak-rep .rt { text-align: center; font-weight: 800; color: var(--ink); line-height: 1.3; }
.ak-rep .rt small { display: block; color: var(--muted); font-weight: 700; }
.ak-sl { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 6px; align-items: center; }
.ak-sl .lb { font-weight: 800; font-size: clamp(12px, 1.5vw, 15px); color: var(--ink); line-height: 1.25; }
.ak-slot { min-height: 46px; border-radius: 12px; border: 3px dashed #475569; background: #f8fafc; color: var(--ink); font: 800 clamp(12px, 1.5vw, 15px)/1.25 var(--font); padding: 4px 8px; cursor: pointer; text-align: left; touch-action: manipulation; overflow-wrap: anywhere; width: 100%; }
.ak-slot.fill { border-style: solid; border-color: var(--ak); background: #fff; }
.ak-slot.want { border-style: solid; border-color: #ca8a04; background: #fef9c3; box-shadow: 0 0 0 3px rgba(250,204,21,.6); }
.ak-slot.hot { border-style: solid; border-color: var(--ak); background: #ecfdf5; }
.ak-slot.good { border-color: var(--ok); background: #bbf7d0; }
.ak-slot.bad { border-color: var(--bad); background: #fecdd3; }
.ak-slot:disabled { cursor: default; }
.ak-why { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--bad); }
.ak-tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 8px; border: 2px dashed var(--line); border-radius: 16px; background: #fff; min-height: 56px; }
.ak-tray:empty::after { content: 'Semua kartu sudah dipakai.'; color: var(--muted); font-weight: 700; font-size: 14px; align-self: center; }
.ak-kc { min-height: 48px; padding: 4px 10px; border-radius: 12px; border: 3px solid var(--ak); background: #fff; color: var(--ink); font: 800 clamp(12px, 1.5vw, 15px)/1.25 var(--font); cursor: grab; touch-action: none; box-shadow: 0 3px 0 rgba(22,101,52,.25); text-align: center; overflow-wrap: anywhere; max-width: 100%; }
.ak-kc.sel { background: #fef9c3; border-color: #ca8a04; box-shadow: 0 0 0 4px rgba(250,204,21,.6); }
.ak-kc:disabled { cursor: default; }
.ak-sum { font-size: 13px; font-weight: 800; color: var(--ak-ink); text-align: center; background: #f0fdf4; border-radius: 10px; padding: 3px 8px; }
.ak-ans { background: #f0fdf4; border: 2px solid #86efac; border-radius: 14px; padding: 6px 10px; }
.ak-ans h4 { margin: 0 0 3px; font-size: 14px; color: var(--ak-ink); }
.ak-ans .ln { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }

/* belajar */
.ak-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ak-tab { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 3px solid var(--line); background: #fff; color: var(--ink); font: 800 clamp(14px, 1.6vw, 17px) var(--font); cursor: pointer; touch-action: manipulation; }
.ak-tab[aria-pressed="true"] { background: var(--ak); border-color: var(--ak); color: #fff; }
.ak-sec { background: #fff; border: 3px solid var(--ak); border-radius: 22px; padding: 10px 14px 14px; min-width: 0; }
.ak-sec h2 { color: var(--ak); margin-bottom: 4px; }
.ak-sec p { margin: 4px 0 6px; color: var(--ink); line-height: 1.55; font-size: clamp(14px, 1.5vw, 16px); }
.ak-sec ul, .ak-sec ol { margin: 4px 0 6px; padding-left: 20px; color: var(--ink); line-height: 1.5; font-size: clamp(14px, 1.5vw, 16px); }
.ak-big { text-align: center; font-weight: 800; font-size: clamp(18px, 3vw, 28px); color: var(--ak-ink); background: #f0fdf4; border-radius: 14px; padding: 8px; margin: 6px 0; overflow-wrap: anywhere; }
.ak-tbw { overflow-x: auto; border: 2px solid var(--line); border-radius: 12px; margin: 6px 0; }
.ak-tb { width: 100%; border-collapse: collapse; font-size: clamp(12px, 1.5vw, 15px); color: var(--ink); min-width: 0; }
.ak-tb th { background: #f1f5f9; padding: 6px 6px; text-align: left; font-weight: 800; border-bottom: 2px solid var(--line); }
.ak-tb td { padding: 5px 6px; border-bottom: 1px solid var(--line); font-weight: 600; vertical-align: top; }
.ak-tb td:first-child { font-weight: 800; }
.ak-tb td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-tag { display: inline-block; border-radius: 999px; padding: 0 9px; font-size: 12px; font-weight: 800; background: var(--gb, #e2e8f0); color: var(--gt, var(--ink)); border: 2px solid var(--gc, #94a3b8); }
.ak-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ak-step .no { width: 30px; height: 30px; border-radius: 50%; background: var(--ak); color: #fff; font-weight: 800; display: grid; place-items: center; }
.ak-step.sebagian .no { background: #ca8a04; } .ak-step.belum .no { background: #94a3b8; }
.ak-step b { color: var(--ink); } .ak-step span.k { display: block; color: var(--muted); font-size: 14px; line-height: 1.45; }
.ak-gl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.ak-gl > div { border: 3px solid var(--gc); background: var(--gb); border-radius: 14px; padding: 6px 10px; color: var(--ink); font-size: 14px; line-height: 1.4; }
.ak-gl h4 { margin: 0 0 2px; color: var(--gt); font-size: 16px; }
.ak-gl li { margin-bottom: 3px; }
.ak-gl ul { padding-left: 16px; margin: 0; }

/* hasil */
.ak-score { display: flex; flex-direction: column; gap: 4px; font-size: clamp(15px, 2vw, 22px); margin-bottom: 6px; }
.ak-recap { text-align: left; max-height: 36vh; overflow: auto; margin: 6px 0; }
.ak-recap:empty { display: none; }
.ak-recap h3 { margin: 4px 0 6px; font-size: 16px; }
.ak-recap ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: var(--ink); font-size: 14px; line-height: 1.4; }
.ak-recap li span { display: block; color: var(--muted); }

@media (max-width: 420px) { .ak-wrap { padding: 6px; } .ak-card { padding: 6px 8px 10px; } .ak-sl { grid-template-columns: 1fr; } .ak-itm .sd { margin-left: 0; width: 100%; } .ak-itm .sd button { flex: 1; } }
@media (max-height: 520px) {
  #overlay-result .trophy { display: none; } #overlay-result .winner { font-size: 30px; margin: 0; } #overlay-result .panel { padding-top: 14px; }
  .ak-wrap { gap: 4px; padding: 4px 8px; }
  .ak-opt { min-height: 46px; border-width: 3px; }
  .ak-recap { max-height: 28vh; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.ak-mj { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: clamp(12px, 1.5vw, 15px); color: var(--ink); }
.ak-mj th { text-align: right; font-size: .9em; padding: 2px 3px; } .ak-mj th:first-child { text-align: left; width: 46%; }
.ak-mj td { padding: 2px 3px; font-weight: 700; overflow-wrap: anywhere; vertical-align: top; }
.ak-mj td.am { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-mj td.k { padding-left: 14px; }
.ak-t .tb > div { min-width: 0; overflow-wrap: anywhere; }
.ak-t .row { flex-wrap: wrap; }
@media (max-width: 420px) {
  .ak-scale { padding: 6px 6px 8px; } .ak-pans { gap: 6px; } .ak-pan { padding: 5px 5px 6px; } .ak-pan .ln span:last-child { overflow-wrap: anywhere; }
  .ak-pan .ln { flex-direction: column; gap: 0; line-height: 1.25; margin-bottom: 2px; font-size: 13px; }
  .ak-pan .ln span:first-child { font-size: 11px; }
  .ak-pan .ln.tot { font-size: 12.5px; }
  .ak-pan .ln { font-size: 12.5px; }
}

@media (min-width: 640px) and (max-height: 520px) { .ak-jcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; } .ak-jcard .ak-edit { margin-top: 0; } }
@media (max-height: 520px) { .ak-head { padding: 2px 10px; } .ak-head .ak-ic { --ps: 34px; } .ak-story { padding: 6px 12px; font-size: 15px; } .ak-turn { display: none; } }