/* Lafal — brand: ceria · berani · akrab. Oranye koral + krem, toska aksen. Mode bawaan terang. */
:root {
  --brand: #F2643D; --brand-2: #D9502B; --brand-soft: #FDE3D9;
  --aksen: #2BB3A3; --aksen-soft: #D6F2EE;
  --bg: #FFF8F1; --bg-gelap: #1E1A1D;
  --kartu: #FFFFFF; --kartu-2: #FFF1E6; --garis: #F0DFD2;
  --teks: #2A2124; --teks-2: #6B5D60; --teks-3: #9A8C8F;
  --sukses: #2E9E5B; --sukses-soft: #DDF3E6; --peringatan: #E8A317; --peringatan-soft: #FCEFD3; --bahaya: #D2453B; --bahaya-soft: #FADEDB;
  --bayang: 0 1px 2px rgba(80, 40, 20, .06), 0 6px 20px rgba(80, 40, 20, .06);
  --r: 18px; --r-s: 12px;
  --f-judul: 'Baloo 2', system-ui, sans-serif;
  --f-isi: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-asing: 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', 'Noto Naskh Arabic', 'Plus Jakarta Sans', sans-serif;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --brand: #FF7A55; --brand-2: #FF916F; --brand-soft: #46282A;
  --aksen: #3CC9B8; --aksen-soft: #1F3B39;
  --bg: var(--bg-gelap); --kartu: #282225; --kartu-2: #312A2D; --garis: #3D3438;
  --teks: #F6ECE6; --teks-2: #C9B9B5; --teks-3: #8F8080;
  --sukses: #4CC27F; --sukses-soft: #1F3A2B; --peringatan: #F2B740; --peringatan-soft: #3E3220; --bahaya: #FF6B60; --bahaya-soft: #44262A;
  --bayang: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--teks); font: 15px/1.55 var(--f-isi); -webkit-font-smoothing: antialiased; }
a { color: var(--brand-2); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-judul); line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: 30px; } h2 { font-size: 22px; } h3 { font-size: 18px; }
p { margin: 0 0 .8em; }
small, .muted { color: var(--teks-2); }
.asing { font-family: var(--f-asing); font-size: 1.2em; line-height: 1.5; }
[dir='rtl'].asing, .rtl { font-family: 'Noto Naskh Arabic', var(--f-asing); }
[hidden] { display: none !important; }

/* boot */
.boot { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: 12px; color: var(--teks-2); }
.logo-mark { width: 38px; height: 38px; border-radius: 10px; display: block; }
.logo-mark.big { width: 84px; height: 84px; border-radius: 22px; margin: 0 auto; animation: denyut 1.4s ease-in-out infinite; }
@keyframes denyut { 50% { transform: scale(1.06); } }

/* shell */
.shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--kartu); border-right: 1px solid var(--garis); padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.brand { display: flex; gap: 10px; align-items: center; padding: 4px 8px 12px; color: var(--teks); }
.brand b { font-family: var(--f-judul); font-size: 22px; display: block; line-height: 1; }
.brand small { font-size: 11.5px; }
.nav-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--teks-3); padding: 12px 10px 4px; }
.nav-a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--teks); font-weight: 500; }
.nav-a:hover { background: var(--kartu-2); }
.nav-a.on { background: var(--brand-soft); color: var(--brand-2); font-weight: 700; }
.nav-a > span:first-child { width: 22px; text-align: center; }
.nav-a .n { margin-left: auto; font-size: 12px; color: var(--teks-3); font-weight: 600; }
.nav-a .tag, .tag { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .05em; background: var(--aksen); color: #fff; border-radius: 6px; padding: 1px 6px; }
.tag { margin-left: 0; }
.side-foot { margin-top: auto; padding: 14px 10px 4px; font-size: 12px; color: var(--teks-3); }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; display: flex; gap: 10px; align-items: center; padding: 12px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--garis); }
.search { position: relative; flex: 1; max-width: 560px; }
.search input { width: 100%; padding: 10px 40px 10px 14px; border-radius: 12px; border: 1px solid var(--garis); background: var(--kartu); outline: none; }
.search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.search kbd { position: absolute; right: 10px; top: 9px; font-size: 12px; border: 1px solid var(--garis); border-radius: 6px; padding: 0 6px; color: var(--teks-3); }
.qres { position: absolute; left: 0; right: 0; top: 46px; background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px; box-shadow: var(--bayang); max-height: 60vh; overflow-y: auto; padding: 6px; }
.qres a { display: block; padding: 8px 10px; border-radius: 10px; color: var(--teks); }
.qres a:hover, .qres a.on { background: var(--kartu-2); }
.qres .h { font-size: 11px; font-weight: 700; color: var(--teks-3); padding: 6px 10px 2px; letter-spacing: .06em; }
.icon-btn { border: 1px solid var(--garis); background: var(--kartu); border-radius: 10px; width: 40px; height: 40px; cursor: pointer; font-size: 17px; flex: none; }
.view { padding: 24px; max-width: 1120px; width: 100%; flex: 1; }
.foot { padding: 18px 24px 28px; font-size: 12px; color: var(--teks-3); border-top: 1px solid var(--garis); }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 39; }
.only-m { display: none; }
.bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--kartu); border-top: 1px solid var(--garis); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); grid-template-columns: repeat(4, 1fr); }
.bottom a { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--teks-2); padding: 4px; border-radius: 10px; font-weight: 600; }
.bottom a span:first-child { font-size: 20px; line-height: 1.2; }
.bottom a.on { color: var(--brand-2); background: var(--brand-soft); }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; }
  .only-m { display: inline-flex; align-items: center; justify-content: center; }
  .bottom.only-m { display: grid; }
  .only-d { display: none; }
  .top { padding: 10px 14px; }
  .view { padding: 16px 14px 96px; }
  .foot { padding-bottom: 96px; }
  h1 { font-size: 25px; }
}

/* komponen */
.card { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r); padding: 18px; box-shadow: var(--bayang); }
.card + .card { margin-top: 14px; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .g2 { grid-template-columns: 1fr; } }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sp { flex: 1; }
.mt { margin-top: 18px; } .mt-s { margin-top: 10px; } .mb { margin-bottom: 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 11px 18px; background: var(--brand); color: #fff; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .08s, background .15s; min-height: 44px; }
.btn:hover { background: var(--brand-2); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: var(--kartu); color: var(--teks); border: 1px solid var(--garis); }
.btn.ghost:hover { background: var(--kartu-2); }
.btn.aksen { background: var(--aksen); }
.btn.kecil { padding: 6px 12px; min-height: 34px; font-size: 13.5px; border-radius: 10px; }
.btn.besar { padding: 16px 24px; font-size: 18px; border-radius: 16px; min-height: 60px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--garis); background: var(--kartu); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--teks); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--kartu-2); color: var(--teks-2); }
.pill.A1 { background: var(--sukses-soft); color: var(--sukses); }
.pill.A2 { background: var(--aksen-soft); color: var(--aksen); }
.pill.B1 { background: var(--peringatan-soft); color: var(--peringatan); }
.star { border: 0; background: none; cursor: pointer; font-size: 20px; color: var(--teks-3); padding: 2px 6px; line-height: 1; }
.star.on { color: var(--peringatan); }
.play { border: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--aksen-soft); color: var(--aksen); cursor: pointer; font-size: 15px; flex: none; }
.play:hover { background: var(--aksen); color: #fff; }
.note { background: var(--peringatan-soft); border-radius: var(--r-s); padding: 10px 14px; font-size: 13.5px; color: var(--teks); }
.note.info { background: var(--aksen-soft); }
.note.bahaya { background: var(--bahaya-soft); }
input.f, select.f, textarea.f { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--garis); background: var(--kartu); outline: none; }
input.f:focus, select.f:focus, textarea.f:focus { border-color: var(--brand); }
textarea.f { min-height: 140px; resize: vertical; }
label.l { display: block; font-weight: 600; font-size: 13.5px; margin: 12px 0 6px; }
.empty { text-align: center; padding: 34px 16px; color: var(--teks-2); }
.empty .ic { font-size: 40px; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--teks); color: var(--bg); padding: 10px 18px; border-radius: 12px; z-index: 60; font-weight: 600; box-shadow: var(--bayang); max-width: 90vw; }
.list-i { display: flex; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--garis); }
.list-i:last-child { border-bottom: 0; }
.list-i .t { flex: 1; min-width: 0; }
.list-i .t b { display: block; }
a.list-i { color: var(--teks); }
a.list-i:hover { background: var(--kartu-2); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.bar { height: 8px; background: var(--kartu-2); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width .3s; }

/* dashboard */
.hero { background: linear-gradient(135deg, var(--brand), #F58A5A); color: #fff; border-radius: 24px; padding: 24px; position: relative; overflow: hidden; box-shadow: var(--bayang); }
.hero h1 { color: #fff; }
.hero p { color: rgba(255, 255, 255, .9); }
.hero .btn { background: #fff; color: var(--brand-2); }
.hero .btn.ghost { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .35); }
.hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.stat b { font-family: var(--f-judul); font-size: 30px; display: block; line-height: 1.1; }
.stat small { font-size: 12.5px; }
.lang-c { display: block; color: var(--teks); }
.lang-c .fl { font-size: 30px; }
.lang-c:hover { border-color: var(--brand); }

/* kartu flip */
.flash { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; cursor: pointer; padding: 26px 18px; }
.flash .kata { font-size: 38px; font-weight: 600; font-family: var(--f-asing); line-height: 1.3; }
.flash .baca { color: var(--aksen); font-weight: 600; }
.flash .arti { font-size: 19px; font-weight: 700; }
.flash .contoh { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--garis); width: 100%; }
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.grade button { border: 0; border-radius: 12px; padding: 10px 4px; font-weight: 700; cursor: pointer; color: #fff; min-height: 52px; }
.grade small { display: block; font-weight: 500; font-size: 11px; color: rgba(255, 255, 255, .85); }
.g-1 { background: var(--bahaya); } .g-3 { background: var(--peringatan); } .g-4 { background: var(--aksen); } .g-5 { background: var(--sukses); }

/* sesi */
.steps { display: flex; gap: 6px; margin-bottom: 14px; }
.steps i { flex: 1; height: 6px; border-radius: 99px; background: var(--kartu-2); }
.steps i.done { background: var(--brand); }
.steps i.now { background: var(--aksen); }
.opsi { display: grid; gap: 8px; margin-top: 12px; }
.opsi button { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--garis); background: var(--kartu); cursor: pointer; font-weight: 500; }
.opsi button:hover { border-color: var(--brand); }
.opsi button.ok { border-color: var(--sukses); background: var(--sukses-soft); }
.opsi button.no { border-color: var(--bahaya); background: var(--bahaya-soft); }
.tok { display: inline-block; padding: 8px 12px; margin: 4px; border-radius: 10px; border: 1.5px solid var(--garis); background: var(--kartu); cursor: pointer; font-family: var(--f-asing); }
.tok.used { opacity: .3; pointer-events: none; }
.slot { min-height: 54px; border: 2px dashed var(--garis); border-radius: 12px; padding: 4px; }

/* dialog */
.dl { display: flex; gap: 10px; margin: 10px 0; align-items: flex-start; }
.dl .who { width: 30px; height: 30px; border-radius: 50%; background: var(--aksen-soft); color: var(--aksen); font-weight: 800; display: grid; place-items: center; flex: none; font-size: 13px; }
.dl.B .who { background: var(--brand-soft); color: var(--brand-2); }
.dl .bub { background: var(--kartu-2); border-radius: 14px; padding: 8px 12px; flex: 1; }
.dl .bub.hide .asing, .dl .bub.hide .baca { filter: blur(6px); }
.baca { color: var(--aksen); font-size: 13.5px; }

/* ngomong */
.mic { width: 108px; height: 108px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; font-size: 40px; cursor: pointer; box-shadow: 0 8px 24px rgba(242, 100, 61, .35); display: grid; place-items: center; margin: 10px auto; }
.mic.rec { animation: rek 1s ease-in-out infinite; background: var(--bahaya); }
@keyframes rek { 50% { box-shadow: 0 0 0 18px rgba(210, 69, 59, .15); } }
.skor { font-family: var(--f-judul); font-size: 64px; line-height: 1; font-weight: 800; }
.skor.bagus { color: var(--sukses); } .skor.lumayan { color: var(--peringatan); } .skor.kurang { color: var(--bahaya); }
.w { display: inline-block; padding: 2px 6px; margin: 2px; border-radius: 8px; font-family: var(--f-asing); font-size: 1.15em; }
.w.ok { background: var(--sukses-soft); color: var(--sukses); }
.w.no { background: var(--bahaya-soft); color: var(--bahaya); text-decoration: underline wavy; }
.target { font-family: var(--f-asing); font-size: 28px; font-weight: 600; line-height: 1.4; text-align: center; }
.wiz { display: flex; gap: 6px; margin-bottom: 14px; }
.wiz span { flex: 1; text-align: center; font-size: 12.5px; font-weight: 700; padding: 6px; border-radius: 10px; background: var(--kartu-2); color: var(--teks-3); }
.wiz span.on { background: var(--brand); color: #fff; }
.wiz span.done { background: var(--brand-soft); color: var(--brand-2); }
pre.prompt { white-space: pre-wrap; background: var(--kartu-2); border-radius: 12px; padding: 12px; font-size: 13px; max-height: 260px; overflow: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t td, table.t th { padding: 8px; border-bottom: 1px solid var(--garis); text-align: left; vertical-align: top; }