/* Layout: one quiet column. Hero (headline + live figures) → glass toolbar (period, availability, search, filters)
   → your registrations → grid of session cards. Filter drawer slides in from the right (bottom sheet on phones).
   Color is reserved for meaning: coral = fungsionaris, ice = kru. Everything else is tonal. */
/* Themes: dark is the default; light follows the system setting unless the viewer picks one.
   Every colour below is a token, so components never hard-code a theme. */
:root{
  --f-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-serif:"Instrument Serif","Iowan Old Style","Times New Roman",serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --bg:#08080a; --bg-raise:#0f0f12; --table-head:#0f0f12;
  --ink:255 255 255; --shade:0 0 0;
  --card-top:rgba(255,255,255,.045); --card-bot:rgba(255,255,255,.018);
  --border:rgba(255,255,255,.075); --border-2:rgba(255,255,255,.13); --hairline:rgba(255,255,255,.06);
  --text:#f5f5f4; --text-2:#a7a7ad; --text-3:#6c6c74; --text-4:#606068;
  --coral:#ff8a7a; --ice:#8fd8ff; --ok:#9ae6b4; --danger:#ff6b6b; --gold:#f4c069;
  --coral-text:#ffb4a9; --danger-text:#ffb3b3; --gold-text:#f4d9a8;
  --primary:#f5f5f4; --on-primary:#0a0a0b; --on-fill:#0a0a0b; --on-danger:#1a0505;
  --sel-bg:#f5f5f4; --sel-text:#0a0a0b; --nav-active-bg:rgba(255,255,255,.07); --nav-active-text:#f5f5f4;
  --quiet-bg:rgba(255,255,255,.05); --quiet-hover:rgba(255,255,255,.09);
  --seg-bg:rgba(255,255,255,.04); --thumb:rgba(255,255,255,.1); --thumb-sh:inset 0 1px 0 rgba(255,255,255,.08),0 1px 8px rgba(0,0,0,.4);
  --field:rgba(255,255,255,.03); --field-focus:rgba(255,255,255,.045); --field-line:rgba(255,255,255,.075);
  --tile:rgba(0,0,0,.25);
  --glass:rgba(8,8,10,.76); --glass-2:rgba(10,10,12,.88); --glass-soft:rgba(8,8,10,.4);
  --scrim:rgba(4,4,6,.62); --scrim-soft:rgba(4,4,6,.5);
  --sheet-a:#141418; --sheet-b:#0d0d10;
  --sh-btn:inset 0 -2px 0 rgba(0,0,0,.12); --glow:inset 0 -2px 0 rgba(0,0,0,.12),0 0 24px -4px rgba(255,255,255,.35);
  --sh-card:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.8);
  --sh-card-hover:var(--sh-card);
  --sh-panel:inset 0 1px 0 rgba(255,255,255,.05);
  --sh-sheet:inset 0 1px 0 rgba(255,255,255,.07),0 40px 100px -20px rgba(0,0,0,.9);
  --sh-pop:0 30px 80px -20px rgba(0,0,0,.9);
  --sh-fab:0 18px 40px -12px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1),0 0 30px -6px rgba(255,255,255,.25);
  --spot:rgba(255,255,255,.055);
  --h1-a:#ffffff; --h1-b:#b9b9bf;
  --aur1:rgba(255,138,122,.42); --aur2:rgba(143,216,255,.30); --aur3:rgba(255,255,255,.10); --aur-op:.55;
  --grain:.035;
  --toast-bg:rgba(24,24,28,.92); --toast-text:#f5f5f4; --toast-line:rgba(255,255,255,.13);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#f8fafd; --bg-raise:#f0f4f9; --table-head:#f8fafd;
  --ink:31 31 31; --shade:60 64 67;
  --card-top:#ffffff; --card-bot:#ffffff;
  --border:#e1e4e8; --border-2:#c7cbd0; --hairline:#eceff3;
  --text:#1f1f1f; --text-2:#444746; --text-3:#6e7277; --text-4:#878b91;
  --coral:#d93025; --ice:#0b57d0; --ok:#188038; --danger:#c5221f; --gold:#b06000;
  --coral-text:#b3261e; --danger-text:#b3261e; --gold-text:#7c4a00;
  --primary:#0b57d0; --on-primary:#ffffff; --on-fill:#ffffff; --on-danger:#ffffff;
  --sel-bg:#d3e3fd; --sel-text:#041e49; --nav-active-bg:#d3e3fd; --nav-active-text:#041e49;
  --quiet-bg:#ffffff; --quiet-hover:#f0f4f9;
  --seg-bg:#eef1f5; --thumb:#ffffff; --thumb-sh:0 1px 2px rgba(60,64,67,.25),0 1px 3px 1px rgba(60,64,67,.1);
  --field:#ffffff; --field-focus:#ffffff; --field-line:#c7cbd0;
  --tile:#f0f4f9;
  --glass:rgba(248,250,253,.84); --glass-2:rgba(255,255,255,.94); --glass-soft:rgba(248,250,253,.7);
  --scrim:rgba(32,33,36,.32); --scrim-soft:rgba(32,33,36,.22);
  --sheet-a:#ffffff; --sheet-b:#ffffff;
  --sh-btn:none; --glow:0 1px 2px rgba(11,87,208,.3),0 1px 3px 1px rgba(11,87,208,.15);
  --sh-card:0 1px 2px rgba(60,64,67,.08),0 1px 3px 1px rgba(60,64,67,.05);
  --sh-card-hover:0 1px 3px rgba(60,64,67,.14),0 4px 8px 3px rgba(60,64,67,.08);
  --sh-panel:0 1px 2px rgba(60,64,67,.06),0 1px 3px 1px rgba(60,64,67,.04);
  --sh-sheet:0 24px 48px -12px rgba(60,64,67,.28),0 2px 6px rgba(60,64,67,.12);
  --sh-pop:0 12px 32px -6px rgba(60,64,67,.24),0 2px 6px rgba(60,64,67,.1);
  --sh-fab:0 4px 8px 3px rgba(60,64,67,.15),0 1px 3px rgba(60,64,67,.3);
  --spot:rgba(11,87,208,.045);
  --h1-a:#1f1f1f; --h1-b:#5f6368;
  --aur1:rgba(234,67,53,.16); --aur2:rgba(66,133,244,.22); --aur3:rgba(52,168,83,.10); --aur-op:.9;
  --grain:.02;
  --toast-bg:#303134; --toast-text:#f1f3f4; --toast-line:transparent;
  color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#f8fafd; --bg-raise:#f0f4f9; --table-head:#f8fafd;
  --ink:31 31 31; --shade:60 64 67;
  --card-top:#ffffff; --card-bot:#ffffff;
  --border:#e1e4e8; --border-2:#c7cbd0; --hairline:#eceff3;
  --text:#1f1f1f; --text-2:#444746; --text-3:#6e7277; --text-4:#878b91;
  --coral:#d93025; --ice:#0b57d0; --ok:#188038; --danger:#c5221f; --gold:#b06000;
  --coral-text:#b3261e; --danger-text:#b3261e; --gold-text:#7c4a00;
  --primary:#0b57d0; --on-primary:#ffffff; --on-fill:#ffffff; --on-danger:#ffffff;
  --sel-bg:#d3e3fd; --sel-text:#041e49; --nav-active-bg:#d3e3fd; --nav-active-text:#041e49;
  --quiet-bg:#ffffff; --quiet-hover:#f0f4f9;
  --seg-bg:#eef1f5; --thumb:#ffffff; --thumb-sh:0 1px 2px rgba(60,64,67,.25),0 1px 3px 1px rgba(60,64,67,.1);
  --field:#ffffff; --field-focus:#ffffff; --field-line:#c7cbd0;
  --tile:#f0f4f9;
  --glass:rgba(248,250,253,.84); --glass-2:rgba(255,255,255,.94); --glass-soft:rgba(248,250,253,.7);
  --scrim:rgba(32,33,36,.32); --scrim-soft:rgba(32,33,36,.22);
  --sheet-a:#ffffff; --sheet-b:#ffffff;
  --sh-btn:none; --glow:0 1px 2px rgba(11,87,208,.3),0 1px 3px 1px rgba(11,87,208,.15);
  --sh-card:0 1px 2px rgba(60,64,67,.08),0 1px 3px 1px rgba(60,64,67,.05);
  --sh-card-hover:0 1px 3px rgba(60,64,67,.14),0 4px 8px 3px rgba(60,64,67,.08);
  --sh-panel:0 1px 2px rgba(60,64,67,.06),0 1px 3px 1px rgba(60,64,67,.04);
  --sh-sheet:0 24px 48px -12px rgba(60,64,67,.28),0 2px 6px rgba(60,64,67,.12);
  --sh-pop:0 12px 32px -6px rgba(60,64,67,.24),0 2px 6px rgba(60,64,67,.1);
  --sh-fab:0 4px 8px 3px rgba(60,64,67,.15),0 1px 3px rgba(60,64,67,.3);
  --spot:rgba(11,87,208,.045);
  --h1-a:#1f1f1f; --h1-b:#5f6368;
  --aur1:rgba(234,67,53,.16); --aur2:rgba(66,133,244,.22); --aur3:rgba(52,168,83,.10); --aur-op:.9;
  --grain:.02;
  --toast-bg:#303134; --toast-text:#f1f3f4; --toast-line:transparent;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#08080a; --bg-raise:#0f0f12; --table-head:#0f0f12;
  --ink:255 255 255; --shade:0 0 0;
  --card-top:rgba(255,255,255,.045); --card-bot:rgba(255,255,255,.018);
  --border:rgba(255,255,255,.075); --border-2:rgba(255,255,255,.13); --hairline:rgba(255,255,255,.06);
  --text:#f5f5f4; --text-2:#a7a7ad; --text-3:#6c6c74; --text-4:#606068;
  --coral:#ff8a7a; --ice:#8fd8ff; --ok:#9ae6b4; --danger:#ff6b6b; --gold:#f4c069;
  --coral-text:#ffb4a9; --danger-text:#ffb3b3; --gold-text:#f4d9a8;
  --primary:#f5f5f4; --on-primary:#0a0a0b; --on-fill:#0a0a0b; --on-danger:#1a0505;
  --sel-bg:#f5f5f4; --sel-text:#0a0a0b; --nav-active-bg:rgba(255,255,255,.07); --nav-active-text:#f5f5f4;
  --quiet-bg:rgba(255,255,255,.05); --quiet-hover:rgba(255,255,255,.09);
  --seg-bg:rgba(255,255,255,.04); --thumb:rgba(255,255,255,.1); --thumb-sh:inset 0 1px 0 rgba(255,255,255,.08),0 1px 8px rgba(0,0,0,.4);
  --field:rgba(255,255,255,.03); --field-focus:rgba(255,255,255,.045); --field-line:rgba(255,255,255,.075);
  --tile:rgba(0,0,0,.25);
  --glass:rgba(8,8,10,.76); --glass-2:rgba(10,10,12,.88); --glass-soft:rgba(8,8,10,.4);
  --scrim:rgba(4,4,6,.62); --scrim-soft:rgba(4,4,6,.5);
  --sheet-a:#141418; --sheet-b:#0d0d10;
  --sh-btn:inset 0 -2px 0 rgba(0,0,0,.12); --glow:inset 0 -2px 0 rgba(0,0,0,.12),0 0 24px -4px rgba(255,255,255,.35);
  --sh-card:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.8);
  --sh-card-hover:var(--sh-card);
  --sh-panel:inset 0 1px 0 rgba(255,255,255,.05);
  --sh-sheet:inset 0 1px 0 rgba(255,255,255,.07),0 40px 100px -20px rgba(0,0,0,.9);
  --sh-pop:0 30px 80px -20px rgba(0,0,0,.9);
  --sh-fab:0 18px 40px -12px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1),0 0 30px -6px rgba(255,255,255,.25);
  --spot:rgba(255,255,255,.055);
  --h1-a:#ffffff; --h1-b:#b9b9bf;
  --aur1:rgba(255,138,122,.42); --aur2:rgba(143,216,255,.30); --aur3:rgba(255,255,255,.10); --aur-op:.55;
  --grain:.035;
  --toast-bg:rgba(24,24,28,.92); --toast-text:#f5f5f4; --toast-line:rgba(255,255,255,.13);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:150px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);min-height:100vh}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid color-mix(in srgb,var(--ice) 70%,transparent);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
@media (max-width:480px){.wrap{padding-inline:16px}}
svg.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
mark{background:color-mix(in srgb,var(--ice) 22%,transparent);color:var(--text);border-radius:3px;padding:0 1px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ice) 25%,transparent)}

/* ---------------- admin bar ---------------- */
.adminbar{border-bottom:1px solid var(--hairline);background:var(--bg-raise)}
.adminbar .wrap{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding-block:10px}
.adminbar .who{display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--text-2);min-width:0}
.adminbar .who span{overflow-wrap:anywhere}
.badge{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--border-2);color:var(--text)}
.adminbar .acts{display:flex;gap:8px;flex-wrap:wrap}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.aurora{position:absolute;inset:-30% -10% auto -10%;height:560px;z-index:-1;pointer-events:none;filter:blur(70px);opacity:var(--aur-op)}
.aurora i{position:absolute;border-radius:50%}
.aurora i:nth-child(1){width:46%;height:70%;left:4%;top:18%;background:radial-gradient(closest-side,var(--aur1),transparent)}
.aurora i:nth-child(2){width:42%;height:64%;left:34%;top:2%;background:radial-gradient(closest-side,var(--aur2),transparent)}
.aurora i:nth-child(3){width:30%;height:50%;left:62%;top:30%;background:radial-gradient(closest-side,var(--aur3),transparent)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:160px;background:linear-gradient(to bottom,transparent,var(--bg));z-index:-1}
.hero .wrap{padding-block:clamp(48px,9vw,104px) clamp(32px,5vw,56px);display:grid;gap:26px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.82rem;color:var(--text-2);padding:6px 14px 6px 10px;border:1px solid var(--border);border-radius:999px;background:rgb(var(--ink) / .03);justify-self:start;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.live{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.live.off{background:var(--text-3)}
.eyebrow .sep{width:1px;height:12px;background:var(--border-2)}
h1{margin:0;font-weight:600;font-size:clamp(3rem,9.5vw,7rem);line-height:.92;letter-spacing:-.045em;text-wrap:balance;
  background:linear-gradient(180deg,var(--h1-a) 30%,var(--h1-b));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
h1 em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.08em;padding-right:.04em}
.lede{margin:0;max-width:52ch;font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.6;color:var(--text-2);text-wrap:pretty}
.lede b{color:var(--text);font-weight:500}
.figures{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin-top:6px;border-top:1px solid var(--hairline);padding-top:22px}
.fig{padding-right:28px;margin-right:28px;border-right:1px solid var(--hairline);display:grid;gap:2px;min-width:0}
.fig:last-child{border-right:0;margin-right:0;padding-right:0}
.fig b{font-weight:500;font-size:clamp(1.6rem,3.2vw,2.1rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.fig b small{font-size:.55em;color:var(--text-3);font-weight:400;letter-spacing:0;margin-left:2px}
.fig span{font-size:.8rem;color:var(--text-3)}
@media (max-width:520px){.figures{grid-template-columns:repeat(3,1fr)}.fig{padding-right:12px;margin-right:12px}.fig span{font-size:.74rem;line-height:1.3}}

/* ---------------- toolbar ---------------- */
.toolbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--glass);
  backdrop-filter:saturate(140%) blur(18px);-webkit-backdrop-filter:saturate(140%) blur(18px);border-block:1px solid var(--hairline)}
.toolbar .wrap{display:flex;align-items:center;gap:10px;padding-block:12px;flex-wrap:wrap}
.segs{display:flex;gap:10px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.segs::-webkit-scrollbar{display:none}
.seg{position:relative;display:flex;flex:none;padding:4px;border-radius:999px;background:var(--seg-bg);border:1px solid var(--border)}
.seg .thumb{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:var(--thumb);box-shadow:var(--thumb-sh);transition:left .35s var(--ease),width .35s var(--ease)}
.seg button{position:relative;z-index:1;border:0;background:none;padding:7px 13px;border-radius:999px;font-size:.84rem;font-weight:500;color:var(--text-3);white-space:nowrap;transition:color .2s;display:inline-flex;align-items:center;gap:6px}
.seg button[aria-pressed="true"]{color:var(--text)}
.seg .n{font-family:var(--f-mono);font-size:.72rem;color:var(--text-3)}
.seg .ok{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.seg .fullmark{width:6px;height:6px;border-radius:50%;background:var(--text-3)}
.search{position:relative;flex:1 1 220px;min-width:0}
.search input{width:100%;height:42px;border-radius:999px;border:1px solid var(--field-line);background:var(--field);padding:0 44px 0 40px;font-size:.9rem;transition:border-color .2s,background .2s}
.search input::placeholder{color:var(--text-3)}
.search input::-webkit-search-cancel-button{display:none}
.search input:focus{outline:none;border-color:var(--border-2);background:var(--field-focus)}
.search > .i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.search kbd,.search .clear{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.search kbd{font-family:var(--f-mono);font-size:.72rem;color:var(--text-3);border:1px solid var(--border-2);border-radius:6px;padding:1px 7px;pointer-events:none}
.search .clear{border:0;background:rgb(var(--ink) / .08);color:var(--text-2);width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.search .clear .i{width:12px;height:12px}
@media (hover:none){.search kbd{display:none}}
.fbtn{position:relative}
.fbtn .cnt{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:.72rem;font-weight:600;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .toolbar .search{order:1;flex:1 1 0}
  .toolbar .fbtn{order:2}
  .toolbar .segs{order:3;flex:1 1 100%;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:28px}
}

/* ---------------- buttons ---------------- */
.btn{text-decoration:none;height:42px;padding:0 18px;border-radius:999px;border:1px solid transparent;background:var(--primary);color:var(--on-primary);font-weight:500;font-size:.88rem;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  box-shadow:var(--sh-btn);transition:transform .15s var(--ease),box-shadow .25s,background .2s,opacity .2s,border-color .2s}
.btn:hover{box-shadow:var(--glow)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.btn.quiet{background:var(--quiet-bg);color:var(--text);border-color:var(--border);box-shadow:none}
.btn.quiet:hover{background:var(--quiet-hover);border-color:var(--border-2)}
.btn.danger{background:var(--danger);color:var(--on-danger)}
.btn.warn{background:color-mix(in srgb,var(--danger) 8%,transparent);color:var(--danger-text);border-color:color-mix(in srgb,var(--danger) 25%,transparent);box-shadow:none}
.btn.sm{height:34px;padding:0 14px;font-size:.8rem}
.btn.icon{width:42px;padding:0;flex:none}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.btn .more{opacity:.55;font-weight:400}

/* ---------------- main ---------------- */

.notice{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--text-2);padding:12px 16px;border-radius:var(--r-md);border:1px solid var(--border);background:rgb(var(--ink) / .025)}
.notice .i{margin-top:2px}
.notice.err{color:var(--danger-text);border-color:color-mix(in srgb,var(--danger) 30%,transparent);background:color-mix(in srgb,var(--danger) 6%,transparent)}

/* your registrations */
.mine{display:grid;gap:12px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sec-h h2{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:-.02em}
.sec-h h2 em{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.15em}
.sec-h span{font-size:.8rem;color:var(--text-3)}
.mine-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px;margin:-2px}
.mine-row::-webkit-scrollbar{display:none}
.mt{--c:var(--ice);flex:0 0 min(320px,86%);scroll-snap-align:start;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;
  padding:14px 16px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,var(--card-top),var(--card-bot));transition:border-color .2s,background .2s}
.mt.fungs{--c:var(--coral)}
.mt:hover{border-color:var(--border-2)}
.mt .slotno{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-family:var(--f-serif);font-size:1.7rem;line-height:1;
  color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.mt .tx{min-width:0;display:grid;gap:2px}
.mt .tx b{font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt .tx span{font-size:.8rem;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt > .i{color:var(--text-3)}

/* results bar */
.resultbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.rcount{font-size:.86rem;color:var(--text-2);margin-right:4px}
.rcount b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.fchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 4px 0 12px;border-radius:999px;border:1px solid var(--border-2);background:rgb(var(--ink) / .04);font-size:.8rem;color:var(--text)}
.fchip .i{width:13px;height:13px;color:var(--text-3)}
.fchip button{border:0;background:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--text-3)}
.fchip button:hover{background:rgb(var(--ink) / .1);color:var(--text)}
.fchip button .i{width:12px;height:12px}
.linkbtn{border:0;background:none;padding:4px 2px;color:var(--text-3);font-size:.82rem;display:inline-flex;gap:6px;align-items:center;transition:color .2s}
.linkbtn:hover{color:var(--text)}
.resultbar .push{margin-left:auto;display:flex;gap:14px}

/* ---------------- cards ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px;align-items:start}
.card{--c:var(--ice);position:relative;container-type:inline-size;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--card-top),var(--card-bot));
  border:1px solid var(--border);box-shadow:var(--sh-card);
  overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:border-color .3s}
.card.fungs{--c:var(--coral)}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--spot),transparent 45%)}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;
  background:radial-gradient(80% 100% at 15% 0%,color-mix(in srgb,var(--c) 10%,transparent),transparent 70%)}
@media (hover:hover){.card:hover{border-color:var(--border-2)}.card:hover::before{opacity:1}}
.card.done{opacity:.55}
.card.done::after{display:none}

.c-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px 20px 0;position:relative;z-index:1}
.kind{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:500;color:var(--text-2);letter-spacing:.01em}
.dot{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c);display:inline-block;flex:none}
.chip{font-size:.74rem;font-weight:500;padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:var(--text-2);background:rgb(var(--ink) / .03);white-space:nowrap}
.chip.soon{color:var(--text);border-color:var(--border-2)}
.chip.full{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.chip.closed{color:var(--coral-text);border-color:color-mix(in srgb,var(--coral) 30%,transparent)}
.c-main{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 20px 0;position:relative;z-index:1}
.date{width:58px;height:64px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--tile);display:grid;place-content:center;text-align:center;gap:1px}
.date .dd{font-size:1.55rem;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.date .mm{font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3)}
.date .i{width:22px;height:22px;color:var(--text-3);margin:auto}
.title{min-width:0}
.title h3{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.03em;line-height:1.1;overflow-wrap:anywhere}
.title p{margin:3px 0 0;font-size:.86rem;color:var(--text-3);overflow-wrap:anywhere}
.ring{position:relative;width:52px;height:52px;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%}
.ring path{fill:none;stroke:rgb(var(--ink) / .09);stroke-width:3.2;stroke-linecap:round;transition:stroke .4s}
.ring path.on{stroke:var(--c);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 60%,transparent))}
.ring b{font-family:var(--f-mono);font-size:.74rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text-2)}
.meta{list-style:none;margin:16px 20px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.86rem;color:var(--text-2);position:relative;z-index:1}
.meta li{display:inline-flex;align-items:center;gap:7px;min-width:0}
.meta .i{color:var(--text-3)}
.meta span{overflow-wrap:anywhere}
.note{margin:14px 20px 0;display:flex;gap:9px;align-items:flex-start;font-size:.84rem;line-height:1.5;color:var(--text-2);padding:10px 12px;border-radius:var(--r-sm);background:rgb(var(--ink) / .03);border:1px solid var(--hairline);position:relative;z-index:1}
.note .i{color:var(--c);margin-top:2px}
.roster{list-style:none;margin:18px 0 0;padding:6px 8px;border-top:1px solid var(--hairline);position:relative;z-index:1}
.roster li{display:grid;grid-template-columns:26px 30px 1fr auto;align-items:center;gap:10px;padding:6px 12px;border-radius:12px;min-height:44px;transition:background .2s}
.roster li:hover{background:rgb(var(--ink) / .025)}
.roster .no{font-family:var(--f-mono);font-size:.74rem;color:var(--text-4);font-variant-numeric:tabular-nums}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--text-2);background:rgb(var(--ink) / .06);border:1px solid var(--hairline)}
.av.empty{background:none;border:1px dashed rgb(var(--ink) / .12)}
.who{min-width:0;display:grid;line-height:1.25}
.who b{font-weight:500;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who code{font-family:var(--f-mono);font-size:.74rem;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .free{color:var(--text-4);font-size:.86rem}
.roster li.me{background:color-mix(in srgb,var(--c) 8%,transparent)}
.roster li.me .av{background:var(--c);color:var(--on-fill);border-color:transparent}
.roster li.me .no{color:var(--c)}
.you{font-family:var(--f-sans);font-size:.66rem;font-weight:600;color:var(--c);margin-left:6px;letter-spacing:.04em;text-transform:uppercase}
.x{border:0;background:none;color:var(--text-3);width:30px;height:30px;border-radius:8px;display:grid;place-items:center;transition:background .2s,color .2s,opacity .2s}
.x:hover{background:rgb(var(--ink) / .06);color:var(--text)}
@media (hover:hover){.roster li .x{opacity:0}.roster li:hover .x,.roster li .x:focus-visible{opacity:1}}
.x.sure{width:auto;padding:0 10px;opacity:1!important;background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger-text);font-size:.76rem;font-weight:500}
.c-foot{display:flex;gap:8px;padding:12px 20px 20px;position:relative;z-index:1}
.c-foot > .btn:first-child,.c-foot > .status{flex:1;min-width:0}
.status{display:flex;align-items:center;font-size:.85rem;color:var(--text-3);padding-left:4px}
@container (max-width:380px){ .btn .more{display:none} .c-foot{gap:6px} }

.card.flash{animation:flash 1.6s var(--ease) 2}
@keyframes flash{0%,100%{box-shadow:var(--sh-card)}40%{box-shadow:var(--sh-card),0 0 0 2px var(--c),0 0 40px -6px var(--c)}}

.none{grid-column:1/-1;display:grid;justify-items:center;gap:12px;text-align:center;padding:64px 20px;border:1px dashed var(--border-2);border-radius:var(--r-lg);color:var(--text-3)}
.none h3{margin:0;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:2.2rem;color:var(--text);letter-spacing:-.01em}
.none p{margin:0;max-width:44ch}
.none b{color:var(--text-2);font-weight:500}
.none .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.skel{height:420px;border-radius:var(--r-lg);border:1px solid var(--hairline);background:linear-gradient(100deg,rgb(var(--ink) / .02) 30%,rgb(var(--ink) / .05) 50%,rgb(var(--ink) / .02) 70%) 0 0/300% 100%}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--hairline)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-block:24px 32px;font-size:.82rem;color:var(--text-3)}
.kbdhint{display:flex;gap:14px;flex-wrap:wrap}
.kbdhint kbd{font-family:var(--f-mono);font-size:.7rem;border:1px solid var(--border-2);border-radius:5px;padding:0 6px;margin-right:5px;color:var(--text-2)}
@media (hover:none){.kbdhint{display:none}}

/* ---------------- filter drawer ---------------- */
.dscrim{position:fixed;inset:0;z-index:44;background:var(--scrim-soft);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.drawer{position:fixed;z-index:45;top:0;right:0;bottom:0;width:min(420px,100%);display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--sheet-a),var(--sheet-b));border-left:1px solid var(--border-2);box-shadow:var(--sh-pop);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (max-width:640px){
  .drawer{top:auto;left:0;width:100%;max-height:88%;border-left:0;border-top:1px solid var(--border-2);border-radius:26px 26px 0 0;box-shadow:var(--sh-pop)}
  .drawer::before{content:"";width:38px;height:4px;border-radius:2px;background:var(--border-2);margin:10px auto 0;flex:none}
}
.d-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--hairline)}
.d-head h2{margin:0;font-size:1.35rem;font-weight:600;letter-spacing:-.03em}
.d-head h2 em{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.12em}
.d-body{flex:1;overflow-y:auto;padding:6px 22px 22px;overscroll-behavior:contain}
.fsec{padding:18px 0;border-bottom:1px solid var(--hairline);display:grid;gap:12px}
.fsec:last-child{border-bottom:0}
.fsec h4{margin:0;font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fsec h4 small{text-transform:none;letter-spacing:0;font-size:.78rem;color:var(--text-4);font-weight:400}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:rgb(var(--ink) / .025);color:var(--text-2);font-size:.84rem;text-align:left;transition:background .2s,border-color .2s,color .2s,opacity .2s}
.opt:hover{border-color:var(--border-2);color:var(--text)}
.opt .c{font-family:var(--f-mono);font-size:.72rem;color:var(--text-3)}
.opt .sub{font-size:.74rem;color:var(--text-3)}
.opt.zero{opacity:.38}
.opt[data-kind="radio"][aria-pressed="true"]{background:var(--sel-bg);color:var(--sel-text);border-color:transparent}
.opt[data-kind="radio"][aria-pressed="true"] .c,.opt[data-kind="radio"][aria-pressed="true"] .sub{color:var(--sel-text);opacity:.6}
.opt[data-kind="multi"][aria-pressed="true"]{background:color-mix(in srgb,var(--ice) 10%,transparent);border-color:color-mix(in srgb,var(--ice) 45%,transparent);color:var(--text)}
.opt[data-kind="multi"] .tick{width:14px;height:14px;border-radius:4px;border:1px solid var(--border-2);display:grid;place-items:center;flex:none}
.opt[data-kind="multi"] .tick .i{width:10px;height:10px;stroke-width:2.4;opacity:0}
.opt[data-kind="multi"][aria-pressed="true"] .tick{background:var(--ice);border-color:var(--ice);color:var(--on-fill)}
.opt[data-kind="multi"][aria-pressed="true"] .tick .i{opacity:1}
.stepper{display:flex;align-items:center;gap:6px;justify-self:start;padding:4px;border-radius:999px;border:1px solid var(--border);background:rgb(var(--ink) / .025)}
.stepper button{width:34px;height:34px;border-radius:50%;border:0;background:rgb(var(--ink) / .06);display:grid;place-items:center;color:var(--text)}
.stepper button:disabled{opacity:.3;cursor:default}
.stepper output{min-width:92px;text-align:center;font-size:.9rem;font-variant-numeric:tabular-nums}
.datepick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.datepick label{font-size:.82rem;color:var(--text-3)}
.datepick input{height:38px;border-radius:999px;border:1px solid var(--field-line);background:var(--field);padding:0 14px}
.datepick input.on{border-color:transparent;background:var(--sel-bg);color:var(--sel-text)}
.datepick input::-webkit-calendar-picker-indicator{filter:invert(.6)}
.datepick input.on::-webkit-calendar-picker-indicator{filter:none}
.d-foot{display:flex;gap:10px;padding:14px 22px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--hairline);background:var(--glass-soft)}
.d-foot .btn:last-child{flex:1}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:rgb(var(--ink) / .02);cursor:pointer}
.toggle .t{display:grid;font-size:.9rem}
.toggle .t small{color:var(--text-3);font-size:.78rem}
.toggle input{appearance:none;-webkit-appearance:none;width:40px;height:24px;border-radius:999px;background:rgb(var(--ink) / .12);position:relative;flex:none;cursor:pointer;transition:background .25s;margin:0}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s var(--ease);box-shadow:0 1px 3px rgb(var(--shade) / .4)}
.toggle input:checked{background:var(--tc,var(--ok))}
.toggle input:checked::after{transform:translateX(16px)}
.toggle input:focus-visible{outline:2px solid color-mix(in srgb,var(--ice) 70%,transparent);outline-offset:2px}

/* ---------------- dialog ---------------- */
.scrim{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:12px;
  padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--scrim);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (min-width:640px){.scrim{align-items:center;padding:24px}}
.sheet{--c:var(--text);width:100%;max-width:460px;max-height:100%;overflow:auto;border-radius:26px;border:1px solid var(--border-2);
  background:linear-gradient(180deg,var(--sheet-a),var(--sheet-b));box-shadow:var(--sh-sheet);position:relative}
.sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:160px;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0%,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%)}
.sheet .inner{position:relative;padding:26px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (max-width:480px){.sheet .inner{padding:22px 18px}}
.sheet h3{margin:0;font-size:1.55rem;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.sheet h3 em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:0;font-size:1.1em}
.ctx{margin:-8px 0 0;font-size:.88rem;color:var(--text-2);display:flex;flex-wrap:wrap;gap:4px 14px}
.ctx span{display:inline-flex;gap:6px;align-items:center}
.ctx .i{color:var(--text-3);width:14px;height:14px}
form.fields{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-size:.8rem;font-weight:500;color:var(--text-2)}
.field input,.field select,.field textarea{width:100%;border-radius:12px;border:1px solid var(--field-line);background:var(--field);padding:11px 14px;font-size:.95rem;transition:border-color .2s,box-shadow .2s,background .2s}
.field textarea{resize:vertical;min-height:70px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-4)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:color-mix(in srgb,var(--ice) 45%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--ice) 10%,transparent);background:var(--field-focus)}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c6c74' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.7)}
.prefix{position:relative}
.prefix span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-3);font-family:var(--f-mono);font-size:.9rem}
.prefix input{padding-left:30px;font-family:var(--f-mono);font-size:.9rem}
.hint{margin:0;font-size:.78rem;color:var(--text-3)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:440px){.row2{grid-template-columns:1fr}}
.acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
.acts .spacer{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 .btn{width:100%}
.ferr{margin:0;font-size:.86rem;color:var(--danger-text);display:flex;gap:8px;align-items:flex-start}
.callout{display:flex;gap:9px;font-size:.84rem;color:var(--text-2);padding:10px 12px;border-radius:12px;background:rgb(var(--ink) / .03);border:1px solid var(--hairline)}
.callout .i{color:var(--c);margin-top:2px}
.ticket{display:grid;justify-items:center;gap:6px;text-align:center;padding:4px 0 0}
.bigring{position:relative;width:168px;height:168px;display:grid;place-items:center}
.bigring svg{position:absolute;inset:0;width:100%;height:100%}
.bigring path{fill:none;stroke:rgb(var(--ink) / .08);stroke-width:2.4;stroke-linecap:round}
.bigring path.on{stroke:var(--c);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 70%,transparent))}
.bigring .mid{position:relative;display:grid;justify-items:center;gap:2px}
.bigring .num{font-family:var(--f-serif);font-size:4.4rem;line-height:.9;letter-spacing:-.02em}
.bigring .lab{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.ticket .nm{font-weight:500;font-size:1.05rem;margin-top:4px}
.ticket .ln{font-family:var(--f-mono);font-size:.82rem;color:var(--text-3)}
.sub-h{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0 0 -8px}

/* ---------------- create entry points ---------------- */
.hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.hero-cta .btn{height:46px;padding:0 20px;font-size:.92rem}
@media (max-width:480px){.hero-cta{display:grid;grid-template-columns:1.3fr 1fr}.hero-cta .btn{padding:0 12px}.hero-cta .long{display:none}}
.fab{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;
  height:52px;padding:0 20px 0 16px;border-radius:999px;border:0;background:var(--primary);color:var(--on-primary);font-weight:600;font-size:.92rem;
  display:inline-flex;align-items:center;gap:8px;box-shadow:var(--sh-fab);
  transition:transform .3s var(--ease),opacity .3s}
.fab .i{width:18px;height:18px;stroke-width:2}
.fab:hover{transform:translateY(-2px)}
.fab.away{transform:translateY(140%);opacity:0;pointer-events:none}
.madeby{margin-left:8px;padding-left:8px;border-left:1px solid var(--border-2);color:var(--text-3);font-weight:400}
.meta-time{font-size:.78rem;color:var(--text-3);margin:-6px 0 0}
.lockhint{font-size:.78rem;color:var(--text-3);display:flex;gap:7px;align-items:flex-start}
.lockhint .i{width:14px;height:14px;margin-top:2px;flex:none}
.joinbox{display:grid;gap:14px;padding:14px;border-radius:16px;border:1px solid var(--border);background:rgb(var(--ink) / .02)}
.dupwarn{display:grid;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);background:color-mix(in srgb,var(--gold) 6%,transparent);font-size:.86rem;color:var(--gold-text)}
.dupwarn .acts{justify-content:flex-start;margin:0}

/* two-kru sessions */
.title.duo{display:grid;gap:8px}
.title.duo h3{font-size:1.18rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.title.duo p{margin-top:2px;font-size:.8rem;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ftag{font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);border:1px solid color-mix(in srgb,var(--coral) 45%,transparent);background:color-mix(in srgb,var(--coral) 10%,transparent);padding:1px 7px;border-radius:999px;line-height:1.5}
.krubox{display:grid;gap:12px;padding:14px;border-radius:16px;border:1px solid var(--border);background:rgb(var(--ink) / .02)}
.kb-h{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
.kb-n{white-space:nowrap;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.kb-sub{font-size:.76rem;color:var(--text-3)}
.kb-h .linkbtn{margin-left:auto;font-size:.78rem}
.kb-h .linkbtn .i{width:13px;height:13px}
.addkru{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;border-radius:16px;border:1px dashed var(--border-2);background:none;color:var(--text);font-size:.9rem;font-weight:500;text-align:left;transition:border-color .2s,background .2s}
.addkru:hover{border-color:var(--text-3);background:rgb(var(--ink) / .025)}
.addkru span{color:var(--text-3);font-weight:400;font-size:.8rem}
.fcap{margin:-6px 0 0;display:flex;gap:8px;align-items:flex-start;font-size:.78rem;color:var(--text-3)}
.fcap .i{width:14px;height:14px;margin-top:2px;color:var(--coral)}

/* ---------------- toast ---------------- */
.toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:10px;
  max-width:calc(100% - 32px);padding:11px 18px 11px 14px;border-radius:999px;background:var(--toast-bg);border:1px solid var(--toast-line);
  color:var(--toast-text);font-size:.88rem;box-shadow:var(--sh-pop);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform:translateX(-50%)}
.toast .i{color:var(--ok)}

/* ---------------- motion ---------------- */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .9s var(--ease) both}
  .d1{animation-delay:.06s}.d2{animation-delay:.14s}.d3{animation-delay:.22s}
  /* the card entrance: plays on page load AND every time search/filters change the list */
  .enter{animation:rise .8s var(--ease) both;animation-delay:calc(var(--k,0) * 70ms + .25s - var(--off,0ms))}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .aurora{animation:drift 22s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4%,-3%,0) scale(1.08)}}
  .live:not(.off){animation:pulse 2.4s ease-out infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}80%,100%{box-shadow:0 0 0 8px color-mix(in srgb,var(--ok) 0%,transparent)}}
  .skel{animation:shimmer 1.6s linear infinite}
  @keyframes shimmer{to{background-position:-300% 0}}
  .scrim:not([hidden]){animation:fade .25s ease both}
  .scrim:not([hidden]) .sheet{animation:pop .45s var(--ease) both}
  .dscrim:not([hidden]){animation:fade .3s ease both}
  .drawer:not([hidden]){animation:slideX .45s var(--ease) both}
  @media (max-width:640px){.drawer:not([hidden]){animation:slideY .45s var(--ease) both}}
  @keyframes fade{from{opacity:0}}
  @keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}}
  @keyframes slideX{from{transform:translateX(100%)}}
  @keyframes slideY{from{transform:translateY(100%)}}
  .bigring path.on{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s var(--ease) .15s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  .toast:not([hidden]){animation:toast .4s var(--ease) both}
  @keyframes toast{from{opacity:0;transform:translate(-50%,10px)}}
}
@media (prefers-reduced-motion:reduce){.card.flash{animation:none;box-shadow:0 0 0 2px var(--c)}}

/* =====================================================================
   v2 additions: navigation, dashboard, rekap, kru directory, moderator tools
   ===================================================================== */
:root{ --navh:64px; }
body{padding-bottom:0}
@media (max-width:760px){ :root{ --navh:0px } body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))} }

/* ---------- top navigation ---------- */
.nav{position:sticky;top:0;z-index:25;height:var(--navh);background:var(--glass);backdrop-filter:saturate(140%) blur(18px);-webkit-backdrop-filter:saturate(140%) blur(18px);border-bottom:1px solid var(--hairline);padding-top:env(safe-area-inset-top,0px)}
.nav-in{height:64px;display:flex;align-items:center;gap:22px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:600;letter-spacing:-.02em;font-size:1.02rem;white-space:nowrap}
.brand em{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.15em}
.logo{width:28px;height:28px;display:grid;place-items:center}
.logo svg{width:28px;height:28px}
.tabs{display:flex;gap:2px;flex:1;min-width:0}
.tabs a{position:relative;padding:8px 13px;border-radius:999px;color:var(--text-3);text-decoration:none;font-size:.88rem;font-weight:500;transition:color .2s,background .2s}
.tabs a:hover{color:var(--text)}
.tabs a[aria-current="page"]{color:var(--nav-active-text);background:var(--nav-active-bg)}
.dotbadge{position:absolute;top:6px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 8px var(--coral)}
.nav-r{display:flex;align-items:center;gap:8px;margin-left:auto}
.iconbtn{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:rgb(var(--ink) / .03);display:grid;place-items:center;color:var(--text-2);transition:background .2s,color .2s}
.iconbtn:hover{background:rgb(var(--ink) / .08);color:var(--text)}
.bcount{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--coral);color:var(--on-danger);font-size:.68rem;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.acct{border:0;background:none;padding:0;display:inline-flex}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:600;background:linear-gradient(135deg,color-mix(in srgb,var(--coral) 35%,transparent),color-mix(in srgb,var(--ice) 30%,transparent));border:1px solid var(--border-2);color:var(--text);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){
  .nav{position:relative;height:auto}
  .tabs{display:none}
  .nav-in{gap:10px}
}

/* ---------- bottom navigation (phones) ---------- */
.bottombar{display:none}
@media (max-width:760px){
  .bottombar{position:fixed;left:0;right:0;bottom:0;z-index:28;display:flex;justify-content:space-around;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:var(--glass-2);backdrop-filter:saturate(140%) blur(18px);-webkit-backdrop-filter:saturate(140%) blur(18px);border-top:1px solid var(--hairline)}
  .bottombar a{position:relative;flex:1;display:grid;justify-items:center;gap:3px;padding:6px 0;color:var(--text-3);text-decoration:none;font-size:.68rem;font-weight:500;border-radius:12px}
  .bottombar a .i{width:20px;height:20px}
  .bottombar a[aria-current="page"]{color:var(--text)}
  .bottombar a[aria-current="page"] .i{color:var(--ice)}
  .bottombar .dotbadge{top:4px;right:calc(50% - 16px)}
  .fab{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(140px + env(safe-area-inset-bottom,0px))}
}
.toolbar{top:var(--navh)}
html{scroll-padding-top:calc(var(--navh) + 90px)}

/* ---------- popovers (notifications, account) ---------- */
.pop{position:fixed;z-index:40;top:calc(var(--navh) + 8px + env(safe-area-inset-top,0px));right:max(16px,calc((100vw - 1160px)/2 + 8px));width:min(400px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;
  border-radius:20px;border:1px solid var(--border-2);background:linear-gradient(180deg,var(--sheet-a),var(--sheet-b));box-shadow:var(--sh-pop);padding:8px}
@media (max-width:760px){.pop{top:calc(66px + env(safe-area-inset-top,0px))}}
.pop-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.pop-item{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:flex-start;width:100%;padding:10px 12px;border:0;background:none;border-radius:14px;text-align:left;color:var(--text);transition:background .2s}
.pop-item:hover{background:rgb(var(--ink) / .05)}
.pop-item .pi{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgb(var(--ink) / .05);color:var(--text-2)}
.pop-item.hot .pi{background:color-mix(in srgb,var(--coral) 14%,transparent);color:var(--coral)}
.pop-item.cool .pi{background:color-mix(in srgb,var(--ice) 14%,transparent);color:var(--ice)}
.pop-item.ok .pi{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.pop-item b{display:block;font-weight:500;font-size:.9rem;line-height:1.35}
.pop-item span{display:block;font-size:.8rem;color:var(--text-3);margin-top:2px}
.pop-item.new b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--coral);margin-left:8px;vertical-align:2px}
.pop-empty{padding:28px 16px;text-align:center;color:var(--text-3);font-size:.88rem}
.acct-card{display:grid;gap:4px;padding:14px 12px 12px;border-bottom:1px solid var(--hairline);margin-bottom:6px}
.acct-card b{font-weight:600}
.acct-card span{font-size:.8rem;color:var(--text-3);overflow-wrap:anywhere}

/* ---------- generic view scaffolding ---------- */
.view{min-height:60vh}
.vhead{padding-block:clamp(34px,6vw,64px) 8px;display:grid;gap:10px}
.vhead h1{font-size:clamp(2.4rem,6.5vw,4.4rem)}
.vhead .lede{max-width:60ch}
.vbody{padding-block:24px 64px;display:grid;gap:22px}
.panel{border-radius:var(--r-lg);border:1px solid var(--border);background:linear-gradient(180deg,var(--card-top),var(--card-bot));box-shadow:var(--sh-panel);padding:20px;min-width:0}
.panel h2{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:-.02em}
.panel h2 em{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.15em}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.panel-h .sub{font-size:.8rem;color:var(--text-3)}
.muted{color:var(--text-3)}
.gate{display:grid;justify-items:center;gap:14px;text-align:center;padding:56px 20px}
.gate h2{margin:0;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:2.2rem}
.gate p{margin:0;max-width:46ch;color:var(--text-2)}

/* ---------- rules box ---------- */
.rules{border-radius:var(--r-lg);border:1px solid var(--border);background:rgb(var(--ink) / .02);overflow:hidden}
.rules summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 18px;font-weight:500;font-size:.92rem}
.rules summary::-webkit-details-marker{display:none}
.rules summary .i{color:var(--coral)}
.rules summary .chev{margin-left:auto;transition:transform .25s var(--ease);color:var(--text-3)}
.rules[open] summary .chev{transform:rotate(90deg)}
.rules ol{margin:0;padding:0 18px 16px 42px;display:grid;gap:7px;font-size:.88rem;color:var(--text-2)}
.rules li::marker{color:var(--text-4);font-family:var(--f-mono);font-size:.8rem}

/* ---------- dashboard (Progres) ---------- */
.dash{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.dash > *{grid-column:span 12}
@media (min-width:900px){ .span-4{grid-column:span 4} .span-5{grid-column:span 5} .span-7{grid-column:span 7} .span-8{grid-column:span 8} .span-6{grid-column:span 6} }
.hello{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hello .avatar{width:52px;height:52px;font-size:1rem}
.hello h1{font-size:clamp(2rem,5vw,3.2rem);background:none;-webkit-background-clip:initial;color:var(--text)}
.hello .who{display:grid;gap:4px}
.hello .who span{font-size:.86rem;color:var(--text-3)}
.big{display:flex;align-items:center;gap:20px}
.arc{position:relative;width:128px;height:128px;flex:none}
.arc svg{width:100%;height:100%}
.arc .track{fill:none;stroke:rgb(var(--ink) / .08)}
.arc .bar{fill:none;stroke:var(--c,var(--coral));stroke-linecap:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c,var(--coral)) 55%,transparent));transition:stroke-dasharray .8s var(--ease)}
.arc .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.arc .mid b{font-family:var(--f-serif);font-size:2.6rem;line-height:1;font-weight:400}
.arc .mid small{font-size:.72rem;color:var(--text-3);letter-spacing:.06em}
.kv{display:grid;gap:10px;min-width:0;flex:1}
.kv .row{display:flex;justify-content:space-between;gap:10px;font-size:.88rem}
.kv .row span{color:var(--text-3)}
.kv .row b{font-weight:500;font-variant-numeric:tabular-nums}
.cmp{display:grid;gap:8px;margin-top:4px}
.cmp .lbl{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-3)}
.bar2{height:8px;border-radius:999px;background:rgb(var(--ink) / .06);position:relative;overflow:hidden}
.bar2 i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--c,var(--ice))}
.bar2.me i{background:var(--coral)}
.statnum{font-size:2.4rem;font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.statnum small{font-size:.45em;color:var(--text-3);letter-spacing:0;font-weight:400;margin-left:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.tchip{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;padding:3px 10px;border-radius:999px;border:1px solid var(--border);color:var(--text-2);background:rgb(var(--ink) / .03)}
.tchip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.tchip.hot{color:var(--coral-text);border-color:color-mix(in srgb,var(--coral) 35%,transparent)}
.tchip.cool{color:var(--ice);border-color:color-mix(in srgb,var(--ice) 35%,transparent)}
.tchip .i{width:12px;height:12px}

/* deadlines */
.dl{display:grid;gap:10px}
.dl-item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02)}
.dl-item .when{width:52px;text-align:center;display:grid;gap:1px}
.dl-item .when b{font-size:1.3rem;font-weight:600;line-height:1}
.dl-item .when span{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.dl-item .t{min-width:0}
.dl-item .t b{font-weight:500;display:block;overflow-wrap:anywhere}
.dl-item .t span{font-size:.8rem;color:var(--text-3)}
.dl-item.urgent{border-color:color-mix(in srgb,var(--coral) 35%,transparent);background:color-mix(in srgb,var(--coral) 6%,transparent)}
.dl-item.past{opacity:.5}

/* targets */
.targets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px}
.tgt{--c:var(--coral);border-radius:18px;border:1px solid var(--border);background:rgb(var(--ink) / .02);padding:16px;display:grid;gap:12px;min-width:0}
.tgt.done{--c:var(--ok)}
.tgt-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tgt-h b{font-size:1.1rem;font-weight:600;letter-spacing:-.02em;display:block}
.tgt-h span{font-size:.8rem;color:var(--text-3)}
.req{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.req li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--text-2)}
.req .ck{width:20px;height:20px;border-radius:6px;border:1px solid var(--border-2);display:grid;place-items:center;background:none;padding:0;color:var(--on-fill)}
.req .ck .i{width:12px;height:12px;stroke-width:2.6;opacity:0}
.req li.ok .ck{background:var(--ok);border-color:var(--ok)}
.req li.ok .ck .i{opacity:1}
.req li.ok{color:var(--text)}
.req button.ck{cursor:pointer}
.req small{display:block;color:var(--text-3);font-size:.76rem;margin-top:2px}
.dots{display:inline-flex;gap:4px;margin-left:6px;vertical-align:1px}
.dots i{width:8px;height:8px;border-radius:50%;background:rgb(var(--ink) / .12)}
.dots i.on{background:var(--ok)}
.tgt-a{display:flex;gap:8px;flex-wrap:wrap}
.addtgt{display:grid;place-items:center;gap:8px;border-radius:18px;border:1px dashed var(--border-2);background:none;padding:22px;color:var(--text-2);font-size:.9rem;min-height:140px}
.addtgt:hover{border-color:var(--text-3);color:var(--text)}

/* compact session rows (dashboard lists) */
.rows{display:grid;gap:8px}
.srow{--c:var(--ice);display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02);text-align:left;width:100%;color:var(--text)}
button.srow{cursor:pointer}
button.srow:hover{border-color:var(--border-2)}
.srow.fungs{--c:var(--coral)}
.srow .mini{width:46px;height:50px;border-radius:12px;border:1px solid var(--border);display:grid;place-content:center;text-align:center;background:var(--tile)}
.srow .mini b{font-size:1.15rem;font-weight:600;line-height:1}
.srow .mini span{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.srow .tx{min-width:0;display:grid;gap:2px}
.srow .tx b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .tx span{font-size:.8rem;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .r{display:flex;gap:8px;align-items:center}
.num{font-family:var(--f-serif);font-size:1.6rem;line-height:1;color:var(--c);width:46px;text-align:center}

/* ---------- rekap tables ---------- */
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:760px){.stats4{grid-template-columns:repeat(2,1fr)}}
.stat{padding:16px 18px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,var(--card-top),var(--card-bot));display:grid;gap:6px}
.stat span{font-size:.78rem;color:var(--text-3)}
.tabbar{display:flex;gap:6px;flex-wrap:wrap}
.tabbar button{border:1px solid var(--border);background:rgb(var(--ink) / .03);color:var(--text-2);padding:7px 14px;border-radius:999px;font-size:.84rem;font-weight:500}
.tabbar button[aria-pressed="true"]{background:var(--sel-bg);color:var(--sel-text);border-color:transparent}
.tablewrap{overflow-x:auto;border-radius:18px;border:1px solid var(--border)}
table.t{width:100%;border-collapse:collapse;font-size:.88rem;min-width:560px}
table.t th{position:sticky;top:0;text-align:left;font-weight:500;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:12px 14px;background:var(--table-head);border-bottom:1px solid var(--border);white-space:nowrap}
table.t th button{border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;display:inline-flex;gap:4px;align-items:center}
table.t td{padding:11px 14px;border-bottom:1px solid var(--hairline);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tr:hover td{background:rgb(var(--ink) / .02)}
table.t td.n{font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--text-2)}
table.t .nm{font-weight:500}
table.t .sub{display:block;font-size:.76rem;color:var(--text-3)}
.meter{display:flex;align-items:center;gap:10px;min-width:140px}
.meter .bar2{flex:1}
.tsearch{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tsearch .search{flex:1 1 220px}

/* ---------- kru directory ---------- */
.kgroup{display:grid;gap:10px}
.kgroup h3{margin:0;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:500;display:flex;gap:8px;align-items:center}
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.kcard{--c:var(--ice);border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,var(--card-top),var(--card-bot));padding:16px;display:grid;gap:12px;min-width:0}
.kcard.fungs{--c:var(--coral)}
.kcard-h{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.kcard .av{width:38px;height:38px;font-size:.8rem;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);border-color:color-mix(in srgb,var(--c) 30%,transparent)}
.kcard-h b{font-weight:600;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kcard-h span{font-size:.8rem;color:var(--text-3)}
.verified{color:var(--ice);width:14px;height:14px}
.kcard .syr{font-size:.82rem;color:var(--text-2);display:grid;gap:6px;padding:10px 12px;border-radius:12px;background:rgb(var(--ink) / .025);border:1px solid var(--hairline)}
.kcard .syr b{font-weight:500;color:var(--text)}
.kcard-a{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- kelola ---------- */
.kgrid2{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:900px){.kgrid2{grid-template-columns:1fr 1fr}}
.list{display:grid;gap:8px}
.lrow0{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02)}
.lrow0 .tx{flex:1;min-width:0}
.lrow0 .tx b{font-weight:500;display:block;overflow-wrap:anywhere}
.lrow0 .tx span{font-size:.78rem;color:var(--text-3)}

/* ---------- kru picker (session form) ---------- */
.kpick{display:grid;gap:10px}
.kp-sel{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid var(--border-2);background:rgb(var(--ink) / .04)}
.kp-sel .av{width:34px;height:34px}
.kp-sel b{font-weight:600;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kp-sel span{font-size:.8rem;color:var(--text-3)}
.kp-search{position:relative}
.kp-search input{width:100%;border-radius:12px;border:1px solid var(--field-line);background:var(--field);padding:11px 14px 11px 38px;font-size:.95rem}
.kp-search input:focus{outline:none;border-color:color-mix(in srgb,var(--ice) 45%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--ice) 10%,transparent)}
.kp-search .i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-3)}
.kp-list{display:grid;gap:4px;max-height:260px;overflow:auto;padding:4px;border-radius:14px;border:1px solid var(--hairline);background:var(--tile)}
.kp-opt{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;border:0;background:none;text-align:left;color:var(--text);width:100%}
.kp-opt:hover,.kp-opt:focus-visible{background:rgb(var(--ink) / .06)}
.kp-opt .av{width:28px;height:28px;font-size:.66rem}
.kp-opt b{font-weight:500;font-size:.9rem}
.kp-opt span{display:block;font-size:.76rem;color:var(--text-3)}
.kp-opt.new{color:var(--ice)}
.kp-opt.new .av{background:color-mix(in srgb,var(--ice) 12%,transparent);color:var(--ice);border-style:dashed}
.kp-opt[disabled]{opacity:.4;cursor:not-allowed}
.kp-empty{padding:12px;font-size:.84rem;color:var(--text-3)}
.kp-new{display:grid;gap:12px;padding:14px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--ice) 35%,transparent);background:color-mix(in srgb,var(--ice) 4%,transparent)}
.kp-new .hint{margin-top:-4px}
.locknote{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;color:var(--text-3);padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--coral) 6%,transparent);border:1px solid color-mix(in srgb,var(--coral) 20%,transparent)}
.locknote .i{color:var(--coral);width:14px;height:14px;margin-top:2px;flex:none}

/* ---------- session card extras ---------- */
.forme{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:600;color:var(--ok);margin-left:8px;padding-left:8px;border-left:1px solid var(--border-2)}
.forme .i{width:12px;height:12px}
.chip.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.donebar{margin:12px 20px 0;display:flex;gap:10px;align-items:center;font-size:.84rem;color:var(--text-2);padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--ok) 6%,transparent);border:1px solid color-mix(in srgb,var(--ok) 20%,transparent);position:relative;z-index:1;flex-wrap:wrap}
.donebar .i{color:var(--ok)}
.donebar .linkbtn{margin-left:auto;font-size:.8rem}
.todo{margin:12px 20px 0;display:flex;gap:10px;align-items:center;font-size:.84rem;color:var(--gold-text);padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--gold) 7%,transparent);border:1px solid color-mix(in srgb,var(--gold) 25%,transparent);position:relative;z-index:1}
.todo .i{color:var(--gold)}
.roster li.absent .who b{text-decoration:line-through;color:var(--text-3)}
.badge-mini{font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-left:6px}

/* ---------- done sheet ---------- */
.drop{display:grid;place-items:center;gap:8px;text-align:center;padding:22px;border-radius:16px;border:1px dashed var(--border-2);background:rgb(var(--ink) / .02);color:var(--text-2);font-size:.88rem;cursor:pointer;position:relative}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .i{width:26px;height:26px;color:var(--text-3)}
.drop small{color:var(--text-3)}
.preview{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border)}
.preview img{display:block;width:100%;max-height:300px;object-fit:cover}
.preview button{position:absolute;top:8px;right:8px}
.checklist{display:grid;gap:8px;font-size:.86rem;color:var(--text-2)}
.checklist label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.checklist input{margin-top:3px;accent-color:var(--ok);width:16px;height:16px;flex:none}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:80;background:rgb(0 0 0 / .86);display:grid;place-items:center;padding:20px;backdrop-filter:blur(6px)}
.lightbox img{max-width:100%;max-height:82vh;border-radius:14px;box-shadow:0 30px 80px rgb(0 0 0 / .8)}
.lightbox .cap{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));text-align:center;font-size:.84rem;color:var(--text-2)}
.lightbox .x{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:16px;background:rgb(255 255 255 / .14);color:#fff;width:40px;height:40px;border-radius:50%}

/* forms in panels */
.form{display:grid;gap:14px}
.field select[multiple]{min-height:120px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--text-2);cursor:pointer}
.check input{margin-top:3px;width:16px;height:16px;accent-color:var(--ok);flex:none}
.kp-sel b,.kp-opt b{color:var(--text)}
.kp-opt .ftag,.kp-sel .ftag{display:inline-block;margin-left:4px;vertical-align:1px}
.kgrid{align-items:start}
.kcard{align-content:start}
.chips{align-items:center}
.vbody > *, .dash > *, #rkTable, #kvList{min-width:0}

@media (max-width:520px){
  .big{flex-direction:column;align-items:stretch}
  .big .arc{align-self:center}
  .vhead{padding-block:28px 4px}
  .hello .avatar{width:44px;height:44px}
}
.vbody{padding-bottom:96px}

.kp-opt .av,.kp-sel .av{display:grid!important;place-items:center;flex:none}
.kp-opt > span:nth-child(2) > span:not(.ftag),.kp-sel > span:nth-child(2) > span:not(.ftag){display:block;font-size:.76rem;color:var(--text-3)}
.addkru b{display:block;font-weight:500}
.addkru small{display:block;color:var(--text-3);font-size:.78rem;font-weight:400;margin-top:2px}
.sheet:focus{outline:none}
.addkru b{color:var(--text)}

/* =====================================================================
   v3: theme extras, avatars with photos, compact list view, initiator,
   preferences, browser notifications, important files, history
   ===================================================================== */
:root{ --ring-bg:#0e0e11; --gb:12px; --gb-sm:4px; --fab-bg:var(--primary); --fab-text:var(--on-primary); --row-hover:rgb(255 255 255 / .025) }
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){ --ring-bg:#ffffff; --gb:0px; --gb-sm:0px; --fab-bg:#c2e7ff; --fab-text:#001d35; --row-hover:#f6f8fc }}
:root[data-theme="light"]{ --ring-bg:#ffffff; --gb:0px; --gb-sm:0px; --fab-bg:#c2e7ff; --fab-text:#001d35; --row-hover:#f6f8fc }
:root[data-theme="dark"]{ --ring-bg:#0e0e11; --gb:12px; --gb-sm:4px; --fab-bg:var(--primary); --fab-text:var(--on-primary); --row-hover:rgb(255 255 255 / .025) }

/* glows only where they read well (dark); light mode stays flat like Google's surfaces */
.dot{box-shadow:0 0 var(--gb) var(--c)}
.dotbadge{box-shadow:0 0 var(--gb) var(--coral)}
.ring path.on{filter:drop-shadow(0 0 var(--gb-sm) color-mix(in srgb,var(--c) 60%,transparent))}
.bigring path.on{filter:drop-shadow(0 0 calc(var(--gb-sm) * 1.5) color-mix(in srgb,var(--c) 70%,transparent))}
.arc .bar{filter:drop-shadow(0 0 calc(var(--gb-sm) * 1.5) color-mix(in srgb,var(--c,var(--coral)) 55%,transparent))}
.fab{background:var(--fab-bg);color:var(--fab-text)}
.card{transition:border-color .3s,box-shadow .3s}
@media (hover:hover){.card:hover{box-shadow:var(--sh-card-hover)}}
.logo{color:var(--text)}
.logo .lg-c{stroke:var(--coral)}

/* bottom bar: Material-style pill behind the active icon */
@media (max-width:760px){
  .bottombar a .i{width:56px;height:30px;padding:5px 18px;border-radius:999px;transition:background .25s var(--ease),color .2s}
  .bottombar a[aria-current="page"] .i{background:var(--nav-active-bg);color:var(--nav-active-text)}
  .bottombar .dotbadge{top:6px;right:calc(50% - 22px)}
}

/* ---------- avatars (Google photo or initials) ---------- */
.av,.avatar{overflow:hidden;flex:none}
.av img,.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.av.xs{width:20px;height:20px;font-size:.5rem;letter-spacing:0}
.av.sm{width:26px;height:26px;font-size:.6rem}
.av.lg{width:56px;height:56px;font-size:1.05rem}
.roster li.me .av{box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 55%,transparent)}
.roster li.me .av:has(img){background:none}

/* ---------- initiator ---------- */
.leadline{margin:12px 20px 0;display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-3);min-width:0;position:relative;z-index:1}
.leadline .ll-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leadline .ll-tx b{color:var(--text-2);font-weight:500}
.leadline .linkbtn{margin-left:auto;flex:none;font-family:var(--f-mono);font-size:.76rem;gap:3px;padding:4px 8px;border-radius:999px;background:rgb(var(--ink) / .04);border:1px solid var(--hairline)}
.leadline .linkbtn:hover{border-color:var(--border-2)}
.leadline .linkbtn .i{width:12px;height:12px}
.leadtag{display:inline-block;font-family:var(--f-sans);font-size:.58rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);border:1px solid var(--border-2);padding:0 6px;border-radius:999px;margin-left:6px;vertical-align:2px;line-height:1.6}
.racts{display:flex;align-items:center;gap:2px}
.racts .linkbtn{font-size:.72rem;white-space:nowrap}
@media (hover:hover){.roster li .racts .linkbtn{opacity:0;transition:opacity .2s}.roster li:hover .racts .linkbtn,.roster li .racts .linkbtn:focus-visible{opacity:1}}
.roster li > .who b{display:flex;align-items:center;min-width:0}
.roster li > .who b > :first-child{min-width:0}

/* ---------- jadwal body + login gate ---------- */
.jbody{display:flex;flex-direction:column;gap:22px;padding-block:26px 96px}
.seg.layout button{padding:7px 10px}
.seg.layout button .i{width:17px;height:17px}
@media (max-width:760px){ .toolbar .seg.layout{order:2} .toolbar .fbtn{order:2} }
@media (max-width:420px){ .fbtn .fl{display:none} .fbtn{width:42px;padding:0} .fbtn .cnt{position:absolute;top:-4px;right:-4px} }
.gatecard{max-width:640px;margin:4px 0 88px;padding:26px;border-radius:var(--r-lg);border:1px solid var(--border);background:linear-gradient(180deg,var(--card-top),var(--card-bot));box-shadow:var(--sh-card);display:grid;gap:20px}
.gc-h{display:flex;gap:14px;align-items:flex-start}
.gc-h > .i{width:22px;height:22px;color:var(--coral);margin-top:2px}
.gc-h b{display:block;font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
.gc-h span{display:block;color:var(--text-2);font-size:.9rem;margin-top:2px}
.gc-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gc-list li{display:flex;gap:12px;align-items:center;font-size:.9rem;color:var(--text-2)}
.gc-list .i{color:var(--ice)}

/* ---------- compact list view ---------- */
.lrows{display:grid;gap:8px}
.lrow{--c:var(--ice);position:relative;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,var(--card-top),var(--card-bot));box-shadow:var(--sh-panel);min-width:0;transition:border-color .25s,box-shadow .25s,background .25s}
.lrow.fungs{--c:var(--coral)}
.lrow::before{content:"";position:absolute;left:-1px;top:18px;width:3px;height:36px;border-radius:0 3px 3px 0;background:var(--c);opacity:.85}
.lrow.done{opacity:.6}
.lrow.done::before{opacity:.35}
@media (hover:hover){.lrow:hover{border-color:var(--border-2);box-shadow:var(--sh-card-hover)}}
.lrow.open{border-color:var(--border-2);box-shadow:var(--sh-card)}
.lrow.flash{animation:flash 1.6s var(--ease) 2}
.lr-head{display:flex;align-items:center;gap:6px;padding-right:12px;min-width:0}
.lr-main{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:10px 6px 10px 14px;border:0;background:none;text-align:left;color:inherit;border-radius:18px}
.lr-main:focus-visible{outline-offset:-2px}
.lr-date{width:46px;height:50px;border-radius:12px;border:1px solid var(--border);background:var(--tile);display:grid;place-content:center;text-align:center;line-height:1.1}
.lr-date span{font-size:.56rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.lr-date b{font-size:1.12rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lr-date .i{width:18px;height:18px;color:var(--text-3)}
.lr-tx{min-width:0;display:grid;gap:2px}
.lr-tx > b{display:flex;align-items:center;gap:7px;min-width:0;font-weight:600;font-size:.96rem;letter-spacing:-.01em}
.lr-names{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-tx > b .ftag,.lr-tx > b .forme,.lr-tx > b .madeby{flex:none;white-space:nowrap}
.lr-tx > b .forme,.lr-tx > b .madeby{margin-left:2px}
.lr-meta{font-size:.8rem;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-lead{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--text-3);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-right{display:flex;align-items:center;gap:10px}
.lr-count{font-family:var(--f-mono);font-size:.78rem;color:var(--text-2);font-variant-numeric:tabular-nums}
.lr-count.full{color:var(--ok)}
.lr-main > .chev{color:var(--text-3);transition:transform .25s var(--ease)}
.lrow.open .lr-main > .chev{transform:rotate(90deg)}
.lr-act{flex:none;display:flex}
.lr-act:empty{display:none}
.stack{display:flex;align-items:center}
.stack .av{margin-left:-6px;box-shadow:0 0 0 2px var(--ring-bg);font-size:.54rem;letter-spacing:-.02em}
.stack .av:first-child{margin-left:0}
.stack .av.more{font-size:.58rem;font-family:var(--f-mono);background:var(--tile);color:var(--text-2)}
.lr-body{border-top:1px solid var(--hairline);margin-top:2px}
.lr-body .meta{margin:14px 18px 0}
.lr-body .leadline,.lr-body .donebar,.lr-body .todo{margin-left:18px;margin-right:18px}
.lr-body .note{margin:12px 18px 0}
.lr-body .roster{margin-top:14px}
.lr-body .c-foot{padding:10px 18px 16px}
@media (max-width:640px){
  .lr-main{grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding-left:12px}
  .lr-main > .chev{display:none}
  .lr-right{flex-direction:column;align-items:flex-end;gap:5px}
  .lr-right .stack{display:none}
  .lr-right .chip{font-size:.68rem;padding:2px 8px}
  .lr-tx > b .madeby{display:none}
  .lr-head{padding-right:10px}
  .lr-body .meta,.lr-body .note{margin-left:14px;margin-right:14px}
  .lr-body .leadline,.lr-body .donebar,.lr-body .todo{margin-left:14px;margin-right:14px}
  .lr-body .c-foot{padding:10px 14px 14px}
}

@media (prefers-reduced-motion:no-preference){ .lr-body{animation:rise .35s var(--ease) both} }

/* ---------- preferences popover ---------- */
.prefs{display:grid;gap:14px;padding:4px 12px 14px}
.prow{display:grid;gap:7px}
.prow > span{font-size:.76rem;color:var(--text-3)}
.pseg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--seg-bg);border:1px solid var(--border)}
.pseg button{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:none;padding:8px 8px;border-radius:10px;font-size:.82rem;font-weight:500;color:var(--text-3);transition:background .2s,color .2s,box-shadow .2s}
.pseg button:hover{color:var(--text)}
.pseg button[aria-pressed="true"]{background:var(--thumb);color:var(--text);box-shadow:var(--thumb-sh)}
.pseg .i{width:15px;height:15px}

/* ---------- browser notifications ---------- */
.permcard{display:flex;align-items:center;gap:10px;margin:2px 4px 8px;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:rgb(var(--ink) / .03);font-size:.8rem;line-height:1.45;color:var(--text-2)}
.permcard > .i{color:var(--ice);flex:none}
.permcard.granted > .i{color:var(--ok)}
.permcard.denied > .i{color:var(--danger)}
.permcard > span{flex:1;min-width:0}
.permcard .btn{flex:none}
.notifcard{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-color:color-mix(in srgb,var(--ice) 30%,var(--border))}
.notifcard > .i{width:22px;height:22px;color:var(--ice)}
.notifcard > div{flex:1 1 260px;display:grid;gap:2px;min-width:0}
.notifcard b{font-weight:600}
.notifcard > div > span{font-size:.84rem;color:var(--text-3)}

/* ---------- important files ---------- */
#filesSec{transition:border-color .2s,box-shadow .2s}
#filesSec.dragging{border-color:var(--ice);box-shadow:0 0 0 4px color-mix(in srgb,var(--ice) 18%,transparent)}
.fdrop{display:flex;gap:10px;align-items:stretch;margin-bottom:14px;flex-wrap:wrap}
.fdrop .drop{flex:1 1 300px}
.fdrop > .btn{height:auto;min-height:44px}
.drop.sm{grid-template-columns:auto 1fr;justify-items:start;align-items:center;gap:2px 14px;text-align:left;padding:14px 16px}
.drop.sm .i{grid-row:span 2;width:22px;height:22px}
.drop.sm b{color:var(--text);font-weight:500}
.drop:hover{border-color:var(--text-3)}
.flist{display:grid;gap:8px}
.frow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02);transition:border-color .2s}
.frow:hover{border-color:var(--border)}
.ficon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--ice) 12%,transparent);color:var(--ice);flex:none}
.ficon .i{width:18px;height:18px}
.ficon.lnk{background:color-mix(in srgb,var(--coral) 12%,transparent);color:var(--coral)}
.ftx{min-width:0;display:grid;gap:1px}
.ftx b{font-weight:500;overflow-wrap:anywhere;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ftx > span{font-size:.78rem;color:var(--text-3)}
.ftx > .fnote{color:var(--text-2);font-size:.8rem}
.facts{display:flex;gap:6px;align-items:center}
.btn.icon.sm{width:34px}
.newtag{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);padding:0 6px;border-radius:999px;line-height:1.6}
.progress{height:6px;border-radius:999px;background:rgb(var(--ink) / .08);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--ice);border-radius:inherit;transition:width .2s}
@media (max-width:560px){
  .frow{grid-template-columns:auto minmax(0,1fr)}
  .facts{grid-column:2;justify-content:flex-start;flex-wrap:wrap}
}

/* ---------- rekap table people ---------- */
.tperson{display:flex;align-items:center;gap:10px;min-width:0}
.tperson > span:last-child{min-width:0}
table.t .you{color:var(--ice)}
tr.meRow td{background:color-mix(in srgb,var(--ice) 5%,transparent)}

/* ---------- sheets: contact, ticket, detail, history ---------- */
.contact{display:flex;gap:14px;align-items:center}
.contact b{display:block;font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
.contact span{font-size:.84rem;color:var(--text-3)}
.lineid{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;border-radius:14px;border:1px solid var(--border);background:var(--tile)}
.lineid code{font-family:var(--f-mono);font-size:1rem;overflow-wrap:anywhere}
.tk-person{display:inline-flex;align-items:center;gap:10px;margin-top:8px;text-align:left}
.tk-person > span:last-child{display:grid}
.tk-person .nm{margin-top:0}
.callout:has(> .av){align-items:center}
.callout b{color:var(--text);font-weight:600}
.d-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:-8px}
.sheet .leadline,.sheet .donebar,.sheet .todo{margin:0}
.sheet .roster{margin:0;border:1px solid var(--hairline);border-radius:16px;padding:6px}
.sheet .roster li{padding:6px 8px;grid-template-columns:24px 30px minmax(0,1fr) auto}
.history{display:grid;gap:12px}
.history .sub-h{margin:0}
.history ol{list-style:none;margin:0;padding:0;display:grid}
.history li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;padding:6px 0;position:relative}
.history li::before{content:"";position:absolute;left:6px;top:20px;bottom:-6px;width:1px;background:var(--border)}
.history li:last-child::before{display:none}
.hdot{width:9px;height:9px;border-radius:50%;margin:6px 0 0 2px;background:var(--text-4);box-shadow:0 0 0 3px var(--sheet-a)}
.hdot.create{background:var(--ice)}
.hdot.join,.hdot.done,.hdot.present{background:var(--ok)}
.hdot.leave,.hdot.kick,.hdot.absent{background:var(--danger)}
.hdot.edit,.hdot.undo{background:var(--gold)}
.hdot.lead,.hdot.merge{background:var(--coral)}
.history li b{display:block;font-weight:500;font-size:.86rem;line-height:1.4}
.history li > span:last-child > span{display:block;font-size:.76rem;color:var(--text-3)}

/* ---------- small helpers ---------- */
@media (max-width:380px){ .hide-sm{display:none} }
.btn .i{flex:none}

.lrow.open .lr-lead{display:none}
@media (min-width:900px){ .lr-body .roster{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);grid-template-columns:1fr 1fr;column-gap:8px} }
@media (max-width:640px){
  .lr-main{gap:10px;padding:10px 4px 10px 12px}
  .lr-date{width:42px;height:48px}
  .lr-tx > b{font-size:.92rem;gap:6px}
  .lr-tx > b .ftag{display:none}
  .lr-tx > b .forme{font-size:0;gap:0;margin-left:0;padding-left:6px}
  .lr-tx > b .forme .i{width:13px;height:13px}
  .lr-right .chip{font-size:.64rem;padding:2px 7px}
  .lr-act .btn.sm{padding:0 12px;height:32px}
  .lr-head{gap:4px}
}
@media (min-width:900px){
  .lr-body .c-foot > .btn:first-child{flex:0 1 auto;min-width:220px;margin-right:auto}
  .lr-body .c-foot > .status{flex:1}
}
.btn.icon.danger{width:auto;padding:0 12px;font-size:.78rem}
.fdrop > .btn{align-self:center}
.lr-lead .ll-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- version 2 → 3 upgrade ---------- */
.notice.warnote{align-items:center;color:var(--gold-text);border-color:color-mix(in srgb,var(--gold) 30%,transparent);background:color-mix(in srgb,var(--gold) 7%,transparent)}
.notice.warnote .i{color:var(--gold);margin-top:0}
.notice.warnote span{flex:1;min-width:0}
.notice .btn{flex:none}
@media (max-width:520px){ .notice.warnote{flex-wrap:wrap} .notice.warnote .btn{margin-left:26px} }
.migres{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;font-size:.86rem;margin-bottom:12px}
.migres.ok{color:var(--text);background:color-mix(in srgb,var(--ok) 8%,transparent);border:1px solid color-mix(in srgb,var(--ok) 25%,transparent)}
.migres.ok .i{color:var(--ok)}
.migres.warn{color:var(--gold-text);background:color-mix(in srgb,var(--gold) 7%,transparent);border:1px solid color-mix(in srgb,var(--gold) 28%,transparent)}
.migres.warn .i{color:var(--gold)}
.migfail{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.migfail li{display:grid;gap:2px;padding:8px 12px;border-radius:10px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02);font-size:.84rem}
.migfail code{font-family:var(--f-mono);font-size:.72rem;color:var(--text-3)}
.migfail span{color:var(--text-3);font-size:.8rem}
.hdot.migrate{background:var(--ice)}

/* ---------- syarat checklist ---------- */
.clprog{display:grid;gap:6px;font-size:.78rem;color:var(--text-3)}
.clprog i{display:block;height:6px;border-radius:999px;background:rgb(var(--ink) / .08);position:relative;overflow:hidden}
.clprog i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:inherit;background:var(--coral);transition:width .4s var(--ease)}
.clprog.ok{color:var(--ok)}
.clprog.ok i::after{background:var(--ok)}
.req .ck.auto{border-style:dashed}
.req li.ok .ck.auto{border-style:solid}
.cl-no{font-family:var(--f-mono);font-size:.74rem;color:var(--text-4)}
.req li.ok .cl-no{color:var(--text-3)}
.req button.ck:hover{border-color:var(--text-3)}

/* moderator checklist editor */
.cledit{display:grid;gap:6px}
.cl-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:start;padding:6px 6px 6px 10px;border-radius:12px;border:1px solid var(--hairline);background:var(--field)}
.cl-row .cl-no{padding-top:9px}
.cl-row textarea{border:0;background:none;resize:none;padding:7px 0;font-size:.9rem;line-height:1.4;min-height:0;field-sizing:content;width:100%}
.cl-row textarea:focus{outline:none}
.cl-row:focus-within{border-color:color-mix(in srgb,var(--ice) 45%,transparent)}
.cl-btns{display:flex;gap:0}
.cl-btns .x{width:28px;height:28px}
.cl-btns .x:disabled{opacity:.25;cursor:default}
.cl-btns .i.up{transform:rotate(-90deg)}
.cl-btns .i.down{transform:rotate(90deg)}
.cl-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start;margin-top:4px}
.cl-add textarea{width:100%;border-radius:12px;border:1px dashed var(--border-2);background:var(--field);padding:10px 12px;font-size:.9rem;resize:vertical;min-height:44px}
.cl-add textarea:focus{outline:none;border-style:solid;border-color:color-mix(in srgb,var(--ice) 45%,transparent)}
.cl-add .btn{height:44px}

/* ---------- database: fungsionaris cards ---------- */
.fgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
.fcard{gap:14px}
.fcard.ready{border-color:color-mix(in srgb,var(--ok) 35%,var(--border))}
.fcl{display:grid;gap:10px;padding:12px 14px;border-radius:14px;background:rgb(var(--ink) / .025);border:1px solid var(--hairline)}
.fcl .req li{font-size:.86rem}
.tabbar button .n{font-family:var(--f-mono);font-size:.72rem;margin-left:6px;opacity:.6}

/* ---------- friends picker ---------- */
.frsel{display:flex;flex-wrap:wrap;gap:6px}
.frchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 4px 0 4px;border-radius:999px;border:1px solid var(--border-2);background:rgb(var(--ink) / .04);font-size:.82rem}
.frchip .av{margin-right:2px}
.frchip button{border:0;background:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--text-3)}
.frchip button:hover{background:rgb(var(--ink) / .1);color:var(--text)}
.frchip button .i{width:12px;height:12px}
.fr-list{max-height:240px}
.fr-list .kp-opt .av{width:28px;height:28px;font-size:.66rem}
.fr-list .kp-opt[aria-pressed="true"]{background:color-mix(in srgb,var(--ice) 10%,transparent)}
.fr-list .kp-opt .tchip{padding:3px 6px}
#frbox,#afPick,#frPick,#j-fr{display:grid;gap:10px}
#afPick{gap:10px}

/* =====================================================================
   v3.3: waitlist, time poll, contact board, clashes, week calendar, tour
   ===================================================================== */
.clash{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:600;color:var(--danger-text);font-style:normal}
.clash .i{width:12px;height:12px}
.c-head .clash,.lr-tx > b .clash{margin-left:8px;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--danger) 10%,transparent);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);flex:none}
.pollchip{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:.66rem;font-weight:600;color:var(--ice);flex:none}
.pollchip .i{width:12px;height:12px}

/* waitlist */
.waitline,.pollline{margin:10px 20px 0;display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-3);position:relative;z-index:1;min-width:0}
.waitline > .i,.pollline > .i{color:var(--gold);flex:none}
.pollline > .i{color:var(--ice)}
.waitline b{color:var(--text-2);font-weight:600}
.waitline > span:last-child,.pollline > span{min-width:0}
.pollline .linkbtn{margin-left:auto;flex:none;font-size:.78rem}
.pollline .linkbtn .i{width:12px;height:12px}
.card .waitline{margin-bottom:-4px}
.lr-body .waitline,.lr-body .pollline{margin-left:18px;margin-right:18px}
@media (max-width:640px){ .lr-body .waitline,.lr-body .pollline{margin-left:14px;margin-right:14px} }
.waitbox{display:grid;gap:10px}
.waitbox .sub-h{margin:0}
.waitbox ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.waitbox li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02)}
.waitbox li span{display:grid;line-height:1.25}
.waitbox li b{font-weight:500;font-size:.88rem}
.waitbox li code{font-family:var(--f-mono);font-size:.72rem;color:var(--text-3)}
.waitbox li small{font-size:.74rem;color:var(--text-3)}

/* time poll */
.pollbox{display:grid;gap:10px;padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--ice) 25%,var(--border));background:color-mix(in srgb,var(--ice) 4%,transparent)}
.popt{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--hairline);background:var(--field)}
.popt .ck{width:22px;height:22px;border-radius:7px;border:1px solid var(--border-2);display:grid;place-items:center;background:none;padding:0;color:var(--on-fill)}
.popt .ck .i{width:12px;height:12px;stroke-width:2.6;opacity:0}
.popt.on .ck{background:var(--ice);border-color:var(--ice)}
.popt.on .ck .i{opacity:1}
.po-tx{display:grid;gap:4px;min-width:0}
.po-tx b{font-weight:500;font-size:.88rem}
.po-tx i{display:block;height:4px;border-radius:999px;background:rgb(var(--ink) / .07);position:relative;overflow:hidden}
.po-tx i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--ice);border-radius:inherit}
.po-n{font-family:var(--f-mono);font-size:.8rem;color:var(--text-2);min-width:1.2em;text-align:right}
.popt .btn.sure{background:var(--primary);color:var(--on-primary)}
@media (max-width:480px){ .popt{grid-template-columns:auto minmax(0,1fr) auto} .popt .stack{display:none} .popt .btn{grid-column:2 / -1;justify-self:start} }
.prow2{align-items:end}

/* board: contacting + looking */
.board{display:grid;gap:12px;padding:12px 14px;border-radius:14px;border:1px dashed var(--border-2)}
.bd-sec{display:grid;gap:8px}
.bd-h{margin:0;display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.bd-h .i{width:13px;height:13px}
.bd-h span{font-family:var(--f-mono);letter-spacing:0;color:var(--text-2)}
.claim{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;font-size:.84rem;color:var(--text-2)}
.claim .av{align-self:start;margin-top:1px}
.claim b{color:var(--text);font-weight:600}
.cl-tx{min-width:0}
.cl-tx small{display:block;font-size:.74rem;color:var(--text-3);overflow-wrap:anywhere}
.claim.mine{padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--coral) 7%,transparent);border:1px solid color-mix(in srgb,var(--coral) 25%,transparent)}
.cl-act{display:flex;gap:6px;align-items:center}
.lks{display:flex;flex-wrap:wrap;gap:6px}
.lk{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 4px;border-radius:999px;border:1px solid var(--border);background:rgb(var(--ink) / .03);font-size:.8rem;color:var(--text-2)}
.lk.ready{border-color:color-mix(in srgb,var(--ok) 35%,var(--border))}
.lk > .i{width:12px;height:12px;color:var(--ok)}
.lk .linkbtn{padding:0 0 0 4px;margin-left:2px;border-left:1px solid var(--border);color:var(--ice);font-weight:600;font-size:.76rem}
.bd-add{justify-self:start;font-size:.8rem;color:var(--text-2)}
.bd-add .i{width:13px;height:13px}
.tgt .board{margin-top:-2px}

/* week calendar */
.week-wrap{display:grid;gap:14px}
.wk-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wk-nav{display:flex;align-items:center;gap:6px}
.wk-nav b{font-weight:600;letter-spacing:-.01em;min-width:150px;text-align:center}
.wk-n{margin-left:auto;font-size:.82rem}
.i.flip{transform:rotate(180deg)}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.wk-day{min-width:0;display:grid;grid-template-rows:auto 1fr;border-radius:16px;border:1px solid var(--border);background:linear-gradient(180deg,var(--card-top),var(--card-bot));box-shadow:var(--sh-panel);overflow:hidden;min-height:180px}
.wk-day header{display:flex;align-items:baseline;gap:6px;padding:10px 12px 8px;border-bottom:1px solid var(--hairline)}
.wk-day header span{font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.wk-day header b{font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
.wk-day header em{margin-left:auto;font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ice)}
.wk-day.today{border-color:color-mix(in srgb,var(--ice) 45%,var(--border))}
.wk-day.today header{background:color-mix(in srgb,var(--ice) 7%,transparent)}
.wk-day.past{opacity:.6}
.wk-evs{display:grid;gap:6px;padding:8px;align-content:start}
.wk-evs.row{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));padding:0}
.wk-none{color:var(--text-4);font-size:.8rem;padding:4px}
.wk-ev{--c:var(--ice);display:grid;gap:2px;text-align:left;padding:8px 9px 8px 11px;border-radius:10px;border:1px solid var(--border);background:var(--field);color:var(--text);position:relative;overflow:hidden;min-width:0;transition:border-color .2s,transform .15s var(--ease)}
.wk-ev::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.wk-ev.fungs{--c:var(--coral)}
.wk-ev:hover{border-color:var(--border-2)}
.wk-ev:active{transform:scale(.98)}
.wk-ev.me{background:color-mix(in srgb,var(--c) 9%,var(--field));border-color:color-mix(in srgb,var(--c) 35%,var(--border))}
.wk-ev.done{opacity:.55}
.wk-t{font-family:var(--f-mono);font-size:.7rem;color:var(--text-3)}
.wk-ev b{font-size:.82rem;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wk-m{font-size:.7rem;color:var(--text-3);display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.wk-m .i{width:11px;height:11px}
.wk-undated .sub-h{margin:0 0 8px}
@media (max-width:900px){
  .week{grid-template-columns:1fr;gap:6px}
  .wk-day{grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto;min-height:0}
  .wk-day header{flex-direction:column;align-items:center;justify-content:center;gap:0;border-bottom:0;border-right:1px solid var(--hairline);padding:8px 4px}
  .wk-day header em{margin:2px 0 0;font-size:.56rem}
  .wk-day.empty{opacity:.5}
  .wk-day.empty .wk-evs{padding:6px 10px}
  .wk-evs{grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}
}

/* first-visit tour */
.tour{position:fixed;inset:0;z-index:90}
.tour-hole{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px var(--scrim),0 0 0 2px color-mix(in srgb,var(--ice) 70%,transparent);transition:all .3s var(--ease);pointer-events:none}
.tour-card{position:fixed;z-index:91;display:grid;gap:8px;padding:18px;border-radius:20px;border:1px solid var(--border-2);background:linear-gradient(180deg,var(--sheet-a),var(--sheet-b));box-shadow:var(--sh-sheet)}
.tour-card h4{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.tour-card p{margin:0;font-size:.88rem;color:var(--text-2);line-height:1.5}
.tour-card .tour-n{font-family:var(--f-mono);font-size:.7rem;color:var(--text-3)}
@media (prefers-reduced-motion:no-preference){ .tour-card{animation:pop .35s var(--ease) both} }

/* H-1 preparation */
.req.prep li span{font-size:.86rem}
/* the week calendar shows past and upcoming days together, so the period switch doesn't apply */
#v-jadwal.wk-mode .toolbar .segs .seg:first-child,#v-jadwal.wk-mode .rcount{display:none}
.claim.mine{grid-template-columns:auto minmax(0,1fr)}
.claim.mine .cl-act{grid-column:2;justify-self:start}
@media (max-width:640px){ .lr-tx > b .pollchip{font-size:0;gap:0} .lr-tx > b .pollchip .i{width:13px;height:13px} }

/* =====================================================================
   v3.4: H-1 attendance check, moderators, bidang list
   ===================================================================== */
.confchip{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:1px 7px;border-radius:999px;font-size:.66rem;font-weight:600;color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);flex:none;white-space:nowrap}
.confchip .i{width:11px;height:11px}
.confchip.need{color:var(--gold-text);border-color:color-mix(in srgb,var(--gold) 40%,transparent);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.okmini{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font-size:.62rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ok)}
.okmini .i{width:11px;height:11px}
.confbox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--border));background:color-mix(in srgb,var(--gold) 7%,transparent)}
.confbox > span:first-child,.confbox.ok > span{flex:1 1 220px;display:grid;gap:2px;min-width:0}
.confbox b{font-weight:600}
.confbox small{font-size:.8rem;color:var(--text-3)}
.confbox.ok{border-color:color-mix(in srgb,var(--ok) 30%,var(--border));background:color-mix(in srgb,var(--ok) 7%,transparent)}
.confbox.ok > .i{color:var(--ok);width:20px;height:20px}
.cf-act{display:flex;gap:8px;flex-wrap:wrap}
.mt.ask{border-color:color-mix(in srgb,var(--gold) 45%,var(--border))}
.mt.ask > .i{color:var(--gold)}
#kMods .lrow0 > .i{color:var(--text-3)}
#bidSec .cl-row input{border:0;background:none;padding:7px 0;font-size:.9rem;width:100%}
#bidSec .cl-row input:focus{outline:none}
#bidSec .cl-add input{width:100%;border-radius:12px;border:1px dashed var(--border-2);background:var(--field);padding:10px 12px;font-size:.9rem;height:44px}
#bidSec .cl-add input:focus{outline:none;border-style:solid;border-color:color-mix(in srgb,var(--ice) 45%,transparent)}
@media (max-width:640px){ .lr-tx > b .confchip{font-size:.6rem;padding:0 5px;margin-left:4px} }

/* =====================================================================
   v3.5: manual progress (interviews outside the website, fungsionaris signatures)
   ===================================================================== */
.counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cnt{--c:var(--ice);display:grid;gap:7px;align-content:start;padding:16px;border-radius:16px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02);min-width:0}
.cnt.f{--c:var(--coral)}
.cnt.t{--c:var(--ok)}
.cnt-l{font-size:.78rem;color:var(--text-3);display:flex;align-items:center;gap:6px}
.cnt-l::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.cnt-n{font-size:2rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cnt-n small{font-size:.95rem;font-weight:500;color:var(--text-3);margin-left:5px;letter-spacing:0}
.cbar{display:block;height:6px;border-radius:99px;background:rgb(var(--ink) / .07);overflow:hidden}
.cbar i{display:block;height:100%;border-radius:inherit;background:var(--c);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.cnt-s{font-size:.78rem;color:var(--text-2);line-height:1.4}
.marks{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mk-l{font-size:.74rem;color:var(--text-3);margin-right:2px}
.mk{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.76rem;line-height:1.3;padding:4px 10px;border-radius:999px;border:1px dashed var(--border-2);color:var(--text-2);background:transparent;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.mk .i{width:12px;height:12px;opacity:.4}
.mk:hover{border-style:solid;color:var(--text)}
.mk.on{border-style:solid;color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.mk.on .i{opacity:1}
.mk.locked{cursor:default;opacity:.85}
.mk:disabled{opacity:.55;cursor:progress}
.srow.man{border-style:dashed}
.tchip.man{border-style:dashed}
.mnsum{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.84rem;color:var(--text-2);margin:2px 0 4px}
.mnsum b{font-size:1.15rem;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;margin-right:2px}
.mnq{flex:none;width:100%}
.mnlist{display:grid;gap:6px;max-height:min(50vh,440px);overflow:auto;overscroll-behavior:contain;padding:2px;margin:0 -2px}
.mnrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02)}
.mnrow.on{border-color:color-mix(in srgb,var(--ok) 30%,var(--hairline));background:color-mix(in srgb,var(--ok) 4%,transparent)}
.mnrow .tx{min-width:0;display:grid;gap:2px}
.mnrow .tx b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mnrow .tx span{font-size:.78rem;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mn-d{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--text-3)}
.mn-d input{border-radius:10px;border:1px solid var(--field-line);background:var(--field);padding:6px 10px;font-size:.86rem;color:var(--text)}
.mn-d input:focus{outline:none;border-color:color-mix(in srgb,var(--ice) 45%,transparent)}
@media (max-width:760px){
  .counts{grid-template-columns:1fr;gap:8px}
  .cnt{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:12px 14px}
  .cnt-l{grid-column:1;grid-row:1}
  .cnt-n{grid-column:2;grid-row:1 / span 2;font-size:1.6rem;text-align:right}
  .cnt-s{grid-column:1;grid-row:2}
  .cbar{grid-column:1 / -1;grid-row:3}
}
@media (max-width:420px){ .mnrow{grid-template-columns:1fr} .mn-a{justify-content:flex-start} }

/* =====================================================================
   v3.6: new-version banner, undo, reports, laggers, cakru database
   ===================================================================== */
.stalebar{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:90;width:min(620px,calc(100% - 24px));
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--toast-bg);color:var(--toast-text);border:1px solid color-mix(in srgb,var(--gold) 50%,var(--toast-line));
  box-shadow:var(--sh-pop);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:.86rem}
.stalebar > .i{color:var(--gold);flex:none;width:20px;height:20px}
.stalebar > span{flex:1;min-width:0;display:grid;gap:2px}
.stalebar b{font-weight:600}
.toast .tact{margin-left:6px;border:0;background:none;color:var(--ice);font:inherit;font-weight:600;padding:2px 4px;cursor:pointer;white-space:nowrap}
.toast .tact:hover{text-decoration:underline}
#v-jadwal.past-mode .toolbar .segs .seg:nth-child(2){display:none}
.stalebar:not([hidden]) ~ .toast{bottom:calc(110px + env(safe-area-inset-bottom,0px))}
@media (max-width:760px){ .stalebar{bottom:calc(78px + env(safe-area-inset-bottom,0px))} .stalebar:not([hidden]) ~ .toast{bottom:calc(170px + env(safe-area-inset-bottom,0px))} }
.counts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cnt.c{--c:var(--gold)}
.cnt-p{font-size:.76rem;color:var(--coral-text);font-weight:500}
.cnt-p.ok{color:var(--ok)}
.tchip.warn{color:var(--gold-text);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
@media (max-width:760px){ .cnt-p{grid-column:1 / -1;grid-row:4} }
/* Database → Cakru */
.ckhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:.88rem;color:var(--text-2)}
.ckhead .push{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.ckgrid{margin-top:4px}
.ccard{--c:var(--gold)}
.ccard.me{border-color:color-mix(in srgb,var(--gold) 40%,var(--border))}
.ccard.did{--c:var(--ok)}
.ccard .kcard-h .av{object-fit:cover}
.bio{font-size:.86rem;line-height:1.55;color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere;padding:10px 12px;border-radius:12px;background:rgb(var(--ink) / .025);border:1px solid var(--hairline)}
.bio a{color:var(--ice);text-decoration:underline;text-underline-offset:2px}
.bio.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.bio-more{justify-self:start;margin-top:-6px;font-size:.8rem}
.ccard .kcard-a{align-items:center}
/* Kelola: who is behind, problem reports */
#lagSec,#repSec{grid-column:1 / -1}
.lag-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.86rem;color:var(--text-2);margin-bottom:10px}
.laglist{display:grid;gap:6px;max-height:440px;overflow:auto;overscroll-behavior:contain;padding:2px}
.lgrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02)}
.lgrow .tx{min-width:0;display:grid}
.lgrow .tx b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgrow .tx span{font-size:.76rem;color:var(--text-3)}
.lgrow .chips{flex-wrap:nowrap}
.lag-un{margin-top:18px;padding-top:14px;border-top:1px solid var(--hairline)}
.rep{padding:12px 14px;border-radius:14px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02);display:grid;gap:8px}
.rep-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.rep-h b{font-weight:600}
.rep-h span{font-size:.76rem;color:var(--text-3)}
.rep p{margin:0;font-size:.88rem;white-space:pre-wrap;overflow-wrap:anywhere}
.rep details summary{cursor:pointer;font-size:.78rem;color:var(--text-3)}
.rep pre{margin:6px 0 0;font-family:var(--f-mono);font-size:.72rem;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-2);background:rgb(var(--ink) / .04);border-radius:10px;padding:8px 10px;max-height:220px;overflow:auto}
.rep-a{display:flex;gap:6px;justify-content:flex-end}
#kReports{display:grid;gap:8px}
@media (max-width:640px){
  .lgrow{grid-template-columns:auto minmax(0,1fr) auto}
  .lgrow .chips{grid-column:1 / -1;grid-row:2;flex-wrap:wrap}
  .ckhead .push{margin-left:0}
}

/* =====================================================================
   v3.7: smooth scrolling, slim scrollbar, motion, Case File & notes, fixes
   ===================================================================== */
/* Lenis (from its lenis.css) */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
html.tour-lock{overflow:hidden}

/* slim scrollbars everywhere; the page itself gets a fading custom one on mouse/trackpad devices */
*{scrollbar-width:thin;scrollbar-color:rgb(var(--ink) / .22) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background-color:rgb(var(--ink) / .2);border:3px solid transparent;border-radius:99px;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--ink) / .36)}
*::-webkit-scrollbar-corner{background:transparent}
html.has-sbar{scrollbar-width:none}
html.has-sbar::-webkit-scrollbar{display:none}
.sbar{position:fixed;top:0;right:0;bottom:0;width:14px;z-index:60;opacity:0;transition:opacity .45s ease}
.sbar.on,.sbar:hover,.sbar.drag{opacity:1;transition-duration:.15s}
.sbar.none,html.lenis-stopped .sbar,html.tour-lock .sbar{opacity:0;pointer-events:none}
.sbar-t{position:absolute;top:0;right:3px;width:5px;border-radius:99px;background:rgb(var(--ink) / .3);cursor:grab;
  transition:width .2s var(--ease),background .2s;will-change:transform}
.sbar:hover .sbar-t,.sbar.drag .sbar-t{width:8px;background:rgb(var(--ink) / .46)}
.sbar.drag .sbar-t{cursor:grabbing}

/* sliding active-tab highlight */
.tabs{position:relative}
.tabs a,.bottombar a{z-index:1}
.navpill{position:absolute;left:0;top:0;border-radius:999px;background:var(--nav-active-bg);pointer-events:none;z-index:0;opacity:0}
.navpill[data-ready]{transition:transform .5s var(--ease),width .5s var(--ease),height .5s var(--ease),opacity .25s}
.tabs.has-pill a[aria-current="page"]{background:transparent}
.bottombar.has-pill a[aria-current="page"] .i{background:transparent}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .view.entering{animation:viewIn .55s var(--ease) both}
  @keyframes viewIn{from{opacity:0;transform:translateY(12px)}}
  /* page-header entrances play when a page opens, not every time its data refreshes */
  .view:not(.entering) .rise{animation:none}
  #kvList.swap,#rkTable.swap{animation:swapIn .42s var(--ease) both}
  @keyframes swapIn{from{opacity:0;transform:translateY(8px)}}
  .pop:not([hidden]){animation:popIn .28s var(--ease) both;transform-origin:top right}
  @keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.97)}}
  .toast{transition:opacity .22s ease,transform .22s ease}
  .toast.out{opacity:0;transform:translate(-50%,8px)}
  .stalebar:not([hidden]){animation:toast .45s var(--ease) both}
  /* closing sheets/drawer (a copy animates out) */
  .ghost{pointer-events:none!important}
  .scrim.ghost{animation:fadeOut .26s ease forwards!important}
  .scrim.ghost.noback{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .scrim.ghost .sheet{animation:sheetOut .26s var(--ease) forwards!important}
  .dscrim.ghost{animation:fadeOut .3s ease forwards!important}
  .drawer.ghost{animation:drawerOut .32s var(--ease) forwards!important}
  @media (max-width:640px){.drawer.ghost{animation-name:drawerOutY!important}}
  @keyframes fadeOut{to{opacity:0}}
  @keyframes sheetOut{to{opacity:0;transform:translateY(16px) scale(.985)}}
  @keyframes drawerOut{to{transform:translateX(100%)}}
  @keyframes drawerOutY{to{transform:translateY(100%)}}
  .mk,.tchip,.ck{transition:background .2s,border-color .2s,color .2s,transform .15s var(--ease)}
  .mk:active,.cfrow .ck:active{transform:scale(.94)}
  .kcard,.panel{transition:border-color .3s,box-shadow .3s}
  .cfbar i,.upbar i{transition:width .8s var(--ease)}
  /* sections fade up as they scroll into view (browsers with scroll-driven animations) */
  @supports (animation-timeline:view()){
    .dash > .panel:not(.rise),.kgrid > .kcard,.stats4 > .stat,.targets > .tgt,.cflist > .cfrow,.kgroup > h3{
      animation:sreveal linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
    @keyframes sreveal{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
  }
}
@media (hover:hover){.kcard:hover{border-color:var(--border-2)}}
html.vt-theme::view-transition-old(root),html.vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-theme::view-transition-new(root){animation:themeIn .7s cubic-bezier(.4,0,.2,1) both}
@keyframes themeIn{from{clip-path:circle(0 at var(--vx,90%) var(--vy,32px))}to{clip-path:circle(150vmax at var(--vx,90%) var(--vy,32px))}}

/* fix: roster tags (KAMU / INISIATOR) never overlap; a long name truncates and tags wrap under it */
.roster li > .who b{flex-wrap:wrap;column-gap:6px;row-gap:3px;white-space:normal;overflow:visible}
.roster li > .who b .nm{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roster li > .who b > :not(.nm){flex:none;margin-left:0}
/* fix: Database → Cakru card header, LINE id under the name */
.ck-h{grid-template-columns:auto minmax(0,1fr)}
.ck-id{min-width:0;display:grid;gap:3px}
.ck-id b{overflow-wrap:anywhere}
.ccard .lnk{justify-self:start;display:inline-flex;align-items:center;gap:5px;max-width:100%;font-family:var(--f-mono);font-size:.78rem;color:var(--ice);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccard .lnk .i{width:12px;height:12px;flex:none;opacity:.7}
.ccard .lnk:hover{text-decoration:underline}

/* Case File & notes */
.cfbar{height:6px;border-radius:99px;background:rgb(var(--ink) / .07);overflow:hidden}
.cfbar i{display:block;height:100%;border-radius:inherit;background:var(--ok)}
.cflist{display:grid;gap:6px}
.cfrow{--c:var(--ice);display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:6px 6px 6px 12px;border-radius:14px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02)}
.cfrow.fungs{--c:var(--coral)}
.cfrow.on{border-color:color-mix(in srgb,var(--ok) 28%,var(--hairline))}
.cfrow .ck{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--border-2);display:grid;place-items:center;background:none;padding:0;color:var(--on-fill);cursor:pointer}
.cfrow .ck .i{width:13px;height:13px;stroke-width:2.6;opacity:0;transition:opacity .15s}
.cfrow .ck[aria-pressed="true"]{background:var(--ok);border-color:var(--ok)}
.cfrow .ck[aria-pressed="true"] .i{opacity:1}
.cf-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0;padding:6px 8px;border:0;border-radius:10px;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
@media (hover:hover){.cf-main:hover{background:rgb(var(--ink) / .03)}}
.cf-main .tx{min-width:0;display:grid;gap:2px}
.cf-main .tx b{font-weight:500;display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-main .tx b .num{width:auto;font-size:1rem;flex:none}
.cf-main .tx > span{font-size:.78rem;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-main .cf-note{font-size:.8rem!important;color:var(--text-2)!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal!important}
.cf-r{display:flex;align-items:center;gap:8px}
.cf-go{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-2);white-space:nowrap}
.cf-go .i{width:14px;height:14px}
.cfrow.on .cf-main .tx b{color:var(--text-2)}
.mk.note.has{border-style:solid;color:var(--ice);border-color:color-mix(in srgb,var(--ice) 40%,transparent)}
.mk.note.has .i{opacity:1}
.notes-ta{min-height:200px;line-height:1.55;resize:vertical}
.phlist{display:grid;gap:6px}
.phlist:empty{display:none}
.phrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;border:1px solid var(--hairline);color:var(--text);text-decoration:none;font-size:.86rem}
.phrow > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phrow small{color:var(--text-3);font-size:.74rem}
.phrow .i{width:16px;height:16px;color:var(--text-3)}
@media (hover:hover){.phrow:hover{border-color:var(--border-2)}}
.drop.busy{opacity:.5;pointer-events:none}
.upbar{position:relative;display:grid;gap:6px;font-size:.8rem;color:var(--text-2)}
.upbar i{display:block;height:4px;border-radius:99px;background:rgb(var(--ink) / .08);overflow:hidden;position:relative}
.upbar i::after{content:"";position:absolute;top:0;bottom:0;width:35%;border-radius:inherit;background:var(--ice);animation:indet 1.1s ease-in-out infinite}
@keyframes indet{from{left:-35%}to{left:100%}}
.howto summary{cursor:pointer;font-size:.86rem;color:var(--text-2)}
.howto ol{margin:10px 0;padding-left:20px;display:grid;gap:6px;font-size:.84rem;color:var(--text-2)}
@media (max-width:640px){
  .cf-go span{display:none}
  .cfrow{padding-left:10px}
}

/* =====================================================================
   v3.7.1 fixes
   ===================================================================== */
/* requirement checklists: space between the progress bar, the list and the note (join sheet, cards, Progres) */
.clwrap{display:grid;gap:12px}
.clwrap > .clprog{margin:0}
/* toasts: sized to their text, never squeezed into a circle on phones */
.toast{width:max-content;max-width:min(560px,calc(100vw - 32px));border-radius:20px;line-height:1.4}
.toast > span{min-width:0}
.toast .i{flex:none}

/* =====================================================================
   v3.8: room for a host's floating badge, Tampilan highlight, kru LINE ids, Bidang database
   ===================================================================== */
/* --float-b is measured by avoidFloaters() in app.js: the height of anything from outside the site covering the bottom edge */
:root{--float-b:0px}
.scrim{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--float-b))}
@media (min-width:640px){.scrim{padding-bottom:calc(24px + var(--float-b))}}
.fab{bottom:calc(20px + env(safe-area-inset-bottom,0px) + var(--float-b))}
.toast{bottom:calc(86px + env(safe-area-inset-bottom,0px) + var(--float-b))}
.stalebar{bottom:calc(20px + env(safe-area-inset-bottom,0px) + var(--float-b))}
.stalebar:not([hidden]) ~ .toast{bottom:calc(110px + env(safe-area-inset-bottom,0px) + var(--float-b))}
.drawer{bottom:var(--float-b)}
@media (max-width:760px){
  .fab{bottom:calc(78px + env(safe-area-inset-bottom,0px) + var(--float-b))}
  .toast{bottom:calc(140px + env(safe-area-inset-bottom,0px) + var(--float-b))}
  .stalebar{bottom:calc(78px + env(safe-area-inset-bottom,0px) + var(--float-b))}
  .stalebar:not([hidden]) ~ .toast{bottom:calc(170px + env(safe-area-inset-bottom,0px) + var(--float-b))}
}
/* forms end with a little breathing room under the buttons */
.sheet form > .acts:last-child,.sheet .inner > .acts:last-child{padding-bottom:2px}

/* Tampilan popover: the highlight slides to the picked option */
.pseg{position:relative}
.pseg .thumb{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:10px;background:var(--thumb);box-shadow:var(--thumb-sh);
  opacity:0;transition:transform .38s var(--ease),width .38s var(--ease),opacity .2s;pointer-events:none}
.pseg.has-thumb .thumb{opacity:1}
.pseg button{position:relative;z-index:1}
.pseg.has-thumb button[aria-pressed="true"]{background:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){.pseg .thumb{transition:none}}

/* kru LINE ids */
.kline{display:inline-flex;align-items:center;gap:2px;max-width:100%;margin-top:3px}
.kline .lnk,.blist .lnk,.kru-lines .lnk{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;font-family:var(--f-mono);font-size:.78rem;color:var(--ice);
  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kline .lnk .i,.kru-lines .lnk .i{width:12px;height:12px;flex:none;opacity:.7}
.kline .lnk:hover,.blist .lnk:hover,.kru-lines .lnk:hover{text-decoration:underline}
.kl-ed{border:0;background:none;color:var(--text-3);padding:3px;border-radius:7px;display:inline-grid;place-items:center;cursor:pointer}
.kl-ed .i{width:13px;height:13px}
.kl-ed:hover{color:var(--text);background:rgb(var(--ink) / .06)}
.kcard-h .kl-add{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-size:.76rem;color:var(--text-3)}
.kcard-h .kl-add .i{width:12px;height:12px}
.kcard-h .kl-add:hover{color:var(--ice)}
.kcard-h > div{display:grid;gap:2px;justify-items:start}
.kru-lines{margin:-10px 0 0}
.kru-lines .lnk{font-family:inherit;font-size:.84rem}

/* Database → Bidang */
.bgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr))}
.bcard{--c:var(--gold)}
.bsec{display:grid;gap:8px;min-width:0}
.bsec-h{margin:0;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600;display:flex;gap:6px;align-items:baseline}
.bsrc{letter-spacing:0;text-transform:none;font-weight:400;font-size:.76rem;color:var(--text-3);opacity:.85}
.bempty{margin:0;font-size:.84rem;color:var(--text-3)}
.blist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bm{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border-radius:10px}
.bm:hover{background:rgb(var(--ink) / .03)}
.bm .av.xs{width:26px;height:26px;font-size:.58rem}
.bm.f .av{background:color-mix(in srgb,var(--coral) 14%,transparent);color:var(--coral);border-color:color-mix(in srgb,var(--coral) 30%,transparent)}
.bm-t{display:grid;min-width:0}
.bm-t b{font-weight:500;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-t small{font-size:.74rem;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blist .lnk{max-width:130px}
.bfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-top:12px;border-top:1px solid var(--hairline)}
.bwho{font-size:.76rem;color:var(--text-3);min-width:0}
.bfoot .push{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:480px){.bfoot .push{margin-left:0;width:100%}.bfoot .push .btn{flex:1}}
#kRules:not(:empty){margin-bottom:18px}

/* =====================================================================
   v3.9: phone-native touches, Case File export, import, slot swap, search, calendar, bidang colours, Wrapped
   ===================================================================== */
html{-webkit-tap-highlight-color:transparent}
/* press feedback on touch screens */
@media (hover:none){
  .btn,.iconbtn,.pop-item,.kp-opt,.swp,.cmdk-it,.srow,.mt{transition:transform .14s var(--ease),background .2s,color .2s,border-color .2s}
  .btn:active,.iconbtn:active,.pop-item:active,.kp-opt:active,.swp:active,.cmdk-it:active,.srow:active,.mt:active{transform:scale(.97)}
  .lr-main:active{background:rgb(var(--ink) / .035)}
}

/* sheets: a grab handle on phones, drag down to close */
.sheet{overscroll-behavior:contain}
.sheet .grab{display:none}
@media (max-width:639px){
  .sheet .grab{display:grid;place-items:center;position:absolute;top:0;left:0;right:0;height:22px;z-index:3;pointer-events:none}
  .sheet .grab i{width:38px;height:5px;border-radius:3px;background:var(--border-2);opacity:.9}
  .sheet.dragging{transition:none!important;user-select:none}
  .scrim[style*="--drag"]{background:color-mix(in srgb,var(--scrim) calc(100% - var(--drag,0) * 70%),transparent)}
}
.sheet.wide{max-width:880px}

/* list rows: swipe left for quick actions */
.lrow > .lr-head{touch-action:pan-y;position:relative;z-index:1;will-change:transform}
.lr-tray{position:absolute;top:0;right:0;width:0;display:flex;justify-content:flex-end;overflow:hidden;border-radius:0 17px 17px 0;z-index:0}
.lr-tray button{flex:none;width:68px;display:grid;place-content:center;justify-items:center;gap:4px;border:0;background:rgb(var(--ink) / .06);color:var(--text-2);font-size:.7rem;font-weight:500}
.lr-tray button .i{width:18px;height:18px}
.lr-tray button.pri{background:var(--primary);color:var(--on-primary)}
.lr-tray button + button{border-left:1px solid var(--hairline)}

/* skeletons */
.sk{display:block;border-radius:8px;background:linear-gradient(100deg,rgb(var(--ink) / .045) 30%,rgb(var(--ink) / .09) 50%,rgb(var(--ink) / .045) 70%) 0 0/300% 100%}
@media (prefers-reduced-motion:no-preference){ .sk{animation:shimmer 1.6s linear infinite;animation-delay:calc(var(--i,0) * 90ms)} }
.sk-row{display:grid;grid-template-columns:46px minmax(0,1fr) 64px;gap:14px;align-items:center;padding:12px 14px;border-radius:18px;border:1px solid var(--hairline);background:linear-gradient(180deg,var(--card-top),var(--card-bot))}
.sk-row > span{display:grid;gap:8px}
.sk-date{width:46px;height:50px;border-radius:12px}
.sk-pill{width:64px;height:24px;border-radius:999px}
.sk-card{display:grid;gap:12px;align-content:start;padding:16px;border-radius:18px;border:1px solid var(--hairline);background:linear-gradient(180deg,var(--card-top),var(--card-bot))}
.sk-card.tall{border-radius:var(--r-lg);padding:20px;gap:14px;min-height:400px}
.sk-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.sk-h > span{display:grid;gap:8px}
.sk-av{width:38px;height:38px;border-radius:50%}
.sk-ring{width:52px;height:52px;border-radius:50%}
.sk-chips{display:flex;gap:8px;flex-wrap:wrap}
.sk-panel{display:grid;gap:16px}
.lrows .sk-row + .sk-row{margin-top:0}

/* Case File export */
.exgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:480px){.exgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.exck{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:rgb(var(--ink) / .02);cursor:pointer;font-size:.86rem;min-width:0}
.exck:has(input:checked){border-color:color-mix(in srgb,var(--ok) 45%,var(--border));background:color-mix(in srgb,var(--ok) 7%,transparent)}
.exck input{margin-top:2px;accent-color:var(--ok);flex:none}
.exck span{display:grid;min-width:0}
.exck b{font-weight:500}
.exacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px}
.exacts .btn{width:100%}
.exck small{color:var(--text-3);font-size:.74rem}
.paper-wrap{position:relative;border-radius:16px;border:1px solid var(--border);background:rgb(var(--ink) / .04);padding:16px 16px 0;max-height:300px;overflow:hidden}
.paper-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,color-mix(in srgb,var(--sheet-b) 92%,transparent));pointer-events:none}
.paper{overflow-wrap:anywhere;background:#fff;color:#1d1d1f;border-radius:6px 6px 0 0;padding:26px 28px;box-shadow:0 10px 30px rgb(0 0 0 / .18);font-family:Calibri,Carlito,"Segoe UI",var(--f-sans);font-size:11.5px;line-height:1.45}
.paper h1{font-size:19px;margin:0 0 4px;font-weight:700;color:#111}
.paper .b-subtitle{color:#6b6b6b;margin:0 0 16px;font-size:11px}
.paper h2{font-size:15px;margin:16px 0 6px;font-weight:700;color:#111}
.paper h3{font-size:12.5px;margin:12px 0 2px;font-weight:700;color:#111}
.paper .b-meta{color:#6b6b6b;font-size:10.5px;margin:0 0 4px}
.paper p{margin:0 0 6px}
.paper ul{margin:0 0 6px;padding-left:18px}
.paper blockquote{margin:0 0 6px;padding-left:10px;border-left:2px solid #bfbfbf;color:#444}
.paper a{color:#1f5fbf}

/* import */
.im-or{display:flex;align-items:center;gap:12px;color:var(--text-3);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
.im-or::before,.im-or::after{content:"";flex:1;height:1px;background:var(--hairline)}
.im-maps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
@media (max-width:640px){.im-maps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.im-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.im-sum{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:.86rem;color:var(--text-2);font-variant-numeric:tabular-nums}
.im-sum .tchip{margin-left:4px}
.im-table{max-height:340px;overflow:auto}
.im-table td{font-size:.84rem}
.im-table td.chg{background:color-mix(in srgb,var(--ice) 10%,transparent);color:var(--text)}
.im-table tr.st-skip td{opacity:.6}
.im-table tr.st-same td{color:var(--text-3)}

/* slot swap */
.swmine{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--c) 30%,var(--border));background:color-mix(in srgb,var(--c) 6%,transparent);font-size:.86rem}
.swmine .i{color:var(--ok);flex:none}
.swmine > span:first-of-type{flex:1;min-width:0}
.swc{border:1px solid var(--border);border-radius:16px;padding:12px;display:grid;gap:10px}
.swc + .swc{margin-top:8px}
.swc.fungs{border-color:color-mix(in srgb,var(--coral) 28%,var(--border))}
.swc-h{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.swc-h b{font-weight:600}
.swc-h span{font-size:.8rem;color:var(--text-3)}
.swc-h .clash{font-size:.74rem;font-style:normal;color:var(--danger-text);display:inline-flex;gap:4px;align-items:center}
.swc-h .clash .i{width:12px;height:12px}
.swc-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.swp{display:flex;gap:8px;align-items:center;text-align:left;padding:7px 9px;border-radius:12px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02);color:var(--text);min-width:0}
.swp:hover:not(:disabled){border-color:var(--text-3);background:rgb(var(--ink) / .05)}
.swp:disabled{opacity:.45;cursor:not-allowed}
.swp span{display:grid;min-width:0}
.swp b{font-size:.84rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swp small{font-size:.72rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swpair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center}
.swpair > div{display:grid;justify-items:center;text-align:center;gap:6px;padding:14px 10px;border-radius:16px;border:1px solid var(--border);background:rgb(var(--ink) / .02);min-width:0}
.swpair > div b{font-weight:600;font-size:.9rem}
.swpair > div span{font-size:.78rem;color:var(--text-3);line-height:1.4}
.swarr{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.swarr .i{width:18px;height:18px}

/* search everything */
.cmdk{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;align-items:flex-start;padding:min(14vh,110px) 16px 16px;background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cmdk[hidden]{display:none}
.cmdk-box{width:min(640px,100%);max-height:min(72vh,620px);display:flex;flex-direction:column;border-radius:22px;border:1px solid var(--border-2);background:linear-gradient(180deg,var(--sheet-a),var(--sheet-b));box-shadow:var(--sh-sheet);overflow:hidden}
@media (prefers-reduced-motion:no-preference){ .cmdk:not([hidden]) .cmdk-box{animation:pop .3s var(--ease) both} }
.cmdk-in{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--hairline)}
.cmdk-in > .i{color:var(--text-3);flex:none}
.cmdk-in input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:1.02rem;outline:none;padding:4px 0}
.cmdk-in input::-webkit-search-cancel-button{display:none}
.cmdk-x{border:0;background:none;padding:0;cursor:pointer}
.cmdk-list{overflow:auto;padding:6px 8px 10px;overscroll-behavior:contain}
.cmdk-g{margin:10px 10px 4px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.cmdk-it{width:100%;display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;border:0;background:none;color:var(--text);text-align:left;cursor:pointer;min-width:0}
.cmdk-it.on,.cmdk-it:hover{background:rgb(var(--ink) / .06)}
.cmdk-it .ci{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgb(var(--ink) / .05);color:var(--text-2)}
.cmdk-it.fungs .ci{background:color-mix(in srgb,var(--coral) 14%,transparent);color:var(--coral)}
.cmdk-it .ci .i{width:16px;height:16px}
.cmdk-it .av.sm{width:32px;height:32px}
.cmdk-it .ct{flex:1;display:grid;min-width:0}
.cmdk-it .ct b{font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.cmdk-it .ct span{font-size:.76rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-it mark{background:color-mix(in srgb,var(--gold) 30%,transparent);color:var(--text);border-radius:3px}
.cmdk-none{padding:28px 16px;text-align:center;color:var(--text-3);font-size:.88rem}
.cmdk-foot{display:flex;gap:16px;flex-wrap:wrap;padding:9px 16px;border-top:1px solid var(--hairline);font-size:.72rem;color:var(--text-3)}
kbd{font-family:var(--f-mono);font-size:.68rem;padding:1px 6px;border-radius:6px;border:1px solid var(--border-2);background:rgb(var(--ink) / .04);color:var(--text-2);margin-right:2px}
@media (max-width:639px){ .cmdk{padding:10px 10px 0;align-items:stretch} .cmdk-box{max-height:calc(100dvh - 20px);border-radius:20px} .cmdk-foot{display:none} }

/* calendar subscription */
.calsub{display:grid;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline)}
.cal-links{display:flex;flex-wrap:wrap;gap:6px}
.ferr.okmsg{color:var(--ok)}

/* bidang colours: always small */
.bdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--bc);margin-right:6px;vertical-align:.08em;flex:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--bc) 18%,transparent)}
.card.has-bc{border-top-color:color-mix(in srgb,var(--bc) 60%,var(--border))}
.lrow.has-bc .lr-date{border-color:color-mix(in srgb,var(--bc) 45%,var(--border));box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--bc) 65%,transparent)}
.kgroup h3[data-bc] .i{color:var(--bc)}
.wk-t .bdot{width:6px;height:6px;margin-right:4px}
.bcard.has-bc{border-top-color:color-mix(in srgb,var(--bc) 55%,var(--border))}
.swatch{width:26px;height:26px;flex:none;border-radius:50%;border:2px solid var(--sheet-a,var(--bg));box-shadow:0 0 0 1px var(--border-2);background:var(--bc,transparent);cursor:pointer;padding:0;position:relative;align-self:center}
.swatch.nocol{background:repeating-linear-gradient(135deg,transparent 0 4px,rgb(var(--ink) / .14) 4px 5px)}
.swatch.on{box-shadow:0 0 0 2px var(--text)}
.cl-row > .swatch{margin-right:2px}
.swpal{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px 10px 40px}
.swpal .swatch.nocol{width:auto;border-radius:999px;padding:0 10px;font-size:.72rem;color:var(--text-2)}
.swpal .custom{overflow:hidden;background:conic-gradient(#e25 0 16%,#fb3 0 33%,#6c5 0 50%,#3bd 0 66%,#57f 0 83%,#c5e 0)}
.swpal .custom input{position:absolute;inset:-6px;opacity:0;cursor:pointer}

/* Wrapped card (Progres) */
.wrapcard{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(120deg,color-mix(in srgb,#6d5bd0 18%,var(--card-top)),color-mix(in srgb,#e0705b 14%,var(--card-bot)))}
.wc-art{position:absolute;inset:0;pointer-events:none}
.wc-art i{position:absolute;border-radius:50%;filter:blur(30px);opacity:.5}
.wc-art i:nth-child(1){width:180px;height:180px;right:-40px;top:-80px;background:#e0705b}
.wc-art i:nth-child(2){width:160px;height:160px;right:160px;bottom:-110px;background:#6d5bd0}
.wc-art i:nth-child(3){width:90px;height:90px;left:30%;top:-50px;background:#d6a23f;opacity:.3}
.wc-tx{position:relative;flex:1;min-width:200px;display:grid;gap:2px}
.wc-k{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);font-weight:600}
.wc-k .i{width:14px;height:14px}
.wc-tx b{font-size:1.2rem;font-weight:600;letter-spacing:-.02em}
.wc-tx > span:last-child{font-size:.8rem;color:var(--text-3)}
.wrapcard .btn{position:relative}

/* Wrapped stories */
.wrapd{position:fixed;inset:0;z-index:85;display:grid;place-items:center;background:rgb(6 6 12 / .82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.wrapd[hidden]{display:none}
.wr-stage{position:relative;width:min(420px,100vw);height:min(760px,100dvh);border-radius:28px;overflow:hidden;color:#fff;user-select:none;touch-action:none;
  background:#14182e;box-shadow:0 30px 80px rgb(0 0 0 / .5)}
@media (max-width:480px){.wr-stage{width:100vw;height:100dvh;border-radius:0}}
.wr-bars{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:14px;right:14px;display:flex;gap:4px;z-index:3}
.wr-bars i{flex:1;height:3px;border-radius:2px;background:rgb(255 255 255 / .28);overflow:hidden}
.wr-bars b{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.wr-x{position:absolute;top:calc(24px + env(safe-area-inset-top,0px));right:12px;z-index:4;width:38px;height:38px;border-radius:50%;border:0;background:rgb(255 255 255 / .12);color:#fff;display:grid;place-items:center;cursor:pointer}
.wr-slides{position:absolute;inset:0}
.wr-s{position:absolute;inset:0;display:flex;align-items:center;padding:84px 30px 54px;overflow:hidden}
.wr-s::before,.wr-s::after{content:"";position:absolute;border-radius:50%;filter:blur(50px);opacity:.55;pointer-events:none}
.wr-s::before{width:360px;height:360px;right:-120px;top:-100px;background:var(--wa,#e0705b)}
.wr-s::after{width:320px;height:320px;left:-120px;bottom:-110px;background:var(--wb,#6d5bd0)}
.wr-in{position:relative;z-index:1;width:100%;display:grid;gap:14px}
.w-intro{background:linear-gradient(160deg,#1a1d3b,#3a1f55 60%,#6a2340);--wa:#ff8a65;--wb:#6d8bff}
.w-total{background:linear-gradient(160deg,#0f2a2e,#11414a 55%,#1f2f52);--wa:#3fd0b0;--wb:#5b8def}
.w-time{background:linear-gradient(160deg,#2b1a10,#5a2e17 55%,#3b1f3f);--wa:#ffb547;--wb:#e0705b}
.w-people{background:linear-gradient(160deg,#141b35,#203a6b 55%,#2d1f55);--wa:#6db3ff;--wb:#b57bff}
.w-fungs{background:linear-gradient(160deg,#2e1220,#5b1d36 55%,#2c1a46);--wa:#ff6b8a;--wb:#ffb547}
.w-prog{background:linear-gradient(160deg,#10261a,#1d4a33 55%,#173a4a);--wa:#7be495;--wb:#3fb6a8}
.w-cohort{background:linear-gradient(160deg,#1b1630,#33295e 55%,#5a2a4a);--wa:#c3a2ff;--wb:#ff8a65}
.w-calm{background:linear-gradient(160deg,#16202c,#24364a 60%,#2c2c44);--wa:#7fb3d9;--wb:#9b7be0}
.w-end{background:linear-gradient(160deg,#1a1d3b,#2a2050 55%,#4a2040);--wa:#ffb547;--wb:#5b8def}
.w-k{margin:0;display:flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgb(255 255 255 / .75);font-weight:600}
.w-k .i{width:16px;height:16px}
.w-title{margin:0;font-size:2.1rem;line-height:1.08;font-weight:600;letter-spacing:-.03em}
.w-title.xl{font-size:2.6rem}
.w-big{display:block;font-size:7.5rem;line-height:.9;font-weight:700;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.w-lead{margin:0;font-family:var(--f-serif);font-size:1.45rem;line-height:1.25;color:rgb(255 255 255 / .88)}
.w-tap{margin:18px 0 0;font-size:.78rem;color:rgb(255 255 255 / .55)}
.w-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.w-pill{padding:7px 12px;border-radius:999px;background:rgb(255 255 255 / .12);font-size:.86rem;font-weight:500}
.w-pill.f{background:rgb(255 107 138 / .25)}.w-pill.k{background:rgb(91 141 239 / .28)}.w-pill.c{background:rgb(214 162 63 / .28)}
.w-facts{display:grid;gap:10px;margin-top:10px}
.w-facts > div{display:grid;gap:2px;padding:12px 14px;border-radius:16px;background:rgb(255 255 255 / .1)}
.w-facts span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgb(255 255 255 / .65)}
.w-facts b{font-size:1.2rem;font-weight:600;display:flex;align-items:center}
.w-facts small{font-size:.8rem;color:rgb(255 255 255 / .7)}
.w-faces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px;margin-top:8px}
.w-face{display:grid;justify-items:center;gap:6px;font-size:.74rem;color:rgb(255 255 255 / .85)}
.w-face .av{width:54px;height:54px;font-size:.9rem;border:2px solid rgb(255 255 255 / .3);background:rgb(255 255 255 / .14);color:#fff}
.w-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.w-list li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:rgb(255 255 255 / .1)}
.w-list li em{grid-row:span 2;font-style:normal;font-weight:700;font-size:1.1rem;min-width:36px;text-align:center;color:rgb(255 255 255 / .9)}
.w-list li em .i{width:18px;height:18px;opacity:.8}
.w-list li b{font-weight:600}
.w-list li span{font-size:.78rem;color:rgb(255 255 255 / .7)}
.w-list:not(.nums) li{grid-template-columns:1fr}
.w-arc{position:relative;width:200px;height:200px;margin:8px 0}
.w-arc svg{width:200px;height:200px}
.w-arc .track{fill:none;stroke:rgb(255 255 255 / .16)}
.w-arc .bar{fill:none;stroke:#7be495;stroke-linecap:round;filter:drop-shadow(0 0 10px rgb(123 228 149 / .5));transition:stroke-dasharray 1s var(--ease)}
.w-arc > div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.w-arc b{font-size:3.4rem;font-weight:700;line-height:1}
.w-arc small{font-size:.86rem;color:rgb(255 255 255 / .7)}
.w-weeknav{display:flex;align-items:center;gap:10px;margin-top:8px}
.w-weeknav button{width:36px;height:36px;border-radius:50%;border:0;background:rgb(255 255 255 / .14);color:#fff;display:grid;place-items:center;cursor:pointer}
.w-weeknav button:disabled{opacity:.3;cursor:default}
.w-weeknav span{font-size:.86rem;color:rgb(255 255 255 / .8);min-width:96px;text-align:center}
.w-acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.w-acts .btn{background:#fff;color:#14182e;border-color:transparent}
.w-acts .btn.quiet{background:rgb(255 255 255 / .14);color:#fff}
@media (prefers-reduced-motion:no-preference){
  .wr-s.on .wr-in > *{animation:wrUp .7s var(--ease) both}
  .wr-s.on .wr-in > *:nth-child(2){animation-delay:.08s}.wr-s.on .wr-in > *:nth-child(3){animation-delay:.16s}.wr-s.on .wr-in > *:nth-child(4){animation-delay:.24s}.wr-s.on .wr-in > *:nth-child(5){animation-delay:.32s}
  .wr-s.on .w-face{animation:wrPop .5s var(--ease) both;animation-delay:calc(.25s + var(--i) * 45ms)}
  .wr-s.on::before{animation:wrDrift 9s ease-in-out infinite alternate}
}
@keyframes wrUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes wrPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes wrDrift{from{transform:translate(0,0)}to{transform:translate(-40px,30px)}}

#sw-list{display:grid;gap:10px}
#sw-list .sub-h{margin:6px 0 -2px}
#sw-list .swc + .swc{margin-top:0}
#im-map{display:grid;gap:14px}
#bidSec .cl-row{grid-template-columns:28px minmax(0,1fr) auto;align-items:center}
.lrow:has(> .lr-tray){overflow:hidden}

/* =====================================================================
   v4: opened inside LINE / Instagram / … (Google sign-in is refused there)
   ===================================================================== */
.inapp{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);border:1px solid color-mix(in srgb,var(--gold) 45%,var(--border));
  background:color-mix(in srgb,var(--gold) 8%,transparent);font-size:.88rem;color:var(--text-2)}
.inapp > .i{color:var(--gold);flex:none;width:20px;height:20px;margin-top:1px}
.inapp > div{display:grid;gap:6px;min-width:0}
.inapp b{color:var(--text);font-weight:600}
.inapp-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
#jGate .inapp{margin-bottom:14px}
/* small phones (360px is common on Android): the top bar must never be wider than the screen */
#searchBtn[hidden],#bell[hidden]{display:none}
@media (max-width:400px){ .nav-r{gap:5px} .nav-r .iconbtn{width:36px;height:36px} .brand{gap:8px} }
@media (max-width:350px){ .brand > span:not(.logo){display:none} }
/* search highlight: the highlighted text is one flex item (no gaps inside the word), and still truncates */
.hlw{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* compact list on phones: the status chips shrink to their icon so the session's name keeps its room */
@media (max-width:640px){
  .lr-tx > b .confchip,.lr-tx > b .clash{font-size:0;gap:0;padding:2px 5px;margin-left:2px}
  .lr-tx > b .confchip .i,.lr-tx > b .clash .i{width:12px;height:12px}
  .lr-names{flex:0 1 auto;min-width:2.5em}
}

/* =====================================================================
   v4.1: Riwayat (history of finished interviews, photos in Google Drive)
   ===================================================================== */
/* the page uses Jadwal's parts: hero with aurora, figures, sticky toolbar with sliding segments, cards with a spotlight */
.rwhero .wrap{gap:22px}
.rwfigs{grid-template-columns:repeat(5,auto)}
@media (max-width:760px){
  .rwfigs{grid-template-columns:repeat(3,minmax(0,auto));row-gap:16px}
  .rwfigs .fig:nth-child(3){border-right:0;margin-right:0;padding-right:0}
}
@media (max-width:520px){
  .rwfigs{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px;padding-top:18px}
  .rwfigs .fig{padding-right:12px;margin-right:12px}
  .rwfigs .fig b{font-size:1.45rem}
  .rwfigs .fig span{font-size:.72rem;line-height:1.3}
  .rwhero .eyebrow .sep,.rwhero #rwPeriod{display:none}
}
.seg .fdot,.seg .kdot{width:6px;height:6px;border-radius:50%;background:var(--coral);flex:none}
.seg .kdot{background:var(--ice)}
.seg button .i{width:15px;height:15px}
.seg button[hidden]{display:none}
#rwToolbar .search{flex:1 1 240px;min-width:0}
.rwbody{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding-top:24px}
.rwbody > *{min-width:0}
#rwNote:empty{display:none}
.rwnote{align-items:center;flex-wrap:wrap}
.rwnote > span{flex:1 1 240px}
.rwbar[hidden]{display:none}
.rwsel{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.selpill{position:relative;display:inline-flex;align-items:center;height:34px;border-radius:999px;border:1px solid var(--border);background:rgb(var(--ink) / .03);color:var(--text-2);transition:border-color .2s,background .2s,color .2s}
.selpill > .i{position:absolute;left:11px;width:14px;height:14px;pointer-events:none;color:var(--text-3)}
.selpill select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-size:.82rem;font-weight:500;height:100%;padding:0 30px 0 31px;border-radius:999px;cursor:pointer;max-width:13rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23878b91' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:13px}
.selpill select:focus-visible{outline:2px solid var(--focus,var(--ice));outline-offset:2px}
.selpill.on{background:var(--sel-bg);color:var(--sel-text);border-color:transparent}
.selpill.on > .i{color:inherit}
@media (hover:hover){.selpill:hover{border-color:var(--border-2);color:var(--text)}}
.hgroup{display:grid;gap:14px}
.hgroup + .hgroup{margin-top:14px}
.hmonth h2{font-size:1.25rem}
.hgrid{gap:16px}

/* a finished interview: a Jadwal card, with its group photo on top when there is one */
.hcard{--c:var(--ice);position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));border:1px solid var(--border);box-shadow:var(--sh-card);
  transition:border-color .3s,box-shadow .35s var(--ease),transform .35s var(--ease)}
.hcard.fungs{--c:var(--coral)}
.hcard.has-bc{border-top-color:color-mix(in srgb,var(--bc) 60%,var(--border))}
.hcard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--spot),transparent 45%)}
.hcard:not(.has-pic)::after{content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;z-index:0;
  background:radial-gradient(80% 100% at 15% 0%,color-mix(in srgb,var(--c) 10%,transparent),transparent 70%)}
@media (hover:hover){
  .hcard:hover{border-color:var(--border-2);transform:translateY(-2px);box-shadow:var(--sh-card),0 18px 40px -22px rgb(0 0 0 / .35)}
  .hcard:hover::before{opacity:1}
}
.hcard > *{position:relative;z-index:1}
.hpic{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border:0;padding:0;margin:0;background:rgb(var(--ink) / .05);cursor:zoom-in;flex:none}
.hpic img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001);transition:transform .9s var(--ease),opacity .5s ease}
.hpic::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgb(0 0 0 / .28));pointer-events:none;opacity:.8;transition:opacity .4s}
@media (hover:hover){.hcard:hover .hpic img{transform:scale(1.045)}}
.hpic-tag{position:absolute;left:12px;bottom:10px;z-index:1;display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:500;color:#fff;padding:4px 9px;border-radius:999px;
  background:rgb(0 0 0 / .32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .35s var(--ease)}
.hpic-tag .i{width:12px;height:12px}
.hpic:hover .hpic-tag,.hpic:focus-visible .hpic-tag{opacity:1;transform:none}
.hpic.broken img,.gpic.broken img{opacity:0}
.hpic.broken::before,.gpic.broken::before{content:"";position:absolute;inset:0;background:center/28px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23878b91' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-8 8'/%3E%3C/svg%3E")}
.hcard .c-head{padding:16px 18px 0}
.hcard .chip{display:inline-flex;align-items:center;gap:5px}
.hcard .chip .i{width:12px;height:12px}
.chip.mine{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 28%,transparent);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.chip.quiet{color:var(--text-3)}
.h-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:14px 18px 0}
.hcard .date{width:54px;height:60px}
.hcard .date .dd{font-size:1.4rem}
.hcard .title h3{font-size:1.3rem;display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px}
.hk{border:0;background:none;padding:0;color:var(--text);font:inherit;letter-spacing:inherit;display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-align:left;
  background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .35s var(--ease)}
@media (hover:hover){.hk:hover{background-size:100% 1px}}
.amp{color:var(--text-3);font-family:var(--f-serif);font-style:italic;font-weight:400;margin:0 2px}
.hcard .meta{margin:14px 18px 0}
.hpeople{display:flex;flex-wrap:wrap;gap:6px;padding:14px 18px 0}
.hp{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-2);padding:2px 10px 2px 3px;border-radius:999px;border:1px solid var(--hairline);background:rgb(var(--ink) / .025);transition:border-color .2s,background .2s}
.hp.me{border-color:color-mix(in srgb,var(--c) 40%,transparent);background:color-mix(in srgb,var(--c) 8%,transparent);color:var(--text)}
.hp.absent{opacity:.5}
.hp.absent > span{text-decoration:line-through}
.hby{display:flex;align-items:center;gap:6px;margin:12px 18px 0;font-size:.76rem;color:var(--text-3)}
.hby .i{width:13px;height:13px;color:var(--ok)}
.hacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:14px 18px 18px;margin-top:auto}
.hacts.empty{padding:0 0 18px}
.hhead-r{display:inline-flex;align-items:center;gap:6px;min-width:0}
.hmore{width:30px;height:30px;border-radius:50%;border:1px solid transparent;background:none;color:var(--text-3);display:grid;place-items:center;flex:none;margin-right:-6px;transition:background .2s,color .2s,border-color .2s}
.hmore .i{width:16px;height:16px}
@media (hover:hover){.hmore:hover{background:rgb(var(--ink) / .06);color:var(--text);border-color:var(--border)}}
.hmore:focus-visible{outline:2px solid var(--focus,var(--ice));outline-offset:1px}
.rwmore{display:flex;justify-content:center;padding-top:6px}
.rwmore .i.down{transform:rotate(90deg);transition:transform .3s var(--ease)}
@media (hover:hover){.rwmore .btn:hover .i.down{transform:rotate(90deg) translateX(2px)}}

/* gallery */
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px}
.gpic{--c:var(--ice);position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);padding:0;background:rgb(var(--ink) / .05);cursor:zoom-in;isolation:isolate;
  box-shadow:var(--sh-card);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.gpic.fungs{--c:var(--coral)}
.gpic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.gpic::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgb(255 255 255 / .16),transparent 50%)}
@media (hover:hover){
  .gpic:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:var(--sh-card),0 22px 44px -24px rgb(0 0 0 / .45)}
  .gpic:hover img{transform:scale(1.06)}
  .gpic:hover::after{opacity:1}
}
.gdate{position:absolute;top:10px;left:10px;z-index:2;display:grid;justify-items:center;line-height:1;padding:7px 9px 6px;border-radius:12px;color:#fff;font-size:.62rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  background:rgb(0 0 0 / .3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgb(255 255 255 / .18)}
.gdate b{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;margin-bottom:2px}
.gcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 14px 12px;display:grid;gap:3px;text-align:left;color:#fff;background:linear-gradient(transparent,rgb(0 0 0 / .74))}
.gcap::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--c);margin-bottom:4px;transition:width .45s var(--ease)}
@media (hover:hover){.gpic:hover .gcap::before{width:34px}}
.gcap b{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcap small{font-size:.72rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:no-preference){
  .gpic.enter{animation:gIn .8s var(--ease) both;animation-delay:calc(var(--k,0) * 55ms + .2s - var(--off,0ms))}
  @keyframes gIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
  .rwfigs .fig b{transition:color .3s}
  /* cards further down fade up as they scroll into view */
  @supports (animation-timeline:view()){
    .hcard:not(.enter),.gpic:not(.enter),.hgroup > .hmonth{animation:sreveal linear both;animation-timeline:view();animation-range:entry 0% entry 34%}
  }
}
@media (max-width:600px){
  .hgrid{gap:12px}
  .hcard .c-head{padding:14px 16px 0}
  .h-main{padding:12px 16px 0}
  .hcard .meta{margin:12px 16px 0}
  .hpeople{padding:12px 16px 0}
  .hby{margin:10px 16px 0}
  .hacts{padding:12px 16px 16px}
  .ggrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gcap{padding:30px 10px 10px}
  .rwbar .push{margin-left:0;width:100%}
  .rwsel{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .rwsel::-webkit-scrollbar{display:none}
  .selpill{flex:none}
}
.lbpic{position:relative;display:grid;place-items:center;min-width:min(320px,80vw);min-height:200px}
.lbpic img{max-width:100%;max-height:82vh;border-radius:14px;box-shadow:0 30px 80px rgb(0 0 0 / .8)}
.lbpic .lbfail{display:none;color:var(--text-2);font-size:.9rem;margin:0}
.lbpic.broken img{display:none}
.lbpic.broken .lbfail{display:block}
.lightbox .cap a{color:var(--ice)}

/* v4.1: Kelola dashboard (one hue, thin columns, hairline grid; numbers in sans with proportional figures) */
:root{ --viz:#3b9ce0 }
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){ --viz:#0b57d0 }}
:root[data-theme="light"]{ --viz:#0b57d0 }
:root[data-theme="dark"]{ --viz:#3b9ce0 }
#dashSec,#calSec,#bidSec{grid-column:1 / -1}
.dstats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1000px){.dstats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.dstats{grid-template-columns:repeat(2,minmax(0,1fr))} .dstat:last-child{grid-column:1 / -1}}
.dstat{display:grid;gap:4px;align-content:start;padding:14px 16px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(180deg,var(--card-top),var(--card-bot));min-width:0}
.dstat span{font-size:.76rem;color:var(--text-3)}
.dstat b{font-family:var(--f-sans,inherit);font-size:1.75rem;line-height:1.1;font-weight:600;letter-spacing:-.02em;font-variant-numeric:proportional-nums;color:var(--text)}
.dstat b em{font-style:normal;font-size:1rem;font-weight:500;color:var(--text-3);letter-spacing:0}
.dstat small{font-size:.76rem;color:var(--text-3);line-height:1.35}
.dstat.soon b{color:var(--gold-text)}
.dcharts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
@media (max-width:820px){.dcharts{grid-template-columns:1fr}}
.dchart{position:relative;margin:0;padding:16px 16px 12px;border-radius:16px;border:1px solid var(--border);min-width:0;display:grid;gap:12px;align-content:start}
.dchart figcaption{display:grid;gap:2px}
.dchart figcaption b{font-size:.92rem;font-weight:600;color:var(--text)}
.dchart figcaption span{font-size:.76rem;color:var(--text-3)}
.vc{display:grid;gap:6px}
.vc-plot{position:relative;height:150px;margin-left:26px}
.vc-g{position:absolute;left:0;right:0;bottom:var(--y);height:0;border-top:1px solid var(--hairline)}
.vc-g:first-child{border-top-color:var(--border)}
.vc-g span{position:absolute;right:calc(100% + 6px);top:-.55em;font-size:.68rem;line-height:1;color:var(--text-3);font-variant-numeric:tabular-nums}
.vc-mark{position:absolute;top:-4px;bottom:0;left:var(--x);width:0;border-left:1px dashed var(--text-3);z-index:1;pointer-events:none}
.vc-mark span{position:absolute;top:-2px;left:5px;font-size:.68rem;color:var(--text-2);white-space:nowrap;background:var(--bg-raise);padding:0 4px;border-radius:4px}
.vc-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;z-index:2}
.vc-col{position:relative;display:flex;align-items:flex-end;justify-content:center;outline:0;cursor:default;border-radius:6px}
.vc-col:focus-visible{box-shadow:0 0 0 2px var(--focus,var(--viz)) inset}
.vc-bar{display:block;width:min(24px,72%);height:var(--h);background:var(--viz);border-radius:4px 4px 0 0;transition:opacity .15s}
.vc-cols:has(.vc-col.on) .vc-col:not(.on) .vc-bar{opacity:.45}
.vc-v{position:absolute;bottom:calc(var(--h) + 3px);left:50%;transform:translateX(-50%);font-size:.7rem;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.vc-x{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;margin-left:26px}
.vc-x span{font-size:.66rem;color:var(--text-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:clip}
.vc-xt{margin:0 0 0 26px;font-size:.7rem;color:var(--text-3);text-align:center}
#dc-week .vc-x span:nth-child(even){visibility:hidden}
@media (min-width:1100px){#dc-week .vc-x span:nth-child(even){visibility:visible}}
#dc-week .vc-x span:last-child{visibility:visible;color:var(--text-2);font-weight:600}
.hb{display:grid;gap:4px}
.hb-row{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr) 2.2rem;gap:10px;align-items:center;padding:4px 6px;margin:0 -6px;border-radius:8px;outline:0}
.hb-row.on,.hb-row:focus-visible{background:var(--row-hover)}
.hb-row:focus-visible{box-shadow:0 0 0 2px var(--viz) inset}
.hb-l{display:flex;align-items:center;gap:6px;min-width:0;font-size:.82rem}
.hb-l b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.hb-l .ftag{flex:none}
.hb-t{height:12px;display:block}
.hb-t i{display:block;height:100%;width:var(--w);min-width:2px;background:var(--viz);border-radius:0 4px 4px 0}
.hb-v{font-size:.8rem;font-weight:600;color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums}
.dtab summary{font-size:.76rem;color:var(--text-3);cursor:pointer;width:max-content}
.dtab table{width:100%;margin-top:8px;border-collapse:collapse;font-size:.8rem}
.dtab th{text-align:left;font-weight:500;color:var(--text-3);padding:4px 6px;border-bottom:1px solid var(--border)}
.dtab td{padding:4px 6px;border-bottom:1px solid var(--hairline);color:var(--text-2);font-variant-numeric:tabular-nums}
.dtab td:last-child,.dtab th:last-child{text-align:right}
.ctip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;max-width:min(260px,calc(100% - 8px));padding:6px 10px;border-radius:8px;font-size:.76rem;line-height:1.35;
  background:var(--text);color:var(--bg);box-shadow:0 6px 20px rgb(0 0 0 / .25)}
.ctip[hidden]{display:none}
.dwrap{margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline)}
.dwrap .lrow0{flex-wrap:wrap}
.dwrap .tx b{display:flex;align-items:center;gap:6px}
.dwrap .tx b .i{width:15px;height:15px;color:var(--gold)}
@media (max-width:560px){.vc-plot{height:130px}.hb-row{grid-template-columns:minmax(0,7.5rem) minmax(0,1fr) 2rem}}
@media (forced-colors:active){.vc-bar,.hb-t i{background:CanvasText}.vc-g{border-top-color:GrayText}}

/* v4.1: end-of-period Wrapped */
.w-period{background:linear-gradient(160deg,#101a2e,#1f2a4a 55%,#4a2440);--wa:#8fd8ff;--wb:#ff8a7a}
.w-photos{background:linear-gradient(160deg,#1a1626,#2d2140 55%,#1d3040);--wa:#ffb547;--wb:#6db3ff}
.w-line{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:0;position:relative}
.w-line li{display:grid;gap:2px;padding:10px 0 10px 22px;position:relative}
.w-line li::before{content:"";position:absolute;left:4px;top:16px;width:9px;height:9px;border-radius:50%;background:#fff}
.w-line li + li::after{content:"";position:absolute;left:8px;top:-12px;height:28px;border-left:1px dashed rgb(255 255 255 / .45)}
.w-line span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgb(255 255 255 / .65)}
.w-line b{font-size:1.25rem;font-weight:600}
.w-line small{font-size:.8rem;color:rgb(255 255 255 / .7)}
.w-list li em .av{width:34px;height:34px;font-size:.72rem;border:2px solid rgb(255 255 255 / .3);background:rgb(255 255 255 / .14);color:#fff}
.w-people .w-list li{grid-template-columns:auto minmax(0,1fr)}
.w-people .w-list li em{grid-row:span 2}
.w-collage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
.w-collage.n1{grid-template-columns:1fr}.w-collage.n2,.w-collage.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.w-ph{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:rgb(255 255 255 / .1)}
.w-collage.n1 .w-ph{aspect-ratio:4/3}
.w-ph img{width:100%;height:100%;object-fit:cover;display:block}
.w-ph.broken img{display:none}
@media (prefers-reduced-motion:no-preference){.wr-s.on .w-ph{animation:wrPop .5s var(--ease) both;animation-delay:calc(.2s + var(--i) * 60ms)}}
.w-meters{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
.w-meters li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center}
.w-meters span{font-size:.86rem;color:rgb(255 255 255 / .85)}
.w-meters em{grid-row:1;grid-column:2;font-style:normal;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
.w-meters i{grid-column:1 / -1;height:8px;border-radius:999px;background:rgb(255 255 255 / .16);overflow:hidden}
.w-meters i b{display:block;height:100%;width:var(--w);border-radius:999px;background:#fff}
.w-meters li.ok i b{background:#7be495}
.w-meters li.ok em::after{content:" ✓";color:#7be495}
.w-pill .bdot{margin-right:6px}
.pcard .wc-art i:nth-child(1){background:#3b9ce0}
.pcard .wc-art i:nth-child(2){background:#e0705b}
.dwrap .tx{flex:1 1 240px;min-width:0}
@media (max-width:560px){
  #dc-week .vc-x span{visibility:hidden;overflow:visible}
  #dc-week .vc-x span:nth-child(3n+1),#dc-week .vc-x span:last-child{visibility:visible}
}

/* v4.2: meeting links in the place field */
.plink{display:inline-flex;align-items:center;gap:4px;color:var(--ice);text-decoration:none;font-weight:500;border-radius:6px;max-width:100%;
  background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s var(--ease)}
.plink .i{width:12px;height:12px;flex:none;opacity:.75}
@media (hover:hover){.plink:hover{background-size:100% 1px}}
.plink:focus-visible{outline:2px solid var(--focus,var(--ice));outline-offset:2px}

/* v4.2: compact page header on phones after the first visit */
@media (max-width:640px){
  .hero.compact .wrap{padding-block:22px 16px;gap:14px}
  .hero.compact h1{font-size:clamp(2.2rem,11vw,2.8rem)}
  .hero.compact h1 em{font-size:1.04em}
  .hero.compact .lede,.hero.compact .hero-cta{display:none}
  .hero.compact .figures{margin-top:0;padding-top:14px}
  .hero.compact .aurora{height:320px}
  .hero.compact::after{height:90px}
}

/* v4.2: Riwayat masonry */
.hgrid.mas{grid-auto-rows:4px;row-gap:0;column-gap:16px;align-items:start}
@media (max-width:600px){.hgrid.mas{column-gap:12px}}

/* v4.2: photo viewer, going through the photos */
.lbnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid rgb(255 255 255 / .16);
  background:rgb(255 255 255 / .1);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .2s,transform .25s var(--ease),opacity .2s}
.lbnav .i{width:20px;height:20px}
.lbnav.prev{left:max(16px,env(safe-area-inset-left,0px))}
.lbnav.next{right:max(16px,env(safe-area-inset-right,0px))}
@media (hover:hover){.lbnav:hover{background:rgb(255 255 255 / .2)}.lbnav.prev:hover{transform:translateY(-50%) translateX(-2px)}.lbnav.next:hover{transform:translateY(-50%) translateX(2px)}}
.lbnav:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (pointer:coarse){.lbnav{width:40px;height:40px;opacity:.75}}
.lightbox .cap{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;padding:0 16px}
.lightbox .cap b{color:#fff;font-weight:600}
.lbn{font-family:var(--f-mono);font-size:.74rem;color:rgb(255 255 255 / .7);padding:2px 8px;border-radius:999px;background:rgb(255 255 255 / .1);margin-right:4px}
@media (prefers-reduced-motion:no-preference){
  .lbpic.go-next img{animation:lbNext .42s var(--ease) both}
  .lbpic.go-prev img{animation:lbPrev .42s var(--ease) both}
  @keyframes lbNext{from{opacity:0;transform:translateX(36px) scale(.985)}}
  @keyframes lbPrev{from{opacity:0;transform:translateX(-36px) scale(.985)}}
}

/* v4.2: Riwayat, my interviews, kru filter chip */
#rwMe:empty{display:none}
.rwme{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--border);background:linear-gradient(180deg,var(--card-top),var(--card-bot));box-shadow:var(--sh-card);
  transition:border-color .3s,background .3s}
.rwme.on{border-color:color-mix(in srgb,var(--ok) 40%,var(--border))}
.rwme > .av{width:42px;height:42px;flex:none}
.rwme .tx{flex:1;min-width:0;display:grid;gap:2px}
.rwme .tx b{font-size:.92rem;font-weight:600}
.rwme .tx span{font-size:.82rem;color:var(--text-2)}
.rwme .tx .miss{display:inline-flex;align-items:center;gap:5px;color:var(--gold-text);font-size:.78rem}
.rwme .tx .miss .i{width:13px;height:13px}
@media (max-width:520px){.rwme{flex-wrap:wrap}.rwme > .btn{width:100%}}
.fchip{display:inline-flex;align-items:center;gap:6px;margin-left:8px;height:28px;padding:0 8px 0 10px;border-radius:999px;border:1px solid transparent;background:var(--sel-bg);color:var(--sel-text);font-size:.8rem;font-weight:500;vertical-align:middle;cursor:pointer;transition:opacity .2s}
.fchip .i{width:13px;height:13px}
.fchip .i:last-child{opacity:.6}
@media (hover:hover){.fchip:hover .i:last-child{opacity:1}}
.hcard.flash{animation:flash 1.6s var(--ease) 2}

/* v4.2: Kelola tabs */
.ktoolbar .seg button .i{width:15px;height:15px}
.ktoolbar .seg .n:empty{display:none}
.ktoolbar .seg .n{min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;background:rgb(var(--ink) / .08);color:var(--text-2);font-size:.68rem}
.ktoolbar .seg .n.warn{min-width:8px;width:8px;height:8px;padding:0;background:var(--gold);font-size:0}
.ktoolbar .seg .n.warn:not(:empty){width:auto;height:18px;font-size:.68rem;color:#1b1300}
#kGrid > section[hidden]{display:none!important}
@media (max-width:760px){.ktoolbar .segs{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:28px;flex:1 1 100%}}

/* v4.2.1: masonry for every card grid (spans are set by masonry() in 04-shell.js) */
.mas{grid-auto-rows:4px!important;row-gap:0!important;align-items:start!important}
.mas > *{align-self:start}
.rwme .tx .man{font-size:.78rem;color:var(--text-3)}

/* =====================================================================
   v4.3: session chat (open from 48 hours before a session until 24 hours after it)
   ===================================================================== */
/* the sheet: full height on phones, a tall card elsewhere; only the message list scrolls */
.sheet.chat{max-width:560px;height:min(800px,100%);display:flex;flex-direction:column;overflow:hidden}
@media (max-width:639px){.sheet.chat{height:100%;border-radius:24px 24px 20px 20px}}
.sheet.chat > .inner{padding:0;gap:0;flex:1;min-height:0;display:flex;flex-direction:column}
.ch{position:relative;display:flex;flex-direction:column;flex:1;min-height:0}
.ch-head{position:relative;z-index:2;display:grid;gap:8px;padding:20px 22px 12px;border-bottom:1px solid var(--hairline)}
@media (max-width:480px){.ch-head{padding:20px 16px 10px}}
.ch-row{display:flex;align-items:center;gap:8px;min-width:0}
.ch-row .spacer{flex:1}
.ch-row .kind{white-space:nowrap}
.ch-row .tchip{white-space:nowrap}
.ch-row .tchip.hot{color:var(--coral-text);border-color:color-mix(in srgb,var(--coral) 40%,transparent)}
@media (max-width:400px){.ch-row .tchip{display:none}}
.ch-head h3{font-size:1.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-head .ctx{margin:-2px 0 0;font-size:.8rem}
.ch-people{display:flex;align-items:center;gap:10px;min-height:22px;font-size:.78rem;color:var(--text-3);min-width:0}
.ch-people > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-people .stack .av{box-shadow:0 0 0 2px var(--sheet-a)}
.ch-typing{color:var(--ice);display:inline-flex;align-items:center;gap:3px}
.ch-typing i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:chdot 1.2s ease-in-out infinite}
.ch-typing i:first-of-type{margin-left:3px}
.ch-typing i:nth-of-type(2),.cb.typing i:nth-child(2){animation-delay:.16s}
.ch-typing i:nth-of-type(3),.cb.typing i:nth-child(3){animation-delay:.32s}
@keyframes chdot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}
.ch-pin{display:flex;align-items:center;gap:4px;padding:4px 4px 4px 12px;border-radius:14px;background:color-mix(in srgb,var(--c) 7%,transparent);border:1px solid color-mix(in srgb,var(--c) 24%,transparent);animation:popIn .25s var(--ease)}
.ch-pin-go{flex:1;min-width:0;display:flex;gap:10px;align-items:center;border:0;background:none;color:inherit;text-align:left;padding:3px 0}
.ch-pin-go > .i{color:var(--c);flex:none}
.ch-pin-go > span{min-width:0;display:grid}
.ch-pin-go b{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.ch-pin-go span span{font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-pin .btn.icon.sm{width:30px;height:30px;border:0;background:none}

.ch-mid{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.ch-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 12px;display:flex;flex-direction:column;touch-action:manipulation;scrollbar-width:thin}
.ch-load{display:grid;gap:10px;padding:8px 0}
.ch-load .sk:nth-child(2){justify-self:end}
.ch-intro{display:flex;gap:12px;padding:12px 14px;border-radius:16px;background:rgb(var(--ink) / .03);border:1px solid var(--hairline);margin:0 0 6px;font-size:.78rem;color:var(--text-3);line-height:1.45}
.ch-intro > .i{width:20px;height:20px;color:var(--c);flex:none;margin-top:1px}
.ch-intro div{display:grid;gap:3px}
.ch-intro b{color:var(--text);font-weight:600;font-size:.86rem}
.ch-empty{display:grid;justify-items:center;text-align:center;gap:6px;margin:auto 0;padding:26px 16px;color:var(--text-3);font-size:.84rem}
.ch-empty .i{width:30px;height:30px;color:var(--c);stroke-width:1.3}
.ch-empty b{color:var(--text);font-weight:600;font-size:.95rem}
.cday{display:flex;justify-content:center;margin:14px 0 4px;position:sticky;top:-6px;z-index:2;pointer-events:none}
.cday span{font-size:.7rem;font-weight:500;letter-spacing:.03em;color:var(--text-2);padding:4px 12px;border-radius:999px;background:var(--glass-2);border:1px solid var(--border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.csys{align-self:center;display:inline-flex;gap:7px;align-items:center;max-width:92%;margin:8px 0 2px;padding:4px 12px;border-radius:999px;font-size:.73rem;color:var(--text-3);text-align:left}
.csys .i{width:12px;height:12px;flex:none}
.csys time{font-variant-numeric:tabular-nums;opacity:.75;flex:none}
.csys.mark{color:var(--c);border:1px dashed color-mix(in srgb,var(--c) 38%,transparent);background:color-mix(in srgb,var(--c) 5%,transparent)}
.cnew{display:flex;align-items:center;gap:10px;margin:14px 0 2px;color:var(--coral-text);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.cnew::before,.cnew::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--coral) 40%,transparent)}

/* groups of bubbles */
.cg{display:flex;align-items:flex-end;gap:8px;margin-top:10px;min-width:0}
.cg.mine{justify-content:flex-end}
.cg-av{flex:none;margin-bottom:2px}
.cg-av .av{width:28px;height:28px;font-size:.6rem}
.cg-body{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;max-width:min(80%,430px)}
.cg.mine .cg-body{align-items:flex-end}
.cg-name{display:flex;align-items:center;gap:4px;margin:0 0 1px 12px;font-size:.72rem;color:var(--text-3)}
.cg-name .leadtag,.cg-name .badge-mini{margin-left:4px}
.cm{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;max-width:100%}
.cm.mine{align-items:flex-end}
.cb{position:relative;max-width:100%;padding:7px 12px 7px;border-radius:18px;background:rgb(var(--ink) / .06);border:1px solid var(--hairline);color:var(--text);
  font-size:.9rem;line-height:1.42;white-space:pre-wrap;overflow-wrap:anywhere;transition:box-shadow .2s,transform .25s var(--ease)}
.cg:not(.mine) .cm + .cm .cb{border-top-left-radius:6px}
.cg:not(.mine) .cm:not(:last-child) .cb{border-bottom-left-radius:6px}
.cg.mine .cm + .cm .cb{border-top-right-radius:6px}
.cg.mine .cm:not(:last-child) .cb{border-bottom-right-radius:6px}
.cg.mine .cb{background:color-mix(in srgb,var(--c) 18%,var(--sheet-a));border-color:color-mix(in srgb,var(--c) 32%,transparent)}
.cb.big{display:block;gap:0;background:none!important;border-color:transparent!important;font-size:2.2rem;line-height:1.15;padding:0 2px}
.cb.big .cmeta{font-size:.62rem}
.ct a.clink{color:var(--ice);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;overflow-wrap:anywhere}
.cg.mine .ct a.clink{color:inherit}
.cmen{font-weight:600;color:var(--ice)}
.cmen.me{color:var(--gold-text);background:color-mix(in srgb,var(--gold) 20%,transparent);border-radius:5px;padding:0 3px}
.cmeta{float:right;position:relative;top:4px;display:inline-flex;align-items:center;gap:4px;margin:4px 0 0 10px;font-size:.64rem;line-height:1;color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.cmeta em{font-style:normal}
.cst{display:inline-flex}
.cst .i{width:13px;height:13px}
.cst.seen{color:var(--ice)}
.cst.fail{color:var(--danger)}
.cq{display:grid;gap:1px;width:100%;margin:2px 0 6px;padding:5px 10px;border:0;border-left:3px solid var(--c);border-radius:8px;background:rgb(var(--ink) / .06);color:inherit;font:inherit;font-size:.78rem;text-align:left;white-space:normal}
.cq b{font-size:.72rem;font-weight:600;color:var(--c)}
.cq span{color:var(--text-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cloc{display:flex;align-items:center;gap:10px;padding:2px 0;color:inherit;text-decoration:none;white-space:normal}
.cloc-ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.cloc-ic .i{width:18px;height:18px}
.cloc > span:not(.cloc-ic){display:grid;gap:1px;min-width:0}
.cloc b{font-weight:600;font-size:.86rem}
.cloc small{font-size:.72rem;color:var(--text-3)}
.cloc > .i{color:var(--text-3);margin-left:6px}
.crx{display:flex;flex-wrap:wrap;gap:4px;margin:-5px 8px 0;position:relative;z-index:1}
.rx{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 7px;border-radius:999px;border:1px solid var(--border);background:var(--sheet-a);color:var(--text-2);font-size:.8rem;line-height:1;box-shadow:0 2px 8px rgb(var(--shade) / .18);transition:transform .15s var(--ease)}
.rx:active{transform:scale(.92)}
.rx b{font-size:.66rem;font-weight:600}
.rx.on{border-color:color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 14%,var(--sheet-a));color:var(--text)}
.cm-more{position:absolute;top:2px;right:-36px;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--sheet-a);color:var(--text-3);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .15s,color .15s}
.cm.mine .cm-more{right:auto;left:-36px}
.cm-more:hover{color:var(--text)}
@media (hover:hover){.cm:hover .cm-more,.cm.menu .cm-more,.cm-more:focus-visible{opacity:1;pointer-events:auto}}
@media (hover:none){.cm-more{display:none}.cb{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}
.cm.menu .cb,.cm.swipe-ok .cb{box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 55%,transparent)}
.cm.flash .cb{animation:cflash 1.3s var(--ease)}
@keyframes cflash{0%,45%{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 65%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.cm.failed .cb{border-color:color-mix(in srgb,var(--danger) 50%,transparent);opacity:.8}
.cfail{display:flex;gap:8px;align-items:center;margin:2px 4px 0;font-size:.72rem;color:var(--danger-text)}
.cfail .linkbtn{font-size:.72rem;padding:0;color:var(--text-2)}
.cheads{display:flex;gap:2px;margin:3px 2px 0;align-self:flex-end}
.cheads .av{width:15px;height:15px;font-size:.4rem;letter-spacing:0;border:1px solid var(--sheet-a)}
.cg.typing .cb{display:inline-flex;gap:4px;padding:12px 14px}
.cb.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:chdot 1.2s ease-in-out infinite}
.cg.typing{animation:popIn .25s var(--ease)}
.ch-down{position:absolute;right:14px;bottom:12px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--border-2);background:var(--glass-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);display:grid;place-items:center;box-shadow:var(--sh-pop);animation:popIn .2s var(--ease)}
.ch-down .i{transform:rotate(90deg)}
.ch-down b{position:absolute;top:-6px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--coral);color:#fff;font-size:.62rem;font-weight:600;display:grid;place-items:center}
.ch-down b:empty{display:none}

/* composer */
.ch-foot{display:grid;gap:8px;padding:10px 14px 14px;border-top:1px solid var(--hairline)}
.ch-foot.closed{padding-top:14px}
.qchip{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--quiet-bg);color:var(--text-2);font-size:.79rem;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .15s var(--ease)}
.qchip:hover{background:var(--quiet-hover);border-color:var(--border-2);color:var(--text)}
.qchip:active{transform:scale(.96)}
.qchip .i{width:14px;height:14px}
.qchip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.ch-ctx{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;border-radius:14px;background:rgb(var(--ink) / .04);border-left:3px solid var(--c);animation:popIn .2s var(--ease)}
.ch-ctx > .i{color:var(--c);flex:none}
.ch-ctx > span{flex:1;min-width:0;display:grid;font-size:.8rem}
.ch-ctx b{font-weight:600;font-size:.76rem}
.ch-ctx span span{color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-ctx .btn.icon.sm{width:30px;height:30px;border:0;background:none}
.ch-ment{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.mchip{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 5px;border-radius:999px;border:1px solid var(--border-2);background:var(--quiet-bg);color:var(--text);font-size:.8rem}
.mchip:first-child{border-color:color-mix(in srgb,var(--c) 50%,transparent)}
.mchip span{color:var(--text-3)}
.mchip > .i{margin-left:6px;color:var(--text-3)}
.ch-comp{position:relative;display:flex;align-items:flex-end;gap:8px;padding:4px 4px 4px 16px;border-radius:24px;border:1px solid var(--field-line);background:var(--field);transition:border-color .2s,box-shadow .2s}
.ch-comp:focus-within{border-color:color-mix(in srgb,var(--c) 55%,var(--border-2));box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent)}
.ch-comp textarea{flex:1;min-width:0;max-height:140px;padding:9px 0;border:0;outline:none;background:none;color:var(--text);font:inherit;font-size:.92rem;line-height:1.4;resize:none}
@media (max-width:639px){.ch-comp textarea{font-size:16px}}
.ch-comp textarea::placeholder{color:var(--text-4)}
.ch-count{align-self:center;font-size:.7rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.ch-count.hot{color:var(--danger-text)}
.ch-send{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;transition:transform .15s var(--ease),opacity .2s,box-shadow .25s}
.ch-send:not(:disabled):hover{box-shadow:var(--glow)}
.ch-send:not(:disabled):active{transform:scale(.92)}
.ch-send:disabled{opacity:.3}
.ch-send .i{width:17px;height:17px;margin:1px 1px 0 0}
.ch-note{margin:0;font-size:.74rem;color:var(--text-3);text-align:center}
.ch-note.warn{color:var(--gold-text)}

/* message and chat menus */
.ch-menu{position:absolute;z-index:6;min-width:220px;max-width:min(300px,calc(100% - 16px));display:grid;gap:2px;padding:6px;border-radius:18px;border:1px solid var(--border-2);background:var(--glass-2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--sh-pop);animation:popIn .18s var(--ease)}
.ch-menu > button{display:flex;align-items:center;gap:11px;padding:9px 10px;border:0;border-radius:12px;background:none;color:var(--text);font-size:.86rem;text-align:left}
.ch-menu > button:hover,.ch-menu > button:focus-visible{background:rgb(var(--ink) / .06);outline:none}
.ch-menu > button > .i{flex:none;width:16px;height:16px;color:var(--text-3)}
.ch-menu > button > span{display:grid;gap:1px}
.ch-menu small{font-size:.72rem;color:var(--text-3)}
.ch-menu > button.danger{color:var(--danger-text)}
.ch-menu > button.danger > .i{color:currentColor}
.ch-menu > button.sure{background:color-mix(in srgb,var(--danger) 12%,transparent)}
.cmn-rx{display:flex;justify-content:space-between;gap:2px;padding:2px 2px 6px;margin-bottom:4px;border-bottom:1px solid var(--hairline)}
.cmn-rx button{width:38px;height:38px;border:0;border-radius:50%;background:none;font-size:1.3rem;line-height:1;transition:transform .15s var(--ease),background .15s}
.cmn-rx button:hover{transform:scale(1.18);background:rgb(var(--ink) / .06)}
.cmn-rx button.on{background:color-mix(in srgb,var(--c) 20%,transparent)}
.cmn-note{margin:4px 10px;font-size:.72rem;line-height:1.45;color:var(--text-3)}

/* where the chat is opened from: cards, list rows, the Sesi kamu strip, sheets, Riwayat */
.chatbtn{position:relative}
.udot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2px var(--ring-bg),0 0 10px var(--coral)}
.chatbtn.unread{border-color:color-mix(in srgb,var(--coral) 45%,var(--border));color:var(--text)}
.btn.sm.chatbtn .udot{top:-2px;right:-2px}
.chatcta{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--c) 26%,var(--border));background:color-mix(in srgb,var(--c) 6%,transparent);color:var(--text);text-align:left;transition:background .2s,border-color .2s}
button.chatcta:hover{background:color-mix(in srgb,var(--c) 10%,transparent)}
.chatcta > .i:first-child{width:20px;height:20px;color:var(--c);flex:none}
.chatcta > span{flex:1;min-width:0;display:grid;gap:2px}
.chatcta b{font-weight:600;font-size:.9rem}
.chatcta small{font-size:.78rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatcta small.unread,.chatcta.unread small{color:var(--text)}
.chatcta > .i:last-child{color:var(--text-3);flex:none}
.chatcta .udot{position:static;flex:none}
.chatcta.soon{border-style:dashed;background:none}
.mtw{position:relative;flex:0 0 min(320px,86%);scroll-snap-align:start;display:flex}
.mtw > .mt{flex:1 1 auto;min-width:0}
.mtw.has-chat > .mt{padding-right:64px}
.mtw.has-chat > .mt > .i{display:none}
.mt-chat{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--quiet-bg);color:var(--text-2);display:grid;place-items:center;transition:border-color .2s,color .2s}
.mt-chat:hover{color:var(--text);border-color:var(--border-2)}
.mt-chat .udot{top:0;right:0}
.mt .tx .mt-chat-tx.unread{color:var(--text);font-weight:500}
.lr-act .chatbtn{margin-right:6px}
@media (max-width:400px){.c-foot:has(.chatbtn) [data-act="copy"]{display:none}}
.cdg{display:flex;flex-direction:column}
/* while a chat is open, toasts appear at the top instead of over the message box */
#scrim:not([hidden]):has(.sheet.chat) ~ .toast{top:calc(14px + env(safe-area-inset-top,0px));bottom:auto}

/* =====================================================================
   v4.3: Kru yang dicari, this week's plan, getting started, confirmation deadline, nudges, kru profile
   ===================================================================== */

/* getting started */
.startb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--border));background:color-mix(in srgb,var(--gold) 6%,transparent);animation:popIn .3s var(--ease)}
.startb > .i{width:20px;height:20px;color:var(--gold);flex:none}
.startb > span:not(.startb-a){flex:1 1 200px;display:grid;gap:2px;min-width:0}
.startb b{font-weight:600;font-size:.9rem}
.startb small{font-size:.8rem;color:var(--text-3)}
.startb-a{display:flex;gap:6px;align-items:center}
.startp{border-color:color-mix(in srgb,var(--gold) 32%,var(--border))}
.startp .cfbar{margin:-4px 0 14px}
.startp .cfbar i{background:var(--gold)}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:760px){.steps3{grid-template-columns:minmax(0,1fr)}}
.st3{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:10px 12px;align-items:start;padding:14px;border-radius:16px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02)}
.st3 > :last-child{grid-column:1/-1;justify-self:start}
.st-n{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:var(--f-serif);font-size:1.35rem;color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent)}
.st3.done .st-n{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.st-tx{display:grid;gap:3px;min-width:0}
.st-tx b{font-weight:600;font-size:.92rem}
.st-tx span{font-size:.8rem;color:var(--text-3)}
.st3.done .st-tx b{color:var(--text-2)}
.st-a{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:760px){.st3{grid-template-columns:auto 1fr auto;align-items:center}.st3 > :last-child{grid-column:auto;justify-self:end}.st3 .st-a{justify-content:flex-end}}
@media (max-width:420px){.st3{grid-template-columns:auto 1fr}.st3 > :last-child{grid-column:1/-1;justify-self:start}}

/* this week's plan */
#planSec .cfbar{margin:-4px 0 14px}
.pl-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:12px}
.pl-day{position:relative;display:grid;justify-items:center;gap:1px;padding:7px 0;border-radius:12px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02)}
.pl-day small{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.pl-day b{font-weight:600;font-size:.95rem}
.pl-day.past{opacity:.5}
.pl-day.today{border-color:color-mix(in srgb,var(--gold) 50%,var(--border));background:color-mix(in srgb,var(--gold) 8%,transparent)}
.pl-day.has b{color:var(--text)}
.pl-day i{position:absolute;top:-6px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--gold);color:#1a1205;font-size:.6rem;font-style:normal;font-weight:700;display:grid;place-items:center}
.pl-list{display:grid;gap:8px}
.plrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02)}
.plrow.today{border-color:color-mix(in srgb,var(--coral) 35%,var(--border))}
.plrow.done,.plrow.booked{background:color-mix(in srgb,var(--ok) 4%,transparent)}
.plrow.done .pl-main b{color:var(--text-2)}
.plrow .ck:disabled{opacity:1}
.plrow.done .ck,.plrow.booked .ck{background:var(--ok);border-color:var(--ok);color:var(--on-fill)}
.pl-main{border:0;background:none;padding:0;color:inherit;text-align:left;min-width:0}
.pl-main .tx{display:grid;gap:2px;min-width:0}
.pl-main b{font-weight:600;display:flex;gap:6px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pl-main span{font-size:.8rem;color:var(--text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pl-r{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:560px){.plrow{grid-template-columns:auto minmax(0,1fr)}.pl-r{grid-column:2;justify-content:flex-start}}
.pl-add{margin-top:10px}
.pl-empty{display:grid;gap:12px;justify-items:start}
.pl-empty p{margin:0;font-size:.86rem;color:var(--text-2)}
.pl-sugg{display:flex;gap:6px;flex-wrap:wrap}
.pl-sugg .qchip small{color:var(--text-3);font-size:.72rem}
.pl-old{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:14px;border:1px dashed var(--border-2)}
.pl-old > .i{width:20px;height:20px;color:var(--text-3)}
.pl-old > span:not(.pl-old-a){flex:1 1 220px;display:grid;gap:2px}
.pl-old b{font-weight:600;font-size:.9rem}
.pl-old small{font-size:.8rem;color:var(--text-3)}
.pl-old-a{display:flex;gap:6px;flex-wrap:wrap}
.pl-seg{display:flex;width:100%;overflow-x:auto;scrollbar-width:none}
.pl-seg button{flex:1 0 auto;display:grid;justify-items:center;gap:0;padding:6px 10px;font-weight:600}
.pl-seg button small{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.pl-seg button[aria-pressed="true"]{background:var(--thumb);box-shadow:var(--thumb-sh);color:var(--text)}
.pl-q{width:100%}

/* where I stand (Progres) */
.cmp .lbl.peer span{color:var(--text-2)}
.cmp .lbl.pace span{display:inline-flex;gap:6px;align-items:center;color:var(--gold-text)}
.cmp .lbl.pace .i{width:13px;height:13px}

/* confirmation deadline */
.badge-mini.warn{color:var(--gold-text)}
.linkbtn.give{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);color:var(--gold-text);font-size:.68rem;font-weight:500;line-height:1.5;opacity:1!important}
.linkbtn.give .i{width:11px;height:11px}
.linkbtn.give:hover{color:var(--text)}
.confbox .cby{font-style:normal;font-weight:500;font-size:.76rem;color:var(--gold-text);margin-left:6px}
.confbox.late{border-color:color-mix(in srgb,var(--coral) 40%,var(--border));background:color-mix(in srgb,var(--coral) 6%,transparent)}
.confbox.late .cby{color:var(--coral-text)}

/* install nudge + steps */
.nudge{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--ice) 30%,var(--border));background:color-mix(in srgb,var(--ice) 6%,transparent)}
.nudge > .i{width:22px;height:22px;color:var(--ice);flex:none}
.nudge > span:not(.nudge-a){flex:1 1 200px;display:grid;gap:2px;min-width:0}
.nudge b{font-weight:600;font-size:.9rem}
.nudge small{font-size:.8rem;color:var(--text-3)}
.nudge-a{display:flex;gap:6px;align-items:center}
.isteps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.isteps li{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--hairline);background:rgb(var(--ink) / .02);font-size:.9rem}
.isteps .sn{font-family:var(--f-serif);font-size:1.3rem;color:var(--ice);line-height:1}
.isteps .i{width:18px;height:18px;color:var(--text-2)}

/* kru profile */
.kp-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:480px){.kp-figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kp-fig{display:grid;gap:2px;padding:12px;border-radius:14px;border:1px solid var(--hairline);background:var(--tile)}
.kp-fig b{font-family:var(--f-serif);font-weight:400;font-size:1.7rem;line-height:1}
.kp-fig > span{font-size:.72rem;color:var(--text-3);line-height:1.3}
.kp-fig b span{font:inherit;color:inherit}
.kp-fig.hot b{color:var(--coral-text)}
.kp-fig.ok b{color:var(--ok)}
.kp-pics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kp-pics .gpic{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--hairline);padding:0;background:var(--tile)}
.kp-pics .gpic img{width:100%;height:100%;object-fit:cover;display:block}
.kp-pics .gpic span{position:absolute;left:6px;bottom:6px;font-size:.66rem;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.kru-lines button.lnk{border:0;background:none;padding:0;cursor:pointer;font-family:inherit}
.kname{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;text-decoration:underline transparent;text-underline-offset:3px;transition:text-decoration-color .2s}
.kname:hover{text-decoration-color:currentColor}
td .kname{display:block;font-weight:500}

/* weekly recap (Kelola) */
.recap{margin:0;padding:14px;max-height:340px;overflow:auto;border-radius:14px;border:1px solid var(--hairline);background:var(--tile);font-family:var(--f-sans);font-size:.8rem;line-height:1.55;white-space:pre-wrap;color:var(--text-2)}
.plrow .ck{width:24px;height:24px;border-radius:8px;border:1px solid var(--border-2);display:grid;place-items:center;background:none;padding:0;color:var(--on-fill);cursor:pointer}
.plrow .ck .i{width:13px;height:13px;stroke-width:2.6;opacity:0}
.plrow .ck[aria-pressed="true"]{background:var(--ice);border-color:var(--ice)}
.plrow .ck[aria-pressed="true"] .i{opacity:1}
.plrow.done .ck,.plrow.booked .ck{background:var(--ok);border-color:var(--ok)}
#plPick .kp-opt .tchip{display:inline-flex;font-size:.72rem;color:var(--text-2)}
#plPick .kp-opt:hover .tchip{color:var(--text);border-color:var(--border-2)}
#plPick .sub-h{margin:10px 10px 2px}
#plPick .sub-h:first-child{margin-top:6px}
/* v4.3 phone fixes */
.kp-acts{display:flex;flex-wrap:wrap;gap:8px}
.kp-acts .btn{flex:1 1 auto}
@media (max-width:560px){.pl-r .hide-sm{display:none}.pl-r .btn.sm:has(.hide-sm){width:34px;padding:0;justify-content:center}}
@media (max-width:640px){.roster li:has(.linkbtn.give) .racts .linkbtn{display:none}}
.badge-mini.warn{white-space:nowrap}

/* v4.3.2: photos in the chat */
.cb.pic{padding:4px 4px 6px;max-width:min(280px,100%)}
.cb.pic .ct{display:block;padding:6px 8px 0}
.cb.pic.bare{padding:4px}
.cb.pic .cmeta{margin-right:6px}
.cb.pic.bare .cmeta{position:absolute;right:10px;bottom:10px;top:auto;margin:0;padding:3px 7px;border-radius:999px;background:rgb(0 0 0 / .5);color:#fff;float:none}
.cb.pic.bare .cmeta .cst.seen{color:#8fd8ff}
.cimg{display:block;width:272px;max-width:100%;max-height:340px;padding:0;border:0;border-radius:14px;overflow:hidden;background:rgb(var(--ink) / .06);cursor:zoom-in}
.cimg img{display:block;width:100%;height:100%;object-fit:cover}
.cimg.loading .sk{display:block;width:100%;height:100%}
.cimg.gone{display:flex;align-items:center;gap:8px;width:auto;padding:14px 16px;color:var(--text-3);font-size:.8rem;cursor:default}
.cb.pic .cq{margin:2px 2px 6px;width:auto}
.ch-att{flex:none;align-self:flex-end;width:36px;height:36px;margin:2px 0 2px -8px;border:0;border-radius:50%;background:none;color:var(--text-3);display:grid;place-items:center;transition:color .2s,background .2s}
.ch-att:hover{color:var(--text);background:rgb(var(--ink) / .06)}
.ch-att .i{width:18px;height:18px}
.ch-comp{padding-left:12px}
.ch-photo{border-left-color:var(--ok)}
.ch-thumb{width:46px;height:46px;flex:none;border-radius:10px;object-fit:cover;display:block}
i.ch-thumb{border-radius:10px}
.ch.drop::after{content:"";position:absolute;inset:8px;border-radius:20px;border:2px dashed color-mix(in srgb,var(--c) 70%,transparent);background:color-mix(in srgb,var(--c) 8%,transparent);pointer-events:none;z-index:9}

/* v4.3.3: shared notes in the session chat */
.ch-tabs{justify-self:start;margin-top:2px}
.ch-tabs button{display:inline-flex;align-items:center;gap:6px;position:relative}
.ch-tabs button .i{width:14px;height:14px}
.ch-tabs .udot{position:static;width:7px;height:7px;margin-left:2px;box-shadow:none}
.ch.noteview .ch-mid,.ch.noteview #chFoot,.ch.noteview #chPin{display:none!important}
.ch-notes{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px 16px 14px;animation:popIn .2s var(--ease)}
.ch-notes[hidden]{display:none}
.cn-bar{display:flex;align-items:center;gap:6px;min-height:34px}
.cn-bar .spacer{display:none}
.cn-bar .btn{flex:none}
.cn-st{flex:1 1 0;min-width:0;font-size:.76rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-st::before{content:"";display:inline-block;vertical-align:1px;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--ok)}
.cn-st.busy::before{background:var(--gold)}
.cn-st .cn-live{color:var(--ice);font-weight:500}
.cn-st .cn-err{color:var(--danger-text)}
#cnText{flex:1;min-height:180px;width:100%;resize:none;padding:14px 16px;border-radius:16px;border:1px solid var(--field-line);background:var(--field);color:var(--text);font:inherit;font-size:.92rem;line-height:1.6;outline:none;transition:border-color .2s,box-shadow .2s}
#cnText:focus{border-color:color-mix(in srgb,var(--c) 55%,var(--border-2));box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent)}
#cnText[readonly]{opacity:.8}
#cnText::placeholder{color:var(--text-4)}
@media (max-width:639px){#cnText{font-size:16px}}
.cn-hint{margin:0;font-size:.74rem;color:var(--text-3);line-height:1.45}
@media (max-width:480px){.cn-bar .cn-lab{display:none}.cn-bar .btn.sm:has(.cn-lab){width:34px;padding:0;justify-content:center}.ch-notes{padding:10px 12px 12px}}