/* ---------- Warna: kertas. Terang = bawaan; "kertas malam" ikut sistem atau dipilih ---------- */
:root {
  color-scheme: light;
  --latar: #f2ecdf;
  --samping: #e9e1d1;
  --kartu: #fbf8f1;
  --kartu-2: #f1eadc;
  --garis: rgb(70 52 25 / 0.12);
  --garis-kuat: rgb(70 52 25 / 0.22);
  --teks: #2c2620;
  --redup: #6f6556;
  --samar: #a39886;
  --aksen: #2f5596;
  --aksen-2: #2f5596;
  --aksen-lembut: rgb(47 85 150 / 0.1);
  --rekam: #c9452e;
  --margin: rgb(201 69 46 / 0.28);
  --stabilo: rgb(250 214 80 / 0.45);
  --bulu: #fffdf7;
  --bulu-garis: #b9a68a;
  --pipi: #eba596;
  --mata: #2c2620;
  --bayang: 0 1px 2px rgb(70 52 25 / 0.08), 0 10px 24px -14px rgb(70 52 25 / 0.35);
  --c-biru: #2f5596; --c-merah: #c9452e; --c-hijau: #3d7a4b; --c-kuning: #d9a521; --c-ungu: #6c4fa3; --c-pink: #c25a7c;
  /* Font mengikuti perangkat: San Francisco (Mac), Segoe UI (Windows), Roboto (Android) */
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
  /* Serat kertas halus (noise SVG, tanpa file tambahan) */
  --serat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    color-scheme: dark;
    --latar: #121212;
    --samping: #191919;
    --kartu: #1e1e1e;
    --kartu-2: #2a2a2a;
    --garis: rgb(227 227 227 / 0.1);
    --garis-kuat: rgb(227 227 227 / 0.18);
    --teks: #e3e3e3;
    --redup: #9a9a9a;
    --samar: #707070;
    --aksen: #8ab4f8;
    --aksen-2: #8ab4f8;
    --aksen-lembut: rgb(138 180 248 / 0.14);
    --rekam: #f28b82;
    --margin: rgb(242 139 130 / 0.28);
    --stabilo: rgb(250 214 80 / 0.28);
    --bulu: #f1f1f1;
    --bulu-garis: #959595;
    --pipi: #eba596;
    --mata: #2c2620;
    --bayang: 0 1px 2px rgb(0 0 0 / 0.25), 0 12px 28px -14px rgb(0 0 0 / 0.6);
    --c-biru: #93b2e6;
    --c-merah: #ec8a74;
    --c-hijau: #8fc79c;
    --c-kuning: #f0cf6b;
    --c-ungu: #b7a2e3;
    --c-pink: #e7a0b8;
    --serat: none;
  }
}
:root[data-tema="gelap"] {
  color-scheme: dark;
  --latar: #121212;
  --samping: #191919;
  --kartu: #1e1e1e;
  --kartu-2: #2a2a2a;
  --garis: rgb(227 227 227 / 0.1);
  --garis-kuat: rgb(227 227 227 / 0.18);
  --teks: #e3e3e3;
  --redup: #9a9a9a;
  --samar: #707070;
  --aksen: #8ab4f8;
  --aksen-2: #8ab4f8;
  --aksen-lembut: rgb(138 180 248 / 0.14);
  --rekam: #f28b82;
  --margin: rgb(242 139 130 / 0.28);
  --stabilo: rgb(250 214 80 / 0.28);
  --bulu: #f1f1f1;
  --bulu-garis: #959595;
  --pipi: #eba596;
  --mata: #2c2620;
  --bayang: 0 1px 2px rgb(0 0 0 / 0.25), 0 12px 28px -14px rgb(0 0 0 / 0.6);
  --c-biru: #93b2e6;
  --c-merah: #ec8a74;
  --c-hijau: #8fc79c;
  --c-kuning: #f0cf6b;
  --c-ungu: #b7a2e3;
  --c-pink: #e7a0b8;
  --serat: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--serat), var(--latar);
  color: var(--teks);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
em { font-style: italic; }
::selection { background: var(--aksen-lembut); }

.aurora { display: none; }

/* ---------- Tombol & ikon ---------- */
.ik { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ik.isi { fill: currentColor; stroke: none; }
button.ikon {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid transparent; color: var(--redup);
  border-radius: calc(10px * var(--sudut, 1)); padding: 7px; cursor: pointer; transition: .15s;
}
button.ikon:hover { color: var(--teks); background: var(--kartu-2); border-color: var(--garis); }
button.ikon.teks { padding: 7px 12px; font-size: 13.5px; }
button.ikon.kecil { font-size: 13px; padding: 4px 10px; }
button.ikon.bahaya:hover { color: var(--rekam); }
.tombol {
  border: 1px solid var(--garis-kuat); background: var(--kartu); border-radius: calc(12px * var(--sudut, 1));
  padding: 9px 18px; cursor: pointer; font-weight: 500;
}
.tombol.utama {
  border: 0; color: #fff; font-weight: 600;
  background: var(--aksen);
}
.tombol:disabled { opacity: .5; }

/* ---------- Persiapan ---------- */
#persiapan {
  position: relative; z-index: 1; max-width: 440px; margin: 0 auto; padding: 10vh 24px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
#persiapan h1 { font: 650 44px/1.1 var(--sans); margin: 8px 0 0; }
#persiapan p { color: var(--redup); margin: 0; }
.progres { width: 100%; display: grid; gap: 6px; }
.progres div { height: 6px; border-radius: calc(99px * var(--sudut, 1)); background: var(--garis-kuat); overflow: hidden; }
.progres div::after { content: ""; display: block; height: 100%; width: var(--p, 0%); background: var(--aksen); transition: width .3s; }
.progres span { font-size: 13px; color: var(--redup); }
.galat { color: var(--rekam) !important; min-height: 1.4em; }

/* ---------- Tata letak ---------- */
#aplikasi { position: relative; z-index: 1; display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100vh; }
/* minmax(0,…) + min-width:0: teks nowrap (cuplikan) tidak boleh melebarkan halaman */
#samping, #detail { min-width: 0; }
#samping {
  background: var(--samping); border-right: 1px solid var(--garis);
  display: flex; flex-direction: column; min-height: 0;
}
.merek { padding: 18px 12px 12px 22px; font: 650 19px/1 var(--sans); letter-spacing: -.2px; display: flex; align-items: center; gap: 10px; }
.merek .pet { width: 40px; height: 36px; }
.merek .gelembung { bottom: auto; top: calc(100% + 6px); left: auto; right: 0; border-radius: calc(14px * var(--sudut, 1)) calc(4px * var(--sudut, 1)) calc(14px * var(--sudut, 1)) calc(14px * var(--sudut, 1)); transform-origin: top right; }
.logo-simak { flex: none; width: 26px; height: 26px; margin-right: -2px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .15)); }
.versi-merek { align-self: flex-end; margin: 0 0 1px -4px; font: 500 10.5px/1 var(--sans); color: var(--redup, #8a8275); letter-spacing: 0; opacity: .85; }
.titik-merek { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--rekam); }
.cari {
  margin: 0 14px 8px; display: flex; align-items: center; gap: 8px;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: calc(12px * var(--sudut, 1)); padding: 2px 4px 2px 12px; color: var(--samar);
}
.cari:focus-within { border-color: var(--aksen); }
.cari input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 8px 0; }
#daftar-catatan { overflow-y: auto; flex: 1; padding: 4px 10px 120px; }
.grup { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--samar); padding: 16px 12px 6px; font-weight: 600; }
.item {
  padding: 10px 12px; border-radius: calc(12px * var(--sudut, 1)); cursor: pointer; border: 1px solid transparent;
  transition: background .15s; position: relative;
}
.item:hover { background: var(--kartu); }
.item.terpilih { background: var(--kartu); border-color: var(--garis-kuat); }
.item.terpilih::before {
  content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 3px; border-radius: calc(3px * var(--sudut, 1));
  background: var(--aksen);
}
.item .j { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .c { font-size: 13px; color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.item .m { font-size: 12px; color: var(--samar); display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.item .gel { display: inline-flex; gap: 1.5px; align-items: center; height: 10px; }
.item .gel i { width: 2px; border-radius: calc(2px * var(--sudut, 1)); background: currentColor; }
.chip { font-size: 11px; padding: 1px 8px; border-radius: calc(99px * var(--sudut, 1)); background: var(--kartu-2); border: 1px solid var(--garis); color: var(--redup); }
.chip.merekam { background: var(--rekam); color: #fff; border-color: transparent; animation: denyut 1.4s infinite; }
.chip.mentranskrip { color: var(--aksen); border-color: var(--aksen-lembut); background: var(--aksen-lembut); }
.chip.gagal { color: var(--rekam); }
.kosong { color: var(--samar); padding: 8px 24px; font-size: 13.5px; }

#detail { overflow-y: auto; min-height: 0; position: relative; }
.detail-kosong {
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px 24px 150px; gap: 6px;
}
.salam { color: var(--aksen); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin: 0 0 18px; }
.detail-kosong h1 { font: 650 clamp(34px, 4.4vw, 52px)/1.08 var(--sans); margin: 30px 0 10px; letter-spacing: -.5px; }
.detail-kosong h1 em { color: var(--aksen); }
.petunjuk { color: var(--redup); margin: 0; font-size: 14px; }

/* Mic besar: inti bercahaya + tiga cincin yang mengembang bergantian */
.mic-besar { position: relative; width: 168px; height: 168px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.mic-besar .inti {
  position: relative; z-index: 2; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--rekam);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .12), var(--bayang);
  animation: napas-mic 3s ease-in-out infinite; transition: transform .2s;
}
.mic-besar .inti .ik { width: 40px; height: 40px; stroke-width: 1.7; }
.mic-besar:hover .inti { transform: scale(1.06); }
.mic-besar:active .inti { transform: scale(.94); }
.mic-besar .cincin {
  position: absolute; inset: 32px; border-radius: 50%; border: 1.5px solid var(--rekam); opacity: 0;
  animation: cincin 3.6s cubic-bezier(.2, .6, .3, 1) infinite;
}
.mic-besar .cincin:nth-child(2) { animation-delay: 1.2s; }
.mic-besar .cincin:nth-child(3) { animation-delay: 2.4s; }
@keyframes cincin { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes napas-mic { 50% { transform: scale(1.04); } }

/* ---------- Catatan ---------- */
#catatan { max-width: 780px; margin: 0 auto; padding: 18px 32px 160px; display: flex; flex-direction: column; animation: masuk .35s ease; }
@keyframes masuk { from { opacity: 0; transform: translateY(8px); } }
.bilah { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 -8px 8px; }
.spasi { flex: 1; }
#tombol-kembali { display: none; }
#judul {
  font: 650 44px/1.1 var(--sans); letter-spacing: -.4px;
  border: 0; background: none; outline: none; padding: 4px 0; width: 100%;
  display: block; resize: none; overflow: hidden; color: var(--teks); overflow-wrap: anywhere;
}
#judul::placeholder { color: var(--teks); opacity: .92; }
.meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--redup); font-size: 13.5px; margin: 6px 0 18px; }
#tag { border: 1px dashed var(--garis-kuat); background: none; border-radius: calc(99px * var(--sudut, 1)); padding: 3px 12px; font-size: 12.5px; width: 7ch; max-width: 100%; outline: none; color: var(--aksen); }
#tag:focus { border-style: solid; border-color: var(--aksen); }

.pemutar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: calc(14px * var(--sudut, 1)); padding: 8px 14px 8px 8px;
}
button.bulat { width: 36px; height: 36px; border-radius: 50%; justify-content: center; background: var(--teks); color: var(--latar); }
button.bulat:hover { background: var(--aksen); color: #fff; }
button.bulat .jeda, .main-putar button.bulat .main { display: none; }
.main-putar button.bulat .jeda { display: block; }
.trek { flex: 1; height: 4px; border-radius: calc(4px * var(--sudut, 1)); background: var(--garis-kuat); cursor: pointer; position: relative; }
.terputar { height: 100%; width: 0; border-radius: calc(4px * var(--sudut, 1)); background: var(--aksen); }
#waktu-putar { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--redup); min-width: 80px; text-align: right; }

.tab { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.saklar { position: relative; display: inline-flex; background: var(--kartu); border: 1px solid var(--garis); border-radius: calc(12px * var(--sudut, 1)); padding: 3px; }
.saklar button { position: relative; z-index: 1; border: 0; background: none; padding: 6px 14px; border-radius: calc(9px * var(--sudut, 1)); cursor: pointer; color: var(--redup); font-size: 13.5px; font-weight: 500; transition: color .2s; }
.saklar button.aktif { color: var(--teks); }
.saklar .penanda { position: absolute; top: 3px; bottom: 3px; border-radius: calc(9px * var(--sudut, 1)); background: var(--kartu-2); border: 1px solid var(--garis-kuat); transition: left .25s ease, width .25s ease; }
#bantuan { background: var(--kartu); border: 1px solid var(--garis); border-radius: calc(14px * var(--sudut, 1)); padding: 14px 16px; font-size: 13.5px; color: var(--redup); margin-bottom: 14px; }
#bantuan b { color: var(--teks); }
.kata-ajaib { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; margin: 10px 0; }
code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--aksen); background: var(--aksen-lembut); padding: 1px 6px; border-radius: calc(6px * var(--sudut, 1)); margin-right: 4px; }

.prosa { font-size: 16.5px; line-height: 1.75; }
.prosa:empty::before { content: attr(data-kosong); color: var(--samar); }
.prosa h2 { font: 650 30px/1.2 var(--sans); margin: 26px 0 8px; }
.prosa h2:first-child { margin-top: 0; }
.prosa p { margin: 0 0 14px; }
.prosa ul { margin: 0 0 14px; padding-left: 22px; }
.prosa li { margin: 4px 0; }
.prosa li::marker { color: var(--aksen); }
.prosa strong, .prosa b { color: var(--teks); font-weight: 700; }
.prosa h3 { font: 600 20px/1.3 var(--sans); margin: 22px 0 6px; }
.prosa ol { margin: 0 0 14px; padding-left: 24px; }
.prosa ol li::marker { color: var(--aksen); font-weight: 600; }
.prosa blockquote { margin: 0 0 14px; padding: 4px 0 4px 16px; border-left: 3px solid var(--aksen); color: var(--redup); font-style: italic; }
.prosa s { color: var(--samar); }
.prosa ul.cek { padding-left: 0; }
.prosa ul.cek > li { list-style: none; position: relative; padding-left: 32px; margin: 6px 0; }
.prosa ul.cek > li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 19px; height: 19px; box-sizing: border-box;
  border: 1.5px solid var(--garis-kuat); border-radius: calc(6px * var(--sudut, 1)); cursor: pointer; transition: .15s;
}
.prosa ul.cek > li[data-cek="1"] { color: var(--samar); text-decoration: line-through; }
.prosa ul.cek > li[data-cek="1"]::before { background: var(--aksen); border-color: var(--aksen); }
.prosa ul.cek > li[data-cek="1"]::after {
  content: ""; position: absolute; left: 5px; top: 9px; width: 9px; height: 5px;
  border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg);
}
/* Coretan di catatan: tanpa bingkai, bentuk = coretannya; lebar bisa ditarik */
.prosa figure.coretan {
  position: relative; margin: 6px 0 14px; padding: 0; max-width: 100%; color: var(--teks);
  cursor: pointer; user-select: none; border-radius: calc(8px * var(--sudut, 1)); outline: 1.5px dashed transparent; outline-offset: 4px;
  transition: outline-color .15s;
}
.prosa figure.coretan:hover, .prosa figure.coretan.diubah { outline-color: var(--aksen); }
.prosa figure.coretan svg { display: block; width: 100%; height: auto; overflow: visible; }
.prosa figure.coretan .pegangan {
  position: absolute; right: -11px; bottom: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--aksen); border: 3px solid var(--latar); cursor: nwse-resize; touch-action: none;
  opacity: 0; transition: opacity .15s;
}
.prosa figure.coretan:hover .pegangan, .prosa figure.coretan.diubah .pegangan { opacity: 1; }
@media (hover: none) { .prosa figure.coretan .pegangan { opacity: .85; } }

/* Lembar kertas: garis margin merah di kiri seperti buku tulis */
#editor {
  min-height: 55vh; outline: none; caret-color: var(--aksen);
  font-size: 17px; line-height: 1.75;
  background: linear-gradient(90deg, transparent 30px, var(--margin) 30px, var(--margin) 31.5px, transparent 31.5px), var(--kartu);
  border: 1px solid var(--garis); border-radius: calc(4px * var(--sudut, 1)) calc(14px * var(--sudut, 1)) calc(14px * var(--sudut, 1)) calc(4px * var(--sudut, 1)); box-shadow: var(--bayang);
  padding: 26px 30px 48px 48px;
}
#editor:empty::before { content: attr(data-kosong); color: var(--samar); pointer-events: none; }

/* Toolbar format — menempel di atas saat menggulir */
#toolbar {
  position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  margin: 0 -6px 14px; padding: 5px; border-radius: calc(14px * var(--sudut, 1));
  background: var(--kartu); border: 1px solid var(--garis);

}
#toolbar button {
  min-width: 32px; height: 32px; padding: 0 7px; border: 0; background: none; color: var(--redup);
  border-radius: calc(8px * var(--sudut, 1)); cursor: pointer; font-size: 13.5px; font-weight: 600; display: inline-grid; place-items: center;
}
#toolbar button:hover { background: var(--kartu-2); color: var(--teks); }
#toolbar .sekat { width: 1px; height: 18px; background: var(--garis-kuat); margin: 0 4px; }
.pilih-warna { display: flex; gap: 0; }
#toolbar .bulat-warna::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--w); opacity: .8; }
#toolbar .huruf-warna { color: var(--w); font-size: 16px; font-weight: 700; }

#transkrip { list-style: none; padding: 0; margin: 0; }
#transkrip li { display: flex; gap: 14px; padding: 7px 10px; margin: 0 -10px; border-radius: calc(10px * var(--sudut, 1)); transition: background .2s; }
#transkrip li.diputar { background: var(--aksen-lembut); }
#transkrip .w { color: var(--aksen); font: 12.5px ui-monospace, Menlo, monospace; cursor: pointer; min-width: 48px; padding-top: 3px; }
#transkrip li.sampah { opacity: .35; text-decoration: line-through; }
#transkrip li.bertanda .w::after { content: " ★"; color: var(--c-kuning); }
#titik-tanda i { position: absolute; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--c-kuning); box-shadow: 0 0 0 2px var(--kartu); }
#transkrip .proses { color: var(--redup); font-style: italic; }

/* ---------- Dock ---------- */
#dock {
  position: fixed; z-index: 10; bottom: 22px; left: calc(300px + (100vw - 300px) / 2); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: min(520px, calc(100vw - 340px));
  padding: 8px 8px 8px 10px; border-radius: calc(26px * var(--sudut, 1));
  background: var(--kartu);
  border: 1px solid var(--garis-kuat); box-shadow: var(--bayang);

  transition: box-shadow .3s, border-color .3s;
}
#dock[data-mode="siap"] {
  width: auto; padding: 0; background: none; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#dock[data-mode="siap"] .dock-tengah { display: none; }
#dock[data-mode="siap"] button.rekam { width: 60px; height: 60px; animation: napas-mic 3s ease-in-out infinite; }
/* Desktop: di layar sambutan sudah ada mic besar, jadi tombol kecil cukup saat catatan terbuka */
@media (min-width: 761px) {
  #aplikasi:not(.buka-detail) #dock[data-mode="siap"] { display: none; }
}
#dock[data-mode="merekam"] { border-color: var(--rekam); }
.dock-tengah { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
#gelombang { width: 100%; height: 30px; display: block; }
.dock-teks { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--redup); padding: 0 2px; }
#dock-waktu { font-variant-numeric: tabular-nums; color: var(--teks); font-weight: 600; }

button.rekam {
  width: 52px; height: 52px; border-radius: 50%; flex: none; cursor: pointer; position: relative;
  border: 0; background: var(--rekam); display: grid; place-items: center;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .12), var(--bayang); transition: transform .15s;
}
button.rekam:hover { transform: scale(1.05); }
button.rekam:active { transform: scale(.95); }
button.rekam .mic { width: 22px; height: 22px; color: #fff; stroke-width: 2; }
button.rekam .kotak-stop { display: none; width: 15px; height: 15px; border-radius: calc(3px * var(--sudut, 1)); background: #fff; }
#dock[data-mode="merekam"] button.rekam .mic { display: none; }
#dock[data-mode="merekam"] button.rekam .kotak-stop { display: block; }
#dock[data-mode="merekam"] .dock-tengah { cursor: pointer; }
#dock[data-mode="merekam"] button.rekam::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--rekam);
  animation: riak 1.6s ease-out infinite;
}
@keyframes riak { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.3); } }
@keyframes denyut { 50% { opacity: .55; } }

/* ---------- Moci ---------- */
.pet { position: relative; width: 52px; height: 48px; cursor: pointer; flex: none; }
.pet.besar { width: 150px; height: 138px; }
.moci { width: 100%; height: 100%; overflow: visible; }
.moci .bulu, .moci .telinga { fill: var(--bulu); stroke: var(--bulu-garis); stroke-width: 2.5; stroke-linejoin: round; }
.moci .telinga-dalam { fill: var(--pipi); opacity: .55; }
.moci .perut { fill: var(--aksen-lembut); }
.moci .mata-buka circle { fill: var(--mata); }
.moci .mata-buka .kilau { fill: #fff; }
.moci .mata-tutup path, .moci .mata-senang path, .moci .mulut { fill: none; stroke: var(--mata); stroke-width: 2.5; stroke-linecap: round; }
.moci .pipi { fill: var(--pipi); opacity: .8; }
.moci .pensil rect { fill: var(--aksen); }
.moci .gelombang path { fill: none; stroke: var(--rekam); stroke-width: 3; stroke-linecap: round; }
.moci .zzz text { fill: var(--aksen); font: 700 14px var(--sans); }
.moci .hati path { fill: var(--aksen-2); }
.moci .mata-tutup, .moci .mata-senang, .moci .pensil, .moci .gelombang, .moci .zzz, .moci .hati { display: none; }
.moci .badan { transform-origin: 60px 96px; animation: napas 3.2s ease-in-out infinite; }
.moci .mata-buka { transform-origin: 60px 56px; animation: kedip 5s infinite; }
@keyframes napas { 50% { transform: scale(1.03, .97); } }
@keyframes kedip { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }

/* Telinga ikut tegak sesuai kerasnya suara (--suara 0..1 diisi dari app.js) */
[data-kondisi="dengar"] .telinga, [data-kondisi="dengar"] .telinga-dalam { transform-box: fill-box; transform-origin: bottom; transform: translateY(calc(var(--suara, 0) * -5px)) scaleY(calc(1 + var(--suara, 0) * .18)); transition: transform .12s; }
[data-kondisi="dengar"] .mata-buka { transform: scale(1.12); animation: none; }

[data-kondisi="nulis"] .pensil { display: block; }
[data-kondisi="nulis"] .pensil rect { transform-box: fill-box; transform-origin: left; animation: tulis .45s ease-in-out infinite alternate; }
[data-kondisi="nulis"] .mata-buka { transform: translateY(3px); animation: none; }
@keyframes tulis { to { transform: rotate(-20deg) translateY(2px); } }

[data-kondisi="senang"] .mata-buka { display: none; }
[data-kondisi="senang"] .mata-senang, [data-kondisi="senang"] .hati { display: block; }
[data-kondisi="senang"] .badan { animation: lompat .5s ease-in-out 3; }
[data-kondisi="senang"] .hati { animation: naik 1.5s ease-out forwards; }
@keyframes lompat { 50% { transform: translateY(-8px); } }
@keyframes naik { to { transform: translateY(-14px); opacity: 0; } }

[data-kondisi="tidur"] .mata-buka { display: none; }
[data-kondisi="tidur"] .mata-tutup, [data-kondisi="tidur"] .zzz { display: block; }
[data-kondisi="tidur"] .badan { animation-duration: 5s; }
[data-kondisi="tidur"] .zzz { animation: kedip-z 2.5s infinite; }
@keyframes kedip-z { 50% { opacity: .2; } }

.gelembung {
  position: absolute; left: 0; bottom: calc(100% + 14px); z-index: 5;
  background: var(--kartu-2); border: 1px solid var(--garis-kuat); border-radius: calc(14px * var(--sudut, 1)) calc(14px * var(--sudut, 1)) calc(14px * var(--sudut, 1)) calc(4px * var(--sudut, 1));
  padding: 6px 12px; font-size: 13px; white-space: nowrap; box-shadow: var(--bayang);
  opacity: 0; transform: translateY(6px) scale(.96); transform-origin: bottom left;
  transition: .25s cubic-bezier(.2, .9, .3, 1.3); pointer-events: none;
}
.pet.besar .gelembung { display: none; }
.gelembung.tampil { opacity: 1; transform: none; }

dialog { border: 1px solid var(--garis-kuat); border-radius: calc(18px * var(--sudut, 1)); background: var(--kartu); color: var(--teks); max-width: 380px; padding: 20px 22px; box-shadow: var(--bayang); }
dialog::backdrop { background: rgb(40 30 15 / .35); }
dialog p { margin: 0 0 18px; }
.tombol-dialog { display: flex; gap: 8px; justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- HP ---------- */
@media (max-width: 760px) {
  #aplikasi { grid-template-columns: minmax(0, 1fr); height: 100dvh; }
  #samping { border-right: 0; background: transparent; }
  .merek { padding-top: max(22px, env(safe-area-inset-top)); }
  #detail { display: none; }
  #aplikasi.buka-detail #samping { display: none; }
  #aplikasi.buka-detail #detail { display: block; }
  #tombol-kembali { display: inline-flex; }
  #catatan { padding: max(10px, env(safe-area-inset-top)) 18px 150px; }
  #judul { font-size: 34px; }
  #dock { left: 12px; right: 12px; width: auto; transform: none; bottom: max(12px, env(safe-area-inset-bottom)); }
  #dock[data-mode="siap"] { left: auto; right: 20px; }
  #toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #toolbar > * { flex: none; }
  /* Keyboard terbuka: area aplikasi = bagian yang kelihatan, dock naik / sembunyi, ruang bawah secukupnya. */
  html[data-kb] #aplikasi { height: var(--vv-h, 100dvh); }
  html[data-kb] #dock { bottom: calc(var(--kb, 0px) + 12px); }
  html[data-kb] #dock[data-mode="siap"] { display: none; }
  html[data-kb] #catatan { padding-bottom: 96px; }
}

/* ---------- Kanvas corat-coret ---------- */
#papan { display: flex; flex-direction: column; height: calc(100dvh - 300px); min-height: 360px; color: var(--teks); }
.kanvas-alat { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.grup-alat { display: flex; gap: 2px; padding: 4px; border-radius: calc(14px * var(--sudut, 1)); background: var(--kartu); border: 1px solid var(--garis); }
.grup-alat button { width: 36px; height: 36px; border: 0; border-radius: calc(10px * var(--sudut, 1)); background: none; color: var(--redup); cursor: pointer; display: grid; place-items: center; }
.grup-alat button:hover { color: var(--teks); }
.grup-alat button.aktif { background: var(--aksen-lembut); color: var(--aksen); }
.titik-warna::after { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--w); box-shadow: 0 0 0 2px var(--kartu), 0 0 0 3px var(--garis-kuat); }
.titik-warna[data-warna="tinta"] { color: var(--teks); }
.titik-warna.aktif::after { box-shadow: 0 0 0 2px var(--kartu), 0 0 0 4px var(--aksen); }
[data-tebal] i { width: 20px; height: var(--t); border-radius: calc(9px * var(--sudut, 1)); background: currentColor; }
.kanvas-wadah { flex: 1; min-height: 0; display: grid; place-items: center; margin: 12px 0; }
.kanvas-wadah canvas {
  border-radius: calc(18px * var(--sudut, 1)); background: var(--kartu); touch-action: none; cursor: crosshair;
  background-image: radial-gradient(var(--garis-kuat) 1px, transparent 1px); background-size: 22px 22px;
  border: 1px solid var(--garis);
}
.kanvas-bawah { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#info-papan { font-size: 13px; }
@media (max-width: 760px) {
  .kanvas-alat { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .grup-alat { flex: none; }
  .kanvas-wadah { margin: 8px 0; }
  #papan { height: calc(100dvh - 250px); }
  .kanvas-wadah canvas { border-radius: calc(14px * var(--sudut, 1)); }
}

/* ---------- Pengaturan ---------- */
#pengaturan { width: min(440px, calc(100vw - 32px)); max-width: none; }
#pengaturan h2 { font: 650 30px/1.1 var(--sans); margin: 0 0 14px; }
#pengaturan .label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--samar); font-weight: 600; margin: 16px 0 8px; }
.opsi { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: calc(14px * var(--sudut, 1)); border: 1px solid var(--garis); margin-bottom: 8px; cursor: pointer; }
.opsi:has(input:checked) { border-color: var(--aksen); background: var(--aksen-lembut); }
.opsi > label { flex: 1; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.opsi input { accent-color: var(--aksen); margin-top: 4px; }
.opsi span { flex: 1; }
.opsi small { color: var(--redup); }
.saklar-tema { display: flex; gap: 6px; }
.saklar-tema label { flex: 1; text-align: center; padding: 9px 6px; border-radius: calc(12px * var(--sudut, 1)); border: 1px solid var(--garis); cursor: pointer; font-size: 13.5px; }
.saklar-tema label:has(input:checked) { border-color: var(--aksen); background: var(--aksen-lembut); color: var(--aksen); font-weight: 600; }
.saklar-tema input { display: none; }
#tombol-tema .bulan, :root[data-tema-aktif="gelap"] #tombol-tema .matahari { display: none; }
:root[data-tema-aktif="gelap"] #tombol-tema .bulan { display: block; }
.status-model { font: 600 12px var(--sans); font-style: normal; color: var(--redup); white-space: nowrap; }
.status-model button { font-size: 13px; padding: 8px 14px; border-radius: calc(99px * var(--sudut, 1)); min-height: 36px; }
.status-model { align-self: center; }
#kosakata { width: 100%; background: var(--kartu-2); border: 1px solid var(--garis); border-radius: calc(12px * var(--sudut, 1)); padding: 10px 12px; outline: none; resize: vertical; }
#kosakata:focus { border-color: var(--aksen); }
.redup { color: var(--redup); }
#pengaturan .tombol-dialog { margin-top: 18px; }

/* ---------- Folder ---------- */
.folder-bar { display: flex; gap: 6px; padding: 2px 14px 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.folder-bar button {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: calc(99px * var(--sudut, 1)); cursor: pointer;
  border: 1px solid var(--garis); background: var(--kartu); color: var(--redup); font-size: 12.5px; font-weight: 500;
}
.folder-bar button:hover { color: var(--teks); }
.folder-bar button.aktif { background: var(--aksen-lembut); border-color: var(--aksen); color: var(--aksen); }
.folder-bar button small { opacity: .7; font-size: 11px; }
.folder-bar .ubah-folder { padding: 5px 8px; }
.folder-bar .tambah-folder { border-style: dashed; }
.pilih-folder { display: inline-flex; align-items: center; gap: 4px; color: var(--redup); border: 1px solid var(--garis); border-radius: calc(99px * var(--sudut, 1)); padding: 2px 4px 2px 9px; }
.pilih-folder .ik { width: 14px; height: 14px; }
.pilih-folder select { border: 0; background: none; color: var(--teks); font-size: 12.5px; outline: none; cursor: pointer; max-width: 160px; }
.pilih-folder select option { background: var(--kartu); color: var(--teks); }
#dialog-folder { width: min(380px, calc(100vw - 32px)); }
#dialog-folder h3 { font: 650 26px/1.1 var(--sans); margin: 0 0 12px; }
#dialog-folder input, #cari-tautan {
  width: 100%; background: var(--kartu-2); border: 1px solid var(--garis); border-radius: calc(12px * var(--sudut, 1)); padding: 10px 12px; outline: none;
}
#dialog-folder input:focus, #cari-tautan:focus { border-color: var(--aksen); }
#dialog-folder .tombol-dialog { align-items: center; }
.bahaya-teks { color: var(--rekam); border-color: transparent; background: none; }

/* ---------- Tautan antarcatatan ---------- */
.prosa a.tautan {
  cursor: pointer; color: var(--aksen); text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 4px; text-decoration-thickness: 1.5px; font-style: italic;
}
.prosa a.tautan::before { content: "↗"; font-size: .85em; opacity: .8; }
.prosa a.tautan:hover { text-decoration-style: solid; }
.prosa a.tautan.putus { color: var(--samar); text-decoration: line-through; }
#terhubung { margin-top: 26px; padding-top: 16px; border-top: 1px dashed var(--garis-kuat); }
.label-kecil { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--samar); font-weight: 600; margin: 0 0 8px; }
#daftar-terhubung { display: flex; flex-wrap: wrap; gap: 8px; }
#daftar-terhubung button {
  text-align: left; padding: 9px 12px; border-radius: calc(12px * var(--sudut, 1)); border: 1px solid var(--garis); background: var(--kartu); cursor: pointer; max-width: 260px;
}
#daftar-terhubung button:hover { border-color: var(--aksen); }
#daftar-terhubung b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#daftar-terhubung small { color: var(--redup); }
#pilih-catatan, #pilih-sumber { width: min(440px, calc(100vw - 32px)); max-width: none; }
#pilih-sumber h3 { font: 650 22px/1.2 var(--sans); margin: 0 0 6px; }
#pilih-sumber p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.45; }
#baris-video { display: flex; gap: 8px; align-items: center; margin: 8px 0 2px; font-size: 14px; }
#baris-video[hidden] { display: none; }
#transkrip li.bisa-lompat { cursor: pointer; border-radius: 8px; }
#transkrip li.bisa-lompat:hover { background: var(--kartu-2); }
#transkrip li.kini { background: var(--aksen-lembut); }
.video-meeting { display: block; width: 100%; max-height: 60vh; margin-top: 8px; border-radius: 10px; background: #000; flex-basis: 100%; }
#dock .meeting { display: none; }
#dock.bisa-meeting[data-mode="siap"] .meeting { display: inline-flex; }
#dock.meeting-aktif #dock-pembicara { display: none; }
.meeting-besar { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; }
.meeting-besar[hidden] { display: none; }
#hasil-tautan, #hasil-sumber { max-height: 50vh; overflow-y: auto; margin: 10px -6px 4px; }
#hasil-tautan button, #hasil-sumber button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: calc(10px * var(--sudut, 1)); background: none; cursor: pointer;
}
#hasil-tautan button:hover, #hasil-tautan button.sorot, #hasil-sumber button:hover { background: var(--aksen-lembut); }
#hasil-tautan small, #hasil-sumber small { color: var(--redup); margin-left: 6px; }
#hasil-tautan .kosong, #hasil-sumber .kosong { padding: 10px 12px; }

#terhubung.sembunyi { display: none; }
/* Di halaman Coretan tombol mic tidak boleh menutupi tombol papan */
#aplikasi.di-papan #dock[data-mode="siap"] { display: none; }

/* Kontrol rekam di dock: hanya tampil saat merekam */
#dock .kontrol { display: none; color: var(--teks); }
#dock[data-mode="merekam"] .kontrol { display: inline-flex; }
#dock .kontrol .l, #dock[data-jeda="1"] .kontrol .j { display: none; }
#dock[data-jeda="1"] .kontrol .l { display: block; }
#dock[data-jeda="1"] #gelombang { opacity: .35; }
#dock-tanda b { font-size: 12px; }
#dock-tanda.kedip { color: var(--c-kuning); transform: scale(1.15); }
#dock[data-mode="merekam"] .dock-tengah { cursor: default; }

/* Saran kamus terbaik */
.saran { margin: 0 14px 10px; padding: 10px 12px; border-radius: calc(12px * var(--sudut, 1)); background: var(--aksen-lembut); font-size: 13px; color: var(--redup); }
.saran b { color: var(--teks); }
.saran > div { display: flex; gap: 6px; margin-top: 8px; }
.tombol.kecil { padding: 5px 12px; font-size: 12.5px; }

/* ---------- Rekaman di dalam catatan ---------- */
#rekaman { margin-bottom: 14px; }
.rekaman-kepala { display: flex; align-items: center; margin-bottom: 6px; }
.rekaman-kepala .label-kecil { margin: 0; }
.baris-rekaman {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: calc(12px * var(--sudut, 1)); flex-wrap: wrap;
}
.baris-rekaman.aktif { border-color: var(--aksen); }
.baris-rekaman .nama { flex: 1; min-width: 0; font-size: 14px; }
.baris-rekaman .nama small { color: var(--redup); margin-left: 6px; }
.baris-rekaman .pemutar { flex-basis: 100%; margin: 4px 0 0; padding: 0; background: none; border: 0; }
.baris-rekaman button.bulat { width: 32px; height: 32px; flex: none; }
.baris-rekaman .hapus { opacity: .6; }
#transkrip li.kepala-rekaman { font-weight: 650; color: var(--redup); font-size: 13px; padding-top: 14px; }
.baris-tombol { display: flex; gap: 8px; flex-wrap: wrap; }
.baris-tombol .tombol { font-size: 13.5px; cursor: pointer; }

/* ---------- Aksesori Moci ---------- */
.moci .aksesori > g { display: none; }
/* Lebih spesifik dari aturan penyembunyi di atas — dulu kalah, aksesori tak pernah tampil. */
[data-aksesori~="headphone"] .moci .aksesori .a-headphone, [data-aksesori~="topi"] .moci .aksesori .a-topi,
[data-aksesori~="mahkota"] .moci .aksesori .a-mahkota, [data-aksesori~="kacamata"] .moci .aksesori .a-kacamata,
[data-aksesori~="syal"] .moci .aksesori .a-syal, [data-aksesori~="pensil"] .moci .aksesori .a-pensil { display: block; }
.moci .a-headphone path { stroke: var(--mata); }
.moci .a-headphone rect { fill: var(--rekam); }
.moci .a-topi ellipse, .moci .a-topi circle { fill: var(--c-biru); }
.moci .a-mahkota path { fill: var(--c-kuning); stroke: #b8891a; stroke-width: 1.5; stroke-linejoin: round; }
.moci .a-kacamata circle, .moci .a-kacamata path { fill: none; stroke: var(--mata); stroke-width: 2.2; }
.moci .a-syal path { fill: var(--rekam); }
.moci .a-pensil path { stroke: var(--bulu-garis); stroke-width: .8; stroke-linejoin: round; }
.moci .a-pensil .batang { fill: var(--c-kuning); }
.moci .a-pensil .kayu { fill: #ecc896; }
.moci .a-pensil .ujung { fill: var(--mata); stroke: none; }
.moci .a-pensil .hapusan { fill: var(--pipi); }

/* ---------- Sorotan ---------- */
#sorotan { margin: 0 0 14px; padding: 10px 14px; border-radius: calc(12px * var(--sudut, 1)); background: var(--kartu); border: 1px solid var(--garis); }
#sorotan summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
#sorotan summary::-webkit-details-marker { display: none; }
#sorotan summary .label-kecil { margin: 0; }
#sorotan small { color: var(--samar); }
#isi-sorotan { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
#isi-sorotan li { display: flex; gap: 8px; align-items: baseline; }
#isi-sorotan .tanda-jenis { flex: none; width: 22px; text-align: center; }
#isi-sorotan button.waktu { border: 0; background: var(--aksen-lembut); color: var(--aksen); border-radius: calc(6px * var(--sudut, 1)); padding: 0 6px; font-size: 12px; cursor: pointer; }

/* ---------- Halaman tugas ---------- */
#halaman-tugas { max-width: 780px; margin: 0 auto; padding: 18px 32px 160px; animation: masuk .3s ease; }
.judul-halaman { font: 650 34px/1.1 var(--sans); margin: 4px 0 18px; }
.saklar-kecil { font-size: 13px; color: var(--redup); display: inline-flex; gap: 6px; align-items: center; }
.grup-tugas { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--samar); font-weight: 600; margin: 20px 0 8px; }
.grup-tugas.terlambat { color: var(--rekam); }
.baris-tugas { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 6px; background: var(--kartu); border: 1px solid var(--garis); border-radius: calc(12px * var(--sudut, 1)); }
.baris-tugas input[type=checkbox] { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--aksen); flex: none; }
.baris-tugas .isi-tugas { flex: 1; min-width: 0; }
.baris-tugas .isi-tugas.selesai { color: var(--samar); text-decoration: line-through; }
.baris-tugas small { display: block; color: var(--redup); cursor: pointer; }
.baris-tugas small:hover { color: var(--aksen); }
.baris-tugas input[type=date] { border: 1px solid var(--garis); background: var(--kartu-2); border-radius: calc(8px * var(--sudut, 1)); padding: 3px 6px; font-size: 12.5px; color: var(--teks); }
.prosa ul.cek > li[data-tenggat-label]::after { content: "📅 " attr(data-tenggat-label); font-size: 12px; color: var(--redup); margin-left: 8px; }

/* ---------- Foto di catatan ---------- */
.prosa figure.foto { position: relative; margin: 6px 0 14px; max-width: 100%; user-select: none; }
.prosa figure.foto img { display: block; width: 100%; height: auto; border-radius: calc(10px * var(--sudut, 1)); box-shadow: var(--bayang); }
.prosa figure.foto .pegangan {
  position: absolute; right: -11px; bottom: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--aksen); border: 3px solid var(--latar); cursor: nwse-resize; touch-action: none; opacity: 0; transition: opacity .15s;
}
.prosa figure.foto:hover .pegangan, .prosa figure.foto.diubah .pegangan { opacity: 1; }
@media (hover: none) { .prosa figure.foto .pegangan { opacity: .85; } }

/* ---------- Pemutar lengkap & penanda ★ ---------- */
.kontrol-putar { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.kontrol-putar #waktu-putar { min-width: 0; }
.chip-momen { border: 0; background: var(--aksen-lembut); color: var(--aksen); border-radius: calc(99px * var(--sudut, 1)); padding: 1px 8px; font-size: 11.5px; cursor: pointer; }
.momen-rekaman { flex-basis: 100%; display: flex; gap: 6px; flex-wrap: wrap; padding-left: 42px; }
#transkrip .siapa { font-size: 11.5px; font-weight: 650; color: var(--aksen); min-width: 52px; padding-top: 3px; }
#transkrip li.ketemu { background: var(--stabilo); border-radius: calc(8px * var(--sudut, 1)); }
.teks-pembicara { font-size: 12.5px; white-space: nowrap; }
.item .c.dari-transkrip::before { content: "🎙 "; }

/* ---------- Templat & kartu Moci ---------- */
#pilih-templat, #kartu-moci { width: min(420px, calc(100vw - 32px)); max-width: none; }
#pilih-templat h3, #kartu-moci h3 { font: 650 22px/1.2 var(--sans); margin: 0 0 12px; }
#daftar-templat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
#daftar-templat button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: calc(12px * var(--sudut, 1)); border: 1px solid var(--garis); background: var(--kartu-2); cursor: pointer; text-align: left; }
#daftar-templat button:hover { border-color: var(--aksen); }
#daftar-templat .ikon-templat { font-size: 22px; }
.kartu-atas { display: flex; align-items: center; gap: 12px; }
.kartu-atas .pet.besar { width: 110px; height: 100px; }
.statistik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 6px; }
.statistik div { background: var(--kartu-2); border-radius: calc(12px * var(--sudut, 1)); padding: 10px; text-align: center; }
.statistik b { display: block; font-size: 22px; }
.statistik small { color: var(--redup); font-size: 12px; }
#aksesori-moci { display: grid; gap: 6px; margin-bottom: 14px; }
.baris-aksesori { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: calc(10px * var(--sudut, 1)); border: 1px solid var(--garis); font-size: 13.5px; }
.baris-aksesori.terkunci { opacity: .55; }
.baris-aksesori small { color: var(--redup); display: block; }
.baris-aksesori .spasi { flex: 1; }
.merek .pet { cursor: pointer; }

/* ---------- Cetak / PDF: hanya catatan, bergaya kertas ---------- */
@media print {
  @page { margin: 16mm; }
  body { background: #fff !important; overflow: visible; color: #2c2620; }
  #samping, #dock, .bilah, #toolbar, .tab, #rekaman, #pemutar-wadah, #sorotan, #terhubung, #transkrip, #papan,
  .detail-kosong, #halaman-tugas, .aurora, dialog, #tag, .pilih-folder { display: none !important; }
  #aplikasi { display: block; height: auto; }
  #detail { display: block !important; overflow: visible; }
  #catatan { max-width: none; padding: 0; animation: none; }
  #judul { font-size: 28px; color: #2c2620; }
  #editor { box-shadow: none; border: 0; min-height: 0; background: linear-gradient(90deg, transparent 30px, rgb(201 69 46 / .35) 30px, rgb(201 69 46 / .35) 31.5px, transparent 31.5px), #fbf8f1; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .prosa figure .pegangan { display: none; }
}

@media (max-width: 760px) {
  #halaman-tugas { padding: 12px 16px 150px; }
  #aplikasi.buka-detail #halaman-tugas { display: block; }
  .momen-rekaman { padding-left: 0; }
}

#info-simpan { font-size: 13px; margin-bottom: 8px; }
#info-simpan .batang { display: flex; height: 8px; border-radius: calc(99px * var(--sudut, 1)); overflow: hidden; background: var(--garis); margin: 6px 0; }
#info-simpan .batang i:nth-child(1) { background: var(--rekam); }
#info-simpan .batang i:nth-child(2) { background: var(--aksen); }
#info-simpan .batang i:nth-child(3) { background: var(--c-kuning); }
.chip.akhir { color: var(--c-hijau); border-color: transparent; }
.chip.menyempurnakan { color: var(--aksen); background: var(--aksen-lembut); }

/* ---------- Kunci & pengaturan tambahan ---------- */
#layar-kunci {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--serat), var(--latar); padding: 24px;
}
#layar-kunci h2 { font: 650 22px var(--sans); margin: 0; }
#pin-masuk { width: 180px; text-align: center; font-size: 24px; letter-spacing: 8px; padding: 10px; border-radius: calc(14px * var(--sudut, 1)); border: 1px solid var(--garis-kuat); background: var(--kartu); outline: none; }
#pin-masuk:focus { border-color: var(--aksen); }
.baris-saklar { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0; flex-wrap: wrap; }
.baris-saklar input[type=checkbox] { accent-color: var(--aksen); width: 17px; height: 17px; }
.baris-saklar input[type=time] { border: 1px solid var(--garis); background: var(--kartu-2); border-radius: calc(8px * var(--sudut, 1)); padding: 3px 6px; color: var(--teks); }
#ket-sidik { color: var(--redup); font-size: 12.5px; }
.isian { width: 100%; background: var(--kartu-2); border: 1px solid var(--garis); border-radius: calc(10px * var(--sudut, 1)); padding: 8px 10px; margin: 6px 0; outline: none; font-size: 13px; }
.isian:focus { border-color: var(--aksen); }
#pengaturan { max-height: 88vh; }

/* Galat yang muncul saat dialog terbuka (gelembung Moci tertutup dialog). */
.toast-galat { position: sticky; bottom: 0; margin-top: 10px; padding: 10px 12px; border-radius: calc(12px * var(--sudut, 1)); background: var(--rekam); color: #fff; font: 500 13px var(--sans); }

/* Halaman Tugas: tambah tugas & ketik ulang teksnya. */
.tambah-tugas { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; flex-wrap: wrap; }
.tambah-tugas #input-tugas { flex: 1 1 100%; min-width: 0; padding: 11px 14px; border-radius: calc(12px * var(--sudut, 1)); border: 1px solid var(--garis); background: var(--kartu); color: var(--teks); font: 15px var(--sans); }
.tambah-tugas #input-tugas:focus { outline: 2px solid var(--aksen); outline-offset: -1px; }
.tambah-tugas input[type=date] { flex: 1; border: 1px solid var(--garis); background: var(--kartu-2); border-radius: calc(10px * var(--sudut, 1)); padding: 9px 8px; font-size: 13px; color: var(--teks); }
.teks-tugas { outline: none; border-radius: calc(6px * var(--sudut, 1)); padding: 1px 2px; margin: -1px -2px; cursor: text; -webkit-user-select: text; user-select: text; }
.teks-tugas:focus { background: var(--aksen-lembut); }

/* ---------- Ikon di dalam teks (pengganti emoji) ---------- */
.chip, .chip-momen, .label-kecil, .baris-tugas small, .baris-aksesori small, .status-model, #pilih-tautan small,
.saklar-tema label, #buka-sidik, #ekspor-cadangan, #dock-pembicara, .folder-bar button, .tenggat-sorotan, #info-simpan b {
  display: inline-flex; align-items: center; gap: 4px;
}
.chip .ik, .chip-momen .ik, .label-kecil .ik, small .ik, .status-model .ik { width: 12px; height: 12px; stroke-width: 2; }
.folder-bar .ik { width: 14px; height: 14px; }
#daftar-templat .ikon-templat .ik { width: 24px; height: 24px; stroke-width: 1.6; color: var(--aksen); }
#isi-sorotan .tanda-jenis { display: inline-grid; place-items: center; color: var(--aksen); }
#isi-sorotan .tanda-jenis .ik { width: 15px; height: 15px; }
.tenggat-sorotan { margin-left: 8px; color: var(--redup); }
#info-simpan b.peringatan { color: var(--rekam); }
.ubah-folder .ik, .hapus .ik { width: 15px; height: 15px; }

/* ---------- Kalender ---------- */
.kalender { margin: 0 16px 10px; padding: 10px 10px 8px; border-radius: calc(16px * var(--sudut, 1)); background: var(--kartu); border: 1px solid var(--garis); box-shadow: var(--bayang); }
.kal-kepala { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.kal-kepala b { font: 650 15px var(--sans); text-transform: capitalize; }
.kal-nama-hari, .kal-kisi { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.kal-nama-hari span { font-size: 11px; color: var(--samar); font-weight: 600; padding: 2px 0 4px; }
.kal-hari { position: relative; height: 38px; border: 0; border-radius: calc(10px * var(--sudut, 1)); background: none; color: var(--teks); font: 500 14px var(--sans); cursor: pointer; display: grid; place-items: center; padding: 0 0 6px; }
.kal-hari:hover { background: var(--aksen-lembut); }
.kal-hari.hari-ini { color: var(--aksen); font-weight: 750; box-shadow: inset 0 0 0 1.5px var(--aksen); }
.kal-hari.aktif { background: var(--aksen); color: var(--kartu); }
.kal-titik { position: absolute; bottom: 5px; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; }
.titik-catatan, .titik-tugas { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--aksen); }
.titik-tugas { background: var(--rekam); }
.kal-hari.aktif .titik-catatan { background: var(--kartu); }
.kal-bawah { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--garis); }
.kal-ket { font-size: 11.5px; color: var(--redup); display: inline-flex; align-items: center; gap: 4px; }
.kal-ket i + i, .kal-ket i:nth-of-type(2) { margin-left: 6px; }
#kal-harian { display: inline-flex; align-items: center; gap: 4px; }
#tombol-harian.aktif { color: var(--aksen); background: var(--aksen-lembut); }
.saring-tanggal { margin: 0 16px 8px; display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: calc(99px * var(--sudut, 1)); background: var(--aksen-lembut); color: var(--aksen); font: 600 13px var(--sans); text-transform: capitalize; }
.saring-tanggal span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saring-tanggal .ikon { width: 28px; height: 28px; }

/* HP: sasaran ketuk minimal ±32–36 px */
@media (max-width: 760px) {
  .chip-momen { padding: 6px 11px; font-size: 12.5px; }
  #isi-sorotan .waktu { padding: 5px 8px; }
  #folder-catatan { min-height: 30px; }
  #tag { min-height: 32px; }
  #tombol-bantuan { width: 36px; height: 36px; }
}
.baris-aksesori small, .baris-tugas small { display: flex; margin-top: 2px; }

/* ---------- Sinkron ---------- */
#form-sinkron { display: grid; gap: 8px; }
#form-sinkron input[type=email], #form-sinkron input[type=password] { padding: 11px 13px; border-radius: calc(12px * var(--sudut, 1)); border: 1px solid var(--garis); background: var(--kartu-2); color: var(--teks); font: 15px var(--sans); }
#form-sinkron input:focus { outline: 2px solid var(--aksen); outline-offset: -1px; }
.status-sinkron { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; overflow-wrap: anywhere; }
.status-sinkron .ik { color: var(--c-hijau); flex: none; }
.status-sinkron[data-keadaan="galat"] .ik { color: var(--rekam); }
.status-sinkron[data-keadaan="sedang"] .ik { color: var(--aksen); animation: denyut 1.2s infinite; }
#tombol-sinkron[data-keadaan="ok"] { color: var(--c-hijau); }
#tombol-sinkron[data-keadaan="galat"] { color: var(--rekam); }
#tombol-sinkron[data-keadaan="sedang"] { color: var(--aksen); animation: denyut 1.2s infinite; }

/* Tugas: tanggal + jam alarm */
.waktu-tugas { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.baris-tugas input[type=time], .tambah-tugas input[type=time] { border: 1px solid var(--garis); background: var(--kartu-2); border-radius: calc(8px * var(--sudut, 1)); padding: 3px 6px; font-size: 12.5px; color: var(--teks); }
.tambah-tugas input[type=time] { padding: 9px 8px; border-radius: calc(10px * var(--sudut, 1)); font-size: 13px; }
.ikon-alarm { width: 15px; height: 15px; color: var(--aksen); }
@media (max-width: 760px) {
  .baris-tugas { flex-wrap: wrap; }
  .baris-tugas .waktu-tugas { flex-basis: 100%; justify-content: flex-start; padding-left: 29px; }
}

/* ---------- Pilih warna tema ---------- */
.kisi-tema { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pilih-tema { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--garis); border-radius: calc(12px * var(--sudut, 1)); background: var(--kartu); color: var(--teks); cursor: pointer; font: inherit; }
.pilih-tema.aktif { border-color: var(--aksen); box-shadow: 0 0 0 2px var(--aksen-lembut); }
.pilih-tema small { font-size: 12px; font-weight: 600; }
.contoh-tema { position: relative; display: block; height: 40px; border-radius: calc(8px * var(--sudut, 1)); background: var(--a); overflow: hidden; border: 1px solid rgb(0 0 0 / .08); }
.contoh-tema i:nth-child(1) { position: absolute; left: 8px; top: 8px; right: 22px; bottom: 8px; border-radius: 4px; background: var(--b); }
.contoh-tema i:nth-child(2) { position: absolute; left: 14px; top: 14px; width: 40%; height: 3px; border-radius: 2px; background: var(--d); opacity: .7; }
.contoh-tema i:nth-child(3) { position: absolute; right: 7px; bottom: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--c); }
.tema-sendiri { display: grid; gap: 8px; margin-bottom: 10px; padding: 10px; border-radius: calc(12px * var(--sudut, 1)); background: var(--kartu-2); }
.warna-dasar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.warna-dasar label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.warna-dasar input[type=color] { width: 30px; height: 30px; padding: 0; border: 1px solid var(--garis-kuat); border-radius: 8px; background: none; cursor: pointer; flex: none; }
.baris-kode { display: flex; gap: 6px; }
#kode-tema, #tempel-kode { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--garis); background: var(--kartu); color: var(--teks); font: 12.5px ui-monospace, monospace; }
#tema-sudut { flex: 1; accent-color: var(--aksen); }

/* ---------- Teks live saat merekam ---------- */
#live-teks {
  position: fixed; z-index: 10; bottom: 98px; left: calc(300px + (100vw - 300px) / 2); transform: translateX(-50%);
  width: min(520px, calc(100vw - 340px)); display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; border-radius: calc(16px * var(--sudut, 1)); background: var(--kartu); border: 1px solid var(--garis);
  box-shadow: var(--bayang); font-size: 14.5px; line-height: 1.45; color: var(--teks);
}
#live-teks[hidden] { display: none; }
#live-teks.kosong span { color: var(--samar); font-style: italic; }
.titik-live { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--rekam); animation: denyut 1.2s infinite; }
@media (max-width: 760px) {
  #live-teks { left: 12px; right: 12px; width: auto; transform: none; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 86px); }
}

/* Pilihan bahasa & tarik-lepas file (laptop) */
.pilih-bahasa { width: 100%; padding: 10px 12px; border-radius: calc(12px * var(--sudut, 1)); border: 1px solid var(--garis); background: var(--kartu-2); color: var(--teks); font: 15px var(--sans); margin-bottom: 6px; }
body.tarik-file::after {
  content: "Lepas untuk mentranskrip"; position: fixed; inset: 14px; z-index: 100; display: grid; place-items: center;
  border: 3px dashed var(--aksen); border-radius: calc(24px * var(--sudut, 1)); background: var(--aksen-lembut);
  font: 600 26px var(--sans); color: var(--aksen); pointer-events: none;
}

/* Simak Web: link unduh versi offline tampil seperti tombol biasa. */
#bagian-unduh a.tombol { text-decoration: none; color: inherit; }

/* Favorit */
#tombol-favorit[aria-pressed="true"] .ik { fill: #e0a526; stroke: #e0a526; }
.bintang-favorit { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: #e0a526; }
.bintang-favorit .ik { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; }

/* Mode pet (panel Moci di sinwaz OS): latar polos, tanpa aurora, Moci di header disembunyikan
   karena Moci sudah ada di kepala panel widget. */
.mode-pet .aurora, .mode-pet .merek .pet { display: none; }
.mode-pet body { background: var(--latar); }

/* ---------- Server sinkron milik pengguna ---------- */
#server-sinkron { margin: 6px 0 10px; }
.status-server { font-size: 13px; color: var(--redup); margin-bottom: 6px; }
#detail-server summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--aksen); padding: 4px 0; }
#detail-server[open] summary { margin-bottom: 6px; }
.langkah-server { margin: 8px 0; padding-left: 20px; font-size: 13px; line-height: 1.55; color: var(--teks); }
.langkah-server li { margin-bottom: 4px; }
#detail-server .isian { width: 100%; margin-top: 6px; }
#detail-server .baris-tombol { margin-top: 8px; }

/* ---------- Tag buatan sendiri & sematkan ---------- */
.tag-editor { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; }
#tag-chips { display: contents; }
.chip-tag { --h: 200; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 2px 4px 2px 10px; border-radius: calc(99px * var(--sudut, 1));
  background: hsl(var(--h) 60% 50% / .14); color: hsl(var(--h) 55% 38%); border: 1px solid hsl(var(--h) 55% 50% / .3); cursor: pointer; }
:root[data-tema="gelap"] .chip-tag { color: hsl(var(--h) 70% 72%); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) .chip-tag { color: hsl(var(--h) 70% 72%); } }
.chip-tag button { all: unset; cursor: pointer; width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 14px; line-height: 1; opacity: .7; }
.chip-tag button:hover { opacity: 1; background: hsl(var(--h) 60% 50% / .25); }
.tag-saran { display: flex; flex-wrap: wrap; gap: 6px; margin: -10px 0 14px; }
.tag-saran[hidden] { display: none; }
.tag-saran button { font-size: 12px; padding: 2px 10px; border-radius: calc(99px * var(--sudut, 1)); border: 1px dashed var(--garis-kuat); background: none; color: var(--redup); cursor: pointer; }
.tag-saran button:hover { color: var(--aksen); border-color: var(--aksen); }
.tag-bar { padding-top: 0; }
.tag-bar[hidden] { display: none; }
.tag-bar button { font-size: 12px; }
.tag-bar button.aktif { background: hsl(var(--h, 200) 60% 50% / .16); border-color: hsl(var(--h, 200) 55% 50% / .6); color: inherit; }
.chip.klik { cursor: pointer; }
.chip.klik:hover { color: var(--aksen); border-color: var(--aksen); }
.pin-daftar { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--aksen); }
.pin-daftar .ik { width: 14px; height: 14px; }
#tombol-sematkan[aria-pressed="true"] { color: var(--aksen); }
#tombol-sematkan[aria-pressed="true"] .ik { fill: currentColor; }
.grup.disematkan { color: var(--aksen); }

/* ---------- Dialog bagikan ---------- */
#bg-rekaman { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
#bg-rekaman small { color: var(--redup); }
.bagikan-aksi { flex-wrap: wrap; margin-top: 12px; }

/* ---------- Mode percobaan (etalase) ---------- */
.banner-trial { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin: 0 14px 8px; padding: 7px 8px 7px 12px; border-radius: calc(12px * var(--sudut, 1)); background: var(--aksen-lembut); color: var(--aksen); font-size: 12.5px; flex: none; }
.banner-trial[hidden] { display: none; }
.banner-trial .tombol { white-space: nowrap; }
#teks-trial { flex: 1 1 150px; }
.terkunci { cursor: pointer; }
.tombol.terkunci, button.ikon.terkunci, #opsi-terbaik.terkunci { position: relative; }
.terkunci::after {
  content: ""; position: absolute; right: -3px; top: -4px; width: 14px; height: 14px; border-radius: 50%; pointer-events: none;
  background: var(--aksen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2' fill='white'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 9px no-repeat;
}
#dock .terkunci::after { right: 2px; top: 2px; }
.kunci-ikon { width: 44px; height: 44px; border-radius: 50%; background: var(--aksen-lembut); color: var(--aksen); display: grid; place-items: center; margin-bottom: 10px; }
.kunci-ikon .ik { width: 22px; height: 22px; }
#dialog-kunci h3 { margin: 0 0 6px; }
#dialog-kunci .tombol-dialog { margin-top: 14px; flex-wrap: wrap; }
#dialog-kunci a.tombol { text-decoration: none; }
.baris-terkunci { all: unset; display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 0; cursor: pointer; color: var(--redup); }
.baris-terkunci .ik { width: 16px; height: 16px; color: var(--aksen); }