/* ============================================================
   RafifOS · 30 aplikasi
   ============================================================ */

.app-body{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app-pad{ padding: var(--s4); }
.app-h{
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.app-h .t{ font-size: var(--t-sm); font-weight: 650; }
.app-scroll{ flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.app-body > .list{ flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s2); }
.app-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  flex: 1 1 auto;
  min-height: 180px;
  padding: var(--s6);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.app-empty .t{ color: var(--ink-2); font-size: var(--t-body); }
.app-empty svg{ width: 34px; height: 34px; margin-bottom: var(--s3); opacity: .55; }

/* ---------- FILES ---------- */
.files{ display: flex; height: 100%; }
.files .side{
  width: 40%;
  max-width: 220px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: var(--s2);
  flex: 0 0 auto;
}
.files .side .fitem{
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--ink-2);
  font-weight: 550;
}
.files .side .fitem svg{ width: 16px; height: 16px; color: var(--ink-3); }
.files .side .fitem.on{ background: var(--a-14); color: var(--ink); }
.files .side .fitem.on svg{ color: var(--a); }
.files .main{ flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.files .list{ flex: 1 1 auto; overflow-y: auto; padding: var(--s2); }
.frow{
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  transition: background var(--d-fast) linear;
}
.frow:active{ background: var(--hover); }
.frow .ic{
  width: calc(var(--u) * 9); height: calc(var(--u) * 9);
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  background: var(--surface-2);
  color: var(--ink-3);
  flex: 0 0 auto;
}
.frow .ic svg{ width: 16px; height: 16px; }
.frow .nm{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .sz{ font-size: var(--t-micro); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.frow .del{ color: var(--ink-4); padding: 4px; }
.frow .del:active{ color: #E2685A; }

/* ---------- NOTES ---------- */
.notes{ display: flex; height: 100%; }
.notes .nlist{
  width: 38%; max-width: 260px;
  border-right: 1px solid var(--line);
  overflow-y: auto; padding: var(--s2);
  flex: 0 0 auto;
}
.notes .nitem{
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  margin-bottom: 2px;
}
.notes .nitem.on{ background: var(--a-14); }
.notes .nitem .nt{ font-size: var(--t-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes .nitem .nd{ font-size: var(--t-micro); color: var(--ink-4); }
.notes .nbody{ flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.notes textarea{
  flex: 1 1 auto; width: 100%; resize: none;
  padding: var(--s4);
  font-family: var(--font-read);
  font-size: var(--t-body);
  line-height: 1.7;
  user-select: text;
  -webkit-user-select: text;
}
.notes .nfoot{
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--t-micro);
  color: var(--ink-4);
}

/* ---------- READER ---------- */
.reader{ height: 100%; display: flex; flex-direction: column; }
.reader .rbody{
  flex: 1 1 auto; overflow-y: auto;
  padding: var(--s6) var(--s8);
  font-family: var(--font-read);
  font-size: 17px;
  line-height: 1.75;
  max-width: 68ch;
  margin: 0 auto;
  user-select: text;
  -webkit-user-select: text;
}
.reader .rbody h1{ font-family: var(--font-ui); font-size: 27px; line-height: 1.2; letter-spacing: -.02em; margin-bottom: var(--s3); }
.reader .rbody h2{ font-family: var(--font-ui); font-size: 19px; margin: var(--s5) 0 var(--s2); }
.reader .rbody p{ margin-bottom: var(--s4); color: var(--ink-2); }
.reader .rbody blockquote{
  border-left: 2px solid var(--a-40);
  padding-left: var(--s4);
  color: var(--ink-3);
  font-style: italic;
  margin: var(--s4) 0;
}
.reader .rbody code{
  font-family: var(--font-mono); font-size: .88em;
  background: var(--surface-2); padding: 1px 5px; border-radius: 4px;
}
.reader .rbar{
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.reader .rbar .chip{
  padding: 3px 10px; border-radius: 99px;
  font-size: var(--t-micro); font-weight: 650;
  border: 1px solid var(--line-strong);
  color: var(--ink-3);
}
.reader .rbar .chip.on{ background: var(--a-14); border-color: var(--a-24); color: var(--ink); }

/* ---------- CALC ---------- */
.calc{ height: 100%; display: flex; flex-direction: column; background: var(--surface); }
.calc .disp{
  flex: 0 0 auto;
  padding: var(--s4) var(--s5) var(--s3);
  text-align: right;
  min-height: calc(var(--u) * 26);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.calc .disp .expr{ font-size: var(--t-sm); color: var(--ink-4); min-height: 18px; font-variant-numeric: tabular-nums; }
.calc .disp .out{
  font-size: clamp(30px, 7vw, 46px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis;
}
.calc .keys{
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.calc .k{
  display: grid; place-items: center;
  background: var(--surface);
  font-size: var(--t-h2);
  font-weight: 550;
  transition: background var(--d-instant) linear, transform var(--d-instant) linear;
}
.calc .k:active{ background: var(--press); transform: scale(.97); }
.calc .k.op{ color: var(--a); }
.calc .k.eq{ background: var(--a); color: var(--a-ink); font-weight: 700; }
.calc .k.fn{ color: var(--ink-3); font-size: var(--t-sm); font-weight: 650; }

/* ---------- CLOCK ---------- */
.clock-app{ height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s5); padding: var(--s6); }
.clock-app .t{
  font-size: clamp(44px, 12vw, 78px);
  font-weight: 250;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.clock-app .t b{ font-weight: 650; }
.clock-app .d{ font-size: var(--t-sm); color: var(--ink-3); margin-top: -8px; }
.clock-app .ctr{ display: flex; gap: var(--s2); }
.clock-app .face{
  position: relative; width: 190px; height: 190px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
}
.clock-app .face svg{ position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.clock-app .face .ring{
  fill: none; stroke: var(--a); stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 260ms linear;
}
.clock-app .face .left{ font-size: 32px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------- SETTINGS ---------- */
.settings{ height: 100%; overflow-y: auto; padding: var(--s5) var(--s5) var(--s10); }
.settings .grp{ margin-bottom: var(--s6); }
.settings .grp > .gh{ font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: var(--s2); }
.srow{
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  min-height: calc(var(--u) * 13);
}
.srow:last-child{ border-bottom: 0; }
.srow .sl{ flex: 1 1 auto; min-width: 0; }
.srow .sl .n{ font-size: var(--t-sm); font-weight: 600; }
.srow .sl .h{ font-size: var(--t-micro); color: var(--ink-4); line-height: 1.45; margin-top: 1px; }
.seg{
  display: flex; gap: 2px; padding: 3px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  flex: 0 0 auto;
}
.seg button{
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--ink-3);
  transition: background var(--d-fast) linear, color var(--d-fast) linear;
  white-space: nowrap;
}
.seg button.on{ background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.sw{ display: flex; gap: var(--s2); flex: 0 0 auto; }
.sw button{
  width: calc(var(--u) * 7); height: calc(var(--u) * 7);
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) linear;
}
.sw button.on{ box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--a); transform: scale(1.05); }
.toggle{
  width: 46px; height: 27px; border-radius: 99px;
  background: var(--surface-3);
  position: relative;
  flex: 0 0 auto;
  transition: background var(--d-base) linear;
}
.toggle i{
  position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--ink-3);
  transition: transform var(--d-base) var(--ease-out), background var(--d-base) linear;
}
.toggle.on{ background: var(--a-24); }
.toggle.on i{ transform: translate3d(19px, 0, 0); background: var(--a); }
.slider{
  -webkit-appearance: none;
  appearance: none;
  width: 128px; height: 22px;
  background: transparent;
  flex: 0 0 auto;
}
.slider::-webkit-slider-runnable-track{
  height: 4px; border-radius: 99px; background: var(--line-strong);
}
.slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%;
  background: var(--a);
  box-shadow: var(--sh-1);
}

/* ---------- PORTAL / BROWSER ---------- */
.portal{ height: 100%; display: flex; flex-direction: column; }
.omni{
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s4);
  padding: 0 var(--s3) 0 var(--s4);
  height: calc(var(--u) * 13);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  flex: 0 0 auto;
}
.omni svg{ width: 17px; height: 17px; color: var(--ink-3); flex: 0 0 auto; }
.omni input{ flex: 1 1 auto; font-size: var(--t-sm); }
.omni .go{
  padding: 5px 12px; border-radius: 99px;
  background: var(--a); color: var(--a-ink);
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: .04em;
}
.portal .rooms{ padding: 0 var(--s4) var(--s4); overflow-y: auto; flex: 1 1 auto; }
.rl{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s2); }
.room{
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: transform var(--d-fast) var(--ease-out), background var(--d-fast) linear;
  text-align: left;
}
.room:active{ transform: scale(.97); background: var(--hover); }
.room .rico{
  width: calc(var(--u) * 10); height: calc(var(--u) * 10);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--surface-3);
  color: var(--a);
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 13px;
}
.room .rmeta{
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex: 1 1 auto;
}
.room .rn{ display: block; font-size: var(--t-sm); font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room .ru{ display: block; font-size: 10.5px; line-height: 1.2; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room .ext{ color: var(--ink-4); flex: 0 0 auto; display: grid; place-items: center; }
.room .ext svg{ width: 14px; height: 14px; }
.portal iframe{
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #000;
}
.portal .note{
  margin: 0 var(--s4) var(--s4);
  padding: var(--s3);
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.55;
}

/* ---------- TERMINAL ---------- */
.term{
  height: 100%;
  display: flex; flex-direction: column;
  background: #07080A;
  color: #D8D4CB;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.62;
  padding: var(--s4);
  user-select: text;
  -webkit-user-select: text;
}
.term .out{ flex: 1 1 auto; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.term .out .a{ color: var(--a); }
.term .out .dim{ color: #6C6C70; }
.term .out .err{ color: #E2685A; }
.term .ln{ display: flex; gap: 6px; align-items: center; flex: 0 0 auto; padding-top: 4px; }
.term .ln span{ color: var(--a); }
.term .ln input{ flex: 1 1 auto; background: transparent; border: 0; color: #EDE9E1; font-family: inherit; font-size: inherit; }

/* ---------- ABOUT ---------- */
.about{ height: 100%; overflow-y: auto; padding: var(--s8) var(--s6); text-align: center; }
.about .mark{ margin: 0 auto var(--s5); width: 76px; height: 76px; }
.about h3{ font-size: var(--t-h1); font-weight: 300; letter-spacing: -.03em; margin-bottom: 2px; }
.about h3 b{ font-weight: 700; }
.about .ver{ font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-4); letter-spacing: .1em; }
.about p{ font-size: var(--t-sm); color: var(--ink-3); max-width: 46ch; margin: var(--s4) auto 0; line-height: 1.65; }
.about .facts{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: var(--s6);
  text-align: left;
}
.about .facts div{ background: var(--surface); padding: var(--s3) var(--s4); }
.about .facts .k{ font-size: var(--t-micro); color: var(--ink-4); letter-spacing: .1em; text-transform: uppercase; }
.about .facts .v{ font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================================================
   0.2.77 · aplikasi baru dan penyempurnaan
   ============================================================ */

/* ---------- PAPAN (riwayat papan potong) ---------- */
.papan .list{ padding: var(--s3) var(--s4); }
.papan-note{
  display: flex; align-items: flex-start; gap: var(--s2);
  margin: 0 var(--s4) var(--s4);
  padding: var(--s3);
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong);
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.5;
  flex: 0 0 auto;
}
.papan-note svg{ flex: 0 0 auto; margin-top: 1px; opacity: .7; }
.clip{
  position: relative;
  padding: var(--s3) var(--s3) var(--s3);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  margin-bottom: var(--s2);
  transition: background var(--d-fast) linear, transform var(--d-fast) var(--ease-out);
}
.clip:active{ transform: scale(.995); }
.clip.pinned{ border-color: var(--a-24); background: linear-gradient(180deg, var(--a-08), transparent), var(--surface-2); }
.clip .cv{
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--s2);
}
.clip .cmeta{
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.clip .cbtn{ position: absolute; top: var(--s2); right: var(--s2); display: flex; gap: 2px; opacity: 0; transition: opacity var(--d-fast) linear; }
.clip:hover .cbtn, .clip:focus-within .cbtn{ opacity: 1; }
@media (hover: none){ .clip .cbtn{ opacity: 1; } .clip{ padding-right: 76px; } }
.clip .cbtn .ic{
  width: 30px; height: 30px; border-radius: var(--r-xs);
  display: grid; place-items: center; color: var(--ink-3);
}
.clip .cbtn .ic:active{ background: var(--press); }
.clip .cbtn .ic.on{ color: var(--a); }

/* ---------- KOTAK (vault) ---------- */
.vault-stage{ position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.vault-card{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s3);
  padding: var(--s6);
  text-align: center;
  animation: rise 320ms var(--ease-out) both;
}
.vault-mark{
  width: 62px; height: 62px; border-radius: 18px;
  display: grid; place-items: center;
  color: var(--a);
  background: var(--a-08);
  border: 1px solid var(--a-24);
  margin-bottom: var(--s2);
}
.vault-card h2{ font-size: 21px; font-weight: 320; letter-spacing: -.02em; }
.vault-card p{
  max-width: 42ch; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.6;
  margin-bottom: var(--s2);
}
.vault-card input{
  width: min(320px, 100%);
  height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  padding: 0 var(--s3);
  font-size: var(--t-sm);
  color: var(--ink);
  text-align: center;
}
.vault-card .btn{ width: min(320px, 100%); height: 44px; }
.vault-open{ display: flex; height: 100%; animation: rise 260ms var(--ease-out) both; }
.vault-list{
  width: 34%; max-width: 240px; min-width: 150px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: var(--s2);
  display: flex; flex-direction: column;
  flex: 0 0 auto;
}
.vault-add{
  height: 38px; margin-bottom: var(--s2);
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong);
  color: var(--ink-3);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.vitem{
  text-align: left; padding: var(--s2) var(--s2);
  border-radius: var(--r-sm);
  margin-bottom: 2px;
}
.vitem:hover{ background: var(--hover); }
.vitem.on{ background: var(--a-14); }
.vitem .vt{ font-size: var(--t-sm); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vitem .vd{ font-size: var(--t-micro); color: var(--ink-4); }
.vempty{ padding: var(--s3); font-size: var(--t-xs); color: var(--ink-4); text-align: center; }
.vault-editor{ flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.ve-head{ display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4) var(--s2); }
.ve-title{ flex: 1 1 auto; font-size: 15px; font-weight: 650; }
.ve-body{
  flex: 1 1 auto; min-height: 0;
  padding: 0 var(--s4) var(--s4);
  font-family: var(--font-read);
  font-size: 14.5px;
  line-height: 1.7;
  background: transparent;
  border: 0;
  resize: none;
  color: var(--ink);
}
.ve-meta{
  flex: 0 0 auto;
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ---------- KANVAS ---------- */
.kanvas{ background: var(--surface); }
.kanvas-h{ gap: var(--s2); }
.kanvas-bar{
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.kanvas-bar::-webkit-scrollbar{ display: none; }
.swatches{ display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }
.swatches button{
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) linear;
}
.swatches button.on{ box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--a); transform: scale(1.04); }
.kanvas-bar .swatches{ flex: 0 0 auto; }
.kanvas-bar .chip{ flex: 0 0 auto; }
.kanvas-bar .kanvas-size{ flex: 0 0 auto; width: 96px; }
.kanvas-sep{ width: 1px; height: 20px; background: var(--line); }
.kanvas-size{ width: 82px; }
.swatches{ display: flex; gap: 6px; align-items: center; }
.sw{
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: transform var(--d-fast) var(--ease-out);
}
.sw.on{ transform: scale(1.18); box-shadow: 0 0 0 2px var(--a-40); }
.kanvas-wrap{ position: relative; flex: 1 1 auto; min-height: 0; }
.kanvas-board{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
  cursor: crosshair;
}

/* ---------- AGENDA ---------- */
.agenda .ag-body{ display: flex; flex: 1 1 auto; min-height: 0; }
.ag-left{
  width: 52%; max-width: 420px; min-width: 240px;
  padding: var(--s4);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  flex: 0 0 auto;
}
.cal-week{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: var(--s2); }
.cal-week span{
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4);
}
.cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-cell{
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: var(--t-sm);
  color: var(--ink-2);
  transition: background var(--d-fast) linear, color var(--d-fast) linear;
}
.cal-cell.blank{ pointer-events: none; }
.cal-cell:hover{ background: var(--hover); }
.cal-cell.today{ color: var(--a); font-weight: 700; }
.cal-cell.sel{ background: var(--a-14); color: var(--ink); box-shadow: inset 0 0 0 1px var(--a-24); }
.cal-cell .cdot{
  position: absolute; bottom: 5px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--a);
}
.cal-cell .cdot.done{ background: var(--ink-4); }
.cal-cell .ccount{
  position: absolute; top: 3px; right: 4px;
  font-family: var(--font-mono); font-size: 8px; color: var(--ink-4);
}
.ag-right{ flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.ag-rhead{ padding: var(--s4) var(--s4) var(--s2); border-bottom: 1px solid var(--line); }
.ag-title{ font-size: var(--t-h3, 17px); font-weight: 600; text-transform: capitalize; }
.ag-list{ flex: 1 1 auto; overflow-y: auto; padding: var(--s3) var(--s4); }
.ag-item{
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}
.ag-item.done .ag-text{ color: var(--ink-4); text-decoration: line-through; }
.ag-check{
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--a-ink);
}
.ag-check.on{ background: var(--a); border-color: var(--a); color: #14161A; }
.ag-text{ flex: 1 1 auto; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.ag-del{ color: var(--ink-4); width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-xs); }
.ag-del:active{ background: var(--press); }
.ag-add{ display: flex; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.ag-input{ flex: 1 1 auto; height: 38px; font-size: var(--t-sm); }

/* ---------- JEMBATAN ---------- */
.bridge{ background: var(--surface); }
.bridge-scroll{ flex: 1 1 auto; overflow-y: auto; padding: 0 var(--s4) var(--s4); }
.bridge-scroll .rl{ grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.bridge .omni{ margin: 0 var(--s4) var(--s3); }
.park-list{ display: flex; flex-direction: column; gap: var(--s2); }
.park-item{
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.park-item .pmeta{ flex: 1 1 auto; min-width: 0; }
.park-item .pn{ font-size: var(--t-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.park-item .pu{ font-size: var(--t-micro); color: var(--ink-4); font-family: var(--font-mono); }
.park-item .ic{ width: 30px; height: 30px; border-radius: var(--r-xs); display: grid; place-items: center; color: var(--ink-3); }
.park-item .ic:active{ background: var(--press); }
.park-empty{
  padding: var(--s4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--t-xs);
  color: var(--ink-4);
  text-align: center;
}

/* ---------- FOTO: kisi dan penampil ---------- */
.photo-grid{
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
  align-content: start;
}
.photo-cell{
  padding: 0;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: transform var(--d-fast) var(--ease-out);
}
.photo-cell:active{ transform: scale(.97); }
.photo-cell img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox{
  position: absolute; inset: 0; z-index: 9;
  background: rgba(6,7,8,.94);
  display: grid; place-items: center;
  animation: fadeIn 180ms var(--ease-out) both;
}
.lb-img{
  max-width: 92%; max-height: 86%;
  border-radius: var(--r-md);
  transition: transform 200ms var(--ease-out);
  touch-action: none;
  user-select: none;
}
.lb-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: #EDE9E1;
  background: rgba(255,255,255,.08);
}
.lb-nav.prev{ left: 14px; }
.lb-nav.next{ right: 14px; }
.lb-bar{
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  font-size: var(--t-xs);
  color: rgba(237,233,225,.75);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.6));
}
.lb-count{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; }

/* ---------- TONTON ---------- */
.video-app{ background: #07080A; }
.vid-stage{ position: relative; flex: 1 1 auto; min-height: 0; background: #000; display: grid; place-items: center; }
.vid{ width: 100%; height: 100%; max-height: 100%; background: #000; }
.vid-list{
  flex: 0 0 auto; max-height: 34%; overflow-y: auto;
  border-top: 1px solid var(--line); background: var(--surface);
  padding: var(--s1);
}
.vid-row{
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; padding: var(--s3);
  border-radius: var(--r-sm);
  text-align: left; color: var(--ink-2);
  transition: background var(--d-fast) linear;
}
.vid-row .ic{ color: var(--ink-3); display: grid; place-items: center; flex: 0 0 auto; }
.vid-row .nm{ flex: 1 1 auto; min-width: 0; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vid-row .sz{ font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); flex: 0 0 auto; }
.vid-row.on{ background: var(--a-14); color: var(--ink); }
.vid-row.on .ic{ color: var(--a); }
.vid-row:active{ background: var(--press); }
.hidden-file{ display: none !important; }

/* ---------- HITUNG: riwayat ---------- */
.calc-body{ background: var(--surface); }
.calc-hist{
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: var(--s2);
  max-height: 62px; overflow: hidden;
}
.calc-hint{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.hist-chip{
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.3;
  color: var(--ink-3);
}
.hist-chip .hr{ color: var(--a); }

/* ---------- JAM: tiga mode ---------- */
.ck-tabs{ margin-bottom: var(--s2); }
.ck-pane{ display: flex; flex-direction: column; align-items: center; gap: var(--s5); width: 100%; }
.sw-out{
  font-size: clamp(34px, 8vw, 52px);
  font-weight: 250;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sw-laps{ width: min(320px, 100%); max-height: 150px; overflow-y: auto; }
.sw-lap{
  display: flex; justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.sw-lap .mono{ font-family: var(--font-mono); color: var(--ink-2); }

/* ---------- CATATAN: pratinjau markdown ---------- */
.npreview{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--s4) var(--s4);
  font-family: var(--font-read);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.npreview h2, .npreview h3, .npreview h4{
  font-family: var(--font-ui);
  color: var(--ink);
  margin: var(--s4) 0 var(--s2);
  font-weight: 640;
  letter-spacing: -.01em;
}
.npreview h2{ font-size: 20px; }
.npreview h3{ font-size: 17px; }
.npreview h4{ font-size: 15px; }
.npreview p{ margin-bottom: var(--s3); }
.npreview ul, .npreview ol{ margin: 0 0 var(--s3) var(--s5); }
.npreview li{ margin-bottom: 4px; }
.npreview blockquote{
  border-left: 2px solid var(--a-40);
  padding-left: var(--s3);
  color: var(--ink-3);
  margin: 0 0 var(--s3);
}
.npreview code{
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}
.npreview hr{ border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }
.nitem .nt{ display: flex; align-items: center; gap: 5px; }
.npin{ color: var(--a); display: inline-flex; }
.ag-add .chip{ width: 38px; height: 38px; padding: 0; flex: 0 0 auto; }
.ag-add .chip svg{ width: 16px; height: 16px; }