*{margin:0;padding:0;box-sizing:border-box}
:root{
  --violet:#7c3aed;--green:#22c55e;--amber:#f59e0b;
  --red:#e8294a;--cyan:#38bdf8;--purple:#9333ea;--purple2:#c084fc;
  --font-family:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--bg:#f5f6fa;--bg2:#eef0f6;--bg3:#ffffff;--bg4:#f3f4f9;--bg5:#e8eaf2;
  --border:rgba(20,20,35,0.08);--border2:rgba(20,20,35,0.14);
  --text:#15151f;--muted:#5f6070;--subtle:#7a7b8c;--dim:#9a9aab;
  --ink:#15151f;--ink-soft:rgba(21,21,31,.72);
  --purple2:#7c3aed;
  --page:#f5f6fa;
  --nav-bg:#ffffff;
  --nav-scrolled:rgba(255,255,255,0.96);
  --nav-border:rgba(20,20,35,0.1);
  --tabbar-bg:rgba(245,246,250,.96);
  --loading-bg:rgba(245,246,250,.72);
  --toast-bg:#ffffff;
  --footer-bg:#e9ebf3;
  --ops-sidebar-bg:#f0f0ed;
  --bg:#f7f7f5;--bg2:#f0f0ed;--page:#f7f7f5;
  --hero-surface:#f7f7f5;
  --hero-cta-bg:#171717;--hero-cta-ink:#ffffff;
  --hero-reel-shadow:0 24px 64px rgba(20,20,30,.12);
  --hero-reel-glow:rgba(147,51,234,.14);
  --hero-reel-frame:#ffffff;
  --hero-reel-frame-border:rgba(20,20,35,.08);
  --hero-reel-card-bg:linear-gradient(165deg,#ffffff,#f3f1ec);
  --hero-chip-bg:#ffffff;--hero-chip-border:rgba(20,20,35,.1);--hero-chip-color:#5c5c68;
  --hero-progress:rgba(20,20,35,.14);--hero-progress-active:#171717;
  --hero-reel-bar:rgba(255,255,255,.78);--hero-reel-handle:#1a1a1a;
  --cta-surface:linear-gradient(135deg,#ffffff 0%,#f3edff 50%,#eef6ff 100%);
  --hairline:rgba(20,20,35,.08);
  --hover-fill:rgba(20,20,35,.06);
  --hover-fill-soft:rgba(20,20,35,.04);
  --outline-btn-border:rgba(20,20,35,.16);
  --faq-wa-surface:linear-gradient(160deg,#f3e8ff 0%,#ede9fe 45%,#e0e7ff 100%);
  --faq-wa-text:#3f3f52;
  --info-bg:rgba(59,130,246,.12);
  --info-border:rgba(37,99,235,.28);
  --info-text:#1e3a8a;
  --warn-bg:rgba(245,158,11,.14);
  --warn-border:rgba(180,83,9,.3);
  --badge-ok:#15803d;
  --badge-warn:#b45309;
  --ops-divider:rgba(20,20,35,.08);
  --ops-divider-strong:rgba(20,20,35,.1);
  --ops-surface-soft:rgba(20,20,35,.03);
  --ops-surface-muted:rgba(20,20,35,.04);
  --ops-hover-row:rgba(124,58,237,.04);
  --ops-muted-text:#6b6b7a;
  --ops-chart-label:#5f6070;
  --ops-bar-track:rgba(20,20,35,.08);
  --ops-bar-track-alt:rgba(20,20,35,.1);
  --ops-status-ok:#15803d;
  --ops-status-info:#0284c7;
  --ops-status-danger:#dc2626;
  --ops-status-warn:#b45309;
}
html{scroll-behavior:smooth;background:var(--page);min-height:100%;height:100%;font-family:var(--font-family);color-scheme:light;overflow-x:clip}
body{background:var(--page);color:var(--text);font-family:var(--font-family);min-height:100vh;min-height:100dvh;position:relative;transition:background .25s ease,color .25s ease;overflow-x:clip;max-width:100%}
/* Public marketing: don't lock html to 100% — nested overflow-x:clip kills iOS vertical scroll */
html:has(body.public-site){
  height:auto;min-height:100%;
  overflow-x:clip;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
body.public-site{
  height:auto;min-height:100dvh;max-height:none;
  overflow-x:clip;overflow-y:visible;
}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--page);pointer-events:none}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:var(--dim);border-radius:99px}
.page{display:none;background:var(--page);opacity:0}
.page.active{display:block;min-height:100dvh;background:var(--page);opacity:1;animation:pageEnter .28s ease both}
#ops.active{animation:pageEnter .28s ease both}
@keyframes pageEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .page{opacity:1}
  .page.active,#ops.active{animation:none;transform:none}
  .lp-ring-stage .hero-ring-card{transition:none!important}
}
@media (prefers-reduced-motion:no-preference){
  button:not(:disabled):active,
  .nav-btn:active,
  .nav-cta:active,
  .nav-brand:active,
  .mobile-tab:active,
  .gallery-filter:active,
  .gallery-item:active,
  .gallery-featured:active,
  .sb-item:active,
  .btn-hero:active,
  .btn-primary:active,
  .btn-p:active,
  .btn-g:active,
  .btn-submit:active,
  .btn-deal:active,
  .option-card:active,
  .mood-chip:active,
  .stat-pill:active,
  .quick-btn:active,
  .approval-bell-btn:active,
  .production-ops-filter:active,
  .faq-item summary:active{
    transform:scale(.97);
  }
  .btn-hero:active{transform:translateY(0) scale(.98)}
  .r-card:active,.svc-card:active{transform:translateY(-1px) scale(.99)}
  .gallery-lightbox.open .gallery-lightbox-panel{animation:modalEnter .24s ease both}
  @keyframes modalEnter{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
}
@media(min-width:701px){body.ops-page{height:100dvh;min-height:0;overflow:hidden}}

body.auth-gated #lg-nav,
body.auth-gated .mobile-tabbar{display:none!important}
body.auth-gated{padding-bottom:0!important}

body.public-site{padding-top:64px}
body.public-site #home.lg-landing{padding-top:0!important}
html:has(body.public-site){scroll-padding-top:64px}

/* ── Mobile Tab Bar — Liquid Glass ── */
.mobile-tabbar{
  display:none;
  position:fixed;
  left:20px;right:20px;
  bottom:calc(10px + env(safe-area-inset-bottom,0px));
  z-index:120;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  padding:3px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(40px) saturate(190%) brightness(1.05);
  -webkit-backdrop-filter:blur(40px) saturate(190%) brightness(1.05);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 8px 28px rgba(0,0,0,.11),
    0 1px 4px rgba(0,0,0,.05),
    0 0 0 0.5px rgba(0,0,0,.04);
}
.mobile-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-height:42px;padding:5px 4px;border-radius:14px;
  font-size:9px;font-weight:600;letter-spacing:.01em;
  color:rgba(60,60,67,.48);
  transition:color .18s ease,background .18s ease,box-shadow .18s ease,transform .12s ease;
  position:relative;
}
.mobile-tab-ico{
  display:grid;place-items:center;width:18px;height:18px;
  color:inherit;transition:color .18s ease,transform .18s ease;
}
.mobile-tab-ico svg{display:block;width:17px;height:17px}
.mobile-tab-label{line-height:1;font-size:9px;font-weight:600}
.mobile-tab.active{
  background:rgba(255,255,255,.94);
  color:#0a0a0a;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 2px 8px rgba(0,0,0,.08),
    0 1px 2px rgba(0,0,0,.05);
}
.mobile-tab.active .mobile-tab-ico{color:#0a0a0a}
.mobile-tab:active{transform:scale(.94)}
.mobile-table-scroll-hint{
  display:none;font-size:10px;color:var(--subtle);margin:0 0 10px;padding:8px 12px;
  border-radius:10px;background:var(--hover-fill-soft);border:1px solid var(--border);
}

#home{padding-top:0;height:auto;min-height:100dvh;overflow:visible;background:#f8f8f6}
#home.active{display:block}
#home.lg-landing .lg-shell{background:#f8f8f6;color:#070707}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero{
  height:calc(100dvh - 64px);
  min-height:620px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.82fr);
  align-items:center;
  gap:clamp(32px,5vw,72px);
  padding:clamp(32px,5vh,56px) clamp(36px,6vw,96px);
  background:var(--hero-surface);
  position:relative;
  overflow:hidden;
}
.hero--landing{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  grid-template-columns:unset;text-align:center;
  padding:clamp(28px,4vh,48px) clamp(20px,4vw,40px) clamp(16px,2vh,28px);
  overflow:hidden;
}
.hero-landing-inner{
  width:100%;max-width:920px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0;min-height:0;flex:1;
}
.hero-copy{
  position:relative;z-index:2;max-width:720px;width:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:0;transition:opacity .35s ease,transform .35s ease;
}
.hero-copy.switching{opacity:.08;transform:translateY(10px)}
.hero-chip{
  display:inline-flex;align-items:center;gap:8px;
  align-self:center;width:fit-content;max-width:100%;
  padding:9px 16px;border-radius:999px;margin-bottom:20px;
  font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;
  color:var(--hero-chip-color);background:var(--hero-chip-bg);
  border:1px solid var(--hero-chip-border);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transform:none;
}
.hero-badge{
  background:#fef9c3;color:#854d0e;border-color:#fde047;
  font-size:11px;font-weight:700;letter-spacing:.04em;
}
.hero-badge:before{display:none}
.hero-chip:before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg,var(--red),var(--purple) 55%,var(--cyan));flex-shrink:0;box-shadow:0 0 0 3px rgba(232,41,74,.12)}
.hero h1{
  font-size:clamp(2.35rem,5.8vw,4.35rem);font-weight:800;line-height:1.02;
  letter-spacing:-.045em;color:var(--ink);margin-bottom:16px;
}
.hero-accent{
  font-family:'Instrument Serif',Georgia,'Times New Roman',serif;
  font-style:italic;font-weight:400;letter-spacing:-.02em;
  background:linear-gradient(115deg,var(--red) 0%,var(--purple) 48%,var(--cyan) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero-accent{
  background:linear-gradient(115deg,#e8294a 0%,#9333ea 50%,#38bdf8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.grad{background:linear-gradient(90deg,var(--red),var(--purple),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:clamp(14px,1.25vw,17px);line-height:1.72;color:var(--muted);max-width:540px;margin:0 auto 24px}
.hero-btns{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:clamp(20px,3vh,32px);flex-wrap:wrap}
.btn-hero-outline{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 24px;border-radius:999px;
  font-size:14px;font-weight:650;color:var(--ink);
  background:transparent;border:1px solid var(--outline-btn-border);
  transition:background .2s,border-color .2s,transform .2s;
}
.btn-hero-outline:hover{background:var(--hover-fill-soft);border-color:var(--border2)}
.btn-hero{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 26px;border-radius:999px;border:none;cursor:pointer;
  font-size:15px;font-weight:700;color:var(--hero-cta-ink);background:var(--hero-cta-bg);
  box-shadow:0 10px 28px rgba(0,0,0,.12);transition:transform .2s,opacity .2s,box-shadow .2s;
}
.btn-hero:hover{transform:translateY(-1px);opacity:.92;box-shadow:0 14px 34px rgba(0,0,0,.16)}
.btn-hero-icon{
  width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;
  background:linear-gradient(180deg,var(--red),var(--purple) 55%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.btn-hero-icon{
  /* On dark CTA button: keep brand spark visible */
  filter:saturate(1.05);
}
.hero-link{
  font-size:14px;font-weight:650;color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.hero-link:hover{color:var(--purple2);border-bottom-color:rgba(147,51,234,.35)}
.hero-slide-meta{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:8px;
  align-self:center;width:fit-content;
}
.hero-slide-meta>#hero-meta{display:none}
.hero-ring-stage{
  position:relative;width:100%;max-width:100%;flex:1 1 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:clamp(220px,32vh,340px);margin-top:4px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.hero-ring-perspective{
  width:100%;height:clamp(220px,30vh,320px);
  display:flex;align-items:center;justify-content:center;
  perspective:1100px;perspective-origin:50% 50%;
}
.hero-ring{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
}
.hero-ring-card{
  position:absolute;left:50%;top:50%;
  width:clamp(148px,16vw,196px);height:clamp(196px,22vw,260px);
  margin-left:calc(clamp(148px,16vw,196px) / -2);
  margin-top:calc(clamp(196px,22vw,260px) / -2);
  padding:0;border:none;border-radius:20px;overflow:hidden;cursor:pointer;
  background:var(--bg3);border:1px solid rgba(20,20,35,.1);
  box-shadow:0 18px 48px rgba(20,20,35,.14);
  transition:transform .75s cubic-bezier(.22,1,.36,1),filter .75s cubic-bezier(.22,1,.36,1),opacity .75s ease,box-shadow .75s ease;
  will-change:transform,filter,opacity;
  -webkit-tap-highlight-color:transparent;
}
.hero-ring-card img,
.hero-ring-card-fill{
  width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
}
.hero-ring-card-fill{
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(2rem,4vw,2.75rem);font-weight:900;letter-spacing:-.04em;color:rgba(255,255,255,.92);
}
.hero-ring-card.is-active{
  box-shadow:0 28px 64px rgba(20,20,35,.22),0 0 0 1px rgba(255,255,255,.5) inset;
  border-color:rgba(20,20,35,.06);
}
.hero-ring-caption{
  margin-top:14px;text-align:center;min-height:52px;
  transition:opacity .35s ease,transform .35s ease;
}
.hero-ring-caption.switching{opacity:.1;transform:translateY(6px)}
.hero-ring-caption-kicker{
  display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--subtle);margin-bottom:4px;
}
.hero-ring-caption strong{
  display:block;font-size:clamp(14px,1.6vw,17px);font-weight:800;letter-spacing:-.02em;color:var(--ink);
}
.hero-progress{display:flex;gap:8px;flex-shrink:0;justify-content:center}
.hero-progress span{
  display:block;width:28px;height:3px;border-radius:99px;background:var(--hero-progress);
  overflow:hidden;cursor:pointer;transition:width .25s,background .25s,box-shadow .25s;
}
.hero-progress span.active{
  width:42px;
  background:linear-gradient(90deg,var(--red),var(--purple),var(--cyan));
  box-shadow:0 0 12px rgba(147,51,234,.3);
}

.hero-right{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;min-height:0}
.hero-cinema{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
.hero-cinema-glow{
  position:absolute;inset:6% 8% -4%;border-radius:32px;
  background:radial-gradient(circle at 50% 42%,var(--hero-reel-glow),transparent 70%);
  filter:blur(32px);pointer-events:none;z-index:0;
}
.hero-cinema-frame{
  position:relative;z-index:1;width:min(30vw,340px);max-height:calc(100dvh - 200px);
  padding:10px;border-radius:18px;
  background:linear-gradient(180deg,#1a1a20 0%,#0a0a0e 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--hero-reel-shadow),0 0 0 1px rgba(0,0,0,.5) inset;
}
.hero-cinema-frame{
  background:linear-gradient(180deg,#2a2a32 0%,#121218 100%);
  border-color:rgba(0,0,0,.22);
  box-shadow:0 28px 70px rgba(20,20,30,.18),0 0 0 1px rgba(255,255,255,.06) inset;
}
.hero-cinema-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 6px 10px;gap:10px;
}
.hero-cinema-rec{
  display:inline-flex;align-items:center;gap:6px;
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
.hero-cinema-rec-dot{
  width:6px;height:6px;border-radius:50%;background:var(--red);
  box-shadow:0 0 10px rgba(232,41,74,.65);
  animation:heroReelPulse 1.6s ease-in-out infinite;
}
@keyframes heroReelPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.86)}}
.hero-cinema-tc{
  font-size:10px;font-weight:700;letter-spacing:.12em;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.45);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.hero-cinema-viewport{
  position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#000;
}
.hero-cinema-letterbox{
  position:absolute;left:0;right:0;z-index:4;height:7.5%;
  background:#000;pointer-events:none;
}
.hero-cinema-letterbox--top{top:0}
.hero-cinema-letterbox--bottom{bottom:0}
.hero-cinema-stage{position:absolute;inset:0;background:#050508}
.hero-cinema-viewport.is-youtube .hero-cinema-letterbox{display:none}
.hero-cinema-stage img,
.hero-cinema-stage video,
.hero-cinema-stage .hero-reel-embed{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05) contrast(1.04);
  transition:opacity .4s ease,transform .5s ease;
}
.hero-cinema-stage.is-youtube{overflow:hidden}
/* Crop video landscape YouTube agar penuh di frame vertikal 9:16 (seragam semua slide). */
.hero-cinema-stage.is-youtube .hero-reel-embed{
  top:50%;left:50%;width:316%;height:100%;max-width:none;max-height:none;
  object-fit:unset;
  transform:translate(-50%, -50%);
  transform-origin:center center;
  pointer-events:none;
}
.hero-cinema-stage.is-youtube .hero-reel-embed.switching{
  opacity:.35;
  transform:translate(-50%, -50%);
}
.hero-cinema-stage img.switching,
.hero-cinema-stage video.switching,
.hero-cinema-stage .hero-reel-embed.switching{opacity:.35;transform:scale(1.02)}
.hero-cinema-stage img{position:absolute;inset:0;z-index:1}
.hero-cinema-stage video{position:absolute;inset:0;z-index:2;border:0;background:#050508}
.hero-cinema-stage .hero-reel-embed{position:absolute;inset:0;z-index:2;border:0;background:#050508}
.hero-cinema-stage video.is-hidden,
.hero-cinema-stage .hero-reel-embed.is-hidden,
.hero-cinema-stage img.is-hidden{opacity:0;pointer-events:none;visibility:hidden}
.hero-reel-loading{
  position:absolute;inset:0;z-index:5;display:none;align-items:center;justify-content:center;gap:10px;
  flex-direction:column;background:#050508;color:rgba(255,255,255,.72);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.hero-reel-loading.show{display:flex}
.hero-reel-loading span{
  width:28px;height:28px;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);border-top-color:rgba(167,139,250,.95);
  animation:spin .7s linear infinite;
}
.hero-cinema-grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.hero-cinema-vignette{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.42),inset 0 -40px 60px rgba(0,0,0,.28);
}
.hero-cinema-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 6px 2px;
}
.hero-cinema-label{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.88);
  background:linear-gradient(90deg,var(--red),var(--purple),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-cinema-format{
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
.hero-cinema-caption{
  position:relative;z-index:1;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--subtle);text-align:center;
}

@media(min-width:701px) and (max-width:980px){
  #home{height:auto;overflow:auto}
  #home>.feat-strip,#home>.home-extra,#home>footer{display:block}
  .hero--landing{height:auto;min-height:calc(100dvh - 64px);padding:32px 20px 40px}
  .hero h1{font-size:clamp(2.1rem,9vw,3.2rem)}
}
@media(max-width:700px){
  .page:not(#home) .hero{height:auto;min-height:calc(100dvh - 64px);grid-template-columns:1fr;padding:32px 24px 48px;gap:36px}
}
@media(max-height:760px) and (min-width:981px){
  .hero--landing{padding-top:20px;padding-bottom:12px}
  .hero-badge{margin-bottom:12px}
  .hero h1{font-size:clamp(2rem,4.5vw,3.4rem);margin-bottom:10px}
  .hero-sub{font-size:14px;margin-bottom:16px}
  .hero-btns{margin-bottom:16px}
  .hero-ring-stage{min-height:200px}
  .hero-ring-perspective{height:200px}
  .hero-ring-card{width:140px;height:186px;margin-left:-70px;margin-top:-93px}
}

.feat-strip{padding:60px 80px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
@media(max-width:900px){.feat-strip{grid-template-columns:1fr 1fr;padding:40px 24px}}
.feat-card{text-align:center;padding:24px 16px}
.feat-icon{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:22px;background:rgba(147,51,234,.12);border:1px solid rgba(147,51,234,.2);transition:transform .2s}
.feat-card:hover .feat-icon{transform:scale(1.1)}
.feat-card h3{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
.feat-card p{font-size:12px;line-height:1.7;color:var(--muted)}

.section-wrap{padding:80px;max-width:1280px;margin:0 auto}
@media(max-width:900px){.section-wrap{padding:60px 24px}}
.s-label{font-size:11px;font-weight:700;letter-spacing:.15em;margin-bottom:12px}
.s-title{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:900;letter-spacing:-.02em;margin-bottom:12px}
.s-sub{font-size:13px;color:var(--muted);margin-bottom:48px}
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.results-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.results-grid{grid-template-columns:1fr}}
.r-card{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;min-height:220px;transition:transform .25s}
.r-card:hover{transform:translateY(-3px)}
.r-plat{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-bottom:8px}
.r-name{font-size:12px;font-weight:600;color:var(--ink)}.r-role{font-size:10px;color:var(--subtle);margin-bottom:12px}
.r-metric{font-size:2rem;font-weight:900;color:var(--ink);margin-bottom:2px}
.r-metric-lbl{font-size:11px;color:var(--subtle);margin-bottom:12px}
.r-quote{font-size:11px;line-height:1.6;color:var(--muted);font-style:italic}

.svc-wrap{background:var(--bg2);padding:80px 0}
.svc-inner{max-width:1280px;margin:0 auto;padding:0 80px}
@media(max-width:900px){.svc-inner{padding:0 24px}}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.svc-grid{grid-template-columns:1fr}}
.svc-card{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:24px;transition:border-color .2s,transform .25s}
.svc-card:hover{border-color:rgba(147,51,234,.3);transform:translateY(-2px)}
.svc-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px}
.svc-card h3{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
.svc-card p{font-size:12px;line-height:1.7;color:var(--muted)}

.cta-wrap{padding:80px}
@media(max-width:900px){.cta-wrap{padding:60px 24px}}
.cta-inner{max-width:800px;margin:0 auto;border-radius:28px;padding:60px 40px;text-align:center;background:var(--cta-surface);border:1px solid rgba(147,51,234,.2);position:relative;overflow:hidden}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;height:60%;border-radius:50%;background:radial-gradient(circle,rgba(147,51,234,.22),transparent 70%);pointer-events:none}
.cta-inner>*{position:relative;z-index:1}
.cta-inner h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;letter-spacing:-.02em;color:var(--ink);margin:12px 0}
.cta-inner p{font-size:13px;color:var(--muted);margin-bottom:32px;max-width:440px;margin-left:auto;margin-right:auto}
.cta-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

footer{padding:56px 80px 32px;border-top:1px solid var(--hairline);background:var(--footer-bg)}
@media(max-width:900px){footer{padding:40px 24px 24px}}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
.footer-tagline{font-size:12px;line-height:1.7;color:var(--subtle);margin:12px 0}
.footer-socials{display:flex;gap:10px}
.social-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--border2);color:var(--subtle);font-size:14px;transition:background .2s}
.social-btn:hover{background:var(--hover-fill)}
.footer-col h4{font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--dim);margin-bottom:16px;text-transform:uppercase}
.footer-col a{display:block;font-size:12px;color:var(--subtle);margin-bottom:10px;transition:color .2s}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--hairline)}
.footer-bottom p{font-size:11px;color:var(--dim)}
.app-copyright{padding:8px 16px;text-align:center;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);background:var(--bg);border-top:1px solid var(--hairline)}
.ops-main>.app-copyright,
.ops-main>.ops-footer-copyright{
  flex:0 0 auto;
  flex-shrink:0;
  width:100%;
  margin-top:0;
  background:var(--bg5);
  border-top:1px solid var(--hairline);
}

#ops{display:none;height:calc(100dvh - 64px);margin-top:64px;overflow:hidden;background:var(--bg)}
#ops.active{display:flex}
#ops:has(#ops-login-panel.active){background:transparent}
.ops-sidebar{width:224px;flex-shrink:0;display:flex;flex-direction:column;justify-content:space-between;padding:20px 12px;overflow-y:auto;border-right:1px solid var(--border);background:var(--ops-sidebar-bg)}
.sb-menu-toggle{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;margin:0 auto 10px;border-radius:10px;
  color:var(--muted);flex-shrink:0;
}
.sb-menu-toggle svg{
  width:20px;height:20px;display:block;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.sb-ver{font-size:9px;font-weight:700;letter-spacing:.15em;color:var(--dim);padding:0 8px;margin-bottom:16px;text-transform:uppercase}
.sb-group{margin-bottom:20px}
.sb-group-lbl{font-size:9px;font-weight:600;letter-spacing:.15em;color:var(--subtle);padding:0 8px;margin-bottom:8px;text-transform:uppercase}
.sb-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;font-size:12px;font-weight:500;color:var(--muted);border:1px solid transparent;transition:all .2s;cursor:pointer;margin-bottom:2px;width:100%;text-align:left;background:none}
.sb-item:hover{color:var(--ink);background:var(--hover-fill-soft)}
.sb-item.active{color:var(--purple2);background:rgba(147,51,234,.15);border-color:rgba(147,51,234,.25)}
.sb-ico{
  flex-shrink:0;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
}
.sb-ico svg{
  width:18px;height:18px;display:block;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.sb-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sb-status{display:flex;align-items:center;gap:8px;padding:0 8px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.sb-status span{font-size:10px;color:var(--dim)}
.ops-main{flex:1;display:flex;flex-direction:column;height:calc(100dvh - 64px);min-width:0;overflow:hidden;background:var(--bg)}

/* Desktop: icon rail collapsed — expands on hover/focus, main flexes with it */
@media(min-width:701px){
  .ops-sidebar{
    --ops-sb-collapsed:56px;
    --ops-sb-expanded:224px;
    width:var(--ops-sb-collapsed);
    min-width:var(--ops-sb-collapsed);
    padding:14px 8px;
    overflow:hidden;
    white-space:nowrap;
    position:relative;
    z-index:6;
    transition:width .28s ease,min-width .28s ease,padding .28s ease,box-shadow .28s ease;
  }
  .ops-sidebar .sb-menu-toggle{display:flex}
  .ops-sidebar .sb-ver,
  .ops-sidebar .sb-group-lbl,
  .ops-sidebar .sb-label,
  .ops-sidebar .sb-status span{
    opacity:0;
    max-width:0;
    height:0;
    overflow:hidden;
    margin:0;
    padding:0;
    pointer-events:none;
    transition:opacity .16s ease,max-width .28s ease;
  }
  .ops-sidebar .sb-group{margin-bottom:8px}
  .ops-sidebar .sb-item{
    justify-content:center;
    gap:0;
    padding:10px 0;
    width:40px;
    margin:0 auto 4px;
  }
  .ops-sidebar .sb-status{
    justify-content:center;
    padding:8px 0 4px;
  }
  .ops-sidebar:hover,
  .ops-sidebar:focus-within{
    width:var(--ops-sb-expanded);
    min-width:var(--ops-sb-expanded);
    padding:20px 12px;
    overflow-y:auto;
    box-shadow:8px 0 28px rgba(0,0,0,.08);
  }
  .ops-sidebar:hover .sb-ver,
  .ops-sidebar:focus-within .sb-ver,
  .ops-sidebar:hover .sb-group-lbl,
  .ops-sidebar:focus-within .sb-group-lbl,
  .ops-sidebar:hover .sb-label,
  .ops-sidebar:focus-within .sb-label,
  .ops-sidebar:hover .sb-status span,
  .ops-sidebar:focus-within .sb-status span{
    opacity:1;
    max-width:180px;
    height:auto;
    pointer-events:auto;
    transition-delay:.05s;
  }
  .ops-sidebar:hover .sb-ver,
  .ops-sidebar:focus-within .sb-ver{
    padding:0 8px;margin-bottom:16px;
  }
  .ops-sidebar:hover .sb-group-lbl,
  .ops-sidebar:focus-within .sb-group-lbl{
    padding:0 8px;margin-bottom:8px;
  }
  .ops-sidebar:hover .sb-group,
  .ops-sidebar:focus-within .sb-group{margin-bottom:20px}
  .ops-sidebar:hover .sb-item,
  .ops-sidebar:focus-within .sb-item{
    justify-content:flex-start;
    gap:10px;
    padding:8px 12px;
    width:100%;
    margin:0 0 2px;
  }
  .ops-sidebar:hover .sb-status,
  .ops-sidebar:focus-within .sb-status{
    justify-content:flex-start;
    padding:0 8px;
    gap:8px;
  }
  .ops-sidebar:hover .sb-menu-toggle,
  .ops-sidebar:focus-within .sb-menu-toggle{
    margin:0 0 12px 4px;
  }
}
.ops-header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:none;flex-shrink:0;background:var(--bg3);gap:12px}
.ops-header h2{font-size:14px;font-weight:600;color:var(--ink);margin-right:auto}
.ops-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.approval-bell-wrap{position:relative;z-index:50}
.approval-bell-btn{position:relative;width:38px;height:38px;border-radius:12px;border:1px solid var(--border);background:var(--bg3);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s,color .2s}
.approval-bell-btn svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.approval-bell-btn:hover,.approval-bell-btn.open{border-color:var(--ops-divider-strong,rgba(147,51,234,.35));background:var(--ops-surface-muted);color:var(--purple2)}
.approval-bell-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;display:none;align-items:center;justify-content:center;line-height:1}
.approval-bell-badge.show{display:flex}
.approval-dropdown{
  position:absolute;right:0;top:calc(100% + 8px);
  width:min(400px,calc(100vw - 24px));max-height:min(72vh,520px);
  display:none;flex-direction:column;
  background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  z-index:120;overflow:hidden;
}
.approval-dropdown.open{display:flex}
.approval-dd-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px;border-bottom:1px solid var(--ops-divider);flex-shrink:0}
.approval-dd-head strong{font-size:12px;color:var(--ink)}
.approval-dd-head span{font-size:10px;color:var(--subtle)}
.approval-dd-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px 10px;border-bottom:1px solid var(--ops-divider);flex-shrink:0}
.approval-dd-tab{padding:7px 6px;border-radius:8px;border:1px solid transparent;background:transparent;font-size:10px;font-weight:700;color:var(--muted);cursor:pointer}
.approval-dd-tab.active{color:var(--ink);background:var(--ops-surface-muted);border-color:var(--ops-divider)}
.approval-dd-list{overflow:auto;padding:10px;flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.approval-dd-group{display:flex;flex-direction:column;gap:6px}
.approval-dd-group-head{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 2px;position:sticky;top:0;background:var(--bg);z-index:1}
.approval-dd-group-label{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle)}
.approval-dd-group-count{font-size:10px;font-weight:700;color:var(--muted);background:var(--ops-surface-muted);padding:2px 7px;border-radius:999px;border:1px solid var(--ops-divider)}
.approval-dd-group-items{display:flex;flex-direction:column;gap:8px}
.approval-dd-project{font-size:10px;font-weight:600;color:var(--subtle);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.approval-dd-actor{font-size:10px;color:var(--purple2);font-weight:600;margin-top:4px}
.approval-dd-progress{font-size:11px;color:var(--muted);margin-top:4px}
.approval-dd-progress strong{color:var(--purple2)}
.approval-dd-empty{padding:28px 14px;text-align:center;font-size:12px;color:var(--muted);line-height:1.55}
.approval-dd-item{
  display:block;width:100%;text-align:left;padding:12px 14px;
  border:1px solid var(--border);border-radius:12px;
  background:var(--bg3);cursor:pointer;color:inherit;
  position:relative;transition:border-color .15s,background .15s,box-shadow .15s;
  font:inherit;-webkit-tap-highlight-color:transparent;
}
.approval-dd-item:hover,.approval-dd-item:focus-visible{
  border-color:rgba(147,51,234,.28);background:var(--ops-surface-muted);
  box-shadow:0 4px 14px rgba(0,0,0,.06);outline:none;
}
.approval-dd-item.is-read{opacity:.78}
.approval-dd-item.is-dismissed{opacity:.55}
.approval-dd-item.is-unread{border-color:rgba(147,51,234,.22)}
.approval-dd-item.is-unread:before{
  content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--purple2);
}
.approval-dd-item.is-unread{padding-left:16px}
.approval-dd-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.approval-dd-tag{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:999px;border:1px solid transparent;flex-shrink:0}
.approval-dd-tag.pending{color:#7c3aed;background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.22)}
.approval-dd-tag.rejected{color:#b91c1c;background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.22)}
.approval-dd-tag.approved{color:#15803d;background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.22)}
.approval-dd-title{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 4px;line-height:1.35}
.approval-dd-meta{font-size:11px;color:var(--muted);line-height:1.5;margin:0}
.approval-dd-time{font-size:10px;color:var(--subtle);margin-top:6px}
.approval-dd-amount{font-size:12px;font-weight:700;color:var(--purple2);margin-top:6px}
.approval-dd-dismiss{
  position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:8px;
  border:none;background:transparent;color:var(--subtle);font-size:16px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity .15s,background .15s,color .15s;padding:0;font-family:inherit;
}
.approval-dd-item:hover .approval-dd-dismiss,.approval-dd-item:focus-within .approval-dd-dismiss{opacity:1}
.approval-dd-dismiss:hover{background:var(--hover-fill-soft);color:var(--ink)}
@media(max-width:700px){
  .approval-dd-dismiss{opacity:.55}
}
.approval-modal-backdrop{position:fixed;inset:0;background:rgba(8,10,18,.58);z-index:9600;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(6px)}
.approval-modal-backdrop.open{display:flex}
#legal-modal{z-index:9700}
.approval-modal{width:min(560px,100%);max-height:min(90vh,760px);overflow:auto;background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:0;box-shadow:0 24px 64px rgba(0,0,0,.28)}
.approval-modal-hero{padding:20px 22px 16px;border-bottom:1px solid var(--ops-divider);background:linear-gradient(135deg,rgba(147,51,234,.14),rgba(147,51,234,.02))}
.approval-modal-hero h3{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 6px}
.approval-modal .am-sub{font-size:12px;color:var(--muted);margin:0;line-height:1.5}
.approval-modal-body{padding:18px 22px 22px}
.approval-modal .am-amount{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:var(--ops-surface-muted);border:1px solid var(--ops-divider);margin-bottom:14px}
.approval-modal .am-amount-label{font-size:11px;font-weight:700;color:var(--subtle);text-transform:uppercase;letter-spacing:.06em}
.approval-modal .am-amount-value{font-size:22px;font-weight:900;color:var(--purple2);line-height:1.1}
.approval-modal .am-grid{display:grid;gap:0;margin-bottom:14px;border:1px solid var(--ops-divider);border-radius:14px;overflow:hidden}
.approval-modal .am-row{display:grid;grid-template-columns:132px 1fr;gap:0;font-size:12px;border-bottom:1px solid var(--ops-divider)}
.approval-modal .am-row:last-child{border-bottom:none}
.approval-modal .am-row span:first-child{color:var(--subtle);font-weight:700;padding:11px 12px;background:var(--ops-surface-muted)}
.approval-modal .am-row span:last-child{color:var(--ink);word-break:break-word;padding:11px 12px}
.approval-modal .am-proof{margin:0 0 14px;padding:12px 14px;border-radius:14px;border:1px dashed var(--ops-divider-strong,var(--border));background:var(--bg3)}
.approval-modal .am-proof a{color:var(--purple2);font-weight:700;font-size:12px;text-decoration:none}
.approval-modal .am-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.approval-modal .am-actions .btn-p,.approval-modal .am-actions .btn-s{min-height:42px;padding:10px 14px;border-radius:12px;font-weight:700}
.approval-modal textarea{min-height:84px;resize:vertical}
/* Tombol approve/reject: pakai warna solid + teks putih agar kontras jelas.
   Selector di-scope ke .approval-modal .am-actions supaya menang atas .btn-p (gradient ungu). */
.approval-modal .am-actions .btn-approve,.btn-approve{background:#16a34a;color:#fff;border:1px solid #15803d}
.approval-modal .am-actions .btn-reject,.btn-reject{background:#dc2626;color:#fff;border:1px solid #b91c1c}
.approval-modal-backdrop.is-busy{cursor:wait}
.approval-modal.is-busy .am-actions button{opacity:.72;cursor:wait;pointer-events:none}
.approval-modal .am-actions .btn-approve:hover,.btn-approve:hover{background:#15803d;opacity:1}
.approval-modal .am-actions .btn-reject:hover,.btn-reject:hover{background:#b91c1c;opacity:1}
.approval-modal .am-actions .btn-approve{background:#16a34a;color:#fff}
.approval-modal .am-actions .btn-reject{background:#dc2626;color:#fff}
.approval-dropdown,.approval-modal{box-shadow:0 18px 40px rgba(15,23,42,.12)}
.approval-modal-hero{background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(255,255,255,.7))}
.admin-profile{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 10px;border-radius:14px;background:var(--bg3);border:1px solid var(--border)}
.admin-avatar{width:28px;height:28px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--red),var(--purple));color:#fff;font-size:11px;font-weight:900;text-transform:uppercase}
.admin-meta{min-width:0}
.admin-name{font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.admin-role{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--purple2);text-transform:uppercase;margin-top:2px}
.btn-logout{padding:6px 10px;border-radius:9px;font-size:10px;font-weight:700;color:#fca5a5;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.22);cursor:pointer;transition:opacity .2s}
.btn-logout:hover{opacity:.8}
.ops-content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:24px}
.ops-view{display:none}.ops-view.active{display:block}

.stats-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.stat-pill{padding:10px 12px;border-radius:12px;cursor:pointer;transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .22s ease;border:1px solid var(--border);background:var(--bg3)}
.stat-pill:hover{transform:translateY(-2px) scale(1.02);border-color:rgba(147,51,234,.22);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.stat-pill-label{font-size:9px;font-weight:600;margin-bottom:4px}
.stat-pill-val{font-size:20px;font-weight:900;color:var(--ink)}

.leads-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.search-box{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;flex:1;min-width:180px;background:var(--bg3);border:1px solid var(--border)}
.search-box input{background:transparent;border:none;outline:none;font-size:12px;color:var(--text);width:100%}
.search-box input::placeholder{color:var(--subtle)}
.filter-box{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;background:var(--bg3);border:1px solid var(--border)}
.filter-box select{background:transparent;border:none;outline:none;font-size:12px;color:var(--muted);appearance:none}
.sync-info{font-size:10px;color:var(--subtle)}

/* Client Status — card grid layout */
.leads-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.lead-card{
  position:relative;background:var(--bg3);border:1px solid var(--border);border-radius:18px;
  padding:18px;cursor:pointer;
  transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .22s ease;
}
.lead-card:hover{
  transform:translateY(-3px);border-color:rgba(147,51,234,.28);
  box-shadow:0 14px 36px rgba(0,0,0,.22),0 0 0 1px rgba(147,51,234,.08);
}
.lead-card.is-open{border-color:rgba(147,51,234,.45);box-shadow:0 0 0 2px rgba(147,51,234,.18)}
.lead-card.saving{opacity:.55;pointer-events:none}
.lc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.lc-id{font-size:11px;font-weight:800;color:var(--purple2);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-client{font-size:15px;font-weight:800;color:var(--ink);line-height:1.25;margin-bottom:4px;overflow-wrap:anywhere}
.lc-category{font-size:11px;color:var(--muted);line-height:1.4;margin-bottom:14px;overflow-wrap:anywhere}
.lc-meta-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.lc-meta{display:flex;flex-direction:column;gap:3px}
.lc-meta-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
.lc-meta-value{font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.lc-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid var(--ops-divider)}
.lc-ts{font-size:10px;color:var(--subtle)}
.lc-actions{display:flex;gap:6px;align-items:center}
.lc-drive-link{font-size:11px;font-weight:700;color:#fff;text-decoration:none;padding:4px 10px;border-radius:8px;background:#18181b;border:none;transition:opacity .15s}
.lc-drive-link:hover{opacity:.8}
.leads-card-footer{margin-top:12px;display:flex;justify-content:space-between;align-items:center}
.leads-card-footer p{font-size:10px;color:var(--dim)}
.leads-table-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--bg5);border-top:1px solid var(--ops-divider)}
.leads-table-footer p{font-size:10px;color:var(--dim)}

.lead-id{font-size:12px;font-weight:700;color:var(--purple2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-client{font-size:12px;font-weight:600;color:var(--ink)}
.lead-ts{font-size:10px;color:var(--subtle);margin-top:2px}
.lead-cat{font-size:11px;color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.lead-pic{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-total{font-size:11px;font-weight:700;color:var(--ink);line-height:1.35;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:600;cursor:pointer;transition:opacity .15s;white-space:nowrap}
.status-badge:hover{opacity:.8}
.status-dot-sm{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.status-select{width:100%;padding:4px 8px;border-radius:8px;font-size:11px;font-weight:600;outline:none;appearance:none;cursor:pointer}

.detail-row{padding:12px 16px 14px;background:var(--bg5);border-bottom:1px solid var(--ops-divider);display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.detail-row-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:4px}
.detail-row-val{font-size:12px;color:var(--ops-muted-text)}
.project-detail{display:none;margin-bottom:18px;max-width:100%;overflow:hidden}
.project-detail.show{display:block}
.project-detail-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.project-detail-title{min-width:0}
.project-detail-kicker{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--purple2);margin-bottom:6px}
.project-detail-title h3{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:6px;line-height:1.15}
.project-detail-title p{font-size:11px;color:var(--muted);line-height:1.5}
.project-detail-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.project-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.project-detail-metric{padding:12px;border-radius:14px;background:var(--bg4);border:1px solid var(--ops-divider-strong);min-height:78px}
.project-detail-metric span{display:block;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.project-detail-metric strong{display:block;font-size:13px;color:var(--ink);line-height:1.35;word-break:break-word}
.project-detail-metric small{display:block;font-size:10px;color:var(--subtle);line-height:1.45;margin-top:4px}
.project-detail-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:14px}
.project-detail-section{padding:14px;border-radius:16px;background:var(--ops-surface-soft);border:1px solid var(--ops-divider-strong)}
.project-detail-section h4{font-size:11px;font-weight:800;color:var(--ink);margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em}
.project-detail-list{display:grid;gap:8px}
.project-detail-item{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--ops-divider);font-size:11px;color:var(--muted)}
.project-detail-item:last-child{border-bottom:none}
.project-detail-item span:first-child{color:var(--subtle);font-weight:700}
.project-detail-item span:last-child{text-align:right;color:var(--text);word-break:break-word}
.project-detail-notes{font-size:12px;line-height:1.7;color:var(--ops-muted-text);white-space:pre-wrap}
.project-timeline{display:grid;gap:0}
.timeline-item{position:relative;padding:0 0 16px 22px;border-left:1px solid rgba(167,139,250,.2)}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{position:absolute;left:-5px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--purple2);box-shadow:0 0 0 4px rgba(167,139,250,.12)}
.timeline-title{font-size:12px;font-weight:800;color:var(--ink);margin-bottom:4px}
.timeline-desc{font-size:11px;color:var(--ops-muted-text);line-height:1.5;margin-bottom:5px}
.timeline-meta{font-size:10px;color:var(--dim);line-height:1.45}
.timeline-note{margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--ops-surface-muted);font-size:10px;color:var(--muted);line-height:1.5}
.quick-status-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.quick-btn{font-size:10px;padding:3px 9px;border-radius:99px;font-weight:600;cursor:pointer;border:1px solid;transition:opacity .15s}
.quick-btn:hover{opacity:.75}

.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 24px;background:var(--bg3)}
.empty-state p:first-child{font-size:13px;font-weight:600;color:var(--subtle);margin-top:12px}
.empty-state p:last-child{font-size:11px;color:var(--dim);margin-top:4px}

.ops-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:20px;margin-bottom:20px;
  transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .22s ease;
}
.card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.card-hdr h3{font-size:13px;font-weight:600;color:var(--ink)}
.fg{margin-bottom:16px}.fg label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:6px}
.fc{width:100%;padding:10px 14px;border-radius:10px;font-size:12px;background:var(--bg4);color:var(--text);border:1px solid var(--border);outline:none;transition:border-color .2s}
.fc:focus{border-color:rgba(147,51,234,.5)}
.fc::placeholder{color:var(--dim)}
select.fc option{background:var(--bg3);color:var(--text)}
textarea.fc{resize:vertical;min-height:90px}
input[type="date"].fc{color-scheme:inherit}
.map-block{background:var(--bg4);border:1px solid rgba(147,51,234,.2);border-radius:10px;padding:12px;font-size:12px;font-family:var(--font-family);line-height:2}
.map-key{color:var(--purple2)}.map-val{color:var(--subtle)}
.fw{max-width:520px;margin:0 auto}
.btn-p{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;font-size:12px;font-weight:700;color:#fff;background:#18181b;transition:opacity .2s;border:none;cursor:pointer}
.btn-p:hover{opacity:.85}
.btn-p{background:#1c1c1e;color:#fff}
.btn-g{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:11px;font-weight:500;color:var(--muted);background:var(--bg4);border:1px solid var(--border);transition:color .2s;cursor:pointer}
.btn-g:hover{color:var(--ink)}
.btn-deal{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:8px;font-size:11px;font-weight:700;color:#fff;background:#18181b;border:none;cursor:pointer;transition:opacity .2s}
.btn-deal:hover{opacity:.8}
.btn-submit{width:100%;display:flex;justify-content:center;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;font-size:13px;font-weight:700;color:#fff;background:#18181b;border:none;cursor:pointer;transition:opacity .2s}
.btn-submit:hover{opacity:.88}
.btn-eye{font-size:11px;font-weight:500;color:var(--subtle);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:4px;transition:color .2s}
.btn-eye:hover{color:var(--ink)}
.btn-eye.open{color:var(--purple2)}

.payments-thead,.payments-row{
  display:grid;align-items:center;column-gap:18px;row-gap:0;
  width:100%;min-width:1120px;padding:10px 18px;box-sizing:border-box;
  grid-template-columns:minmax(118px,.65fr) minmax(160px,1.1fr) minmax(160px,1.25fr) minmax(132px,.7fr) minmax(148px,.75fr) minmax(128px,.7fr) 72px 56px minmax(128px,.7fr);
}
.payments-thead{background:var(--bg5);border-bottom:1px solid var(--ops-divider-strong);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.payments-row{background:var(--bg3);border-bottom:1px solid var(--ops-divider)}
.payments-thead>span,.payments-row>*{min-width:0}
.payments-thead>span:nth-child(1),.payments-row>:nth-child(1){padding-right:8px}
.payments-thead>span:nth-child(4),.payments-thead>span:nth-child(5),
.payments-row>:nth-child(4),.payments-row>:nth-child(5){text-align:right;padding-right:16px}
.pay-field-label{display:none}
.pay-meta-split{display:contents}
.pay-status-wrap .status-select,.pay-status-wrap .status-badge{max-width:100%}
.pay-id{font-size:11px;font-weight:700;color:var(--purple2)}
.pay-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.payment-balance{font-size:11px;color:var(--muted);line-height:1.5;text-align:right}
.payment-balance strong{display:block;color:var(--ink);font-size:12px;font-variant-numeric:tabular-nums}
.invoice-preview{margin:0 0 14px;padding:12px 14px;border:1px solid rgba(167,139,250,.18);border-radius:14px;background:rgba(124,58,237,.08);font-size:11px;color:var(--muted);line-height:1.6}

/* Payment modal */
.pay-modal-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.pay-modal-overlay.open{opacity:1;pointer-events:auto}
.pay-modal{background:var(--bg3);border:1px solid var(--border);border-radius:22px;width:92%;max-width:540px;max-height:88vh;display:flex;flex-direction:column;transform:translateY(24px) scale(.97);transition:transform .3s cubic-bezier(.22,1,.36,1);box-shadow:0 32px 80px rgba(0,0,0,.35)}
.pay-modal-overlay.open .pay-modal{transform:translateY(0) scale(1)}
.pay-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0;flex-shrink:0}
.pay-modal-header h3{font-size:16px;font-weight:800;color:var(--ink);margin:0}
.pay-modal-close{background:none;border:none;font-size:24px;color:var(--muted);cursor:pointer;padding:0 4px;line-height:1;transition:color .15s}
.pay-modal-close:hover{color:var(--ink)}
.pay-modal-body{padding:16px 24px 24px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.invoice-preview strong{color:var(--ink)}
.btn-pay{font-size:10px;padding:6px 10px;border-radius:8px;font-weight:700;cursor:pointer;border:1px solid;transition:opacity .15s;line-height:1.2}
.btn-pay:hover{opacity:.75}
.btn-pay-verify{background:rgba(34,197,94,.12);color:var(--ops-status-ok);border-color:rgba(34,197,94,.25)}
.btn-pay-review{background:rgba(56,189,248,.1);color:var(--ops-status-info);border-color:rgba(56,189,248,.25)}
.btn-pay-invoice{background:#18181b;color:#fff;border:none}
.btn-pay-reject{background:rgba(239,68,68,.1);color:var(--ops-status-danger);border-color:rgba(239,68,68,.25)}
#ops-access-gate{
  position:relative;
}
#ops-welcome.ops-welcome,
.ops-welcome{
  display:none;
  position:fixed;inset:0;z-index:320;padding:28px 22px;
  place-items:center;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,255,255,.86),transparent 28%),
    radial-gradient(circle at 18% 15%,rgba(147,51,234,.18),transparent 28%),
    radial-gradient(circle at 82% 78%,rgba(56,189,248,.16),transparent 30%),
    linear-gradient(145deg,#f0ecf6,#e6eef4);
  transition:opacity .9s cubic-bezier(.4,0,.2,1),visibility .9s linear;
  overflow:hidden;
}
#ops-access-gate.ops-welcome-open #ops-welcome.ops-welcome:not([hidden]),
body.ops-welcome-open #ops-welcome.ops-welcome:not([hidden]){
  display:grid;
}
#ops-welcome[hidden]{display:none!important}
#ops-access-gate.ops-welcome-open .ops-access-wrap{
  visibility:hidden;pointer-events:none;
}
#ops-access-gate.ops-welcome-open:has(#ops-welcome.is-leaving) .ops-access-wrap{
  visibility:visible;
}
.ops-welcome-inner{
  width:min(100%,430px);min-height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;position:relative;
  z-index:2;
  transition:opacity .75s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.4,0,.2,1);
}
.ops-welcome-kicker{
  position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
  font-size:9px;letter-spacing:2.2px;font-weight:850;color:#71858e;white-space:nowrap;
  transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);
}
.ops-welcome-visual{
  position:relative;width:205px;height:205px;display:grid;place-items:center;
  margin-top:-20px;margin-bottom:32px;
  transition:transform .95s cubic-bezier(.4,0,.2,1),opacity .8s cubic-bezier(.4,0,.2,1);
  transform-origin:center center;
}
.ops-welcome-glow{
  position:absolute;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.88) 0 28%,rgba(147,51,234,.17) 45%,transparent 72%);
  filter:blur(9px);animation:cpIntroGlow 3.4s ease-in-out infinite;
  transition:opacity .8s ease,transform .95s cubic-bezier(.4,0,.2,1);
}
.ops-welcome-orb{
  width:116px;height:116px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:2;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.98),rgba(255,255,255,.46) 40%,rgba(214,232,237,.25) 72%),
    linear-gradient(145deg,rgba(255,255,255,.70),rgba(255,255,255,.20));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 24px 50px rgba(25,58,72,.16),inset 0 2px 0 #fff,inset 0 -12px 25px rgba(86,145,161,.10);
  animation:cpIntroOrb 3.8s ease-in-out infinite;
  transition:transform .95s cubic-bezier(.4,0,.2,1),opacity .8s cubic-bezier(.4,0,.2,1),box-shadow .8s ease;
  transform-origin:center center;
}
.ops-welcome-orb-img{
  width:58px;height:58px;max-height:58px;object-fit:contain;object-position:center;
  position:relative;z-index:2;display:block;pointer-events:none;
  transition:opacity .55s ease,transform .7s cubic-bezier(.4,0,.2,1);
}
.ops-welcome-bubble{
  position:absolute;border-radius:50%;z-index:1;border:1px solid rgba(255,255,255,.78);
  box-shadow:0 12px 24px rgba(24,57,72,.13),inset 0 1px 0 #fff;
  animation:cpIntroBubble 5.5s ease-in-out infinite;
  transition:transform .9s cubic-bezier(.4,0,.2,1),opacity .75s ease;
  transform-origin:center center;
}
.ops-welcome-bubble.b1{width:28px;height:28px;left:23px;top:37px;background:rgba(241,45,88,.55);animation-delay:-.4s}
.ops-welcome-bubble.b2{width:19px;height:19px;right:25px;top:20px;background:rgba(43,184,215,.65);animation-delay:-1.7s}
.ops-welcome-bubble.b3{width:35px;height:35px;right:6px;bottom:36px;background:rgba(134,75,198,.54);animation-delay:-2.4s}
.ops-welcome-bubble.b4{width:16px;height:16px;left:20px;bottom:26px;background:rgba(242,138,24,.60);animation-delay:-3.1s}
.ops-welcome-bubble.b5{width:22px;height:22px;left:76px;top:5px;background:rgba(32,182,93,.52);animation-delay:-4s}
.ops-welcome-copy{
  transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .75s cubic-bezier(.4,0,.2,1);
}
.ops-welcome-copy h1{
  margin:0;font-size:31px;line-height:1.04;letter-spacing:-1.4px;font-weight:500;color:#102b38;
}
.ops-welcome-copy h1 strong{font-weight:850}
.ops-welcome-copy p{
  margin:14px auto 0;max-width:300px;font-size:12px;line-height:1.55;color:#7b8d95;
}
.ops-welcome-action{
  position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1);
}
.ops-welcome-enter{
  width:min(100%,340px);height:52px;border:1px solid rgba(255,255,255,.78);border-radius:18px;color:#fff;
  background:rgba(8,20,27,.86);font-size:12px;font-weight:850;cursor:pointer;
  box-shadow:0 15px 32px rgba(8,24,33,.20),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .2s ease,opacity .35s ease;
}
.ops-welcome-enter:disabled{opacity:.7;cursor:default;transform:scale(.985)}
.ops-welcome-hint{font-size:9px;color:#91a1a8;letter-spacing:.3px}

/* Get Started — clean lift + soft dissolve into dashboard */
#ops-welcome.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#ops-welcome.is-leaving .ops-welcome-inner{
  opacity:0;
  transform:translateY(-10px) scale(.985);
}
#ops-welcome.is-leaving .ops-welcome-kicker{
  opacity:0;
  transform:translateX(-50%) translateY(-6px);
}
#ops-welcome.is-leaving .ops-welcome-copy{
  opacity:0;
  transform:translateY(8px);
}
#ops-welcome.is-leaving .ops-welcome-action{
  opacity:0;
  transform:translateY(12px);
}
#ops-welcome.is-leaving .ops-welcome-visual{
  transform:scale(1.12);
  opacity:0;
}
#ops-welcome.is-leaving .ops-welcome-orb{
  animation:none;
  transform:scale(1.18);
  opacity:0;
  box-shadow:0 10px 30px rgba(25,58,72,.08);
}
#ops-welcome.is-leaving .ops-welcome-glow{
  animation:none;
  opacity:0;
  transform:scale(1.15);
}
#ops-welcome.is-leaving .ops-welcome-orb-img{
  opacity:0;
  transform:scale(.94);
}
#ops-welcome.is-leaving .ops-welcome-bubble{
  animation:none;
  opacity:0;
}
#ops-welcome.is-leaving .ops-welcome-bubble.b1{transform:translate(-6px,-4px) scale(1.15)}
#ops-welcome.is-leaving .ops-welcome-bubble.b2{transform:translate(7px,-5px) scale(1.12)}
#ops-welcome.is-leaving .ops-welcome-bubble.b3{transform:translate(8px,6px) scale(1.18)}
#ops-welcome.is-leaving .ops-welcome-bubble.b4{transform:translate(-7px,5px) scale(1.1)}
#ops-welcome.is-leaving .ops-welcome-bubble.b5{transform:translate(0,-8px) scale(1.14)}

@media(max-width:360px){
  .ops-welcome-visual{transform:scale(.88);margin-bottom:18px}
  .ops-welcome-copy h1{font-size:28px}
}
@media(prefers-reduced-motion:reduce){
  .ops-welcome-orb,.ops-welcome-glow,.ops-welcome-bubble{animation:none}
  #ops-welcome,.ops-welcome-inner,.ops-welcome-kicker,.ops-welcome-copy,.ops-welcome-action,
  .ops-welcome-orb,.ops-welcome-glow,.ops-welcome-bubble,.ops-welcome-orb-img,.ops-welcome-visual{
    transition:none!important;animation:none!important;
  }
}

.pay-access-gate{text-align:center;padding:48px 24px}
.pay-access-gate h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px}
.pay-access-gate p{font-size:12px;color:var(--muted);margin-bottom:20px}
/* Client shell inherits pay-access-gate text-align:center — reset to left */
#ops-access-gate.is-client-shell,
#ops-access-gate.is-client-shell .client-portal-shell{
  text-align:left;
}
.internal-badge{font-size:9px;padding:2px 8px;border-radius:99px;background:rgba(34,197,94,.12);color:var(--badge-ok);border:1px solid rgba(34,197,94,.25);margin-left:8px}
.users-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,.6fr);gap:14px;align-items:start}
.users-table{border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.users-thead,.users-row{display:grid;grid-template-columns:minmax(0,1.6fr) 86px 72px auto;align-items:center;gap:8px;min-width:0;padding:8px 12px}
.users-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.users-filters .gallery-filter{padding:6px 12px;font-size:10px}
.users-thead{background:var(--bg5);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.users-row{background:var(--bg3);border-top:1px solid var(--ops-divider)}
.user-email{font-size:12px;font-weight:700;color:var(--ink);overflow-wrap:anywhere;line-height:1.25}.user-name{font-size:10px;color:var(--subtle);margin-top:1px}
.user-status{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800}
.user-status.on{background:rgba(34,197,94,.12);color:var(--ops-status-ok);border:1px solid rgba(34,197,94,.25)}
.user-status.off{background:rgba(239,68,68,.1);color:var(--ops-status-danger);border:1px solid rgba(239,68,68,.22)}
.user-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;width:auto;min-width:0}
.user-actions .btn-g,.user-actions .btn-pay{flex:0 0 auto;width:auto;min-width:0;min-height:0;height:28px;padding:0 8px;font-size:10px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.btn-pay-delete{background:rgba(239,68,68,.16);color:var(--ops-status-danger);border-color:rgba(239,68,68,.4)}
.user-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.user-form-grid .fg.full{grid-column:1/-1}
.analytics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;align-items:stretch}
.analytics-card{
  position:relative;overflow:hidden;background:var(--bg3);border:1px solid var(--border);border-radius:18px;padding:18px;min-height:124px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .22s ease;
}
.analytics-card:before{
  content:"";position:absolute;right:-34px;top:-34px;width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle,rgba(147,51,234,.16),transparent 68%);pointer-events:none;
  transition:transform .3s ease,opacity .3s ease;
}
.analytics-label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);margin-bottom:8px}
.analytics-value{font-size:30px;font-weight:900;color:var(--ink);letter-spacing:-.04em;line-height:1}
.analytics-sub{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.4}
.analytics-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:18px;align-items:stretch;grid-auto-rows:minmax(176px,auto)}
.analytics-layout>.ops-card{height:100%;display:flex;flex-direction:column;margin-bottom:0}
.analytics-layout>.ops-card .card-hdr{flex-shrink:0}
.analytics-list{display:grid;gap:10px;flex:1;align-content:center}
.analytics-row{display:grid;grid-template-columns:150px 1fr 54px;gap:12px;align-items:center}
.analytics-row-label{font-size:11px;font-weight:700;color:var(--ops-chart-label)}
.analytics-bar{height:9px;border-radius:999px;background:var(--ops-bar-track);overflow:hidden}
.analytics-bar span{display:block;height:100%;border-radius:999px}
.analytics-row-val{text-align:right;font-size:12px;font-weight:800;color:var(--ink)}
.analytics-money{font-size:22px;font-weight:900;color:var(--ink);letter-spacing:-.03em;line-height:1.08}
.analytics-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;flex:1}
.analytics-card--warn:before{background:radial-gradient(circle,rgba(249,115,22,.18),transparent 68%)}
.analytics-action-panel{margin-bottom:18px}
.analytics-action-hdr{align-items:flex-start;justify-content:space-between;gap:12px}
.analytics-action-hdr h3{margin:0}
.analytics-action-lead{margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.5;font-weight:500}
.analytics-action-badge{
  flex:0 0 auto;min-width:36px;height:36px;padding:0 10px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple2));
  box-shadow:0 6px 18px rgba(124,58,237,.28);
}
.analytics-action-badge.is-clear{background:var(--bg4);color:var(--muted);box-shadow:none;border:1px solid var(--border)}
.analytics-action-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 12px}
.analytics-action-chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  font-size:11px;font-weight:700;border:1px solid var(--border);background:var(--bg4);color:var(--muted);
}
.analytics-action-chip strong{font-size:12px;color:var(--ink)}
.analytics-action-chip.is-warn{border-color:rgba(249,115,22,.35);background:rgba(249,115,22,.08);color:#ea580c}
.analytics-action-chip.is-danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08);color:#dc2626}
.analytics-action-list{display:grid;gap:8px}
.analytics-action-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  width:100%;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--border);
  background:var(--bg3);cursor:pointer;transition:border-color .15s,transform .15s,background .15s;
}
.analytics-action-item:hover{border-color:rgba(147,51,234,.35);background:rgba(147,51,234,.06);transform:translateY(-1px)}
.analytics-action-item-title{margin:0 0 4px;font-size:13px;font-weight:800;color:var(--ink);line-height:1.35}
.analytics-action-item-desc{margin:0;font-size:11px;color:var(--muted);line-height:1.45}
.analytics-action-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.analytics-action-tag{
  display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
}
.analytics-action-tag.pending{background:rgba(249,115,22,.12);color:#ea580c;border:1px solid rgba(249,115,22,.25)}
.analytics-action-tag.rejected{background:rgba(239,68,68,.1);color:#dc2626;border:1px solid rgba(239,68,68,.22)}
.analytics-action-tag.risk{background:rgba(234,179,8,.12);color:#ca8a04;border:1px solid rgba(234,179,8,.25)}
.analytics-action-tag.info{background:rgba(14,165,233,.1);color:#0284c7;border:1px solid rgba(14,165,233,.22)}
.analytics-action-go{font-size:11px;font-weight:700;color:var(--purple2)}
.analytics-action-empty{padding:18px 14px;border-radius:14px;border:1px dashed var(--border);color:var(--muted);font-size:12px;line-height:1.55;text-align:center}
.analytics-charts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.analytics-chart-card .card-hdr{margin-bottom:8px}
.analytics-donut-wrap{position:relative;width:140px;height:140px;margin:8px auto 12px}
.analytics-donut-svg{width:140px;height:140px;display:block;transform:rotate(-90deg)}
.analytics-donut-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;padding:8px;
}
.analytics-donut-center strong{font-size:18px;font-weight:900;color:var(--ink);line-height:1.1}
.analytics-donut-center span{font-size:10px;font-weight:700;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.analytics-donut-legend{display:grid;gap:6px;padding:0 4px 6px}
.analytics-donut-legend-item{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;font-size:11px;color:var(--muted)}
.analytics-donut-legend-item .dot{width:10px;height:10px;border-radius:999px}
.analytics-donut-legend-item strong{font-size:12px;color:var(--ink)}
.analytics-donut-empty{padding:24px 12px;text-align:center;font-size:12px;color:var(--muted)}
.analytics-risk-panel,.analytics-fin-panel{margin-bottom:18px}
.analytics-risk-list{display:grid;gap:8px}
.analytics-risk-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:11px 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg4);
}
.analytics-risk-item button{
  border:none;background:none;padding:0;cursor:pointer;text-align:left;color:inherit;font:inherit;width:100%;
}
.analytics-risk-item.is-clickable{cursor:pointer;transition:background .15s,border-color .15s}
.analytics-risk-item.is-clickable:hover{border-color:rgba(147,51,234,.3);background:rgba(147,51,234,.05)}
.analytics-risk-title{margin:0 0 3px;font-size:12px;font-weight:800;color:var(--ink)}
.analytics-risk-desc{margin:0;font-size:11px;color:var(--muted);line-height:1.45}
.analytics-fin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.analytics-fin-item{padding:12px;border-radius:14px;border:1px solid var(--border);background:var(--bg4);transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .22s ease}
.analytics-fin-item .analytics-label{margin-bottom:6px}
.analytics-fin-item .analytics-money,.analytics-fin-item .analytics-value{font-size:20px}
.analytics-fin-bar-wrap{display:grid;gap:6px}
.analytics-fin-bar-labels{display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:var(--muted)}
.analytics-fin-bar{height:10px;border-radius:999px;background:var(--ops-bar-track);overflow:hidden;display:flex}
.analytics-fin-bar span{display:block;height:100%}
.cashflow-export-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.cashflow-export-panel--compact{margin-bottom:18px;padding:16px 18px}
.cashflow-export-panel--compact h3{font-size:14px}
.cashflow-export-panel--compact p{font-size:11px}
.cashflow-export-panel--compact .btn-p{padding:10px 14px;font-size:12px;min-height:40px}
.cashflow-export-panel h3{margin:0 0 6px;font-size:16px;color:var(--ink)}
.cashflow-export-panel p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.cashflow-export-panel .btn-p{white-space:nowrap}

/* Dashboard card hover — internal ops views (Analytics/Client Status/Production Ops/Billing/Users excluded) */
@media (hover:hover){
  .ops-view:not(#view-production-ops):not(#view-doc-gen):not(#view-users):not(#view-internal-db):not(#view-analytics) .ops-card:hover{
    transform:translateY(-3px);
    border-color:rgba(147,51,234,.26);
    box-shadow:0 14px 38px rgba(0,0,0,.22),0 0 0 1px rgba(147,51,234,.07);
  }
  .ops-view:not(#view-analytics) .analytics-card:hover{
    transform:translateY(-4px);
    border-color:rgba(147,51,234,.34);
    box-shadow:0 18px 42px rgba(0,0,0,.26),0 0 0 1px rgba(147,51,234,.1);
  }
  .ops-view:not(#view-analytics) .analytics-card:hover:before{transform:scale(1.18);opacity:1}
  .ops-view:not(#view-analytics) .analytics-fin-item:hover{
    transform:translateY(-2px);
    border-color:rgba(147,51,234,.24);
    box-shadow:0 10px 26px rgba(0,0,0,.18);
  }
  .ops-view .analytics-action-chip{
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  }
  .ops-view .analytics-action-chip:hover{
    transform:translateY(-2px);
    border-color:rgba(147,51,234,.28);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
  }
  .ops-view:not(#view-production-ops):not(#view-doc-gen):not(#view-users):not(#view-internal-db):not(#view-analytics) .ops-card:hover,
  .ops-view:not(#view-analytics) .analytics-card:hover,
  .ops-view:not(#view-analytics) .analytics-fin-item:hover{
    box-shadow:0 16px 40px rgba(20,20,40,.09),0 0 0 1px rgba(147,51,234,.08);
  }
  .stat-pill:hover{
    box-shadow:0 10px 26px rgba(20,20,40,.08);
  }
}
@media (prefers-reduced-motion:reduce){
  .ops-card,.analytics-card,.analytics-fin-item,.stat-pill,.analytics-action-chip{transition:none!important}
  .ops-view:not(#view-production-ops):not(#view-doc-gen):not(#view-users):not(#view-internal-db):not(#view-analytics) .ops-card:hover,
  .ops-view:not(#view-analytics) .analytics-card:hover,
  .ops-view:not(#view-analytics) .analytics-fin-item:hover,
  .stat-pill:hover,
  .ops-view .analytics-action-chip:hover{transform:none!important;box-shadow:none!important}
}

.production-ops-layout{display:grid;gap:18px;min-width:0}
.production-ops-layout>*{min-width:0}
#production-ops-content{min-width:0}
.production-ops-unified.ops-card{margin-bottom:0;transition:none}
.prodops-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.prodops-page-title h3{font-size:20px;font-weight:800;color:var(--ink);line-height:1.15}
.prodops-page-title .lead-ts{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.6}
.production-ops-unified .production-ops-toolbar{margin-bottom:18px}
.prodops-section-divider{height:1px;background:var(--border);margin:0 0 20px}
.prodops-dept-card-wrap.ops-card{margin-bottom:0;transition:none}
.production-ops-toolbar{display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(220px,.9fr);gap:14px;align-items:end}
.production-ops-toolbar .fg{margin:0}
.production-ops-filter-row{display:flex;gap:8px;flex-wrap:wrap}
.production-ops-filter{padding:9px 14px;border-radius:999px;font-size:11px;font-weight:700;color:var(--muted);background:var(--bg4);border:1px solid var(--border);transition:all .2s}
.production-ops-filter.active{color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple2));border-color:transparent}
.production-ops-dashboard{display:grid;gap:18px;min-width:0}
.production-ops-dashboard>*{min-width:0}
.prodops-summary-card{padding:20px;border-radius:22px;background:linear-gradient(180deg,var(--bg3),var(--bg4));border:1px solid var(--border)}
.prodops-summary-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.prodops-summary-title h3{font-size:24px;font-weight:800;color:var(--ink);line-height:1.15}
.prodops-summary-title p{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.6}
.prodops-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.prodops-badge{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--border)}
.prodops-summary-grid{display:grid;grid-template-columns:160px minmax(0,1fr);gap:18px;align-items:center}
.prodops-donut{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;margin:auto;background:conic-gradient(var(--prodops-color, #ef4444) var(--prodops-percent,0%), var(--ops-bar-track) 0)}
.prodops-donut-inner{width:94px;height:94px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px}
.prodops-donut-inner strong{font-size:28px;font-weight:900;color:var(--ink);line-height:1}
.prodops-donut-inner span{font-size:10px;color:var(--subtle);margin-top:6px;text-transform:uppercase;letter-spacing:.08em}
.prodops-donut-meta{font-size:10px;color:var(--muted);text-align:center;line-height:1.5;margin-top:10px}
.prodops-bars{display:grid;gap:12px}
.prodops-bar-row{display:grid;grid-template-columns:minmax(140px,180px) 1fr 44px;gap:12px;align-items:center}
.prodops-bar-label{font-size:12px;font-weight:700;color:var(--ink)}
.prodops-bar{height:10px;border-radius:999px;background:var(--ops-bar-track);overflow:hidden}
.prodops-bar span{display:block;height:100%;border-radius:999px}
.prodops-bar-val{text-align:right;font-size:12px;font-weight:800;color:var(--ink)}
.prodops-note{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--ops-surface-soft);border:1px solid var(--ops-divider-strong);font-size:11px;color:var(--muted);line-height:1.6}
.prodops-dept-section{padding:0;border-radius:0;background:transparent;border:none;min-width:0;overflow:hidden}
.prodops-dept-card-wrap .prodops-dept-section{padding:0}
.prodops-dept-heading{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);margin-bottom:16px}
.prodops-dept-scroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;padding-bottom:10px;scrollbar-width:thin}
.prodops-dept-scroll::-webkit-scrollbar{height:6px}
.prodops-dept-scroll::-webkit-scrollbar-thumb{background:rgba(147,51,234,.28);border-radius:999px}
.prodops-dept-scroll::-webkit-scrollbar-track{background:transparent}
.prodops-dept-row{display:inline-flex;gap:14px;align-items:stretch;min-width:100%}
.prodops-dept-card{
  position:relative;width:268px;flex:0 0 268px;scroll-snap-align:start;
  padding:18px 16px 16px;border-radius:16px;
  background:var(--bg3);border:1px solid var(--border);
  box-shadow:0 4px 24px rgba(20,20,40,.06);
  display:flex;flex-direction:column;gap:10px;min-height:248px;
}
.prodops-dept-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.prodops-dept-icon{
  width:40px;height:40px;border-radius:12px;background:rgba(147,51,234,.1);
  color:var(--purple2);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.prodops-dept-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.prodops-dept-pct{font-size:22px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.03em}
.prodops-dept-name{font-size:15px;font-weight:800;color:var(--ink);line-height:1.25;margin:0}
.prodops-dept-pic{font-size:11px;color:var(--muted);margin:0;line-height:1.4}
.prodops-dept-status{
  display:inline-flex;align-items:center;gap:6px;width:fit-content;
  padding:5px 10px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.02em;
}
.prodops-dept-status .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.prodops-dept-status.is-done{background:rgba(16,185,129,.12);color:#059669}
.prodops-dept-status.is-done .dot{background:#10b981}
.prodops-dept-status.is-progress{background:rgba(59,130,246,.12);color:#2563eb}
.prodops-dept-status.is-progress .dot{background:#3b82f6}
.prodops-dept-status.is-review{background:rgba(245,158,11,.14);color:#d97706}
.prodops-dept-status.is-review .dot{background:#f59e0b}
.prodops-dept-status.is-pending{background:rgba(148,163,184,.16);color:#64748b}
.prodops-dept-status.is-pending .dot{background:#94a3b8}
.prodops-dept-bar{height:8px;border-radius:999px;background:var(--ops-bar-track);overflow:hidden;margin-top:2px}
.prodops-dept-bar span{display:block;height:100%;border-radius:999px;transition:width .35s ease}
.prodops-dept-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.prodops-folder-btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;
  font-size:11px;font-weight:700;color:#fff;background:#1a1a1a;text-decoration:none;
  transition:opacity .2s,transform .15s;white-space:nowrap;
}
.prodops-folder-btn:hover{opacity:.88;transform:translateY(-1px)}
.prodops-folder-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.prodops-dept-time{font-size:10px;color:var(--subtle);white-space:nowrap;text-align:right}
.prodops-dept-edit-btn{
  display:block;width:100%;margin-top:4px;padding:0;border:none;background:none;
  font-size:10px;font-weight:700;color:var(--purple2);text-align:left;cursor:pointer;
}
.prodops-dept-edit-btn:hover{color:var(--purple);text-decoration:underline}
.prodops-dept-edit{
  display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--ops-divider);
  grid-template-columns:1fr 1fr;gap:10px;
}
.prodops-dept-card.is-editing .prodops-dept-edit{display:grid}
.prodops-dept-card.is-locked{
  border-color:rgba(74,222,128,.28);
  background:linear-gradient(180deg,rgba(74,222,128,.08),transparent);
}
.prodops-dept-card.is-locked .prodops-dept-pct{color:#4ade80}
.prodops-dept-lock-note{
  font-size:10px;line-height:1.45;color:#4ade80;margin-top:8px;
}
.prodops-dept-edit-btn.is-locked{
  color:#4ade80;opacity:1;cursor:pointer;
}
.prodops-folder-btn.is-view-only{
  opacity:.72;cursor:pointer;
}
.prodops-dept-edit .fg{margin:0}
.prodops-dept-edit .fg label{font-size:10px;color:var(--muted)}
.prodops-dept-edit .fc{font-size:11px;background:var(--bg4);border-color:var(--border);color:var(--text)}
.prodops-dept-edit-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.prodops-dept-edit-actions .btn-p{font-size:11px;padding:8px 14px;min-width:132px}
.prodops-dept-edit.is-saving{opacity:.92;pointer-events:none}
.prodops-dept-edit.is-saving .btn-p.is-loading{pointer-events:none;cursor:wait}
.prodops-empty{padding:44px 20px;border-radius:18px;border:1px dashed var(--border2);background:var(--ops-surface-soft);text-align:center;color:var(--muted);font-size:12px}
.dev-card{min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;position:relative}
.dev-page-wrap{min-height:calc(100dvh - 64px);display:flex;align-items:center;justify-content:center;padding:24px}
#gallery.active,#about.active,#faq-contact.active{display:flex;flex-direction:column;min-height:100dvh}
#about.active,
#about.lg-about-page.active{
  display:block;
  height:auto;
  min-height:0;
}
#gallery.lg-work-page,#about.lg-about-page{padding-top:0;min-height:100dvh;background:transparent}
#gallery .app-copyright,#about .app-copyright{display:none}
#about.lg-about-page,
#gallery.lg-work-page{
  max-width:100%;
}
#about.lg-about-page .lg-shell,
#gallery.lg-work-page .lg-shell{
  max-width:100%;
  overflow-x:visible;
}
/* Work page styles: see lw-* block below lg-footer */
.ops-dev-wrap{min-height:calc(100dvh - 180px);padding:24px}
.ops-dev-wrap .dev-card{width:min(760px,100%);margin:0 auto;flex-direction:column;padding:32px 24px}
.dev-card:before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(147,51,234,.18),transparent 68%);filter:blur(10px);animation:pulseDev 2s ease-in-out infinite}
.dev-gif{position:relative;z-index:1;width:240px;height:160px;margin:0 auto 24px;border-radius:28px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(232,41,74,.18),rgba(147,51,234,.22),rgba(56,189,248,.14));border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 60px rgba(0,0,0,.35);animation:floatDev 2.8s ease-in-out infinite}
.dev-gif span{font-size:22px;font-weight:900;letter-spacing:.12em;color:#fff;text-shadow:0 0 18px rgba(192,132,252,.75);animation:blinkDev 1s steps(2,end) infinite}
.dev-title{position:relative;z-index:1;font-size:16px;font-weight:800;color:var(--ink);margin-bottom:8px}
.dev-sub{position:relative;z-index:1;font-size:12px;color:var(--muted)}
@keyframes floatDev{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes blinkDev{0%,49%{opacity:1}50%,100%{opacity:.45}}
@keyframes pulseDev{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.08)}}

#booking.booking-modal-backdrop{
  position:fixed;inset:0;z-index:9800;
  display:flex;align-items:flex-start;justify-content:center;
  padding:80px 16px 24px;
  background:rgba(8,10,18,.58);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s ease,visibility .32s ease,backdrop-filter .32s ease;
}
#booking.open{
  opacity:1;visibility:visible;pointer-events:auto;
}
body.booking-modal-open{overflow:hidden}
.booking-modal{
  width:min(760px,100%);
  margin:auto 0 24px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:22px;
  max-height:calc(100dvh - 104px);
  display:flex;flex-direction:column;
  overflow:hidden;
  opacity:0;
  transform:translateY(22px) scale(.985);
  transition:
    opacity .34s cubic-bezier(.22,1,.36,1),
    transform .42s cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
}
#booking.open .booking-modal{
  opacity:1;
  transform:translateY(0) scale(1);
}
@media (prefers-reduced-motion:reduce){
  #booking.booking-modal-backdrop,
  .booking-modal{transition:none!important;transform:none!important}
  #booking.open .booking-modal{opacity:1}
}
.booking-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--border);
  flex-shrink:0;background:var(--bg3);
}
.booking-modal-head h2{font-size:18px;font-weight:800;margin:0;color:var(--ink);letter-spacing:-.02em;line-height:1.25}
.booking-modal-close{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg4);color:var(--muted);font-size:22px;line-height:1;flex-shrink:0;
}
.booking-modal-close:hover{color:var(--ink);border-color:rgba(147,51,234,.35)}
.booking-modal-body{flex:1;min-height:0;overflow-y:auto;padding:20px 20px 28px}
.booking-wrap{max-width:1100px;margin:0 auto;padding:48px 24px 80px}
.booking-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.booking-hero h1{font-size:clamp(1.8rem,3vw,3rem);font-weight:900;letter-spacing:-.02em;margin-bottom:10px}
.booking-hero p{font-size:13px;color:var(--muted);line-height:1.7;max-width:560px}
.booking-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.booking-wizard{max-width:none;margin:0}
.booking-stepper{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;gap:20px;margin:8px 0 28px;position:relative}
.booking-stepper:before{content:"";position:absolute;top:18px;left:15%;right:15%;height:1px;background:var(--border2);z-index:0}
.bw-step{position:relative;z-index:1;text-align:center;color:var(--subtle);font-size:12px;font-weight:700}
.bw-dot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;background:var(--bg4);border:1px solid var(--border);color:var(--muted)}
.bw-step.active{color:var(--purple2)}.bw-step.active .bw-dot{background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;border:none}
.bw-step.done{color:var(--badge-ok)}.bw-step.done .bw-dot{background:rgba(34,197,94,.18);color:transparent;border-color:rgba(34,197,94,.3);position:relative}
.bw-step.done .bw-dot:after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--badge-ok);font-size:16px;font-weight:800}
.booking-wizard.is-complete .booking-stepper{display:none}
.booking-panel{max-width:none;margin:0;background:transparent;border:none;border-radius:0;padding:0}
.booking-panel-title{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:var(--ink);margin-bottom:18px}
.req-badge{font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--badge-warn);background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.22);padding:3px 8px;border-radius:999px;vertical-align:middle}
.info-box{padding:14px 16px;border-radius:12px;background:var(--info-bg);border:1px solid var(--info-border);color:var(--info-text);font-size:13px;line-height:1.5;margin-bottom:20px}
.info-box strong{color:inherit}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.option-grid.service-option-grid{grid-template-columns:1fr}
.option-grid.pack-option-grid{grid-template-columns:1fr 1fr;margin-top:12px;margin-bottom:0}
.yearbook-pack-panel{margin-top:14px;padding:14px 16px;border-radius:14px;border:1px dashed rgba(147,51,234,.35);background:rgba(147,51,234,.05)}
.yearbook-pack-panel .pack-label{font-size:12px;font-weight:700;color:var(--purple2);margin-bottom:10px;display:block}
.shooting-schedule-hint{margin-bottom:10px;line-height:1.5}
.shooting-schedule-box{padding:14px 16px;border-radius:14px;border:1px dashed rgba(147,51,234,.35);background:rgba(147,51,234,.05)}
.shooting-days-field{margin-bottom:12px}
.shooting-date-preview{margin-top:10px;padding:12px 14px;border-radius:12px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.22);color:var(--ink);font-size:13px;font-weight:700;line-height:1.5}
.shooting-date-preview .shooting-date-meta{display:block;margin-top:4px;font-size:11px;font-weight:500;color:var(--muted)}
input[type="date"].fc{min-height:42px}

.shooting-calendar{border:1px solid var(--border);border-radius:14px;background:var(--bg4);padding:12px}
.shooting-cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.shooting-cal-head strong{font-size:13px;font-weight:800;color:var(--ink)}
.shooting-cal-nav{width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:var(--bg3);color:var(--muted);font-size:15px;line-height:1;cursor:pointer;transition:color .15s,border-color .15s}
.shooting-cal-nav:hover:not(:disabled){color:var(--ink);border-color:rgba(147,51,234,.35)}
.shooting-cal-nav:disabled{opacity:.35;cursor:not-allowed}
.shooting-cal-weekdays,.shooting-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.shooting-cal-weekdays{margin-bottom:6px}
.shooting-cal-weekdays span{text-align:center;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.shooting-day{min-height:36px;border-radius:9px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.shooting-day:hover:not(:disabled){border-color:#a78bfa;color:var(--ink)}
.shooting-day.is-empty{border:none;background:none;cursor:default;min-height:0}
.shooting-day.is-past{opacity:.3;cursor:not-allowed;background:transparent}
.shooting-day.is-booked{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.4);color:#fca5a5;cursor:not-allowed;text-decoration:line-through}
.shooting-day.is-blocked{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.18);color:rgba(252,165,165,.55);cursor:not-allowed}
.shooting-day.is-selected{background:linear-gradient(135deg,var(--purple),var(--purple2));border-color:transparent;color:#fff;font-weight:800}
.shooting-day.is-inrange{background:rgba(147,51,234,.18);border-color:rgba(167,139,250,.4);color:var(--ink)}
.shooting-cal-status{margin-top:8px;font-size:10px;color:var(--subtle);line-height:1.5}
.shooting-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.shooting-legend-item{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--subtle)}
.shooting-legend-item i{width:10px;height:10px;border-radius:3px;border:1px solid var(--border);background:var(--bg3)}
.shooting-legend-item i.is-booked{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.4)}
.shooting-legend-item i.is-picked{background:linear-gradient(135deg,var(--purple),var(--purple2));border-color:transparent}
.option-card{padding:16px;border-radius:14px;border:1px solid var(--border);background:var(--bg4);color:var(--text);cursor:pointer;transition:all .15s}
.option-card:hover{border-color:rgba(147,51,234,.35)}.option-card.active{background:rgba(237,233,254,.96);border-color:#a78bfa;color:#312e81;box-shadow:0 0 0 2px rgba(167,139,250,.35)}
.option-card h4{font-size:14px;font-weight:800;margin-bottom:4px;color:inherit}.option-card p{font-size:12px;color:inherit;opacity:.75}
.phone-row{display:grid;grid-template-columns:110px 1fr;gap:10px}
.warning-box{padding:14px 16px;border-radius:12px;background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--badge-warn);font-size:13px;margin:14px 0}
.email-otp-row.is-locked{grid-template-columns:1fr}
.fc[readonly]{opacity:.9;cursor:default}
.email-otp-verify{display:grid;grid-template-columns:1fr 132px;gap:10px;margin:12px 0 6px}
.btn-otp{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:42px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:700;border:none;cursor:pointer;transition:opacity .2s,transform .15s;white-space:nowrap}
.btn-otp:hover:not(:disabled){opacity:.92}
.btn-otp:active:not(:disabled){transform:scale(.98)}
.btn-otp:disabled{opacity:.55;cursor:not-allowed}
.btn-otp-send{color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple2));box-shadow:0 4px 14px rgba(124,58,237,.28)}
.btn-otp-verify{color:#fff;background:linear-gradient(135deg,#0ea5e9,#0284c7);box-shadow:0 4px 14px rgba(2,132,199,.24)}
.otp-input{text-align:center;font-size:18px;font-weight:800;letter-spacing:.35em;text-transform:uppercase}
.otp-status{font-size:11px;color:var(--subtle);margin-top:6px}
.otp-status.ok{color:var(--badge-ok)}.otp-status.warn{color:var(--badge-warn)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.mood-chip{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg4);font-size:12px;color:var(--muted);cursor:pointer}
.mood-chip.active{background:rgba(237,233,254,.96);color:#312e81;border-color:#a78bfa}
.booking-actions{display:grid;grid-template-columns:140px 1fr;gap:10px;margin-top:20px}
.summary-box{background:var(--bg5);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:18px}
.summary-row{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--hairline);font-size:13px}.summary-row:last-child{border-bottom:none}
.summary-row span:first-child{color:var(--muted)}.summary-row span:last-child{color:var(--ink);font-weight:700;text-align:right}
.agree-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text);line-height:1.45;margin:16px 0}
.agree-row input[type="checkbox"],
.auth-agree-row input[type="checkbox"]{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:#7c3aed;cursor:pointer}
.agree-row .auth-link{font-size:13px}
.thank-you-panel{text-align:center;padding:12px 0 4px}
.thank-you-card{max-width:400px;margin:0 auto}
.thank-you-icon{width:56px;height:56px;margin:0 auto 14px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.28);font-size:26px;color:var(--badge-ok)}
.thank-you-kicker{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--badge-ok)}
.thank-you-panel h2{font-size:22px;font-weight:800;color:var(--ink);margin:0 0 10px;letter-spacing:-.03em}
.thank-you-copy{max-width:none;margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.65}
.thank-you-id{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;box-sizing:border-box;margin:0 0 18px;padding:12px 14px;border-radius:14px;background:rgba(147,51,234,.1);border:1px solid rgba(167,139,250,.22)}
.thank-you-id span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
.thank-you-id strong{font-size:14px;font-weight:800;color:var(--purple2);word-break:break-all}
.booking-actions.booking-thank-you-actions{display:grid;grid-template-columns:1fr;gap:8px;max-width:none;width:100%;margin:0}
.booking-thank-you-actions .btn-submit,.booking-thank-you-actions .btn-g{width:100%;justify-content:center;min-height:44px}

#booking-wizard-body{display:block;animation:bookingGateIn .4s ease}
@keyframes bookingGateIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.ops-access-wrap{width:min(1120px,100%);padding:24px}
.ops-access-panel{display:none;width:100%}
.ops-access-panel.active{display:block}
#ops-login-panel.active{
  display:flex;flex:1 1 auto;min-height:calc(100dvh - 64px);width:100%;
}
#reset-password{
  display:none;box-sizing:border-box;
}
#reset-password.active{
  display:flex!important;
  align-items:center;
  justify-content:center;
  min-height:calc(100dvh - 76px)!important;
  height:auto;
  max-height:none;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:24px 16px 32px;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.98),transparent 22%),
    radial-gradient(circle at 12% 82%,rgba(255,255,255,.85),transparent 30%),
    linear-gradient(135deg,#f8f8f6 0%,#e8e8e3 52%,#f5f5f2 100%);
}
body.public-site:has(#reset-password.active),
body.public-site:has(#reset-password.active)::before,
html:has(body.public-site #reset-password.active){
  background:
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.98),transparent 22%),
    radial-gradient(circle at 12% 82%,rgba(255,255,255,.85),transparent 30%),
    linear-gradient(135deg,#f8f8f6 0%,#e8e8e3 52%,#f5f5f2 100%)!important;
}
body.public-site:has(#reset-password.active){
  overflow-x:hidden;
  overflow-y:auto;
  height:auto;
  min-height:100dvh;
  max-height:none;
  overscroll-behavior:none;
  padding-bottom:0!important;
}
body.public-site:has(#reset-password.active) .mobile-tabbar{display:none!important}
.reset-password-shell{
  width:min(100%,430px);
  max-width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.reset-password-panel.lg-login-card{
  width:100%;
  max-width:100%;
  margin:0;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
}
.reset-password-panel.lg-login-card:after{
  display:none;
}
.reset-password-panel .auth-switch{margin-top:14px}
.reset-password-panel .email-otp-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.reset-password-panel .email-otp-verify{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}
.reset-password-panel .btn-otp{width:auto;min-width:118px;padding:0 16px;white-space:nowrap}
.reset-password-panel .auth-fc,
.reset-password-panel .fc.auth-fc{
  font-size:16px;
}
/* —— Liquid glass login (ops) —— */
.lg-login{
  --lg-login-black:#070707;
  --lg-login-white:#f8f8f6;
  position:relative;
  flex:1 1 auto;
  min-height:calc(100dvh - 64px);
  width:100%;
  overflow:hidden;
  color:var(--lg-login-black);
  font-family:var(--font-family);
  background:
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.98),transparent 22%),
    radial-gradient(circle at 12% 82%,rgba(255,255,255,.85),transparent 30%),
    linear-gradient(135deg,#f8f8f6 0%,#e8e8e3 52%,#f5f5f2 100%);
}
.lg-login *{font-family:inherit;box-sizing:border-box}
.lg-login-liquid{
  position:absolute;pointer-events:none;border-radius:50%;z-index:0;
}
.lg-login-liquid-1{
  width:clamp(430px,42vw,680px);height:clamp(430px,42vw,680px);
  right:-8vw;top:12%;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.98) 0 7%,rgba(255,255,255,.76) 18%,rgba(255,255,255,.24) 38%,transparent 60%),
    radial-gradient(circle at 68% 72%,rgba(124,58,237,.10),transparent 42%),
    linear-gradient(145deg,rgba(255,255,255,.70),rgba(205,205,199,.17));
  border:1px solid rgba(255,255,255,.94);
  box-shadow:
    inset 22px 18px 48px rgba(255,255,255,.78),
    inset -38px -42px 70px rgba(0,0,0,.10),
    inset 0 0 45px rgba(255,255,255,.30),
    0 45px 120px rgba(0,0,0,.12);
  filter:saturate(1.15);
}
.lg-login-liquid-1:before{
  content:"";position:absolute;width:78%;height:34%;left:-8%;top:13%;
  border-radius:50%;border:1px solid rgba(255,255,255,.72);
  background:linear-gradient(100deg,rgba(255,255,255,.45),rgba(255,255,255,.06));
  transform:rotate(-18deg);filter:blur(2px);
}
.lg-login-liquid-1:after{
  content:"";position:absolute;width:145%;height:46%;left:-24%;top:18%;
  border-radius:50%;
  background:linear-gradient(105deg,rgba(255,255,255,.42),rgba(255,255,255,.08),transparent 75%);
  transform:rotate(-17deg);filter:blur(22px);
}
.lg-login-liquid-2{
  width:390px;height:390px;left:-170px;bottom:-160px;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.72),rgba(192,132,252,.12) 45%,transparent 70%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 16px 15px 40px rgba(255,255,255,.65),inset -25px -28px 50px rgba(0,0,0,.06),0 35px 90px rgba(0,0,0,.07);
}
.lg-login-ring{
  position:absolute;z-index:0;pointer-events:none;
  width:clamp(520px,53vw,820px);height:clamp(330px,34vw,520px);
  left:48%;top:52%;
  transform:translate(-50%,-50%) rotate(-18deg);
  border:1px solid rgba(255,255,255,.68);border-radius:50%;
  box-shadow:
    0 0 0 28px rgba(255,255,255,.09),
    0 0 0 58px rgba(255,255,255,.055),
    0 0 0 96px rgba(255,255,255,.025);
}
.lg-login-ring:before,.lg-login-ring:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.lg-login-ring:before{inset:16px 11%;border:1px solid rgba(255,255,255,.28);filter:blur(1px)}
.lg-login-ring:after{
  width:45%;height:65%;left:25%;top:14%;
  background:rgba(255,255,255,.10);filter:blur(30px);
}
.lg-login-env{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
}
.lg-login-env h1{
  position:absolute;left:4.5vw;top:50%;transform:translateY(-50%);margin:0;
  font-size:clamp(72px,13vw,200px);line-height:.72;
  letter-spacing:-.105em;font-weight:800;text-transform:uppercase;
  color:rgba(20,20,18,.065);
  text-shadow:0 1px 0 rgba(255,255,255,.52),0 16px 50px rgba(255,255,255,.12);
}
.lg-login-env h1 span{
  font-weight:400;font-style:italic;color:rgba(20,20,18,.034);
}
.lg-login-env-micro{
  position:absolute;left:5vw;bottom:7vh;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(40,40,36,.42);
}
.lg-login-env-num{
  position:absolute;right:5vw;top:96px;
  font-size:9px;letter-spacing:.18em;color:rgba(40,40,36,.38);
}
.lg-login-topbar{
  --nav-d:0;
  position:absolute;z-index:12;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:64px;min-height:64px;max-height:64px;
  padding:0 clamp(20px,5vw,72px);
  box-sizing:border-box;
  color:#070707;
  background:color-mix(in srgb,rgba(10,8,16,.78) calc(var(--nav-d)*100%),rgba(255,255,255,.58));
  border-bottom:1px solid color-mix(in srgb,rgba(192,132,252,.18) calc(var(--nav-d)*100%),rgba(255,255,255,.72));
  box-shadow:0 8px 35px rgba(0,0,0,calc(.035 + var(--nav-d)*0.22));
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
}
.lg-login-topbar:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.55),transparent 45%,rgba(255,255,255,.2));
  opacity:.7;
}
.lg-login-topbar > *{position:relative;z-index:2}
.lg-login-topbar .lg-login-brand-btn,
.lg-login-topbar .lg-logo{
  flex-shrink:0;border:none;background:none;padding:0;cursor:pointer;
}
.lg-login-topbar .lg-login-logo,
.lg-login-topbar .lg-logo-img{
  display:block;height:24px;width:auto;max-width:112px;object-fit:contain;
}
.lg-login-topbar .lg-login-home-btn{
  flex-shrink:0;
  appearance:none;-webkit-appearance:none;
}
.lg-login-reflection{
  position:absolute;z-index:3;pointer-events:none;
  width:430px;height:130px;right:calc(7vw + 20px);top:22%;
  transform:rotate(-20deg);border-radius:50%;
  background:linear-gradient(100deg,rgba(255,255,255,.26),rgba(255,255,255,.03),transparent);
  filter:blur(13px);opacity:.85;
}
.lg-login-main{
  position:relative;z-index:5;
  min-height:calc(100dvh - 64px);
  padding:28px 5vw 72px;
  display:flex;align-items:center;justify-content:flex-end;
}
.lg-login-card{
  width:min(410px,42vw);
  margin-right:min(7vw,64px);
  padding:32px;
  border-radius:30px;
  position:relative;
  overflow:visible;
  background:
    linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.18) 48%,rgba(220,220,215,.28)),
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.75),transparent 35%);
  border:1px solid rgba(255,255,255,.94);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -1px 1px rgba(255,255,255,.18),
    inset 12px 12px 35px rgba(255,255,255,.12),
    0 40px 100px rgba(0,0,0,.16),
    0 12px 35px rgba(0,0,0,.07);
  backdrop-filter:blur(38px) saturate(185%) contrast(105%);
  -webkit-backdrop-filter:blur(38px) saturate(185%) contrast(105%);
  text-align:left;
}
.lg-login-card:before{
  content:"";position:absolute;inset:1px;border-radius:29px;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.62),transparent 28%,rgba(255,255,255,.10) 72%,rgba(255,255,255,.26));
}
.lg-login-card:after{
  content:"";position:absolute;width:260px;height:260px;right:-145px;top:-130px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(192,132,252,.22),rgba(255,255,255,.08) 45%,transparent 70%);
  filter:blur(25px);
}
.lg-login-card > *{position:relative;z-index:2}
.lg-login-card-brand{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;
}
.lg-login-brand-btn{
  border:none;background:none;padding:0;cursor:pointer;display:block;
}
.lg-login-logo,.lg-login-card .auth-logo{
  display:block;height:24px;width:auto;max-width:112px;object-fit:contain;
}
.lg-login-brand-tag{
  font-size:8px;letter-spacing:.17em;font-weight:800;color:#888883;
}
.lg-login-meta{
  position:absolute;z-index:10;left:5vw;right:5vw;bottom:22px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:8px;color:rgba(60,60,55,.55);letter-spacing:.03em;pointer-events:none;
}
.lg-login-meta strong{color:#222;letter-spacing:.08em}
.lg-login-hint{margin-top:8px;text-align:left;font-size:11px;color:#888883}
.lg-login-back,.lg-login-hero-mobile{display:none}
.auth-field--stack .auth-label{
  display:block;margin:0 0 6px;
  font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:#686863;
}
.auth-head{text-align:center}
.auth-switch--footer{text-align:center}

.auth-logo{display:block;height:32px;width:auto;max-width:140px;object-fit:contain}
.auth-logo-dark{display:none!important}
.auth-logo-light{display:block}
.auth-panel-inner{width:100%;max-width:360px;margin:0 auto;text-align:left}
.auth-panel-brand{display:flex;align-items:center;justify-content:center;margin:0 0 22px}
.auth-panel-brand .auth-logo{height:34px;max-width:148px}

.lg-login-card .ops-auth-tabs,
.ops-auth-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 26px;
  padding:4px;border-radius:999px;
  background:rgba(0,0,0,.035);border:1px solid rgba(0,0,0,.075);
}
.lg-login-card .ops-auth-tab,
.ops-auth-tab{
  padding:11px 12px;border-radius:999px;border:none;background:transparent;
  color:#777771;font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;transition:all .2s;
}
.lg-login-card .ops-auth-tab.active,
.ops-auth-tab.active{
  background:rgba(255,255,255,.84);color:#111;
  box-shadow:0 4px 15px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.95);
}
.lg-login-card .auth-form-title,
.auth-form-title{
  margin:0 0 7px;font-size:24px;font-weight:800;color:#111;
  letter-spacing:-.055em;line-height:1.15;text-align:left;
}
.lg-login-card .auth-form-sub,
.auth-form-sub{
  margin:0 0 22px;font-size:13px;font-weight:500;color:#777771;line-height:1.7;text-align:left;
}
.auth-fg{max-width:none;margin:0 0 14px;text-align:left}
.auth-label{
  display:block;margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#686863;text-align:left;
}
.lg-login-card .auth-fc,
.auth-fc{
  width:100%;box-sizing:border-box;border-radius:14px;min-height:48px;
  background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.52);color:#111;
  font-family:inherit;font-size:11px;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58),inset 0 -1px 0 rgba(0,0,0,.025),0 4px 15px rgba(0,0,0,.025);
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.lg-login-card .auth-fc:focus,
.auth-fc:focus{
  outline:none;
  background:rgba(255,255,255,.52);border-color:rgba(255,255,255,.88);
  box-shadow:0 0 0 4px rgba(255,255,255,.20),inset 0 1px 1px rgba(255,255,255,.98),0 10px 28px rgba(0,0,0,.05);
}
.auth-pass-wrap{position:relative}
.auth-pass-wrap .auth-fc{padding-right:44px}
.auth-hint{margin:6px 0 0;font-size:11px;line-height:1.4;font-weight:500;color:#8a8a8a}
.auth-field-error,
.pay-access-gate p.auth-field-error,
.lg-login-card .auth-field-error{
  display:block;margin:8px 0 0;font-size:12px;line-height:1.45;font-weight:600;
  color:#dc2626;text-align:left;
}
.lg-login-card .auth-fc.is-error{border-color:#dc2626}
.auth-pass-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  border:none;background:transparent;cursor:pointer;font-size:14px;line-height:1;opacity:.7;
}
.auth-agree-row{
  display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;
  font-size:12px;line-height:1.55;color:#5b5b5b;text-align:left;cursor:pointer;
}
.legal-modal{
  width:min(440px,100%);background:var(--bg2);border:1px solid var(--border);
  border-radius:16px;padding:20px;box-shadow:0 24px 64px rgba(0,0,0,.28);
}
.legal-modal h3{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--ink)}
.legal-scroll{
  max-height:240px;overflow-y:auto;padding-right:8px;border:1px solid var(--border);
  border-radius:10px;padding:12px;
}
.legal-scroll p{margin:0 0 12px;font-size:13px;line-height:1.6;color:var(--text);font-weight:400}
.legal-scroll p:last-child{margin-bottom:0}
.legal-scroll-hint{margin:10px 0 14px;font-size:13px;line-height:1.5;color:var(--muted)}
.legal-actions{display:flex;gap:8px;justify-content:flex-end}
.legal-actions .btn-g,.legal-actions .btn-p{min-height:40px;padding:8px 14px}
#legal-accept-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.auth-forgot-row{display:flex;justify-content:flex-end;margin:-2px 0 16px}
.auth-recaptcha-row{
  width:100%;margin:0 0 14px;
  display:flex;justify-content:center;align-items:center;
  overflow:visible;
}
.auth-recaptcha{
  display:inline-block;margin:0 auto;width:auto;height:auto;
  overflow:visible;transform:none;max-width:100%;
}
.auth-recaptcha-error{
  margin:-8px 0 14px;font-size:10px;line-height:1.55;font-weight:600;
  color:#b45309;text-align:center;
}
.lg-login-card .auth-link,
.auth-link{
  border:none;background:none;padding:0;cursor:pointer;color:#555550;
  font-family:inherit;font-size:13px;font-weight:700;text-decoration:none;letter-spacing:.02em;
}
.lg-login-card .auth-switch .auth-link{font-size:13px;font-weight:800;color:#111}
.auth-link:hover{opacity:.85}
.lg-login-card .btn-signin,
.reset-password-panel .btn-signin,
.lg-login-card .btn-otp-send,
.reset-password-panel .btn-otp-send,
.lg-login-card .btn-otp-verify,
.reset-password-panel .btn-otp-verify{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;
  padding:14px 22px;border-radius:999px;min-height:49px;
  border:1px solid rgba(255,255,255,.5);cursor:pointer;
  font-family:inherit;font-size:10px;font-weight:700;letter-spacing:0;text-transform:none;
  color:#fff;background:rgba(7,7,7,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 12px 30px rgba(0,0,0,.18);
  transition:opacity .2s,transform .15s,background .15s,box-shadow .2s;
}
.lg-login-card .btn-signin:hover,
.reset-password-panel .btn-signin:hover,
.lg-login-card .btn-otp-send:hover:not(:disabled),
.reset-password-panel .btn-otp-send:hover:not(:disabled),
.lg-login-card .btn-otp-verify:hover:not(:disabled),
.reset-password-panel .btn-otp-verify:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 17px 35px rgba(0,0,0,.23);
  background:#000;
}
.lg-login-card .btn-otp{width:auto;min-width:118px;padding:0 16px;white-space:nowrap;font-size:10px}
.auth-or{
  display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:#888883;font-size:8px;font-weight:600;
}
.auth-or:before,.auth-or:after{content:"";flex:1;height:1px;background:rgba(0,0,0,.08)}
.auth-switch{margin:0;text-align:center;font-size:13px;font-weight:500;color:#777771;line-height:1.5}
.lg-login-card .auth-switch.auth-switch--footer,
.auth-switch--footer{
  margin:20px 0 0;
  text-align:center;
  font-size:13px;
  line-height:1.45;
  color:#777771;
}
.lg-login-card .btn-signin{
  margin-top:2px;
}
.auth-forgot-row .auth-link,
.lg-login-card .auth-forgot-row .auth-link{
  font-size:13px;color:#2563eb;font-weight:600;
}
.auth-pass-toggle svg{display:block;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#8a8a8a}
.lg-login-card .email-otp-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.lg-login-card .email-otp-verify{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}

body.ops-page:not(.auth-gated) #ops:has(#ops-login-panel.active),
#ops:has(#ops-login-panel.active){margin-top:0!important;height:100dvh!important}
/* Logged-in ops/client portal: public nav hidden — no reserved 64px white band */
body.auth-gated #ops.active,
#ops:has(#ops-client-access-panel.active){
  margin-top:0!important;height:100dvh!important;background:transparent;
}
#ops:has(#ops-client-access-panel.active) #ops-access-gate.is-client-shell,
#ops:has(#ops-client-access-panel.active) #ops-access-gate.is-client-shell .ops-access-wrap,
#ops:has(#ops-client-access-panel.active) #ops-client-access-panel.active{
  height:100%;min-height:0;
}
body.auth-gated #ops.ops-shell-open .ops-main{height:100dvh}
.lg-login,.lg-login-main,#ops-login-panel.active{min-height:100dvh}
/* min-height:0 hanya di mobile (stage flex di MQ max-width:900). Desktop tetap full stage. */
@media(max-width:900px){
  body.login-mode-signin .lg-login,
  body.login-mode-signin .lg-login-main,
  body.login-mode-signin #ops-login-panel.active,
  body.login-mode-signup .lg-login,
  body.login-mode-signup .lg-login-main,
  body.login-mode-signup #ops-login-panel.active{min-height:0!important}
}
#ops-access-gate:not(.is-client-shell) .ops-access-wrap{min-height:100dvh}
#ops-access-gate:not(.is-client-shell){background:transparent!important}
#ops-login-panel.active{
  display:flex;flex:1 1 auto;min-height:100dvh;width:100%;
}

/* Desktop login: card kanan + watermark YOURS UNLIMITED CREATIVITY */
@media(min-width:901px){
  /* One header on login: use .lg-login-topbar, hide public #lg-nav */
  body.public-site:has(#ops.active #ops-login-panel.active) #lg-nav,
  body.ops-page:not(.auth-gated):has(#ops.active #ops-login-panel.active) #lg-nav{
    display:none!important;
  }
  body.public-site:has(#ops.active #ops-login-panel.active),
  body.ops-page:not(.auth-gated):has(#ops.active #ops-login-panel.active){
    overflow:hidden!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding-top:0!important;
    overscroll-behavior:none;
  }
  body.login-mode-signin #ops:has(#ops-login-panel.active),
  body.login-mode-signin #ops.active:has(#ops-login-panel.active),
  body.login-mode-signup #ops:has(#ops-login-panel.active),
  body.login-mode-signup #ops.active:has(#ops-login-panel.active){
    position:relative!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin-top:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column;
  }
  body.fa-auth-shell.login-mode-signin #ops:has(#ops-login-panel.active),
  body.fa-auth-shell.login-mode-signin #ops.active:has(#ops-login-panel.active),
  body.fa-auth-shell.login-mode-signup #ops:has(#ops-login-panel.active),
  body.fa-auth-shell.login-mode-signup #ops.active:has(#ops-login-panel.active){
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin-top:0!important;
  }
  html:has(body.fa-auth-shell.login-mode-signin),
  html:has(body.fa-auth-shell.login-mode-signup),
  body.fa-auth-shell.login-mode-signin,
  body.fa-auth-shell.login-mode-signup,
  body.fa-auth-shell.login-mode-signin::before,
  body.fa-auth-shell.login-mode-signup::before{
    background:
      radial-gradient(circle at 78% 18%,rgba(255,255,255,.98),transparent 22%),
      radial-gradient(circle at 12% 82%,rgba(255,255,255,.85),transparent 30%),
      linear-gradient(135deg,#f8f8f6 0%,#e8e8e3 52%,#f5f5f2 100%)!important;
  }
  .lg-login-topbar{
    height:76px;min-height:76px;max-height:76px;
  }
  body.login-mode-signin #ops-access-gate:not(.is-client-shell),
  body.login-mode-signup #ops-access-gate:not(.is-client-shell),
  body.login-mode-signin #ops-access-gate:not(.is-client-shell) .ops-access-wrap,
  body.login-mode-signup #ops-access-gate:not(.is-client-shell) .ops-access-wrap,
  body.login-mode-signin #ops-login-panel.active,
  body.login-mode-signup #ops-login-panel.active,
  body.login-mode-signin .lg-login,
  body.login-mode-signup .lg-login{
    flex:1 1 auto;
    width:100%;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column;
  }
  body.login-mode-signin .lg-login,
  body.login-mode-signup .lg-login{
    position:relative;
    background:
      radial-gradient(circle at 78% 18%,rgba(255,255,255,.98),transparent 22%),
      radial-gradient(circle at 12% 82%,rgba(255,255,255,.85),transparent 30%),
      linear-gradient(135deg,#f8f8f6 0%,#e8e8e3 52%,#f5f5f2 100%);
  }
  body.login-mode-signin .lg-login-main,
  body.login-mode-signup .lg-login-main{
    flex:1 1 auto;
    width:100%;
    min-height:0!important;
    height:auto!important;
    max-height:100%;
    /* Header glass 76px overlay — keep card below the bar */
    padding:88px 5vw 36px;
    display:flex;
    justify-content:flex-end;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
  }
  /* Vertical axis = align-items (row flex). safe center avoids clipped tops when form is tall. */
  body.login-mode-signin .lg-login-main{
    align-items:center;
    align-items:safe center;
  }
  body.login-mode-signup .lg-login-main{
    align-items:flex-start;
  }
  body.login-mode-signin .lg-login-card,
  body.login-mode-signup .lg-login-card{
    flex-shrink:0;
    margin-top:12px;
  }
}
body.public-site #gallery,
body.public-site #about,
body.public-site #faq-contact{
  background:#f8f8f6;
}

@media(max-width:900px){
  #ops-access-gate:not(.is-client-shell){
    padding:0!important;
    background:transparent!important;
  }
  #ops-access-gate:not(.is-client-shell) .ops-access-wrap{min-height:100dvh;padding:0;background:transparent}
  body.login-mode-signin #ops-access-gate:not(.is-client-shell) .ops-access-wrap,
  body.login-mode-signup #ops-access-gate:not(.is-client-shell) .ops-access-wrap{
    min-height:0!important;
  }
  body.ops-page:not(.auth-gated):has(#ops.active #ops-login-panel.active),
  body.public-site:has(#ops.active #ops-login-panel.active){
    --nav-d:0;
    margin-top:0!important;
    background:var(--login-canvas,
      radial-gradient(circle at 78% 18%,rgba(255,255,255,.98),transparent 22%),
      radial-gradient(circle at 12% 82%,rgba(255,255,255,.85),transparent 30%),
      linear-gradient(135deg,#f8f8f6 0%,#e8e8e3 52%,#f5f5f2 100%))!important;
  }
  body.ops-page:not(.auth-gated):has(#ops.active #ops-login-panel.active) .lg-nav-cta--project,
  body.public-site:has(#ops.active #ops-login-panel.active) .lg-nav-cta--project,
  body.public-site:has(#reset-password.active) .lg-nav-cta--project{display:none!important}
  body.ops-page:not(.auth-gated):has(#ops.active #ops-login-panel.active) .lg-nav-cta--home,
  body.public-site:has(#ops.active #ops-login-panel.active) .lg-nav-cta--home,
  body.public-site:has(#reset-password.active) .lg-nav-cta--home{
    display:inline-flex!important;
    background:rgba(255,255,255,.92)!important;
    border:1px solid rgba(0,0,0,.08)!important;
    box-shadow:0 2px 10px rgba(0,0,0,.06)!important;
    color:#111!important;
    font-size:10px;padding:8px 12px;min-height:32px;font-weight:600;
  }
  /* One header on mobile login: keep #lg-nav, hide duplicate .lg-login-topbar.
     Auth shell has no #lg-nav — keep its login topbar. */
  body:not(.fa-auth-shell):has(#ops.active #ops-login-panel.active) .lg-login-topbar{
    display:none!important;
  }
  /* Sign In + Sign Up: fixed viewport stage; .lg-login-main scrolls when form is tall */
  body.login-mode-signin:has(#ops.active #ops-login-panel.active),
  body.login-mode-signup:has(#ops.active #ops-login-panel.active){
    --login-canvas:
      radial-gradient(circle at 78% 18%,rgba(255,255,255,.98),transparent 22%),
      radial-gradient(circle at 12% 82%,rgba(255,255,255,.85),transparent 30%),
      linear-gradient(135deg,#f8f8f6 0%,#e8e8e3 52%,#f5f5f2 100%);
    --login-stage-top:64px;
    --login-stage-bottom:calc(68px + env(safe-area-inset-bottom,0px));
    overflow:hidden!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:0!important;
    overscroll-behavior:none;
  }
  body.login-mode-signin:has(#ops.active #ops-login-panel.active),
  body.login-mode-signin:has(#ops.active #ops-login-panel.active)::before,
  html:has(body.login-mode-signin #ops.active #ops-login-panel.active),
  body.login-mode-signup:has(#ops.active #ops-login-panel.active),
  body.login-mode-signup:has(#ops.active #ops-login-panel.active)::before,
  html:has(body.login-mode-signup #ops.active #ops-login-panel.active){
    background:var(--login-canvas)!important;
  }
  body.fa-auth-shell.login-mode-signin:has(#ops.active #ops-login-panel.active),
  body.fa-auth-shell.login-mode-signup:has(#ops.active #ops-login-panel.active){
    --login-stage-top:0px;
    --login-stage-bottom:0px;
  }
  /* Auth shell: topbar in document flow (not absolute) so Sign Up isn't covered */
  body.fa-auth-shell .lg-login-topbar{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    flex:0 0 auto;
    width:100%;
    z-index:12;
  }
  body.fa-auth-shell .lg-login{
    justify-content:flex-start!important;
    align-items:stretch!important;
  }
  body.login-mode-signin #ops.active:has(#ops-login-panel.active),
  body.login-mode-signin #ops.active:has(#ops-login-panel.active) #ops-access-gate:not(.is-client-shell),
  body.login-mode-signin #ops.active:has(#ops-login-panel.active) .ops-access-wrap,
  body.login-mode-signin #ops.active:has(#ops-login-panel.active) #ops-login-panel.active,
  body.login-mode-signin #ops.active:has(#ops-login-panel.active) .lg-login,
  body.login-mode-signup #ops.active:has(#ops-login-panel.active),
  body.login-mode-signup #ops.active:has(#ops-login-panel.active) #ops-access-gate:not(.is-client-shell),
  body.login-mode-signup #ops.active:has(#ops-login-panel.active) .ops-access-wrap,
  body.login-mode-signup #ops.active:has(#ops-login-panel.active) #ops-login-panel.active,
  body.login-mode-signup #ops.active:has(#ops-login-panel.active) .lg-login{
    background:var(--login-canvas)!important;
  }
  body.login-mode-signin #ops.active:has(#ops-login-panel.active),
  body.login-mode-signup #ops.active:has(#ops-login-panel.active){
    position:fixed;
    inset:0;
    z-index:40;
    width:100%;
    height:100dvh!important;
    max-height:100dvh!important;
    min-height:0!important;
    margin:0!important;
    padding:var(--login-stage-top) 0 var(--login-stage-bottom);
    box-sizing:border-box;
    overflow:hidden!important;
    display:flex;
    flex-direction:column;
  }
  body.login-mode-signin #ops-access-gate:not(.is-client-shell),
  body.login-mode-signin #ops-access-gate:not(.is-client-shell) .ops-access-wrap,
  body.login-mode-signin #ops-login-panel.active,
  body.login-mode-signin .lg-login,
  body.login-mode-signup #ops-access-gate:not(.is-client-shell),
  body.login-mode-signup #ops-access-gate:not(.is-client-shell) .ops-access-wrap,
  body.login-mode-signup #ops-login-panel.active,
  body.login-mode-signup .lg-login{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    flex:1 1 auto;
    width:100%;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
  }
  body.login-mode-signin .lg-login,
  body.login-mode-signup .lg-login{
    padding:0 18px;
    background:transparent!important;
    justify-content:stretch;
    align-items:stretch;
  }
  body.login-mode-signin #ops-access-gate:not(.is-client-shell),
  body.login-mode-signin #ops-access-gate:not(.is-client-shell) .ops-access-wrap,
  body.login-mode-signin #ops-login-panel.active,
  body.login-mode-signup #ops-access-gate:not(.is-client-shell),
  body.login-mode-signup #ops-access-gate:not(.is-client-shell) .ops-access-wrap,
  body.login-mode-signup #ops-login-panel.active{
    background:transparent!important;
  }
  body.login-mode-signin .lg-login-main,
  body.login-mode-signup .lg-login-main{
    position:relative;
    z-index:5;
    flex:1 1 auto;
    width:100%;
    max-width:380px;
    height:auto!important;
    min-height:0!important;
    max-height:100%;
    margin:0 auto;
    padding:12px 0 16px;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    display:flex;
    flex-direction:column;
    align-items:center;
    box-sizing:border-box;
  }
  body.login-mode-signin .lg-login-main{
    justify-content:center;
  }
  body.login-mode-signup .lg-login-main{
    justify-content:flex-start;
  }
  body.login-mode-signin .lg-login-card,
  body.login-mode-signup .lg-login-card{
    width:100%;
    margin:0;
    flex-shrink:0;
  }
  body.login-mode-signin .lg-login-card,
  body.login-mode-signin #ops-signin-form,
  body.login-mode-signin .auth-recaptcha-row,
  body.login-mode-signup .lg-login-card,
  body.login-mode-signup #ops-signup-form{
    overflow:visible;
  }
  body.login-mode-signin .auth-recaptcha-row{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  body.login-mode-signin .auth-recaptcha{
    margin:0 auto;
  }
  body.login-mode-signup .lg-login-card .auth-switch--footer{
    margin-bottom:0;
    padding-bottom:8px;
  }
  #ops.active:has(#ops-login-panel.active){
    margin-top:0!important;
    background:var(--login-canvas,#f8f8f6)!important;
  }
  body.login-mode-signin #ops-access-gate:not(.is-client-shell) .ops-access-wrap,
  body.login-mode-signup #ops-access-gate:not(.is-client-shell) .ops-access-wrap{
    min-height:0!important;
  }
  .lg-login{
    display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;
    padding:0 18px;
    background:transparent!important;
  }
  .lg-login-topbar{padding:0 18px}
  .lg-login-topbar .lg-login-logo{height:22px;max-width:108px}
  .lg-login-env{display:none}
  .lg-login-meta{display:none!important}
  .lg-login-liquid{display:block}
  .lg-login-liquid-1{
    width:min(78vw,340px);height:min(78vw,340px);
    right:-20vw;top:8%;opacity:.95;
  }
  .lg-login-liquid-2{
    width:240px;height:240px;left:-100px;bottom:-120px;opacity:.9;
  }
  .lg-login-ring{
    display:block;width:min(95vw,440px);height:min(60vw,280px);
    left:50%;top:42%;opacity:.5;
  }
  .lg-login-reflection{
    display:block;width:min(62vw,260px);height:80px;
    right:6%;top:18%;opacity:.5;
  }
  .lg-login-hero-mobile,.lg-login-back{display:none!important}
  .lg-login-main{
    position:relative;z-index:5;width:100%;max-width:380px;
    margin:0 auto;padding:12px 0 16px;flex:1 1 auto;min-height:0;
    overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    box-sizing:border-box;
  }
  .lg-login-card{
    width:100%;margin:0;padding:24px 20px 22px;
    border-radius:28px;position:relative;overflow:visible;
    background:
      linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.18) 48%,rgba(220,220,215,.28)),
      radial-gradient(circle at 12% 8%,rgba(255,255,255,.75),transparent 35%);
    border:1px solid rgba(255,255,255,.94);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,1),
      inset 0 -1px 1px rgba(255,255,255,.18),
      inset 12px 12px 35px rgba(255,255,255,.12),
      0 32px 80px rgba(0,0,0,.14),0 12px 35px rgba(0,0,0,.06);
    backdrop-filter:blur(38px) saturate(185%) contrast(105%);
    -webkit-backdrop-filter:blur(38px) saturate(185%) contrast(105%);
    max-height:none;
  }
  .lg-login-card:before{
    display:block;content:"";position:absolute;inset:1px;border-radius:27px;pointer-events:none;
    background:linear-gradient(125deg,rgba(255,255,255,.62),transparent 28%,rgba(255,255,255,.10) 72%,rgba(255,255,255,.26));
  }
  .lg-login-card:after{
    display:block;content:"";position:absolute;width:180px;height:180px;right:-80px;top:-85px;
    border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(192,132,252,.22),rgba(255,255,255,.08) 45%,transparent 70%);
    filter:blur(25px);
  }
  .lg-login-card .ops-auth-tabs{
    display:grid;margin-bottom:20px;
  }
  .lg-login-card .ops-auth-tab{
    padding:10px 12px;font-size:11px;font-weight:600;
  }
  .lg-login-card-brand,.lg-login-card .auth-or{display:none}
  .auth-head{text-align:center;margin:0 0 18px}
  .lg-login-card .auth-form-title{
    margin:0 0 8px;font-size:clamp(22px,6.2vw,28px);font-weight:800;
    letter-spacing:-.04em;line-height:1.1;color:#111;text-align:center;
  }
  .lg-login-card .auth-form-sub{
    display:block;margin:0;font-size:12px;font-weight:500;
    line-height:1.55;color:#777771;text-align:center;
  }
  .auth-fg{margin-bottom:12px}
  .auth-field--plain .auth-label,.auth-field--plain .auth-label--hide-mobile{display:none}
  .auth-field--plain,.auth-field--stack{margin-bottom:12px;padding:0;background:transparent}
  .auth-field--plain .auth-fc,.auth-field--stack .auth-fc,
  .lg-login-card .auth-field--plain .auth-fc,.lg-login-card .auth-field--stack .auth-fc{
    min-height:48px;padding:0 16px;font-size:15px;font-weight:500;line-height:1.35;
    background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.72);
    border-radius:14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 4px 14px rgba(0,0,0,.04);
  }
  .auth-field--plain .auth-fc::placeholder,.auth-field--stack .auth-fc::placeholder{color:#9a9a95}
  .auth-field--plain .auth-fc:focus,.auth-field--stack .auth-fc:focus,
  .lg-login-card .auth-field--plain .auth-fc:focus,.lg-login-card .auth-field--stack .auth-fc:focus{
    outline:none;border-color:#c084fc;
    box-shadow:0 0 0 3px rgba(192,132,252,.18),inset 0 1px 0 rgba(255,255,255,.8);
    background:rgba(255,255,255,.58);
  }
  .auth-field--plain .auth-pass-wrap .auth-fc,.auth-field--stack .auth-pass-wrap .auth-fc{padding-right:48px}
  .auth-field--stack .auth-label{
    display:block;margin:0 0 6px;padding-left:2px;
    font-size:11px;font-weight:600;color:#686863;
  }
  .auth-field--otp .email-otp-row,.auth-field--otp .email-otp-verify{margin-top:10px}
  .auth-field--otp .email-otp-row .auth-fc,.auth-field--otp .email-otp-verify .auth-fc{
    background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);
    padding:10px 12px;min-height:44px;border-radius:12px;
  }
  .auth-pass-toggle{
    right:8px;width:32px;height:32px;border-radius:10px;
    display:grid;place-items:center;background:rgba(255,255,255,.45);opacity:1;
  }
  .auth-forgot-row{margin:0 0 14px;justify-content:flex-end;display:flex}
  .auth-forgot-row .auth-link,
  .lg-login-card .auth-forgot-row .auth-link{
    font-size:12px;font-weight:600;color:#2563eb;text-decoration:none;
  }
  .auth-recaptcha-row{
    width:100%;margin:0 0 14px;
    display:flex;justify-content:center;align-items:center;
    overflow:visible;
  }
  .auth-recaptcha{
    display:inline-block;margin:0 auto;width:auto;height:auto;
    overflow:visible;transform:none;max-width:100%;
  }
  .auth-recaptcha-error{margin:4px auto 0;max-width:100%;text-align:center}
  .lg-login-card .btn-signin,.lg-login-card .btn-otp-send,.lg-login-card .btn-otp-verify{
    width:100%;min-height:48px;padding:14px 20px;font-size:14px;font-weight:700;
    border:1px solid rgba(255,255,255,.5);border-radius:999px;color:#fff;
    background:rgba(7,7,7,.94);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 12px 30px rgba(0,0,0,.18);
  }
  .lg-login-card .btn-signin:hover,.lg-login-card .btn-signin:active{background:#000}
  .lg-login-card .btn-otp{
    width:100%;min-width:0;min-height:42px;font-size:11px;font-weight:700;
    border-radius:999px;background:rgba(7,7,7,.92);color:#fff;border:1px solid rgba(255,255,255,.4);
  }
  .auth-agree-row{margin:6px 0 14px;font-size:11px;line-height:1.55;color:#5b5b5b}
  .auth-hint{font-size:10px;margin-top:6px;color:#777771}
  .auth-switch--footer{margin:20px 0 0;text-align:center;font-size:12px;line-height:1.5;color:#777771}
  .lg-login-card .auth-switch--footer .auth-link{font-size:12px;font-weight:800;color:#111;text-decoration:none}
  .lg-login-card .email-otp-row,.lg-login-card .email-otp-verify{grid-template-columns:1fr;gap:8px}
}
@media(max-width:560px){
  .lg-login{padding:10px 16px calc(68px + env(safe-area-inset-bottom,0px))}
  body.login-mode-signin .lg-login,
  body.login-mode-signup .lg-login{padding:0 16px!important}
  body.login-mode-signin .lg-login-card{padding:18px 16px 16px}
  .lg-login-main{max-width:100%}
  .lg-login-liquid-1{width:min(72vw,300px);height:min(72vw,300px);right:-18vw;top:10%}
  .lg-login-liquid-2{width:200px;height:200px;left:-90px;bottom:-100px}
  .lg-login-ring{width:min(88vw,380px);height:min(52vw,230px);opacity:.42}
  .lg-login-card{padding:22px 18px 20px;border-radius:26px}
  .lg-login-card:before{border-radius:25px}
  .lg-login-card .auth-form-title{font-size:clamp(20px,5.8vw,26px)}
  .lg-login-card .auth-form-sub{font-size:11.5px}
  .lg-login-card .auth-fc,
  .auth-fc,
  #reset-password .auth-fc{
    font-size:16px!important;
  }
  .lg-login-card .btn-signin{min-height:46px;font-size:13px}
}
.ops-access-choice{max-width:760px;margin:0 auto;text-align:center}
.ops-access-choice h3{font-size:24px;font-weight:900;color:var(--ink);margin-bottom:8px}
.ops-access-choice p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:24px}
.ops-access-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ops-access-option{padding:22px 20px;border-radius:20px;border:1px solid var(--border);background:var(--bg3);text-align:left;cursor:pointer;transition:all .2s}
.ops-access-option:hover,.ops-access-option:focus{border-color:rgba(147,51,234,.45);background:rgba(147,51,234,.08);transform:translateY(-2px)}
.ops-access-option strong{display:block;font-size:15px;font-weight:900;color:var(--ink);margin-bottom:6px}
.ops-access-option span{font-size:12px;color:var(--muted);line-height:1.55}
.ops-access-back{margin-bottom:16px}
#ops-access-gate{
  flex:1 1 auto;min-height:0;width:100%;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  align-items:stretch;justify-content:stretch;box-sizing:border-box;
}
#ops-access-gate:not(.is-client-shell){
  padding:0!important;background:var(--bg);
}
#ops-access-gate:not(.is-client-shell) .ops-access-wrap{
  width:100%;max-width:none;padding:0;min-height:calc(100dvh - 64px);
  display:flex;flex-direction:column;
}
#ops-access-gate.is-client-shell{
  padding:0!important;overflow:hidden;
  align-items:stretch;justify-content:stretch;
}
#ops-access-gate.is-client-shell .ops-access-wrap{
  width:100%;max-width:none;padding:0;height:100%;min-height:0;
}
#ops-client-access-panel.active{
  display:flex;height:100%;min-height:0;
}
.client-login-card{padding:24px;border-radius:22px;background:var(--bg3);border:1px solid var(--border)}
.client-login-card h3{font-size:18px;font-weight:900;color:var(--ink);margin-bottom:8px}
.client-login-card p{font-size:12px;color:var(--muted);line-height:1.65;margin-bottom:18px}
.client-portal-status{font-size:11px;color:var(--subtle);line-height:1.5;margin-top:10px}
.client-portal-status.ok{color:#4ade80}.client-portal-status.warn{color:#fbbf24}
.client-portal-shell{
  --glass-light: rgba(255,255,255,0.12);
  --glass-medium: rgba(255,255,255,0.18);
  --glass-sidebar: rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.45);
  --glass-border-soft: rgba(255,255,255,0.24);
  --glass-highlight: rgba(255,255,255,0.88);
  --glass-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    0 10px 40px rgba(15,80,100,0.06),
    0 2px 8px rgba(15,80,100,0.03);
  --glass-blur: blur(52px) saturate(210%) brightness(1.06);
  --glass-fill-light: linear-gradient(145deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 48%, rgba(255,255,255,0.18) 100%);
  --glass-fill-medium: linear-gradient(150deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 52%, rgba(255,255,255,0.14) 100%);
  --glass-fill-sidebar: linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.06) 100%);
  --ops-ink: #0f2a35;
  --ops-muted: rgba(15,60,80,0.52);
  --ops-faint: rgba(15,60,80,0.45);
  --ops-cyan: #28b9d8;
  --cp-dock-clearance: 0px;
  display:none;width:100%;height:100%;min-height:0;
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 10% 0%, rgba(40,185,216,0.045) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 90% 100%, rgba(40,185,216,0.035) 0%, transparent 65%),
    linear-gradient(160deg, #f6f8f9 0%, #f9fafb 50%, #f5f8f9 100%);
  color: var(--ops-ink);
}
#ops-client-access-panel.active .client-portal-shell{
  display:flex;flex-direction:row;align-items:stretch;
}
.cp-sidebar{
  width:72px;min-width:72px;flex:0 0 auto;flex-shrink:0;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:16px 0 14px;align-items:center;overflow:hidden;white-space:nowrap;
  /* Opaque rail — avoids backdrop-filter bleed over dashboard cards */
  background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(246,248,249,0.97) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-right: 1px solid rgba(15,60,80,0.08);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.85);
  position:relative;z-index:2;
  isolation:isolate;
  contain:paint;
  transform:translateZ(0);
  transition:width .28s ease,min-width .28s ease,padding .28s ease,box-shadow .28s ease;
}
.cp-sidebar a.sb-item{text-decoration:none;box-sizing:border-box}
.cp-sidebar-user{
  display:flex;align-items:center;gap:8px;
  padding:8px 0;margin:0 0 12px;
  border-radius:0;background:transparent;border:none;
  transition:width .28s ease,height .28s ease,padding .28s ease,gap .28s ease,margin .28s ease;
}
.cp-avatar{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--red),var(--purple));color:#fff;font-size:14px;font-weight:900;line-height:1;
  transition:width .28s ease,height .28s ease,font-size .28s ease,box-shadow .18s ease,border-color .18s ease;
}
.cp-user-meta{
  min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;
  text-align:left;
}
.cp-user-meta strong{
  display:block;width:100%;font-size:13px;font-weight:800;color:var(--ink);line-height:1.2;
  text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cp-user-meta span{
  display:block;width:100%;font-size:11px;color:var(--muted);line-height:1.25;
  text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cp-sidebar-foot{padding:12px 8px 0;border-top:1px solid var(--border);margin-top:12px}
.cp-sidebar-foot .btn-logout{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.cp-sidebar-foot .btn-logout .sb-ico svg{
  width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.cp-sidebar .sb-ver,
.cp-sidebar .sb-group-lbl{
  text-align:left;
  padding-left:0;
  padding-right:0;
  margin-left:0;
}
.cp-main{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);position:relative;z-index:1;
}
.cp-header{display:none}
.cp-header-top{display:none}
.cp-mobile-brand{display:flex;align-items:center;gap:10px;min-width:0}
.cp-header-copy{min-width:0;flex:1}
.cp-header-copy h2{
  margin:0;font-size:16px;font-weight:800;color:var(--ops-ink,#0f2a35);line-height:1.25;
}
.cp-header-copy p{
  margin:4px 0 0;font-size:11px;color:rgba(15,60,80,0.52);line-height:1.45;
}
.cp-drawer-head{
  display:flex;align-items:center;gap:10px;width:100%;margin:0 0 4px;
}
.cp-drawer-brand{display:none;align-items:center;min-width:0;flex:1}
.cp-drawer-brand img{display:block;height:18px;width:auto;max-width:120px}
.cp-drawer-close{
  display:none;
  width:44px;height:44px;flex-shrink:0;margin-left:auto;
  border:1px solid rgba(15,60,80,0.12);
  border-radius:12px;padding:0;cursor:pointer;
  align-items:center;justify-content:center;
  background:#fff;color:var(--ops-ink,#0f2a35);
}
.cp-drawer-close svg{
  width:18px;height:18px;display:block;
  stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
body.cp-sidebar-open{overflow:hidden!important}

/* Desktop: client portal liquid rail — match internal pin sidebar */
@media(min-width:701px){
  .cp-sidebar .sb-menu-toggle{display:none !important}
  .cp-sidebar .sb-ver,
  .cp-sidebar .sb-group-lbl,
  .cp-sidebar .sb-label,
  .cp-sidebar .cp-user-meta{
    opacity:0;
    max-width:0;
    height:0;
    overflow:hidden;
    margin:0;
    padding:0;
    pointer-events:none;
    display:block !important;
    transition:opacity .16s ease,max-width .28s ease;
  }
  .cp-sidebar .sb-rail-top,
  .cp-sidebar .sb-rail-foot{
    display:flex;flex-direction:column;align-items:center;width:100%;
  }
  .cp-sidebar .sb-rail-foot{padding-top:8px}
  .cp-sidebar .sb-rail-divider{
    width:24px;height:1px;background:var(--glass-border-soft);margin:0 0 14px;
    transition:width .28s ease,margin .28s ease;
  }
  .cp-sidebar .sb-logo-card{
    width:44px;height:44px;border-radius:12px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background: rgba(255,255,255,0.88);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(15,60,80,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 2px 8px rgba(15,80,100,0.06);
    margin-bottom: 12px;padding:0;cursor:pointer;color:var(--ops-ink);
  }
  .cp-sidebar .sb-logo-card svg{
    width:18px;height:18px;display:block;stroke:currentColor;fill:none;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  }
  .cp-sidebar-brand{
    width:44px;height:44px;margin-bottom:8px;
    transition:width .28s ease,height .28s ease,padding .28s ease,margin .28s ease;
  }
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar-brand{
    width:calc(100% - 16px);height:auto;justify-content:flex-start;
    padding:8px 10px;margin:0 8px 12px;
  }
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar-logo-icon{display:none}
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar-logo-full{display:block}
  .cp-sidebar .sb-group{
    margin:0 0 8px;width:100%;display:flex;flex-direction:column;align-items:center;
    transition:margin .28s ease;
  }
  .cp-sidebar .sb-item{
    width:44px;height:44px;margin:0 auto 8px;padding:0;
    justify-content:center;gap:0;border-radius:12px;border:1px solid transparent;
    color: rgba(15,60,80,0.50);background:transparent;
    transition:
      background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease,
      width .28s ease,padding .28s ease,gap .28s ease,margin .28s ease;
  }
  .cp-sidebar .sb-item:hover{
    background:rgba(255,255,255,0.22);
    border-color:var(--glass-border-soft);
    color:var(--ops-ink);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.45);
  }
  .cp-sidebar .sb-item.active{
    background: linear-gradient(145deg, rgba(15,35,50,0.88) 0%, rgba(15,35,50,0.72) 100%);
    color: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      0 4px 16px rgba(15,35,50,0.28);
    border-color: rgba(255,255,255,0.10);
  }
  .cp-sidebar .sb-ico,
  .cp-sidebar .sb-ico svg{width:18px;height:18px;flex-shrink:0}
  .cp-sidebar .sb-ico svg{
    stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  }
  .cp-sidebar-user{
    justify-content:center;gap:0;padding:0;margin:0 auto 10px;
    width:44px;height:44px;box-sizing:border-box;
  }
  .cp-sidebar .cp-avatar{
    width:44px;height:44px;border-radius:12px;font-size:13px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border:1px solid rgba(15,60,80,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 2px 8px rgba(15,80,100,0.06);
    color:var(--ops-ink);
  }
  .cp-sidebar-foot{
    display:flex;justify-content:center;padding:10px 0 4px;margin-top:8px;
    border-top:none;width:100%;
    transition:padding .28s ease,border-color .28s ease;
  }
  .cp-sidebar-foot .btn-logout,
  .cp-sidebar .sb-logout{
    width:44px;height:44px;padding:0;gap:0;justify-content:center;margin:0;
    border-radius:12px;border:1px solid transparent;
    background:transparent;color:rgba(220,38,38,0.72);
  }
  .cp-sidebar-foot .btn-logout:hover,
  .cp-sidebar .sb-logout:hover{
    background:rgba(239,68,68,0.10);
    border-color:rgba(239,68,68,0.22);
    color:#dc2626;
  }
  .cp-sidebar-foot .sb-label{
    opacity:0;max-width:0;height:0;overflow:hidden;pointer-events:none;
    display:inline !important;
    transition:opacity .16s ease,max-width .28s ease;
  }

  /* Expanded pin — push content, never overlay */
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar{
    width:224px !important;
    min-width:224px !important;
    flex:0 0 224px !important;
    padding:16px 12px 14px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    align-items:stretch;
    background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(246,248,249,0.99) 100%);
    box-shadow:
      inset -1px 0 0 rgba(255,255,255,0.9),
      4px 0 24px rgba(15,80,100,0.06) !important;
  }
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar .sb-rail-top,
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar .sb-rail-foot{align-items:stretch}
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar .sb-rail-divider{width:100%;margin:0 0 14px}
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar .sb-group{align-items:stretch;margin:0 0 14px}
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar .sb-group-lbl,
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar .sb-label,
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar .sb-ver,
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar .cp-user-meta,
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar-foot .sb-label{
    display:block !important;
    opacity:1 !important;
    max-width:180px !important;
    height:auto !important;
    overflow:visible !important;
    pointer-events:auto !important;
    transition-delay:.05s;
  }
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar .sb-group-lbl{
    margin:0 0 8px;padding:0 8px;font-size:9px;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ops-faint);
  }
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar .sb-item{
    width:100% !important;height:44px !important;margin:0 0 6px !important;padding:0 12px !important;
    justify-content:flex-start !important;gap:10px !important;
  }
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar-user{
    width:auto;height:auto;justify-content:flex-start;gap:10px;padding:6px 4px;margin:0 0 12px;
  }
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar .cp-avatar{
    width:40px;height:40px;font-size:13px;
    background: linear-gradient(145deg, rgba(40,185,216,0.85) 0%, rgba(15,35,50,0.85) 100%);
    color:#fff;border-color:rgba(255,255,255,0.35);
  }
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar-foot{
    justify-content:stretch;padding:12px 0 0;border-top:1px solid var(--glass-border-soft);
  }
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar-foot .btn-logout,
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar .sb-logout{
    width:100% !important;height:44px !important;padding:0 12px !important;gap:10px !important;justify-content:flex-start !important;
  }
  .client-portal-shell.cp-sidebar-expanded .cp-sidebar-foot .sb-label{display:inline !important}
}

.cp-main-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 24px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg3);
}
.cp-header-logo,
.cp-sidebar-brand{
  border:none;background:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cp-header-logo img{
  display:block;width:112px;height:24px;object-fit:contain;
}
.cp-sidebar-brand{
  width:44px;height:44px;border-radius:12px;margin-bottom:8px;
  background:rgba(255,255,255,0.88);
  border:1px solid rgba(15,60,80,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 2px 8px rgba(15,60,100,0.06);
}
.cp-sidebar-logo-full{display:none;width:98px;height:20px;object-fit:contain}
.cp-sidebar-logo-icon{display:block;width:28px;height:28px;object-fit:contain}
.cp-main-header-meta{display:flex;align-items:center;gap:8px}
.cp-main-header[hidden]{display:none !important}
.cp-main-header-copy{min-width:0;flex:1;text-align:left}
.cp-main-header h2{
  font-size:15px;font-weight:800;color:var(--ink);margin:0;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cp-main-header p{
  font-size:12px;color:var(--muted);margin:4px 0 0;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.cp-header-badge{
  display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--purple2);background:rgba(147,51,234,.1);border:1px solid rgba(147,51,234,.2);
  white-space:nowrap;
}
.cp-main-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px 24px 28px;display:flex;flex-direction:column;gap:14px}

/* Client portal liquid surfaces — aligned with internal dashboard */
.client-portal-shell .cp-main{background:transparent}
.client-portal-shell .cp-main-header,
.client-portal-shell .ops-header{
  margin:10px 14px 0;padding:12px 18px;border-radius:18px;border-bottom:none;flex-shrink:0;
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  gap:12px;position:relative;z-index:4;
  display:flex;align-items:center;justify-content:space-between;
  overflow:visible;
}
.client-portal-shell .ops-header-left{
  display:flex;align-items:center;gap:12px;min-width:0;flex:1;
}
.client-portal-shell .ops-header-copy{min-width:0}
.client-portal-shell .cp-main-header h2,
.client-portal-shell .ops-header h2{
  font-size:21px;font-weight:800;color:var(--ops-ink);letter-spacing:-.03em;line-height:1.15;margin:0;
}
.client-portal-shell .cp-main-header p,
.client-portal-shell .ops-header p{
  font-size:11px;color:var(--ops-muted);margin:3px 0 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.client-portal-shell .ops-header-actions{
  display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto;
}
.client-portal-shell .cp-main-body{
  padding:14px 28px 32px;gap:16px;background:transparent;
}
.client-portal-shell .cp-header-badge{
  border-radius:12px;padding:6px 12px;
  color:var(--ops-cyan);background:rgba(40,185,216,0.12);border-color:rgba(40,185,216,0.28);
}

/* Skeleton portal client — dipakai selama data dashboard masih dijemput */
.client-portal-shell .cp-skel{display:flex;flex-direction:column;gap:16px;min-width:0}
.client-portal-shell .cp-skel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.client-portal-shell .cp-skel-card{
  border-radius:20px;border:1px solid var(--glass-border);
  background:linear-gradient(100deg,rgba(255,255,255,0.34) 30%,rgba(255,255,255,0.62) 50%,rgba(255,255,255,0.34) 70%);
  background-size:220% 100%;
  animation:cpSkelSheen 1.2s linear infinite,glassEnter .45s cubic-bezier(.22,1,.36,1) both;
  animation-delay:0s,var(--enter-delay,0s);
}
.client-portal-shell .cp-skel-banner{height:132px}
.client-portal-shell .cp-skel-wide{height:210px}
.client-portal-shell .cp-skel-half{height:190px}
@keyframes cpSkelSheen{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){
  .client-portal-shell .cp-skel-card{animation:none;background:rgba(255,255,255,0.36)}
}
@media(max-width:700px){
  .client-portal-shell .cp-skel-grid{grid-template-columns:1fr}
  .client-portal-shell .cp-skel-banner{height:110px}
  .client-portal-shell .cp-skel-wide,
  .client-portal-shell .cp-skel-half{height:150px}
}

/* ——— Production Tracker overview (liquid glass spec) ——— */
.client-portal-shell .cp-ov-stack{
  display:flex;flex-direction:column;gap:16px;min-width:0;
  font-family:var(--font-family);color:#0f2a35;
}
.client-portal-shell .cp-ov-enter{
  animation:glassEnter .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--enter-delay,0s);
}
@media (prefers-reduced-motion:reduce){
  .client-portal-shell .cp-ov-enter{animation:none !important;opacity:1 !important;transform:none !important}
}
.client-portal-shell .cp-ov-card{
  position:relative;overflow:hidden;isolation:isolate;border-radius:16px;min-width:0;
}
.client-portal-shell .cp-ov-glass{
  background:rgba(255,255,255,0.28);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.70),0 4px 24px rgba(15,35,50,0.08);
}
.client-portal-shell .cp-ov-glass-mid{
  background:rgba(255,255,255,0.38);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,0.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.80),0 4px 24px rgba(15,35,50,0.06);
}
.client-portal-shell .cp-ov-glass-dark{
  background:rgba(15,35,50,0.62);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,0.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),0 8px 32px rgba(15,35,50,0.28);
  color:#fff;
}
.client-portal-shell .cp-ov-eyebrow{
  display:block;margin:0;padding:0;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(15,60,80,0.45);line-height:1.2;text-align:left;
}
.client-portal-shell .cp-ov-eyebrow.is-on-dark{color:rgba(255,255,255,0.55)}
.client-portal-shell .cp-ov-card-title{
  margin:4px 0 0;padding:0;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:#0f2a35;text-align:left;
}
.client-portal-shell .cp-ov-card-title.is-on-dark{color:#fff}
.client-portal-shell .cp-ov-muted{margin:0;font-size:12px;color:rgba(15,60,80,0.50)}
.client-portal-shell .cp-ov-divider{height:1px;margin:16px 0;background:rgba(255,255,255,0.55)}
.client-portal-shell .cp-ov-note{
  margin-top:16px;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
  font-size:11px;line-height:1.5;color:rgba(15,60,80,0.55);
}
.client-portal-shell .cp-ov-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  font-size:10px;font-weight:700;line-height:1;border:1px solid transparent;white-space:nowrap;
}
.client-portal-shell .cp-ov-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;flex-shrink:0}
.client-portal-shell .cp-ov-pill-cyan{
  background:rgba(40,185,216,0.16);color:#28b9d8;border-color:rgba(40,185,216,0.32);
}
.client-portal-shell .cp-ov-pill-white{
  background:rgba(255,255,255,0.72);color:rgba(15,60,80,0.65);
  border-color:rgba(255,255,255,0.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
}
.client-portal-shell .cp-ov-pill-purple{
  background:rgba(192,132,252,0.18);color:#c084fc;border-color:rgba(192,132,252,0.35);
  letter-spacing:.06em;text-transform:uppercase;font-size:9px;font-weight:800;
}
.client-portal-shell .cp-ov-pill-live{
  background:rgba(22,163,74,0.14);color:#16a34a;border-color:rgba(22,163,74,0.28);
}
.client-portal-shell .cp-ov-pill-live.is-tone-released{background:rgba(148,163,184,0.18);color:#64748b;border-color:rgba(148,163,184,0.30)}
.client-portal-shell .cp-ov-pill-live.is-tone-done{background:rgba(40,185,216,0.14);color:#0e7490;border-color:rgba(40,185,216,0.28)}
.client-portal-shell .cp-ov-pill-live.is-tone-live{background:rgba(245,158,11,0.16);color:#d97706;border-color:rgba(245,158,11,0.30)}
.client-portal-shell .cp-ov-pill-live.is-tone-info{background:rgba(40,185,216,0.14);color:#0e7490;border-color:rgba(40,185,216,0.28)}
.client-portal-shell .cp-shoot-card.is-done .cp-ov-cal-tile{
  opacity:0.88;
}
.client-portal-shell .cp-shoot-card.is-done .cp-ov-cal-band{
  background:rgba(14,116,144,0.92);
}
.client-portal-shell .cp-shoot-card.is-done .cp-ov-cal-join em{
  background:rgba(14,116,144,0.14);color:#0e7490;border-color:rgba(14,116,144,0.28);
}
.client-portal-shell .cp-shoot-card.is-live .cp-ov-cal-join em{
  background:rgba(245,158,11,0.16);color:#d97706;border-color:rgba(245,158,11,0.30);
}

.client-portal-shell .cp-ov-banner{padding:0;text-align:left}
.client-portal-shell .cp-ov-blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px)}
.client-portal-shell .cp-ov-blob-cyan{
  width:220px;height:220px;top:-60px;right:-40px;
  background:radial-gradient(circle,rgba(40,185,216,0.35) 0%,transparent 70%);
}
.client-portal-shell .cp-ov-blob-purple{
  width:200px;height:200px;bottom:-70px;left:-50px;
  background:radial-gradient(circle,rgba(139,60,158,0.32) 0%,transparent 70%);
}
.client-portal-shell .cp-ov-blob-purple-sm{
  width:140px;height:140px;top:-40px;right:-20px;
  background:radial-gradient(circle,rgba(192,132,252,0.28) 0%,transparent 70%);
}
.client-portal-shell .cp-ov-banner-row{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:28px 32px;width:100%;box-sizing:border-box;
}
.client-portal-shell .cp-ov-banner-copy{
  min-width:0;flex:1 1 auto;max-width:min(640px,100%);
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
}
.client-portal-shell .cp-ov-banner-eyebrow{
  display:block;margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#28b9d8;
  text-align:left;width:100%;
}
.client-portal-shell .cp-ov-banner-title{
  margin:0;font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.2;color:#fff;
  text-align:left;width:100%;
}
.client-portal-shell .cp-ov-banner-sub{
  margin:10px 0 0;max-width:42ch;font-size:13px;line-height:1.55;color:rgba(255,255,255,0.68);font-weight:500;
  text-align:left;
}
.client-portal-shell .cp-ov-banner-meta{
  flex:0 0 auto;margin-left:auto;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right;
}
.client-portal-shell .cp-ov-banner-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.client-portal-shell .cp-ov-banner-pic{margin:0;font-size:11px;color:rgba(255,255,255,0.55);text-align:right}

.client-portal-shell .cp-ov-tracker{padding:24px 26px}
.client-portal-shell .cp-ov-tracker-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  text-align:left;
}
.client-portal-shell .cp-ov-tracker-head > div{
  display:flex;flex-direction:column;align-items:flex-start;min-width:0;text-align:left;
}
.client-portal-shell .cp-ov-tracker-body{
  display:flex;align-items:flex-start;gap:28px;min-width:0;
}
.client-portal-shell .cp-ov-donut-col{
  flex:0 0 148px;width:148px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding-top:4px;
}
.client-portal-shell .cp-ov-tracker .prodops-donut{
  position:relative;width:148px;height:148px;margin:0;display:grid;place-items:center;background:none;box-shadow:none;
}
.client-portal-shell .cp-ov-tracker .prodops-donut-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.client-portal-shell .cp-ov-tracker .prodops-donut-track{stroke:rgba(15,60,80,0.10)}
.client-portal-shell .cp-ov-tracker .prodops-donut-inner{
  position:relative;z-index:1;width:96px;height:96px;border-radius:50%;
  background:rgba(255,255,255,0.72);border:1px solid rgba(255,255,255,0.85);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
}
.client-portal-shell .cp-ov-tracker .prodops-donut-inner strong{font-size:26px;font-weight:800;color:#0f2a35;line-height:1}
.client-portal-shell .cp-ov-tracker .prodops-donut-inner span{
  margin-top:4px;font-size:10px;font-weight:700;color:rgba(15,60,80,0.45);letter-spacing:.02em;text-transform:none;
}
.client-portal-shell .cp-ov-donut-caption{margin:0;font-size:11px;color:rgba(15,60,80,0.50);text-align:center;line-height:1.4}
.client-portal-shell .cp-ov-dept-list{
  flex:1 1 auto;min-width:0;width:100%;
  display:flex;flex-direction:column;gap:9px;
}
.client-portal-shell .cp-ov-dept-row{
  display:grid;
  grid-template-columns:28px minmax(104px,140px) minmax(0,1fr) 40px;
  align-items:center;gap:10px;min-width:0;width:100%;
}
.client-portal-shell .cp-ov-dept-ico{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  align-self:center;
}
.client-portal-shell .cp-ov-dept-ico svg{
  width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;
  display:block;
}
.client-portal-shell .cp-ov-dept-name{
  width:auto;min-width:0;height:28px;
  display:flex;align-items:center;
  font-size:12px;font-weight:600;line-height:1;color:rgba(15,60,80,0.72);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;
}
.client-portal-shell .cp-glass-bar{
  width:100%;min-width:0;height:8px;border-radius:999px;
  background:rgba(15,60,80,0.10);
  border:none;box-shadow:none;
  overflow:hidden;align-self:center;
}
.client-portal-shell .cp-glass-bar > span{
  display:block;height:100%;border-radius:999px;min-width:0;
  transition:width .7s cubic-bezier(.22,1,.36,1);
}
.client-portal-shell .cp-ov-dept-pct{
  width:auto;min-width:2.25rem;height:28px;justify-self:end;
  display:flex;align-items:center;justify-content:flex-end;
  font-size:11px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;text-align:right;
}
.client-portal-shell .cp-ov-tracker .cp-ov-note{
  margin-top:18px;text-align:left;
}

.client-portal-shell .cp-ov-shoot{display:flex;align-items:center;gap:32px;padding:24px;min-width:0}
.client-portal-shell .cp-ov-cal-pair{display:flex;align-items:center;gap:12px;flex-shrink:0}
.client-portal-shell .cp-ov-cal-tile{
  width:86px;border-radius:16px;overflow:hidden;text-align:center;
  background:rgba(15,35,50,0.62);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,0.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),0 8px 24px rgba(15,35,50,0.22);
}
.client-portal-shell .cp-ov-cal-band{
  padding:8px 6px 6px;background:rgba(40,185,216,0.92);
  font-size:10px;font-weight:800;letter-spacing:.12em;color:#fff;
}
.client-portal-shell .cp-ov-cal-num{padding:10px 6px 2px;font-size:36px;font-weight:800;line-height:1;color:#fff;letter-spacing:-.03em}
.client-portal-shell .cp-ov-cal-day{padding:0 6px 12px;font-size:11px;font-weight:600;color:rgba(255,255,255,0.62)}
.client-portal-shell .cp-ov-cal-join{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:44px}
.client-portal-shell .cp-ov-cal-dash{width:1px;height:14px;border-left:1.5px dashed rgba(15,60,80,0.25)}
.client-portal-shell .cp-ov-cal-join em{
  font-style:normal;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px;background:rgba(22,163,74,0.14);color:#16a34a;border:1px solid rgba(22,163,74,0.28);
}
.client-portal-shell .cp-ov-shoot-copy{flex:1;min-width:0}
.client-portal-shell .cp-ov-shoot-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.client-portal-shell .cp-ov-shoot-title{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#0f2a35}
.client-portal-shell .cp-ov-shoot-sub{margin:8px 0 0;font-size:13px;line-height:1.5;color:rgba(15,60,80,0.55)}
.client-portal-shell .cp-ov-shoot .cp-ov-note{
  margin-top:14px;padding:13px 16px;border-radius:14px;
  font-size:12px;font-weight:600;line-height:1.55;color:#0f4c5c;
  background:rgba(40,185,216,0.12);
  border:1px solid rgba(40,185,216,0.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.75),0 6px 18px rgba(14,116,144,0.08);
}
.client-portal-shell .cp-shoot-card.is-done .cp-ov-note{
  color:#0e7490;
  background:linear-gradient(145deg, rgba(40,185,216,0.16) 0%, rgba(14,165,233,0.10) 100%);
  border-color:rgba(14,116,144,0.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8),0 8px 22px rgba(14,116,144,0.12);
}
.client-portal-shell .cp-shoot-card.is-live .cp-ov-note{
  color:#9a3412;
  background:rgba(245,158,11,0.14);
  border-color:rgba(245,158,11,0.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.75),0 6px 18px rgba(180,83,9,0.08);
}
.client-portal-shell .cp-shoot-card.is-released .cp-ov-note{
  color:#475569;
  background:rgba(148,163,184,0.14);
  border-color:rgba(148,163,184,0.30);
}

.client-portal-shell .cp-ov-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.client-portal-shell .cp-ov-pay,
.client-portal-shell .cp-ov-access{display:flex;flex-direction:column;min-height:100%}
.client-portal-shell .cp-ov-side-head{
  display:flex;align-items:center;gap:12px;padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,0.55);
  text-align:left;
}
.client-portal-shell .cp-ov-side-titles{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  text-align:left;
}
.client-portal-shell .cp-ov-side-titles .cp-ov-eyebrow,
.client-portal-shell .cp-ov-side-titles .cp-ov-card-title{
  width:100%;text-align:left;
}
.client-portal-shell .cp-ov-side-ico{
  width:36px;height:36px;border-radius:12px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
}
.client-portal-shell .cp-ov-side-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.client-portal-shell .cp-ov-side-ico.is-amber{background:rgba(245,158,11,0.14);color:#f59e0b;border:1px solid rgba(245,158,11,0.22)}
.client-portal-shell .cp-ov-side-ico.is-purple{background:rgba(192,132,252,0.18);color:#c084fc;border:1px solid rgba(192,132,252,0.28)}
.client-portal-shell .cp-ov-pay-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.client-portal-shell .cp-ov-pay-row{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:rgba(15,60,80,0.55)}
.client-portal-shell .cp-ov-pay-row strong{color:#0f2a35;font-weight:760;font-variant-numeric:tabular-nums}
.client-portal-shell .cp-ov-pay-row strong.is-green{color:#16a34a}
.client-portal-shell .cp-ov-pay-remain{
  display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;
  background:rgba(245,158,11,0.10);border:1px solid rgba(245,158,11,0.28);
}
.client-portal-shell .cp-ov-pay-remain span{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(180,83,9,0.75)}
.client-portal-shell .cp-ov-pay-remain strong{font-size:20px;font-weight:800;color:#d97706;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.client-portal-shell .cp-ov-pay-bar{height:8px;border-radius:999px;background:rgba(15,60,80,0.10);overflow:hidden}
.client-portal-shell .cp-ov-pay-bar > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4ade80,#16a34a);transition:width .7s cubic-bezier(.22,1,.36,1)}
.client-portal-shell .cp-ov-pay-meta{display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:600;color:rgba(15,60,80,0.45)}
.client-portal-shell .cp-ov-cta-dark,
.client-portal-shell .cp-ov-cta-ghost{
  width:100%;margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:12px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:760;border:none;
  transition:transform .15s ease,opacity .15s ease,background .15s ease;
}
.client-portal-shell .cp-ov-cta-dark{
  color:#fff;background:linear-gradient(145deg,rgba(15,35,50,0.94) 0%,rgba(15,35,50,0.78) 100%);
  box-shadow:0 6px 18px rgba(15,35,50,0.18);
}
.client-portal-shell .cp-ov-cta-dark:hover{transform:translateY(-1px)}
.client-portal-shell .cp-ov-cta-ghost{
  color:rgba(255,255,255,0.92);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);
}
.client-portal-shell .cp-ov-cta-ghost:hover{background:rgba(255,255,255,0.14)}
.client-portal-shell .cp-ov-cta-dark svg,
.client-portal-shell .cp-ov-cta-ghost svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}

.client-portal-shell .cp-ov-access-head{
  position:relative;padding:18px 20px;background:rgba(139,60,158,0.18);border-bottom:1px solid rgba(255,255,255,0.10);
}
.client-portal-shell .cp-ov-access-head-row{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.client-portal-shell .cp-ov-access-titles{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.client-portal-shell .cp-ov-access-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.client-portal-shell .cp-ov-access-intro{margin:0 0 4px;font-size:12px;line-height:1.5;color:rgba(255,255,255,0.62)}
.client-portal-shell .cp-ov-req{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.14);
  font-size:12px;font-weight:600;color:rgba(255,255,255,0.78);
}
.client-portal-shell .cp-ov-req.is-done{color:rgba(255,255,255,0.92)}
.client-portal-shell .cp-ov-req-ico{width:18px;height:18px;flex-shrink:0;display:inline-flex;color:#f87171}
.client-portal-shell .cp-ov-req.is-done .cp-ov-req-ico{color:#4ade80}
.client-portal-shell .cp-ov-req-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.client-portal-shell .cp-ov-note-card{padding:16px 18px}
.client-portal-shell .cp-ov-note-card p{margin:6px 0 0;font-size:13px;line-height:1.55;color:rgba(15,60,80,0.72)}
.client-portal-shell .cp-ov-footer{
  margin:4px 0 0;text-align:center;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(15,60,80,0.35);
}

/* Tab strip (Production Tracker / Pembayaran / Akses Hasil) — full width */
.client-portal-shell .cp-ov-tabs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;align-items:stretch;
  width:100%;box-sizing:border-box;padding:5px;border-radius:999px;
  background:rgba(255,255,255,0.62);
  border:1px solid rgba(255,255,255,0.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.92),0 8px 28px rgba(15,60,80,0.06);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}
.client-portal-shell .cp-ov-tab{
  appearance:none;border:0;cursor:pointer;background:transparent;width:100%;
  border-radius:999px;padding:11px 14px;font-size:12px;font-weight:700;text-align:center;
  color:rgba(15,60,80,0.48);letter-spacing:.01em;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.client-portal-shell .cp-ov-tab:hover{color:rgba(15,60,80,0.78)}
.client-portal-shell .cp-ov-tab.is-active{
  color:#fff;
  background:linear-gradient(145deg, rgba(15,35,50,0.96) 0%, rgba(32,52,66,0.92) 100%);
  box-shadow:0 6px 18px rgba(15,35,50,0.22),inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Pembayaran detail view */
.client-portal-shell .cp-payv-hero{padding:26px 28px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:20px}
.client-portal-shell .cp-payv-hero-row{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.client-portal-shell .cp-payv-hero-copy{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;
}
.client-portal-shell .cp-payv-badge{
  display:inline-flex;align-items:center;align-self:flex-start;
  margin:0;padding:5px 10px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  color:#fb923c;background:rgba(249,115,22,0.18);border:1px solid rgba(249,115,22,0.28);
}
.client-portal-shell .cp-payv-badge.is-ok{
  color:#4ade80;background:rgba(34,197,94,0.18);border-color:rgba(34,197,94,0.28);
}
.client-portal-shell .cp-payv-badge.is-warn{
  color:#fda4af;background:rgba(230,55,86,0.18);border-color:rgba(230,55,86,0.28);
}
.client-portal-shell .cp-payv-hero-title{
  margin:10px 0 8px;padding:0;font-size:28px;line-height:1.15;font-weight:800;color:#fff;letter-spacing:-.02em;
  text-align:left;width:100%;
}
.client-portal-shell .cp-payv-hero-sub{
  margin:0;padding:0;max-width:36rem;font-size:13px;line-height:1.55;color:rgba(255,255,255,0.62);
  text-align:left;width:100%;
}
.client-portal-shell .cp-payv-metrics{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:420px;
}
.client-portal-shell .cp-payv-metrics span{
  display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.45);
}
.client-portal-shell .cp-payv-metrics strong{
  display:block;margin-top:6px;font-size:16px;font-weight:800;color:#fff;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.client-portal-shell .cp-payv-metrics strong.is-green{color:#4ade80}
.client-portal-shell .cp-payv-metrics strong.is-amber{color:#fb923c}
.client-portal-shell .cp-payv-donut-wrap{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;
  position:relative;
}
.client-portal-shell .cp-payv-donut-wrap::before{
  content:"";position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:170px;height:170px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(34,197,94,0.18) 0%, rgba(34,197,94,0.04) 42%, transparent 70%);
}
.client-portal-shell .cp-payv-hero .prodops-donut{
  position:relative;z-index:1;width:168px;height:168px;margin:0;
  display:grid;place-items:center;background:none;box-shadow:none;border-radius:50%;
}
.client-portal-shell .cp-payv-hero .prodops-donut-svg{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  filter:drop-shadow(0 0 10px rgba(34,197,94,0.28));
}
.client-portal-shell .cp-payv-hero .prodops-donut-track{stroke:rgba(255,255,255,0.14)}
.client-portal-shell .cp-payv-hero .prodops-donut-seg{
  stroke:#22c55e;stroke-linecap:round;
}
.client-portal-shell .cp-payv-hero .prodops-donut-inner{
  position:relative;z-index:2;width:102px;height:102px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(165deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 45%, rgba(15,35,50,0.28) 100%);
  border:1px solid rgba(255,255,255,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -8px 18px rgba(15,25,40,0.22),
    0 10px 28px rgba(0,0,0,0.22);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
}
.client-portal-shell .cp-payv-hero .prodops-donut-inner strong{
  font-size:28px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em;
  text-shadow:0 1px 8px rgba(0,0,0,0.25);
}
.client-portal-shell .cp-payv-hero .prodops-donut-inner span{
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.62);margin-top:5px;
}
.client-portal-shell .cp-payv-legend{
  position:relative;z-index:1;
  display:flex;gap:16px;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:rgba(255,255,255,0.58);
}
.client-portal-shell .cp-payv-legend i{
  width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle;
}
.client-portal-shell .cp-payv-legend i.is-green{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,0.55)}
.client-portal-shell .cp-payv-legend i.is-amber{background:#f97316;box-shadow:0 0 8px rgba(249,115,22,0.45)}

.client-portal-shell .cp-payv-progress{padding:20px 22px}
.client-portal-shell .cp-payv-progress-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;
}
.client-portal-shell .cp-payv-progress-label{display:inline-flex;align-items:center;gap:8px}
.client-portal-shell .cp-payv-ico{
  width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;
}
.client-portal-shell .cp-payv-pct-pill{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:800;color:#16a34a;
  background:rgba(34,197,94,0.14);border:1px solid rgba(34,197,94,0.28);
}
.client-portal-shell .cp-payv-bar{
  height:12px;border-radius:999px;overflow:hidden;
  background:rgba(15,60,80,0.10);box-shadow:inset 0 1px 2px rgba(15,60,80,0.06);
}
.client-portal-shell .cp-payv-bar > span{
  display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#22c55e,#4ade80);
  transition:width .6s cubic-bezier(.22,1,.36,1);
}
.client-portal-shell .cp-payv-progress-meta{
  display:flex;justify-content:space-between;gap:12px;margin-top:12px;
  font-size:12px;font-weight:700;
}
.client-portal-shell .cp-payv-progress-meta .is-green{color:#16a34a}
.client-portal-shell .cp-payv-progress-meta .is-amber{color:#ea580c}

.client-portal-shell .cp-payv-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.client-portal-shell .cp-payv-metric{
  padding:18px 18px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;
}
.client-portal-shell .cp-payv-metric strong{
  font-size:20px;font-weight:800;color:var(--ops-ink);letter-spacing:-.02em;line-height:1.2;
}
.client-portal-shell .cp-payv-metric strong.is-green{color:#16a34a}
.client-portal-shell .cp-payv-metric strong.is-amber{color:#ea580c}
.client-portal-shell .cp-payv-chip{
  display:inline-flex;align-items:center;margin-top:4px;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:700;font-style:normal;
  color:rgba(15,60,80,0.62);background:rgba(15,60,80,0.06);border:1px solid rgba(15,60,80,0.10);
}
.client-portal-shell .cp-payv-chip.is-ok{
  color:#16a34a;background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.22);
}
.client-portal-shell .cp-payv-chip.is-warn{
  color:#ea580c;background:rgba(249,115,22,0.12);border-color:rgba(249,115,22,0.22);
}

.client-portal-shell .cp-payv-invoice{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.client-portal-shell .cp-payv-invoice-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.client-portal-shell .cp-payv-invoice-left{display:flex;align-items:center;gap:12px;min-width:0;text-align:left}
.client-portal-shell .cp-payv-invoice-left strong{
  display:block;margin-top:2px;font-size:14px;font-weight:800;color:var(--ops-ink);word-break:break-word;
}
.client-portal-shell .cp-payv-doc{
  width:42px;height:42px;border-radius:14px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:#0284c7;background:rgba(14,165,233,0.12);border:1px solid rgba(14,165,233,0.22);
}
.client-portal-shell .cp-payv-doc svg{
  width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.client-portal-shell .cp-payv-invoice-date{
  font-size:12px;font-weight:600;color:rgba(15,60,80,0.45);white-space:nowrap;
}
.client-portal-shell .cp-payv-invoice-btn{width:100%;justify-content:center;text-decoration:none;border:none;cursor:pointer;font:inherit}
.client-portal-shell .cp-payv-invoice-btn.is-disabled{
  opacity:.55;pointer-events:none;cursor:default;
}
.client-portal-shell .cp-payv-invoice-hint{
  margin:4px 0 0;font-size:12px;line-height:1.45;font-weight:500;color:rgba(15,60,80,0.52);
}

.client-portal-shell .cp-payv-help{
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.client-portal-shell .cp-payv-help-copy{
  display:flex;align-items:center;gap:12px;min-width:0;text-align:left;
}
.client-portal-shell .cp-payv-help-ico{
  width:34px;height:34px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(15,60,80,0.55);background:rgba(15,60,80,0.06);border:1px solid rgba(15,60,80,0.10);
}
.client-portal-shell .cp-payv-help-ico svg{
  width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;
}
.client-portal-shell .cp-payv-help-copy p{
  margin:0;font-size:12px;line-height:1.45;font-weight:600;color:rgba(15,60,80,0.62);
}
.client-portal-shell .cp-payv-help-btn{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:999px;text-decoration:none;
  font-size:12px;font-weight:800;color:#fff;white-space:nowrap;
  background:linear-gradient(145deg, rgba(15,35,50,0.96) 0%, rgba(32,52,66,0.92) 100%);
  box-shadow:0 6px 18px rgba(15,35,50,0.18);
  transition:transform .18s ease,box-shadow .18s ease;
}
.client-portal-shell .cp-payv-help-btn:hover{
  transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,35,50,0.22);
}

/* Akses Hasil detail view */
.client-portal-shell .cp-drv-hero{padding:24px 28px;position:relative;overflow:hidden}
.client-portal-shell .cp-drv-hero-row{
  position:relative;z-index:1;display:flex;align-items:center;gap:16px;
}
.client-portal-shell .cp-drv-lock{
  width:52px;height:52px;border-radius:16px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:#c4b5fd;
  background:rgba(167,139,250,0.12);
  border:1px solid rgba(167,139,250,0.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}
.client-portal-shell .cp-drv-lock.is-open{
  color:#86efac;
  background:rgba(34,197,94,0.14);
  border-color:rgba(34,197,94,0.32);
}
.client-portal-shell .cp-drv-lock svg{
  width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
  display:block;
}
.client-portal-shell .cp-drv-hero-copy{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  text-align:left;
}
.client-portal-shell .cp-drv-badge{
  display:inline-flex;align-items:center;align-self:flex-start;
  margin:0;padding:5px 10px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  color:#c4b5fd;background:rgba(167,139,250,0.16);border:1px solid rgba(167,139,250,0.28);
}
.client-portal-shell .cp-drv-badge.is-open{
  color:#86efac;background:rgba(34,197,94,0.16);border-color:rgba(34,197,94,0.28);
}
.client-portal-shell .cp-drv-hero-title{
  margin:8px 0 6px;padding:0;font-size:26px;line-height:1.2;font-weight:800;color:#fff;letter-spacing:-.02em;
  text-align:left;width:100%;
}
.client-portal-shell .cp-drv-hero-sub{
  margin:0;padding:0;max-width:36rem;font-size:13px;line-height:1.5;color:rgba(255,255,255,0.62);
  text-align:left;width:100%;
}
.client-portal-shell .cp-drv-open-btn{
  display:inline-flex;margin-top:18px;width:auto;text-decoration:none;border:none;cursor:pointer;font:inherit;
}

.client-portal-shell .cp-drv-reqs{padding:22px 24px}
.client-portal-shell .cp-drv-reqs-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;
}
.client-portal-shell .cp-drv-reqs-title{margin:2px 0 0;font-size:16px}
.client-portal-shell .cp-drv-count{
  display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;
  font-size:11px;font-weight:800;white-space:nowrap;
  color:#e11d48;background:rgba(244,63,94,0.10);border:1px solid rgba(244,63,94,0.22);
}
.client-portal-shell .cp-drv-count.is-ok{
  color:#16a34a;background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.24);
}
.client-portal-shell .cp-drv-req-list{display:flex;flex-direction:column;gap:10px}
.client-portal-shell .cp-drv-req{
  display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:14px 14px;border-radius:16px;
  background:rgba(255,255,255,0.42);
  border:1px solid rgba(255,255,255,0.70);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.85);
}
.client-portal-shell .cp-drv-num{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:rgba(15,60,80,0.55);
  background:rgba(15,60,80,0.06);border:1px solid rgba(15,60,80,0.10);
}
.client-portal-shell .cp-drv-req.is-done .cp-drv-num{
  color:#16a34a;background:rgba(34,197,94,0.14);border-color:rgba(34,197,94,0.28);
}
.client-portal-shell .cp-drv-req-copy{
  min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
}
.client-portal-shell .cp-drv-req strong{
  font-size:14px;font-weight:700;color:var(--ops-ink);text-align:left;
}
.client-portal-shell .cp-drv-req-hint{
  font-size:11px;line-height:1.4;font-weight:500;color:rgba(15,60,80,0.50);
}
.client-portal-shell .cp-drv-status{
  display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;
  font-size:11px;font-weight:700;font-style:normal;
  color:rgba(15,60,80,0.55);background:rgba(15,60,80,0.06);border:1px solid rgba(15,60,80,0.10);
}
.client-portal-shell .cp-drv-req.is-done .cp-drv-status{
  color:#16a34a;background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.24);
}

.client-portal-shell .cp-drv-help{
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.client-portal-shell .cp-drv-help-copy{
  display:flex;align-items:center;gap:12px;min-width:0;text-align:left;
}
.client-portal-shell .cp-drv-help-ico{
  width:34px;height:34px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(15,60,80,0.55);background:rgba(15,60,80,0.06);border:1px solid rgba(15,60,80,0.10);
}
.client-portal-shell .cp-drv-help-ico svg{
  width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;
}
.client-portal-shell .cp-drv-help-copy p{
  margin:0;font-size:12px;line-height:1.45;font-weight:600;color:rgba(15,60,80,0.62);
}
.client-portal-shell .cp-drv-help-btn{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:999px;text-decoration:none;
  font-size:12px;font-weight:800;color:#fff;white-space:nowrap;
  background:linear-gradient(145deg, rgba(15,35,50,0.96) 0%, rgba(32,52,66,0.92) 100%);
  box-shadow:0 6px 18px rgba(15,35,50,0.18);
  transition:transform .18s ease,box-shadow .18s ease;
}
.client-portal-shell .cp-drv-help-btn:hover{
  transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,35,50,0.22);
}

@media(max-width:900px){
  .client-portal-shell .cp-ov-banner-row{flex-direction:column;align-items:flex-start;padding:24px}
  .client-portal-shell .cp-ov-banner-meta{align-items:flex-start;margin-left:0}
  .client-portal-shell .cp-ov-banner-pills,.client-portal-shell .cp-ov-banner-pic{justify-content:flex-start;text-align:left}
  .client-portal-shell .cp-ov-banner-title{font-size:24px}
  .client-portal-shell .cp-ov-tracker-body{flex-direction:column;align-items:stretch;gap:20px}
  .client-portal-shell .cp-ov-donut-col{width:100%;flex-basis:auto}
  .client-portal-shell .cp-ov-dept-row{grid-template-columns:28px minmax(96px,120px) minmax(0,1fr) 36px;gap:8px}
  .client-portal-shell .cp-ov-shoot{flex-direction:column;align-items:stretch;gap:20px}
  .client-portal-shell .cp-ov-grid{grid-template-columns:1fr}
  .client-portal-shell .cp-payv-hero-row{flex-direction:column;align-items:stretch}
  .client-portal-shell .cp-payv-donut-wrap{align-self:center}
  .client-portal-shell .cp-payv-metrics{max-width:none;width:100%}
  .client-portal-shell .cp-payv-cards{grid-template-columns:1fr}
  .client-portal-shell .cp-payv-invoice-top{flex-direction:column;align-items:flex-start}
  .client-portal-shell .cp-ov-tab{padding:10px 8px;font-size:11px}
  .client-portal-shell .cp-payv-hero .prodops-donut{width:148px;height:148px}
  .client-portal-shell .cp-payv-hero .prodops-donut-inner{width:90px;height:90px}
  .client-portal-shell .cp-payv-hero .prodops-donut-inner strong{font-size:24px}
  .client-portal-shell .cp-drv-help,
  .client-portal-shell .cp-payv-help{flex-direction:column;align-items:stretch}
  .client-portal-shell .cp-drv-help-btn,
  .client-portal-shell .cp-payv-help-btn{width:100%;justify-content:center;min-height:44px}
  .client-portal-shell .cp-drv-hero-title{font-size:22px}
}
@media(max-width:600px){
  .client-portal-shell .cp-main-body{padding:16px}
  .client-portal-shell .cp-ov-dept-name{width:5.5rem;font-size:11px}
  .client-portal-shell .cp-ov-shoot-title{font-size:18px}
  .client-portal-shell .cp-ov-cal-tile{width:76px}
  .client-portal-shell .cp-ov-cal-num{font-size:30px}
  .client-portal-shell .cp-payv-hero{padding:22px 18px;gap:16px}
  .client-portal-shell .cp-payv-hero-title{font-size:22px}
  .client-portal-shell .cp-payv-metrics{gap:12px}
}

/* ── Fase 2: Client portal Overview phone ── */
@media(max-width:700px){
  .client-portal-shell .cp-ov-stack{gap:10px}
  .client-portal-shell .cp-ov-tabs{
    border-radius:14px;padding:4px;gap:4px;
    background:#fff;border:1px solid rgba(15,60,80,0.10);
    box-shadow:0 2px 10px rgba(15,80,100,0.04);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .client-portal-shell .cp-ov-tab{
    min-height:40px;padding:8px 6px;font-size:11px;border-radius:10px;
  }

  /* Greeting: match desktop dark glass, compact & tidy */
  .client-portal-shell .cp-ov-banner.cp-ov-glass-dark,
  .client-portal-shell .cp-ov-banner{
    background:rgba(15,35,50,0.72)!important;
    border:1px solid rgba(255,255,255,0.13)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),0 8px 28px rgba(15,35,50,0.22)!important;
    border-radius:16px!important;
    overflow:hidden;
    color:#fff;
  }
  .client-portal-shell .cp-ov-banner .cp-ov-blob{opacity:.55}
  .client-portal-shell .cp-ov-banner-row{
    flex-direction:column;align-items:flex-start;gap:14px;
    padding:16px 16px 16px;
  }
  .client-portal-shell .cp-ov-banner-copy{width:100%;max-width:none}
  .client-portal-shell .cp-ov-banner-eyebrow{
    margin:0 0 6px;font-size:10px;color:#28b9d8;
  }
  .client-portal-shell .cp-ov-banner-title{
    font-size:20px;line-height:1.25;color:#fff;
  }
  .client-portal-shell .cp-ov-banner-sub{
    margin-top:8px;font-size:12px;line-height:1.5;color:rgba(255,255,255,0.68);max-width:none;
  }
  .client-portal-shell .cp-ov-banner-meta{
    width:100%;margin:0;align-items:flex-start;gap:10px;text-align:left;
  }
  .client-portal-shell .cp-ov-banner-pills{
    justify-content:flex-start;flex-wrap:wrap;gap:8px;
  }
  .client-portal-shell .cp-ov-banner-pic{
    text-align:left;color:rgba(255,255,255,0.55);font-size:11px;margin:0;line-height:1.4;
  }
  .client-portal-shell .cp-ov-banner .cp-ov-pill-white{
    background:rgba(255,255,255,0.14);color:#fff;border-color:rgba(255,255,255,0.22);
  }
  .client-portal-shell .cp-ov-banner .cp-ov-pill-cyan{
    background:rgba(40,185,216,0.18);color:#7dd3fc;border-color:rgba(40,185,216,0.32);
  }

  /* Tracker: compact donut + dense rows */
  .client-portal-shell .cp-ov-tracker{
    padding:14px;border-radius:14px;
    background:#fff!important;
    border:1px solid rgba(15,60,80,0.10)!important;
    box-shadow:0 4px 14px rgba(15,80,100,0.05)!important;
  }
  .client-portal-shell .cp-ov-tracker-head{gap:10px;margin:0}
  .client-portal-shell .cp-ov-card-title{font-size:14px}
  .client-portal-shell .cp-ov-eyebrow{font-size:9px;margin-bottom:2px}
  .client-portal-shell .cp-ov-divider{margin:10px 0}
  .client-portal-shell .cp-ov-tracker-body{
    flex-direction:row!important;
    align-items:center;
    gap:12px!important;
  }
  .client-portal-shell .cp-ov-donut-col{
    flex:0 0 auto;width:auto;gap:6px;padding-top:0;
  }
  .client-portal-shell .cp-ov-tracker .prodops-donut,
  .client-portal-shell .cp-ov-tracker .prodops-donut-svg{
    width:84px!important;height:84px!important;
  }
  .client-portal-shell .cp-ov-tracker .prodops-donut-inner{
    width:56px!important;height:56px!important;
  }
  .client-portal-shell .cp-ov-tracker .prodops-donut-inner strong{font-size:15px}
  .client-portal-shell .cp-ov-tracker .prodops-donut-inner span{font-size:7px;margin-top:1px}
  .client-portal-shell .cp-ov-donut-caption{
    font-size:9px;max-width:84px;line-height:1.3;
  }
  .client-portal-shell .cp-ov-dept-list{gap:5px}
  .client-portal-shell .cp-ov-dept-row{
    grid-template-columns:22px minmax(0,68px) minmax(0,1fr) 28px!important;
    gap:6px!important;
  }
  .client-portal-shell .cp-ov-dept-ico{width:22px;height:22px;border-radius:6px}
  .client-portal-shell .cp-ov-dept-ico svg{width:11px;height:11px}
  .client-portal-shell .cp-ov-dept-name{
    width:auto!important;height:auto;font-size:10px!important;line-height:1.2;
  }
  .client-portal-shell .cp-ov-dept-pct{font-size:10px}
  .client-portal-shell .cp-glass-bar{height:4px}
  .client-portal-shell .cp-ov-tracker .cp-ov-note{
    margin-top:10px;font-size:9px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* Shoot card compact */
  .client-portal-shell .cp-ov-shoot{
    flex-direction:column;align-items:stretch;gap:12px;padding:14px;
  }
  .client-portal-shell .cp-ov-shoot-card,
  .client-portal-shell .cp-shoot-card.cp-ov-card{
    border-radius:14px;background:#fff!important;
    border:1px solid rgba(15,60,80,0.10)!important;
    box-shadow:0 4px 14px rgba(15,80,100,0.05)!important;
  }
  .client-portal-shell .cp-ov-shoot-title{font-size:16px}
  .client-portal-shell .cp-ov-shoot-sub{font-size:11px;margin-top:4px}
  .client-portal-shell .cp-ov-cal-tile{width:64px;border-radius:12px}
  .client-portal-shell .cp-ov-cal-num{font-size:24px;padding:8px 4px 0}
  .client-portal-shell .cp-ov-cal-day{font-size:9px;padding:0 4px 8px}

  /* Pay + Access cards */
  .client-portal-shell .cp-ov-grid{gap:10px}
  .client-portal-shell .cp-ov-pay,
  .client-portal-shell .cp-ov-access{
    border-radius:14px;overflow:hidden;
    background:#fff!important;
    border:1px solid rgba(15,60,80,0.10)!important;
    box-shadow:0 4px 14px rgba(15,80,100,0.05)!important;
  }
  .client-portal-shell .cp-ov-side-head{padding:12px 14px 0}
  .client-portal-shell .cp-ov-pay-body{padding:12px 14px 14px;gap:8px}
  .client-portal-shell .cp-ov-pay-remain strong{font-size:16px}
  .client-portal-shell .cp-ov-pay-bar{height:5px}
  .client-portal-shell .cp-ov-cta-dark,
  .client-portal-shell .cp-ov-cta-ghost{
    min-height:40px;padding:10px 12px;font-size:11px;border-radius:10px;
  }
  .client-portal-shell .cp-ov-access-head{
    padding:12px 14px;
    background:rgba(15,60,80,0.04)!important;
    border-bottom:1px solid rgba(15,60,80,0.08)!important;
  }
  .client-portal-shell .cp-ov-access .cp-ov-blob{display:none}
  .client-portal-shell .cp-ov-access .cp-ov-eyebrow.is-on-dark{color:rgba(15,60,80,0.42)}
  .client-portal-shell .cp-ov-access .cp-ov-card-title.is-on-dark{color:#0f2a35}
  .client-portal-shell .cp-ov-access .cp-ov-pill-purple{
    background:rgba(124,58,237,0.10);color:#6d28d9;border-color:rgba(124,58,237,0.22);
  }
  .client-portal-shell .cp-ov-access-body{padding:12px 14px 14px;gap:8px}
  .client-portal-shell .cp-ov-access-intro{color:rgba(15,60,80,0.55)!important;font-size:11px}
  .client-portal-shell .cp-ov-req{
    background:rgba(15,60,80,0.04)!important;
    border:1px solid rgba(15,60,80,0.08)!important;
    color:rgba(15,42,53,0.78)!important;
    padding:8px 10px;font-size:11px;
  }
  .client-portal-shell .cp-ov-req.is-done{color:#0f2a35!important}
  .client-portal-shell .cp-ov-req-ico{color:#dc2626}
  .client-portal-shell .cp-ov-req.is-done .cp-ov-req-ico{color:#16a34a}
  .client-portal-shell .cp-ov-access .cp-ov-cta-ghost{
    color:#fff!important;
    background:linear-gradient(145deg,rgba(15,35,50,0.94) 0%,rgba(15,35,50,0.78) 100%)!important;
    border:none!important;
  }
  .client-portal-shell .cp-ov-footer{margin-top:2px;font-size:8px;letter-spacing:.12em}

  .client-portal-shell .cp-wait-notice{
    border-radius:14px;padding:14px;
    background:#fff;border:1px solid rgba(15,60,80,0.10);
  }
  .client-portal-shell .cp-wait-title{font-size:16px}
  .client-portal-shell .cp-wait-lead{font-size:12px}
}

/* ── Fase 3: Client portal Pembayaran phone ── */
@media(max-width:700px){
  /* Hero: match desktop dark glass */
  .client-portal-shell .cp-payv-hero.cp-ov-glass-dark,
  .client-portal-shell .cp-payv-hero{
    background:rgba(15,35,50,0.72)!important;
    border:1px solid rgba(255,255,255,0.13)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),0 8px 28px rgba(15,35,50,0.22)!important;
    border-radius:16px!important;
    padding:16px!important;
    gap:14px!important;
    overflow:hidden;
    color:#fff;
  }
  .client-portal-shell .cp-payv-hero .cp-ov-blob{opacity:.5}
  .client-portal-shell .cp-payv-hero-row{
    flex-direction:row!important;
    align-items:flex-start;
    gap:12px;
  }
  .client-portal-shell .cp-payv-hero-copy{gap:0;flex:1;min-width:0}
  .client-portal-shell .cp-payv-badge{
    margin:0 0 8px;padding:5px 10px;font-size:9px;
    color:#fb923c;background:rgba(249,115,22,0.18);border-color:rgba(249,115,22,0.28);
  }
  .client-portal-shell .cp-payv-badge.is-ok{
    color:#4ade80;background:rgba(34,197,94,0.18);border-color:rgba(34,197,94,0.28);
  }
  .client-portal-shell .cp-payv-badge.is-warn{
    color:#fda4af;background:rgba(230,55,86,0.18);border-color:rgba(230,55,86,0.28);
  }
  .client-portal-shell .cp-payv-hero-title{
    margin:0 0 8px;font-size:22px;line-height:1.2;color:#fff;
  }
  .client-portal-shell .cp-payv-hero-sub{
    margin:0;font-size:12px;line-height:1.5;color:rgba(255,255,255,0.62);max-width:none;
  }
  .client-portal-shell .cp-payv-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;max-width:none;width:100%;
    padding-top:2px;
  }
  .client-portal-shell .cp-payv-metrics span{
    font-size:9px;letter-spacing:.08em;color:rgba(255,255,255,0.45);
  }
  .client-portal-shell .cp-payv-metrics strong{
    margin-top:4px;font-size:12px;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .client-portal-shell .cp-payv-metrics strong.is-green{color:#4ade80}
  .client-portal-shell .cp-payv-metrics strong.is-amber{color:#fb923c}

  .client-portal-shell .cp-payv-donut-wrap{
    flex:0 0 auto;gap:8px;align-self:center;
  }
  .client-portal-shell .cp-payv-donut-wrap::before{
    width:110px;height:110px;
    background:radial-gradient(circle,rgba(34,197,94,0.18) 0%, rgba(34,197,94,0.04) 42%, transparent 70%);
  }
  .client-portal-shell .cp-payv-hero .prodops-donut,
  .client-portal-shell .cp-payv-hero .prodops-donut-svg{
    width:96px!important;height:96px!important;
    filter:drop-shadow(0 0 8px rgba(34,197,94,0.22));
  }
  .client-portal-shell .cp-payv-hero .prodops-donut-track{stroke:rgba(255,255,255,0.14)!important}
  .client-portal-shell .cp-payv-hero .prodops-donut-seg{stroke:#22c55e!important}
  .client-portal-shell .cp-payv-hero .prodops-donut-inner{
    width:62px!important;height:62px!important;
    background:linear-gradient(165deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 45%, rgba(15,35,50,0.28) 100%)!important;
    border:1px solid rgba(255,255,255,0.28)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.45),0 8px 20px rgba(0,0,0,0.18)!important;
    backdrop-filter:blur(14px) saturate(160%)!important;
    -webkit-backdrop-filter:blur(14px) saturate(160%)!important;
  }
  .client-portal-shell .cp-payv-hero .prodops-donut-inner strong{
    font-size:16px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,0.2);
  }
  .client-portal-shell .cp-payv-hero .prodops-donut-inner span{
    font-size:7px;margin-top:2px;color:rgba(255,255,255,0.62);
  }
  .client-portal-shell .cp-payv-legend{
    gap:12px;font-size:10px;color:rgba(255,255,255,0.58);
  }

  /* Progress + invoice: white compact */
  .client-portal-shell .cp-payv-progress,
  .client-portal-shell .cp-payv-invoice,
  .client-portal-shell .cp-payv-help{
    border-radius:14px;padding:12px 14px;
    background:#fff!important;
    border:1px solid rgba(15,60,80,0.10)!important;
    box-shadow:0 4px 14px rgba(15,80,100,0.05)!important;
  }
  .client-portal-shell .cp-payv-progress-head{margin-bottom:10px}
  .client-portal-shell .cp-payv-bar{height:8px}
  .client-portal-shell .cp-payv-progress-meta{margin-top:8px;font-size:11px}
  .client-portal-shell .cp-payv-pct-pill{padding:3px 8px;font-size:11px}

  /* Hide redundant triple cards on phone — amounts already in hero */
  .client-portal-shell .cp-payv-cards{display:none}

  .client-portal-shell .cp-payv-invoice{gap:12px}
  .client-portal-shell .cp-payv-invoice-top{gap:10px}
  .client-portal-shell .cp-payv-doc{width:36px;height:36px;border-radius:12px}
  .client-portal-shell .cp-payv-doc svg{width:16px;height:16px}
  .client-portal-shell .cp-payv-invoice-left strong{font-size:13px}
  .client-portal-shell .cp-payv-invoice-hint{font-size:11px}
  .client-portal-shell .cp-payv-invoice-date{font-size:11px;white-space:normal}
  .client-portal-shell .cp-payv-invoice-btn{
    min-height:44px;padding:12px 14px;font-size:12px;border-radius:12px;
  }

  .client-portal-shell .cp-payv-help{flex-direction:column;align-items:stretch;gap:12px}
  .client-portal-shell .cp-payv-help-copy p{font-size:11px}
  .client-portal-shell .cp-payv-help-btn{
    width:100%;min-height:44px;justify-content:center;border-radius:12px;
  }
}

/* ── Fase 4: Client portal Akses Hasil phone ── */
@media(max-width:700px){
  .client-portal-shell .cp-drv-hero.cp-ov-glass-dark,
  .client-portal-shell .cp-drv-hero{
    background:#fff!important;
    border:1px solid rgba(15,60,80,0.10)!important;
    box-shadow:0 4px 14px rgba(15,80,100,0.06)!important;
    border-radius:14px!important;
    padding:14px!important;
    overflow:hidden;
  }
  .client-portal-shell .cp-drv-hero .cp-ov-blob{display:none}
  .client-portal-shell .cp-drv-hero-row{gap:12px;align-items:flex-start}
  .client-portal-shell .cp-drv-lock{
    width:40px;height:40px;border-radius:12px;
    color:#7c3aed;
    background:rgba(124,58,237,0.10);
    border:1px solid rgba(124,58,237,0.20);
    box-shadow:none;
  }
  .client-portal-shell .cp-drv-lock.is-open{
    color:#15803d;
    background:rgba(34,197,94,0.12);
    border-color:rgba(34,197,94,0.22);
  }
  .client-portal-shell .cp-drv-lock svg{width:18px;height:18px}
  .client-portal-shell .cp-drv-badge{
    margin:0 0 4px;padding:4px 8px;font-size:9px;
    color:#6d28d9;background:rgba(124,58,237,0.10);border-color:rgba(124,58,237,0.20);
  }
  .client-portal-shell .cp-drv-badge.is-open{
    color:#15803d;background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.22);
  }
  .client-portal-shell .cp-drv-hero-title{
    margin:0 0 6px;font-size:18px;line-height:1.25;color:#0f2a35;
  }
  .client-portal-shell .cp-drv-hero-sub{
    margin:0;font-size:12px;line-height:1.45;color:rgba(15,60,80,0.55);max-width:none;
  }
  .client-portal-shell .cp-drv-open-btn{
    margin-top:12px;width:100%;min-height:44px;justify-content:center;
    padding:12px 14px;font-size:12px;border-radius:12px;
  }

  .client-portal-shell .cp-drv-reqs,
  .client-portal-shell .cp-drv-help{
    border-radius:14px;padding:12px 14px;
    background:#fff!important;
    border:1px solid rgba(15,60,80,0.10)!important;
    box-shadow:0 4px 14px rgba(15,80,100,0.05)!important;
  }
  .client-portal-shell .cp-drv-reqs-head{margin-bottom:10px;align-items:flex-start}
  .client-portal-shell .cp-drv-reqs-title{font-size:14px}
  .client-portal-shell .cp-drv-count{padding:4px 8px;font-size:10px}
  .client-portal-shell .cp-drv-req-list{gap:8px}
  .client-portal-shell .cp-drv-req{
    grid-template-columns:28px minmax(0,1fr) auto;gap:8px;
    padding:10px;border-radius:12px;
    background:rgba(15,60,80,0.03)!important;
    border:1px solid rgba(15,60,80,0.08)!important;
    box-shadow:none;
  }
  .client-portal-shell .cp-drv-num{width:28px;height:28px;font-size:11px}
  .client-portal-shell .cp-drv-req strong{font-size:12px}
  .client-portal-shell .cp-drv-req-hint{font-size:10px}
  .client-portal-shell .cp-drv-status{padding:4px 8px;font-size:10px}

  .client-portal-shell .cp-drv-help{flex-direction:column;align-items:stretch;gap:12px}
  .client-portal-shell .cp-drv-help-copy p{font-size:11px}
  .client-portal-shell .cp-drv-help-btn{
    width:100%;min-height:44px;justify-content:center;border-radius:12px;
  }
}

/* ── Client portal phone dock only (desktop shell unchanged) ── */
.client-portal-shell .cp-dock{display:none}
.client-portal-shell .cp-lg-home{display:none}
.client-portal-shell .cp-lg-pay{display:none}
.client-portal-shell .cp-lg-drv{display:none}
.client-portal-shell .cp-lg-pagehead{display:none}
.client-portal-shell .cp-logo-box,
.client-portal-shell .cp-greeting{display:none}
.client-portal-shell .cp-header-account{
  display:none;
  width:44px;height:44px;min-width:44px;border-radius:14px;padding:0;border:none;cursor:pointer;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(15,60,80,0.10);
  box-shadow:0 4px 14px rgba(15,80,100,0.08);
}
.client-portal-shell .cp-header-avatar{
  width:32px;height:32px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#0f2332 0%,#1a3a4a 100%);
  color:#fff;font-size:13px;font-weight:800;line-height:1;
}
@media(max-width:700px){
  .client-portal-shell{
    --cp-ink:#102b38;
    --cp-muted:#71858e;
    --cp-navy:#111d26;
    --cp-cyan:#38bdf8;
    --cp-green:#20b65d;
    --cp-orange:#f28a18;
    --cp-purple:#9333ea;
    --cp-purple2:#7c3aed;
    --cp-glass-border:rgba(255,255,255,.72);
    --cp-glass-shadow:0 18px 45px rgba(27,58,72,.13), inset 0 1px 0 rgba(255,255,255,.8);
    background:
      radial-gradient(circle at 14% 6%,rgba(147,51,234,.06),transparent 34%),
      radial-gradient(circle at 86% 10%,rgba(56,189,248,.10),transparent 32%),
      radial-gradient(circle at 78% 78%,rgba(40,185,216,.05),transparent 38%),
      radial-gradient(circle at 18% 88%,rgba(15,80,100,.03),transparent 36%),
      linear-gradient(145deg,#f3f5f7,#f7f8fa 48%,#eef3f6);
  }
  .client-portal-shell .cp-ov-tabs{display:none!important}
  .client-portal-shell .cp-desk-home{display:none!important}
  .client-portal-shell .cp-desk-pay{display:none!important}
  .client-portal-shell .cp-desk-drv{display:none!important}
  .client-portal-shell .cp-lg-home{display:block}
  .client-portal-shell .cp-lg-pay{display:block}
  .client-portal-shell .cp-lg-drv{display:block}
  .client-portal-shell .cp-lg-pagehead{display:block;padding:2px 2px 10px}
  .client-portal-shell .cp-header-desktop-copy{display:none!important}

  /* Liquid glass home — tighter type scale */
  .client-portal-shell .cp-lg-title{padding:2px 2px 10px;text-align:left}
  .client-portal-shell .cp-lg-title h1{
    font-size:28px;line-height:1.12;letter-spacing:-1.1px;margin:0;font-weight:500;color:var(--cp-ink);
  }
  .client-portal-shell .cp-lg-title h1 strong{font-weight:800}
  .client-portal-shell .cp-lg-title p{
    font-size:12px;color:var(--cp-muted);margin:6px 0 0;line-height:1.45;max-width:28em;
  }
  .client-portal-shell .cp-lg-chips{
    display:flex;gap:6px;overflow-x:auto;padding:0 0 2px;margin:0 0 12px;scrollbar-width:none;
  }
  .client-portal-shell .cp-lg-chips::-webkit-scrollbar{display:none}
  .client-portal-shell .cp-lg-chip{
    white-space:nowrap;border:1px solid rgba(255,255,255,.55);border-radius:99px;padding:8px 14px;
    background:rgba(255,255,255,.42);color:#7f9097;font-size:10px;font-weight:800;font-family:inherit;
    box-shadow:0 7px 20px rgba(30,60,75,.06),inset 0 1px 0 #fff8;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;
  }
  .client-portal-shell .cp-lg-chip.is-active{
    background:rgba(8,16,22,.84);border-color:rgba(255,255,255,.18);color:#fff;
    box-shadow:0 10px 24px rgba(8,16,22,.18),inset 0 1px 0 #fff2;
  }
  .client-portal-shell .cp-lg-project{
    background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(255,255,255,.44));
    border-radius:24px;padding:16px;border:1px solid var(--cp-glass-border);
    box-shadow:var(--cp-glass-shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    text-align:left;
  }
  .client-portal-shell .cp-lg-project-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .client-portal-shell .cp-lg-badge{
    display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:6px 10px;font-size:10px;font-weight:800;
  }
  .client-portal-shell .cp-lg-badge.is-green{background:#e9f8ed;color:#14994a}
  .client-portal-shell .cp-lg-badge.is-cyan{background:#eaf9fd;color:#159bb9}
  .client-portal-shell .cp-lg-project-date{font-size:9px;color:#a1adb2;padding-top:6px;flex:0 0 auto}
  .client-portal-shell .cp-lg-project h2{
    font-size:20px;letter-spacing:-.6px;margin:12px 0 4px;color:var(--cp-ink);font-weight:800;text-align:left;
  }
  .client-portal-shell .cp-lg-project-desc{
    font-size:11px;color:var(--cp-muted);margin:0;line-height:1.45;text-align:left;
  }
  .client-portal-shell .cp-lg-progress-info{display:flex;justify-content:space-between;align-items:flex-end;margin-top:14px;gap:10px}
  .client-portal-shell .cp-lg-progress-info small{font-size:10px;color:var(--cp-muted);line-height:1.3}
  .client-portal-shell .cp-lg-progress-info b{font-size:22px;letter-spacing:-.8px;color:var(--cp-ink);line-height:1}
  .client-portal-shell .cp-lg-bar{height:6px;background:#edf0f1;border-radius:99px;overflow:hidden;margin-top:8px}
  .client-portal-shell .cp-lg-bar i{display:block;height:100%;background:var(--cp-green);border-radius:inherit}
  .client-portal-shell .cp-lg-project-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px}
  .client-portal-shell .cp-lg-project-bottom small{font-size:9px;color:#9aa8ad}
  .client-portal-shell .cp-lg-details{
    border:0;background:var(--cp-navy);color:#fff;border-radius:12px;padding:9px 12px;
    font-size:10px;font-weight:800;cursor:pointer;flex:0 0 auto;
    box-shadow:0 9px 20px rgba(10,27,37,.14),inset 0 1px 0 rgba(255,255,255,.12);
  }
  .client-portal-shell .cp-lg-section{
    display:flex;justify-content:space-between;align-items:flex-start;margin:18px 2px 10px;gap:10px;
    text-align:left;width:100%;box-sizing:border-box;
  }
  .client-portal-shell .cp-lg-section > div{flex:1;min-width:0;text-align:left}
  .client-portal-shell .cp-lg-section h3{
    font-size:14px;margin:0;letter-spacing:-.3px;font-weight:800;color:var(--cp-ink);text-align:left;
  }
  .client-portal-shell .cp-lg-quick-head small{
    display:block;font-size:9px;color:#92a1a8;margin-top:3px;line-height:1.35;text-align:left;
  }
  .client-portal-shell .cp-lg-section-link{
    border:0;background:transparent;font-size:10px;color:#8a9aa1;font-weight:700;cursor:pointer;padding:0;flex:0 0 auto;
    margin-left:auto;align-self:flex-start;
  }
  .client-portal-shell .cp-lg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  /* Quick Access — colorful tiles; foot row keeps text + arrow apart */
  .client-portal-shell .cp-lg-svc-grid{
    gap:12px;
    padding:0;
    margin:0;
    border-radius:0;
    background:transparent;
  }
  .client-portal-shell .cp-lg-svc{
    position:relative;border:0;margin:0;padding:14px;
    min-height:158px;height:100%;box-sizing:border-box;
    display:flex;flex-direction:column;align-items:stretch;
    cursor:pointer;font:inherit;text-align:left;color:#fff;
    overflow:hidden;isolation:isolate;border-radius:24px;
    border:1px solid rgba(255,255,255,.48);
    box-shadow:0 18px 38px rgba(24,55,70,.15),inset 0 1px 0 rgba(255,255,255,.58);
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    transition:transform .22s ease,box-shadow .22s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .client-portal-shell .cp-lg-svc:after{
    content:"";position:absolute;z-index:0;pointer-events:none;width:170px;height:110px;
    right:-40px;top:32px;border-radius:58% 42% 58% 42%;transform:rotate(24deg);
    background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.035));
    border:1px solid rgba(255,255,255,.10);
  }
  .client-portal-shell .cp-lg-svc:before{
    content:"";position:absolute;z-index:0;pointer-events:none;width:120px;height:120px;
    right:-54px;bottom:-60px;border-radius:50%;background:rgba(255,255,255,.13);filter:blur(3px);
  }
  .client-portal-shell .cp-lg-svc-violet{background:linear-gradient(145deg,rgba(179,129,214,.91),rgba(124,76,177,.89))}
  .client-portal-shell .cp-lg-svc-blue{background:linear-gradient(145deg,rgba(108,194,231,.91),rgba(52,119,192,.89))}
  .client-portal-shell .cp-lg-svc-teal{background:linear-gradient(145deg,rgba(93,202,144,.91),rgba(24,143,103,.89))}
  .client-portal-shell .cp-lg-svc-warm{background:linear-gradient(145deg,rgba(255,179,83,.91),rgba(231,101,26,.89))}
  .client-portal-shell .cp-lg-svc:active{transform:translateY(1px) scale(.985)}
  .client-portal-shell .cp-lg-svc-icon{
    width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;
    border-radius:14px;margin:0;position:relative;z-index:1;
    color:#17313d;background:rgba(255,255,255,.67);
    border:1px solid rgba(255,255,255,.82);
    box-shadow:0 9px 22px rgba(23,51,66,.15),inset 0 1px 0 #fff;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
  .client-portal-shell .cp-lg-svc-icon svg{width:17px;height:17px;display:block}
  .client-portal-shell .cp-lg-svc-foot{
    position:relative;z-index:1;margin-top:auto;width:100%;
    display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  }
  .client-portal-shell .cp-lg-svc-copy{
    flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;
  }
  .client-portal-shell .cp-lg-svc-copy > strong{
    display:block;margin:0;font-size:15px;font-weight:800;letter-spacing:-.35px;line-height:1.2;
    color:#fff;text-align:left;text-shadow:0 1px 2px rgba(0,0,0,.08);
  }
  .client-portal-shell .cp-lg-svc-copy > small{
    display:block;margin:5px 0 0;font-size:10px;line-height:1.3;color:rgba(255,255,255,.94);
    text-align:left;max-width:100%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .client-portal-shell .cp-lg-svc-status{
    display:inline-flex;align-items:center;margin-top:7px;max-width:100%;
    padding:5px 8px;border-radius:10px;box-sizing:border-box;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
    font-size:9px;font-weight:800;line-height:1.2;color:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .client-portal-shell .cp-lg-svc-progress{
    display:block;width:100%;margin-top:9px;height:5px;border-radius:99px;
    background:rgba(255,255,255,.22);overflow:hidden;
  }
  .client-portal-shell .cp-lg-svc-progress i{
    display:block;height:100%;border-radius:inherit;background:rgba(255,255,255,.86);
  }
  .client-portal-shell .cp-lg-svc-arrow{
    position:static;flex:0 0 auto;align-self:flex-end;
    width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
    font-size:15px;line-height:1;color:#fff;
    background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.48);
    box-shadow:0 7px 17px rgba(17,43,56,.12),inset 0 1px 0 rgba(255,255,255,.35);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  .client-portal-shell .cp-lg-svc-link,
  .client-portal-shell .cp-lg-svc-body{display:none}
  .client-portal-shell .cp-lg-activity,
  .client-portal-shell .cp-lg-metric,
  .client-portal-shell .cp-lg-whitecard{
    background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.40));
    border:1px solid var(--cp-glass-border);border-radius:22px;padding:14px;
    box-shadow:var(--cp-glass-shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  }
  .client-portal-shell .cp-lg-feed{display:flex;gap:10px;align-items:flex-start}
  .client-portal-shell .cp-lg-feed-ico{
    width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:900;flex:0 0 auto;font-size:11px;
  }
  .client-portal-shell .cp-lg-feed-ico.is-green{background:#edf9f0;color:var(--cp-green)}
  .client-portal-shell .cp-lg-feed-ico.is-orange{background:#fff5e8;color:var(--cp-orange)}
  .client-portal-shell .cp-lg-feed-ico.is-cyan{background:#eaf9fd;color:#159bb9}
  .client-portal-shell .cp-lg-feed-body{flex:1;min-width:0;text-align:left}
  .client-portal-shell .cp-lg-feed-body b{display:block;font-size:12px;color:var(--cp-ink);line-height:1.25}
  .client-portal-shell .cp-lg-feed-body p{font-size:10px;color:var(--cp-muted);line-height:1.4;margin:3px 0 0}
  .client-portal-shell .cp-lg-time{font-size:9px;color:#a5b0b5;flex:0 0 auto;padding-top:2px}
  .client-portal-shell .cp-lg-sep{height:1px;background:#edf0f1;margin:12px 0}
  .client-portal-shell .cp-lg-metric-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .client-portal-shell .cp-lg-metric-row b{font-size:13px;color:var(--cp-ink)}
  .client-portal-shell .cp-lg-metric-row span{font-size:10px;color:var(--cp-green);font-weight:800}
  .client-portal-shell .cp-lg-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .client-portal-shell .cp-lg-metricbox{
    background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.55);border-radius:14px;padding:12px;
    box-shadow:inset 0 1px 0 #fff8;text-align:left;
  }
  .client-portal-shell .cp-lg-metricbox small{display:block;color:#91a0a6;font-size:9px}
  .client-portal-shell .cp-lg-metricbox b{display:block;font-size:14px;margin-top:4px;color:var(--cp-ink)}
  .client-portal-shell .cp-lg-metricbox b.is-green,
  .client-portal-shell .is-green{color:var(--cp-green)!important}
  .client-portal-shell .cp-lg-row{
    display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;padding:10px 0;color:#718790;
  }
  .client-portal-shell .cp-lg-row b{color:var(--cp-ink);font-weight:750;text-align:right}
  .client-portal-shell .cp-lg-row + .cp-lg-row{border-top:1px solid #edf0f1}
  .client-portal-shell .cp-lg-footer{
    text-align:center;color:#9baab0;font-size:9px;letter-spacing:1px;font-weight:700;margin:20px 0 8px;
  }
  .client-portal-shell .cp-lg-backtitle{
    font-size:26px;font-weight:800;letter-spacing:-1.1px;margin:0 0 4px;color:var(--cp-ink);line-height:1.1;text-align:left;
  }
  .client-portal-shell .cp-lg-sub{font-size:12px;color:var(--cp-muted);margin:0;line-height:1.4;text-align:left}

  /* Payment — mock liquid glass layout (phone) */
  .client-portal-shell .cp-lg-pay-hero{
    background:linear-gradient(145deg,rgba(32,60,74,.84),rgba(83,104,114,.62));
    border-radius:24px;padding:18px;color:#fff;text-align:left;
    box-shadow:0 18px 38px rgba(23,51,66,.18),inset 0 1px 0 rgba(255,255,255,.24);
    border:1px solid rgba(255,255,255,.28);
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  }
  .client-portal-shell .cp-lg-pay-hero .cp-lg-badge{
    background:rgba(255,255,255,.14);color:#cfe7d8;border:1px solid rgba(255,255,255,.18);
  }
  .client-portal-shell .cp-lg-pay-hero .cp-lg-badge.is-ok{color:#66e08c;background:rgba(255,255,255,.12)}
  .client-portal-shell .cp-lg-pay-hero .cp-lg-badge.is-warn{color:#ffd08a;background:rgba(255,255,255,.12)}
  .client-portal-shell .cp-lg-pay-hero h2{
    font-size:26px;margin:12px 0 4px;letter-spacing:-1px;font-weight:800;line-height:1.1;color:#fff;
  }
  .client-portal-shell .cp-lg-pay-hero p{
    font-size:12px;color:#d2dce0;line-height:1.45;margin:0;max-width:34em;
  }
  .client-portal-shell .cp-lg-pay-amount{
    font-size:22px;font-weight:800;margin-top:16px;letter-spacing:-.6px;line-height:1.15;
  }
  .client-portal-shell .cp-lg-pay-amount small{
    display:inline;font-size:10px;font-weight:600;color:#bac9ce;margin-left:6px;letter-spacing:0;
  }
  .client-portal-shell .cp-lg-pay-bar{
    height:7px;margin-top:10px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;
  }
  .client-portal-shell .cp-lg-pay-bar i{
    display:block;height:100%;border-radius:inherit;background:#38d778;
  }
  .client-portal-shell .cp-lg-pay-card{
    background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(255,255,255,.40));
    border:1px solid var(--cp-glass-border);border-radius:22px;padding:16px;margin-top:12px;
    box-shadow:var(--cp-glass-shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  }
  .client-portal-shell .cp-lg-pay-cta{
    width:100%;border:0;border-radius:14px;background:var(--cp-navy);color:#fff;
    padding:13px 14px;font-size:12px;font-weight:800;margin-top:8px;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
    box-shadow:0 9px 20px rgba(10,27,37,.14),inset 0 1px 0 rgba(255,255,255,.12);
    min-height:44px;box-sizing:border-box;
  }
  .client-portal-shell .cp-lg-pay .cp-payv-help{margin-top:12px}
  /* Results — dark purple liquid glass (no muddy green) */
  .client-portal-shell .cp-lg-drv-hero{
    background:
      radial-gradient(ellipse 80% 70% at 88% 0%,rgba(147,51,234,.35),transparent 55%),
      linear-gradient(145deg,rgba(24,16,40,.92),rgba(48,28,78,.78));
    border-radius:24px;padding:18px;color:#fff;text-align:left;
    box-shadow:0 18px 38px rgba(40,20,70,.22),inset 0 1px 0 rgba(255,255,255,.22);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  }
  .client-portal-shell .cp-lg-drv-hero.is-open{
    background:
      radial-gradient(ellipse 80% 70% at 88% 0%,rgba(192,132,252,.40),transparent 55%),
      linear-gradient(145deg,rgba(36,18,64,.94),rgba(88,42,150,.82));
  }
  .client-portal-shell .cp-lg-drv-hero .cp-lg-badge{
    background:rgba(255,255,255,.14);color:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.18);
  }
  .client-portal-shell .cp-lg-drv-hero .cp-lg-badge.is-ok{
    color:#e9d5ff;background:rgba(192,132,252,.22);border-color:rgba(255,255,255,.22);
  }
  .client-portal-shell .cp-lg-drv-hero h2{
    font-size:26px;margin:12px 0 4px;letter-spacing:-1px;font-weight:800;line-height:1.1;color:#fff;
  }
  .client-portal-shell .cp-lg-drv-hero p{
    font-size:12px;color:rgba(255,255,255,.78);line-height:1.45;margin:0;max-width:34em;
  }
  .client-portal-shell .cp-lg-drv-cta{
    width:100%;border:0;border-radius:14px;margin-top:16px;cursor:pointer;
    padding:13px 14px;font-size:12px;font-weight:800;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
    min-height:44px;box-sizing:border-box;
    background:#fff;color:#2e1065;
    box-shadow:0 9px 20px rgba(20,10,40,.18),inset 0 1px 0 rgba(255,255,255,.55);
  }
  .client-portal-shell .cp-lg-drv-hero:not(.is-open) .cp-lg-drv-cta{
    background:rgba(8,20,27,.86);color:#fff;
    border:1px solid rgba(255,255,255,.18);
  }
  .client-portal-shell .cp-lg-drv-card{
    background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(255,255,255,.40));
    border:1px solid var(--cp-glass-border);border-radius:22px;padding:16px;margin-top:12px;
    box-shadow:var(--cp-glass-shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  }
  .client-portal-shell .cp-lg-drv-card-head{
    display:flex;justify-content:space-between;align-items:center;margin:0 0 6px;gap:10px;
  }
  .client-portal-shell .cp-lg-drv-card-head h3{
    margin:0;font-size:14px;font-weight:800;letter-spacing:-.3px;color:var(--cp-ink);
  }
  .client-portal-shell .cp-lg-drv-card-head span{
    font-size:10px;font-weight:800;color:#8a9aa1;
  }
  .client-portal-shell .cp-lg-check{
    display:flex;align-items:center;gap:10px;padding:12px 0;
  }
  .client-portal-shell .cp-lg-check:not(:last-child){border-bottom:1px solid #edf0f1}
  .client-portal-shell .cp-lg-check i{
    width:31px;height:31px;border-radius:50%;display:grid;place-items:center;
    font-style:normal;font-weight:900;font-size:12px;flex:0 0 auto;
    background:rgba(15,60,80,.06);color:#8a9aa1;
  }
  .client-portal-shell .cp-lg-check.is-done i{
    background:#f3e8ff;color:#7c3aed;
  }
  .client-portal-shell .cp-lg-check span{
    font-size:12px;font-weight:750;flex:1;color:var(--cp-ink);text-align:left;
  }
  .client-portal-shell .cp-lg-check em{
    font-style:normal;font-size:9px;font-weight:850;color:#a1adb2;
  }
  .client-portal-shell .cp-lg-check.is-done em{color:#7c3aed}
  .client-portal-shell .cp-lg-drv .cp-drv-help{margin-top:12px}
  .client-portal-shell .cp-payv-hero{
    background:linear-gradient(145deg,rgba(32,60,74,.82),rgba(83,104,114,.62))!important;
    border-radius:25px!important;
    border:1px solid rgba(255,255,255,.28)!important;
    box-shadow:0 18px 38px rgba(23,51,66,.18),inset 0 1px 0 rgba(255,255,255,.24)!important;
  }
  .client-portal-shell .cp-payv-invoice,
  .client-portal-shell .cp-payv-progress,
  .client-portal-shell .cp-payv-help,
  .client-portal-shell .cp-drv-help{
    background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.38))!important;
    border:1px solid var(--cp-glass-border)!important;
    border-radius:23px!important;
    box-shadow:var(--cp-glass-shadow)!important;
  }
  .client-portal-shell .cp-payv-cards{display:none!important}
}

@keyframes cpIntroOrb{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.025)}}
@keyframes cpIntroGlow{0%,100%{transform:scale(.92);opacity:.65}50%{transform:scale(1.08);opacity:1}}
@keyframes cpIntroBubble{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7px,-10px,0) scale(1.08)}}
@media(max-width:360px){
  .client-portal-shell .cp-lg-title h1{font-size:24px;letter-spacing:-.9px}
  .client-portal-shell .cp-lg-backtitle{font-size:22px}
  .client-portal-shell .cp-lg-svc{min-height:148px;padding:12px;border-radius:22px}
  .client-portal-shell .cp-lg-svc-copy > strong{font-size:14px}
  .client-portal-shell .cp-lg-svc-icon{width:36px;height:36px;border-radius:12px}
  .client-portal-shell .cp-lg-svc-arrow{width:32px;height:32px;font-size:14px}
  .client-portal-shell .cp-lg-svc-status{padding:4px 7px;font-size:8.5px}
}

/* Legacy surfaces for payment / drive subviews */
.client-portal-shell .cp-prodops-summary,
.client-portal-shell .cp-panel,
.client-portal-shell .cp-snapshot,
.client-portal-shell .cp-wait-notice,
.client-portal-shell .cp-note{
  position:relative;overflow:hidden;isolation:isolate;border-radius:22px;
  background: linear-gradient(160deg, #eef3f6 0%, #f5f8fa 45%, #eef2f7 100%);
  border: 1px solid rgba(15,60,80,0.08);
  box-shadow: 0 10px 32px rgba(15,80,100,0.08);
}
.client-portal-shell .cp-hero{
  position:relative;isolation:isolate;border-radius:22px;
  overflow:visible;
  background: linear-gradient(160deg, #eef3f6 0%, #f5f8fa 45%, #eef2f7 100%);
  border: 1px solid rgba(15,60,80,0.08);
  box-shadow: 0 10px 32px rgba(15,80,100,0.08);
  text-align:left;
}
.client-portal-shell .cp-shoot-card.cp-ov-card{
  background:rgba(255,255,255,0.38);
  border:1px solid rgba(255,255,255,0.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.80),0 4px 24px rgba(15,35,50,0.06);
}

.client-portal-shell .cp-panel-copy,
.client-portal-shell .cp-lead,
.client-portal-shell .cp-shoot-meta{
  color:var(--ops-muted);
}
.client-portal-shell .client-metric-value,
.client-portal-shell .cp-shoot-date{
  color:var(--ops-ink);
}
.client-portal-shell .client-metric-label,
.client-portal-shell .cp-snapshot-lbl{
  color:var(--ops-faint);
}
.client-portal-shell .cp-kicker{
  background:rgba(40,185,216,0.12);border-color:rgba(40,185,216,0.28);color:var(--ops-cyan);
}
.client-portal-shell .cp-note{
  margin-top:0;padding:14px 16px;border-radius:16px;
  background: rgba(255,255,255,0.38);
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.client-portal-shell .cp-shoot-card{padding:18px 20px}
.client-portal-shell .cp-shoot-countdown{
  border-radius:12px;
  background:rgba(40,185,216,0.12);border-color:rgba(40,185,216,0.28);color:var(--ops-cyan);
}
.client-portal-shell .cp-shoot-countdown.is-tone-live{
  background:rgba(22,163,74,0.14);border-color:rgba(22,163,74,0.28);color:#16a34a;
}
.client-portal-shell .cp-shoot-countdown.is-tone-done{
  background:rgba(22,163,74,0.14);border-color:rgba(22,163,74,0.28);color:#16a34a;
}
.client-portal-shell .cp-snapshot-row{gap:14px}
.client-portal-shell .cp-snapshot{
  padding:18px 20px;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:6px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.client-portal-shell .cp-snapshot:hover{
  border-color:rgba(40,185,216,0.28);
  box-shadow: 0 12px 36px rgba(15,80,100,0.10);
  transform:translateY(-1px);
}
.client-portal-shell .cp-snapshot strong{color:var(--ops-ink)}
.client-portal-shell .cp-snapshot-cta{color:var(--ops-cyan);font-weight:700}
.client-portal-shell .cp-quick-links{gap:8px}
.client-portal-shell .cp-quick-link{
  border-radius:999px;padding:8px 14px;font-size:11px;font-weight:700;
  color:rgba(15,60,80,0.55);
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(15,60,80,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.client-portal-shell .cp-quick-link.is-active,
.client-portal-shell .cp-quick-link:hover{
  color:#fff;
  background:linear-gradient(145deg, rgba(15,35,50,0.92) 0%, rgba(15,35,50,0.78) 100%);
  border-color:transparent;
  box-shadow:0 4px 14px rgba(15,35,50,0.18);
}
.client-portal-shell .cp-panel{padding:18px 20px}
.client-portal-shell .cp-panel h4{color:var(--ops-ink)}
.client-portal-shell .cp-hero{padding:22px 22px 18px}
.client-portal-shell .cp-hero h3{color:var(--ops-ink);font-weight:800}
.client-portal-shell .client-metric{
  background:rgba(255,255,255,0.42);
  border:1px solid rgba(255,255,255,0.70);
  border-radius:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.client-portal-shell .cp-mini-bar{
  background:rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 2px rgba(15,60,80,0.06);
}
.client-portal-shell .cp-gate-progress,
.client-portal-shell .cp-gate-row{
  background:rgba(255,255,255,0.38);
  border:1px solid rgba(255,255,255,0.68);
  border-radius:14px;
}
.client-portal-shell .btn-p,
.client-portal-shell .btn-g:not(.is-disabled){
  border-radius:12px;
}
.client-portal-shell .btn-p{
  color:#fff;
  background: linear-gradient(145deg, rgba(15,35,50,0.92) 0%, rgba(15,35,50,0.78) 100%);
  border:1px solid rgba(15,35,50,0.20);
  box-shadow: 0 4px 14px rgba(15,35,50,0.18);
}
.client-portal-shell .btn-g{
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(15,60,80,0.12);
  color:var(--ops-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.client-portal-shell .cp-wait-notice{
  background: linear-gradient(160deg, rgba(245,158,11,0.12) 0%, #f5f8fa 55%, #eef2f7 100%);
  border-color: rgba(245,158,11,0.28);
}
.client-portal-shell .cp-layout-stack > .cp-prodops-summary,
.client-portal-shell .cp-layout-stack > .cp-panel,
.client-portal-shell .cp-layout-stack > .cp-hero,
.client-portal-shell .cp-layout-stack > .cp-shoot-card,
.client-portal-shell .cp-layout-stack > .cp-wait-notice,
.client-portal-shell .cp-snapshot-row .cp-snapshot{
  animation: glassEnter .55s cubic-bezier(.22,1,.36,1) both;
}
.client-portal-shell .cp-layout-stack > .cp-prodops-summary{animation-delay:.04s}
.client-portal-shell .cp-layout-stack > .cp-shoot-card{animation-delay:.10s}
.client-portal-shell .cp-snapshot-row .cp-snapshot:nth-child(1){animation-delay:.16s}
.client-portal-shell .cp-snapshot-row .cp-snapshot:nth-child(2){animation-delay:.22s}
.client-portal-shell .cp-layout-stack > .cp-panel,
.client-portal-shell .cp-layout-stack > .cp-hero{animation-delay:.06s}
@media(prefers-reduced-motion:reduce){
  .client-portal-shell .cp-layout-stack > .cp-prodops-summary,
  .client-portal-shell .cp-layout-stack > .cp-panel,
  .client-portal-shell .cp-layout-stack > .cp-hero,
  .client-portal-shell .cp-layout-stack > .cp-shoot-card,
  .client-portal-shell .cp-layout-stack > .cp-wait-notice,
  .client-portal-shell .cp-snapshot-row .cp-snapshot{animation:none}
}


.cp-hero{padding:22px 22px 20px;border-radius:18px;background:var(--bg3);border:1px solid var(--border);text-align:left}
.cp-hero h3{font-size:24px;font-weight:900;color:var(--ink);letter-spacing:-.03em;margin:0;line-height:1.2;overflow-wrap:anywhere;text-align:left}
.cp-hero .btn-p,
.cp-hero .cp-hero-cta{
  margin-top:14px;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:12px 18px;line-height:1.2;
  box-sizing:border-box;overflow:visible;white-space:nowrap;
}
.cp-hero--welcome .cp-lead{margin-top:8px;max-width:40em}
.cp-onboard{
  display:flex;flex-direction:column;gap:12px;margin-top:12px;min-width:0;
}
@media(min-width:901px){
  .cp-onboard{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
}
.cp-hero-compact{padding:18px 20px}
.cp-hero-compact h3{font-size:20px;margin:0 0 6px}
.cp-status-hero.is-tone-danger{
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.22);
}
.cp-status-hero.is-tone-danger .cp-kicker{
  color:#dc2626;background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.22);
}
.cp-status-hero.is-tone-warn{
  background:rgba(245,158,11,.1);
  border-color:rgba(245,158,11,.24);
}
.cp-status-hero.is-tone-warn .cp-kicker{
  color:#b45309;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.24);
}
.cp-status-hero.is-tone-ready{
  background:rgba(34,197,94,.1);
  border-color:rgba(34,197,94,.24);
}
.cp-status-hero.is-tone-ready .cp-kicker{
  color:#15803d;background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.24);
}
.cp-brand-name{
  margin:0 0 6px;font-size:32px;font-weight:900;color:var(--ink);line-height:1.15;
  letter-spacing:-.03em;text-align:left;
}
.cp-project-type{
  margin:0 0 8px;font-size:13px;font-weight:600;color:var(--muted);line-height:1.4;text-align:left;
}
.cp-layout-stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.cp-layout-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.cp-layout-2.is-equal{grid-template-columns:1fr 1fr;align-items:stretch}
.cp-side-stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.cp-side-stack > .cp-panel{flex:0 0 auto}
.cp-panel{padding:16px 18px;border-radius:16px;background:var(--bg3);border:1px solid var(--border);box-sizing:border-box;min-width:0}
.cp-prodops-summary{
  min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;
  padding:18px 20px;border-radius:16px;
  background:var(--bg3);border:1px solid var(--border);
  display:flex;flex-direction:column;align-items:stretch;text-align:left;
}
.cp-prodops-summary .prodops-summary-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  margin:0 0 16px;min-width:0;
}
.cp-prodops-summary .prodops-summary-title{min-width:0;flex:1 1 auto;text-align:left}
.cp-prodops-summary .prodops-summary-title h3{
  margin:0;padding:0;font-size:28px;font-weight:900;line-height:1.15;text-align:left;
  overflow-wrap:anywhere;word-break:break-word;
}
.cp-prodops-summary .prodops-summary-title p{
  margin:5px 0 0;padding:0;font-size:11px;line-height:1.45;text-align:left;
  color:var(--muted);overflow-wrap:anywhere;
}
.cp-prodops-summary .prodops-badges{flex:0 0 auto;justify-content:flex-end;max-width:100%}
.cp-prodops-body{display:flex;flex-direction:column;gap:16px;min-width:0}
.cp-prodops-overview{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px 20px;
  width:100%;min-width:0;box-sizing:border-box;
  padding:16px 18px;border-radius:14px;background:var(--bg4);border:1px solid var(--border);
}
.cp-prodops-summary .prodops-donut{width:108px;height:108px;margin:0;flex-shrink:0}
.cp-prodops-summary .prodops-donut-inner{width:78px;height:78px}
.cp-prodops-summary .prodops-donut-inner strong{font-size:22px}
.cp-prodops-overview-copy{min-width:0;text-align:left}
.cp-prodops-overview-title{margin:0;font-size:15px;font-weight:800;color:var(--ink);line-height:1.35;text-align:left}
.cp-prodops-overview-meta{margin:6px 0 0;font-size:11px;color:var(--subtle);line-height:1.4;text-align:left}
.cp-prodops-overview-side{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;
  text-align:right;min-width:0;padding-left:8px;
}
.cp-prodops-overview-side-lbl{
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);
}
.cp-prodops-overview-side strong{
  font-size:13px;font-weight:800;color:var(--ink);line-height:1.3;max-width:160px;
}
.cp-prodops-stages{
  min-width:0;padding:10px 14px;border-radius:14px;background:var(--bg4);border:1px solid var(--border);
}
.cp-prodops-stages > .client-metric-label{margin:0 0 6px;text-align:left}
.cp-prodops-bars{min-width:0;gap:0}
.cp-prodops-summary .prodops-bar-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 40px;
  grid-template-areas:"label val" "bar bar";
  gap:2px 8px;min-width:0;
  padding:5px 0;border-bottom:1px solid var(--ops-divider);
}
.cp-prodops-summary .prodops-bar-row:last-child{border-bottom:none;padding-bottom:0}
.cp-prodops-summary .prodops-bar-row:first-child{padding-top:0}
.cp-prodops-summary .prodops-bar-label{
  grid-area:label;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.25;text-align:left;
}
.cp-prodops-summary .prodops-bar{grid-area:bar;min-width:0;height:6px}
.cp-prodops-summary .prodops-bar-val{grid-area:val;font-size:11px;line-height:1.25;align-self:center}
.cp-prodops-summary .cp-note{
  margin-top:14px;padding:12px 14px;border-radius:12px;border-top:none;
  border:1px solid var(--ops-divider);background:var(--ops-surface-soft);text-align:left;
}
.cp-prodops-summary .cp-note .client-metric-label,
.cp-prodops-summary .cp-note p{display:block;width:100%;text-align:left;margin:0}
.cp-prodops-summary .cp-note .client-metric-label{margin-bottom:6px}
.cp-prodops-summary .cp-note p{margin:0}
.cp-panel h4{font-size:13px;font-weight:800;color:var(--ink);margin:0 0 12px}
.cp-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cp-panel-head h4{margin:0}
.cp-panel-tag{flex-shrink:0;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:800;color:var(--purple2);background:rgba(147,51,234,.1);border:1px solid rgba(147,51,234,.18)}
.cp-panel-copy{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 12px}
.cp-kicker{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#159bb9;background:rgba(40,185,216,.1);border:1px solid rgba(40,185,216,.22);margin:0 0 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-lead{font-size:12px;color:var(--muted);line-height:1.55;margin:6px 0 0;text-align:left}
.cp-wait-notice{
  display:flex;flex-direction:column;align-items:stretch;gap:14px;
  padding:18px 20px;border-radius:16px;text-align:left;
  background:linear-gradient(160deg,rgba(245,158,11,.1) 0%,var(--bg3) 55%);
  border:1px solid rgba(245,158,11,.26);
  box-sizing:border-box;min-width:0;
}
.cp-wait-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.cp-wait-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;font-size:9px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#b45309;
  background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.28);
}
.cp-wait-pill:before{content:"";width:7px;height:7px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.22)}
.cp-wait-eta{
  display:inline-flex;align-items:center;
  padding:5px 10px;border-radius:999px;
  font-size:11px;font-weight:700;color:var(--muted);
  background:var(--bg4);border:1px solid var(--border);
}
.cp-wait-copy{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:58ch}
.cp-wait-title{margin:0;font-size:20px;font-weight:900;letter-spacing:-.03em;color:var(--ink);line-height:1.25;text-align:left}
.cp-wait-lead{margin:0;font-size:13px;line-height:1.55;color:var(--muted);text-align:left}
.cp-wait-lead strong{color:var(--ink);font-weight:800}
.cp-wait-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  width:100%;
}
.cp-wait-step{
  display:flex;align-items:flex-start;gap:10px;min-width:0;
  padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--bg3);
  text-align:left;
}
.cp-wait-step > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.cp-wait-step strong{font-size:12px;font-weight:800;color:var(--ink);line-height:1.3}
.cp-wait-step em{font-style:normal;font-size:11px;color:var(--muted);line-height:1.4}
.cp-wait-step-dot{
  flex:0 0 auto;width:10px;height:10px;margin-top:4px;border-radius:50%;
  background:var(--dim);opacity:.55;
}
.cp-wait-step.is-done{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.08)}
.cp-wait-step.is-done .cp-wait-step-dot{background:#22c55e;opacity:1;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.cp-wait-step.is-now{border-color:rgba(245,158,11,.36);background:rgba(245,158,11,.1)}
.cp-wait-step.is-now .cp-wait-step-dot{background:#f59e0b;opacity:1;box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.cp-wait-actions{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  margin:0;padding-top:2px;
}
.cp-wait-wa{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-height:40px;padding:10px 16px;border-radius:999px;
  background:#111;color:#fff;font-size:12px;font-weight:800;text-decoration:none;
  border:none;cursor:pointer;transition:opacity .15s,background .15s;white-space:nowrap;
}
.cp-wait-wa:hover{opacity:.9;background:#000}
.cp-wait-hint{
  margin:0;max-width:none;
  font-size:11px;line-height:1.45;color:var(--subtle);text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cp-next{font-size:12px;color:var(--ink);line-height:1.55;margin:12px 0 0;padding:10px 12px;border-radius:12px;background:rgba(147,51,234,.08);border:1px solid rgba(147,51,234,.16)}
.cp-steps{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.cp-step{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:14px;border:1px solid var(--border);background:var(--bg4);font-size:12px;color:var(--muted);line-height:1.45;text-align:left}
.cp-step.is-now{color:var(--ink);border-color:rgba(40,185,216,.32);background:rgba(40,185,216,.08)}
.cp-step-num{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;color:#159bb9;background:rgba(40,185,216,.12)}
.cp-panel h4{margin:0 0 10px;font-size:14px;font-weight:800;color:var(--ink);text-align:left}
.cp-prep-list{display:flex;flex-wrap:wrap;gap:8px}
.cp-chip{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg4);font-size:11px;font-weight:700;color:var(--muted)}
.cp-project-head{display:block}
.cp-project-head-main{min-width:0}
.cp-id-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cp-id-row h3{margin:0}
.cp-id-row .cp-lead{margin:0}
.cp-copy-btn{flex-shrink:0;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg4);color:var(--muted);font-size:10px;font-weight:800;cursor:pointer}
.cp-copy-btn:hover{color:var(--ink);border-color:rgba(147,51,234,.35)}
.cp-note{
  margin-top:14px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--ops-divider);background:var(--ops-surface-soft);text-align:left;
}
.cp-note .client-metric-label{display:block;margin:0 0 6px;text-align:left}
.cp-note p{font-size:12px;color:var(--ink);line-height:1.6;margin:0;text-align:left}
.cp-shoot-card{
  padding:16px 18px;border-radius:16px;text-align:left;
  border:1px solid var(--ops-divider);background:var(--ops-surface-soft);
}
.cp-shoot-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.cp-shoot-head .client-metric-label{margin:0}
.cp-shoot-countdown{
  flex-shrink:0;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:800;
  border:1px solid rgba(147,51,234,.28);background:rgba(147,51,234,.12);color:var(--purple2);
}
.cp-shoot-countdown.is-tone-live{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.14);color:var(--badge-warn)}
.cp-shoot-countdown.is-tone-done{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.14);color:var(--badge-ok)}
.cp-shoot-countdown.is-tone-released{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.12);color:#fca5a5}
.cp-shoot-card.is-released .cp-shoot-date{text-decoration:line-through;color:var(--muted)}
.cp-shoot-date{display:block;font-size:14px;font-weight:800;color:var(--ink);line-height:1.5}
.cp-shoot-meta{margin:6px 0 0;font-size:11px;color:var(--muted);line-height:1.6}
.cp-invoice-no{font-size:11px;color:var(--subtle);margin:0 0 10px}
.cp-mini-chart{margin:0 0 12px}
.cp-mini-chart-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px;
  font-size:11px;font-weight:700;color:var(--muted);
}
.cp-mini-chart-head strong{font-size:12px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.cp-mini-bar{
  height:10px;border-radius:999px;background:var(--ops-bar-track);overflow:hidden;
}
.cp-mini-bar span{
  display:block;height:100%;border-radius:999px;min-width:0;transition:width .35s ease;
}
.cp-mini-bar span.is-pay{background:linear-gradient(90deg,#6366f1,var(--purple2))}
.cp-mini-bar span.is-drive{background:linear-gradient(90deg,#f59e0b,#fb923c)}
.cp-mini-bar span.is-ready{background:linear-gradient(90deg,#16a34a,#4ade80)}
.cp-mini-bar span.is-warn{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.cp-mini-bar span.is-danger{background:linear-gradient(90deg,#ef4444,#f87171)}
.cp-mini-chart-meta{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;
  font-size:10px;color:var(--subtle);line-height:1.35;
}
.cp-gate{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 12px}
.cp-gate-progress{
  padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--bg4);
}
.cp-gate-progress.is-tone-danger{
  background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.18);
}
.cp-gate-progress.is-tone-warn{
  background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.2);
}
.cp-gate-progress.is-tone-ready{
  background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.2);
}
.cp-gate-progress-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;
}
.cp-gate-progress-title{display:flex;align-items:center;gap:8px;min-width:0}
.cp-gate-progress-title strong{
  font-size:12px;font-weight:800;color:var(--ink);line-height:1.3;
}
.cp-gate-progress-badge{
  flex-shrink:0;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--subtle);padding:3px 7px;border-radius:999px;border:1px solid var(--border);background:var(--bg3);
}
.cp-gate-progress.is-tone-danger .cp-gate-progress-badge{color:#dc2626;border-color:rgba(239,68,68,.22);background:rgba(239,68,68,.1)}
.cp-gate-progress.is-tone-warn .cp-gate-progress-badge{color:#b45309;border-color:rgba(245,158,11,.24);background:rgba(245,158,11,.12)}
.cp-gate-progress.is-tone-ready .cp-gate-progress-badge{color:#15803d;border-color:rgba(34,197,94,.24);background:rgba(34,197,94,.12)}
.cp-gate-progress-head em{
  font-style:normal;font-size:12px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;
}
.cp-gate-row{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg4);font-size:12px;font-weight:700;color:var(--muted)}
.cp-gate-row span{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--subtle);min-width:52px}
.cp-gate-row.is-ready{color:var(--ink);border-color:rgba(21,128,61,.22);background:rgba(34,197,94,.08)}
.cp-gate-row.is-ready span{color:#4ade80}
.cp-timeline-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cp-timeline-head span{font-size:10px;color:var(--subtle)}
.cp-quick-links{display:flex;flex-wrap:wrap;gap:8px}
.cp-quick-link{
  appearance:none;border:1px solid var(--border);background:var(--bg3);color:var(--muted);
  border-radius:999px;padding:7px 12px;font-size:11px;font-weight:800;cursor:pointer;
}
.cp-quick-link.is-active{
  color:var(--purple2);border-color:rgba(147,51,234,.28);background:rgba(147,51,234,.1);
}
.cp-snapshot-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cp-snapshot{
  appearance:none;text-align:left;cursor:pointer;
  padding:14px 16px;border-radius:16px;border:1px solid var(--border);background:var(--bg3);
  display:flex;flex-direction:column;gap:4px;min-width:0;
}
.cp-snapshot:hover{border-color:rgba(147,51,234,.28)}
.cp-snapshot-lbl{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
.cp-snapshot strong{font-size:16px;font-weight:900;color:var(--ink);line-height:1.25}
.cp-snapshot-cta{font-size:11px;font-weight:700;color:var(--purple2);margin-top:4px}
.cp-pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.cp-pay-grid .client-metric{padding:12px}
.btn-g.is-disabled{opacity:.55;cursor:default;width:100%;justify-content:center;text-align:center}
.btn-invoice{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:100%;min-height:42px;padding:10px 16px;border-radius:12px;
  font-size:12px;font-weight:800;color:#fff;text-decoration:none;
  border:none;cursor:pointer;
  background:#111;
  transition:opacity .2s,transform .15s;
}
.btn-invoice:hover{opacity:.88;transform:translateY(-1px);color:#fff}
.client-metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.cp-metric-inline{margin-top:14px}
.client-metric{padding:12px 14px;border-radius:14px;background:var(--bg4);border:1px solid var(--border);min-height:68px;display:flex;flex-direction:column;justify-content:center}
.cp-hero .client-metric{background:var(--bg);border-color:var(--border)}
.client-metric-label{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-bottom:5px}
.client-metric-value{font-size:13px;font-weight:900;color:var(--ink);line-height:1.3;word-break:break-word}
.client-link-row{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.client-link-row .btn-g{width:100%;justify-content:center}
.production-progress-card{padding:16px;border-radius:16px;background:var(--bg4);border:1px solid var(--ops-divider-strong);margin-bottom:16px}
.production-progress-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.production-progress-top strong{font-size:13px;font-weight:800;color:var(--ink)}
.production-percent{font-size:20px;font-weight:900;color:var(--purple2)}
.production-bar{height:8px;border-radius:999px;background:var(--ops-bar-track-alt);overflow:hidden}
.production-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--purple),var(--purple2))}
.cp-ops-report{margin:0 0 16px;padding:20px;border-radius:18px;background:var(--bg4);border:1px solid var(--ops-divider-strong)}
.cp-ops-summary{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--ops-divider)}
.cp-ops-summary.is-compact{grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center}
.cp-ops-summary.is-compact .cp-ops-donut{
  width:96px;height:96px;
}
.cp-ops-summary.is-compact .cp-ops-donut-inner{
  width:68px;height:68px;padding:6px;
}
.cp-ops-summary.is-compact .cp-ops-donut-inner strong{font-size:18px}
.cp-ops-summary.is-compact .cp-ops-donut-inner span{font-size:8px;margin-top:3px}
.cp-ops-summary-copy{display:flex;flex-direction:column;justify-content:center;min-height:96px}
.cp-ops-summary-copy p{font-size:13px;font-weight:700;color:var(--ink);margin:0;line-height:1.4}
.cp-ops-meta{font-size:11px;color:var(--subtle);margin:6px 0 0;line-height:1.35}
.cp-prodops-bars{gap:8px}
.cp-prodops-bar-row{
  grid-template-columns:minmax(88px,120px) minmax(0,1fr) 36px;gap:8px;
}
.cp-prodops-bar-row .prodops-bar-label{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-prodops-bar-row .prodops-bar{height:8px}
.cp-prodops-bar-row .prodops-bar-val{font-size:11px}
.cp-ops-donut{
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;margin:0;
  background:conic-gradient(var(--purple2) var(--cp-ops-percent,0%), rgba(148,163,184,.22) 0);
}
.cp-ops-donut-inner{
  width:68px;height:68px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px;
}
.cp-ops-donut-inner strong{font-size:18px;font-weight:900;color:var(--ink);line-height:1}
.cp-ops-donut-inner span{font-size:8px;color:var(--subtle);margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
.cp-ops-summary-copy h4{font-size:14px;font-weight:800;color:var(--ink);margin:0 0 4px}
.cp-ops-list{display:grid;gap:0}
.cp-ops-row{
  display:grid;grid-template-columns:minmax(108px,150px) minmax(0,1fr) 40px;
  gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--ops-divider);
}
.cp-ops-row:last-child{border-bottom:none;padding-bottom:0}
.cp-ops-row:first-child{padding-top:0}
.cp-ops-meta-col{min-width:0}
.cp-ops-label{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.cp-ops-status{font-size:10px;font-weight:700;letter-spacing:.01em;margin-top:2px;line-height:1.3}
.cp-ops-status.is-done{color:#4ade80}
.cp-ops-status.is-progress{color:#60a5fa}
.cp-ops-status.is-review{color:#c084fc}
.cp-ops-status.is-pending{color:var(--subtle)}
.cp-ops-bar{height:7px;border-radius:999px;background:var(--ops-bar-track);overflow:hidden}
.cp-ops-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--purple),var(--purple2))}
.cp-ops-val{font-size:11px;font-weight:800;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:980px){
  .cp-layout-2{grid-template-columns:1fr}
  .cp-side-stack{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:auto}
  .cp-side-stack > .cp-panel{flex:none}
}
@media(max-width:700px){
  .cp-ops-summary{grid-template-columns:1fr;gap:10px}
  .cp-ops-donut,.cp-ops-summary.is-compact .cp-ops-donut{margin:0 auto}
  .cp-prodops-summary .prodops-summary-top{flex-direction:column;align-items:flex-start}
  .cp-prodops-summary .prodops-badges{justify-content:flex-start}
  .cp-prodops-overview{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  .cp-prodops-overview-copy,.cp-prodops-overview-title,.cp-prodops-overview-meta{text-align:center}
  .cp-prodops-overview-side{align-items:center;text-align:center;padding-left:0}
  .cp-side-stack{grid-template-columns:1fr}
  .cp-wait-steps{grid-template-columns:1fr}
}
.production-admin-preview{padding:14px;border-radius:14px;background:var(--bg4);border:1px solid var(--ops-divider-strong);margin-bottom:14px}
.production-admin-form{display:grid;gap:12px}
.production-admin-form .fg{margin:0}
.production-admin-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.production-admin-hint{font-size:10px;color:var(--subtle);line-height:1.5}
.client-timeline{display:grid;gap:0}
.cp-panel .client-timeline{border:none;padding:0;margin:0}
.client-timeline-item{display:grid;grid-template-columns:18px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--ops-divider)}
.client-timeline-item:last-child{border-bottom:none}
.client-timeline-dot{width:10px;height:10px;border-radius:50%;background:var(--purple2);margin-top:4px;box-shadow:0 0 12px rgba(192,132,252,.45)}
.client-timeline-title{font-size:12px;font-weight:800;color:var(--ink);margin-bottom:4px}
.client-timeline-desc{font-size:11px;color:var(--muted);line-height:1.55}
.client-timeline-time{font-size:10px;color:var(--subtle);margin-top:4px}
@media(max-width:700px){
  .ops-access-options{grid-template-columns:1fr}
  .client-metric-grid,.cp-layout-2,.cp-pay-grid,.cp-snapshot-row{grid-template-columns:1fr}
  .cp-side-stack{gap:10px}
  .cp-id-row{align-items:flex-start}
}

#faq-contact{padding-top:64px;min-height:100vh;background:var(--bg)}
.faq-wrap{flex:1;max-width:1180px;width:100%;margin:0 auto;padding:40px 24px 32px}
.faq-top-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,320px);gap:16px;margin-bottom:16px;align-items:stretch}
.faq-top-left{display:grid;gap:16px}
.faq-intro-card,.faq-stats-card,.faq-sidebar,.faq-section,.faq-wa-card,.faq-feature-bar{padding:24px 26px;border-radius:24px;background:var(--bg3);border:1px solid var(--border)}
.faq-intro-card{padding:28px 30px}
.faq-crumb{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--purple2);background:rgba(147,51,234,.12);border:1px solid rgba(147,51,234,.22);margin-bottom:18px}
.faq-intro-card h1{font-size:clamp(2rem,3.6vw,3.35rem);font-weight:900;line-height:1.02;letter-spacing:-.04em;margin-bottom:14px}
.faq-intro-card h1 .grad{display:block;margin-top:4px}
.faq-intro-card p{font-size:13px;color:var(--muted);line-height:1.75;max-width:560px;margin:0}
.faq-stats-card{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:22px 26px}
.faq-stat{text-align:left}
.faq-stat-val{display:block;font-size:clamp(1.35rem,2vw,1.75rem);font-weight:900;line-height:1;color:var(--purple2);margin-bottom:4px}
.faq-stat-lbl{font-size:11px;color:var(--muted);line-height:1.4}
.faq-sidebar{position:sticky;top:84px;display:flex;flex-direction:column;min-height:100%}
.faq-sidebar-inner{display:flex;flex-direction:column;flex:1;min-height:100%}
.faq-sidebar-label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle);margin-bottom:18px}
.faq-contact-list{display:flex;flex-direction:column;flex:1;gap:0;margin-bottom:0}
.faq-contact-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--hairline)}
.faq-contact-row:last-child{border-bottom:none;padding-bottom:0}
.faq-contact-row:first-child{padding-top:0}
.faq-contact-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex-shrink:0;margin-top:1px}
.faq-contact-icon.wa{background:rgba(34,197,94,.14);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
.faq-contact-icon.mail{background:rgba(147,51,234,.14);color:var(--purple2);border:1px solid rgba(147,51,234,.25)}
.faq-contact-icon.link{background:rgba(56,189,248,.12);color:#7dd3fc;border:1px solid rgba(56,189,248,.25)}
.faq-contact-icon.loc{background:rgba(245,158,11,.14);color:#fbbf24;border:1px solid rgba(245,158,11,.25)}
.faq-contact-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.faq-contact-row strong{display:block;font-size:13px;font-weight:800;color:var(--ink);line-height:1.35;word-break:break-word}
.faq-contact-row span{display:block;font-size:11px;color:var(--muted);line-height:1.5}
.faq-contact-row a{color:inherit;text-decoration:none}
.faq-contact-row a:hover strong{color:var(--purple2)}
.faq-sidebar-actions{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:14px}
.faq-booking-btn{width:100%;justify-content:center;margin-bottom:0}
.faq-portal-link{display:block;width:100%;text-align:center;font-size:12px;font-weight:700;color:var(--muted);background:none;border:none;cursor:pointer;transition:color .2s}
.faq-portal-link:hover{color:var(--ink)}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.faq-grid-full{grid-column:1/-1}
.faq-section{padding:22px 24px 18px}
.faq-section-title-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.faq-accent{width:4px;height:22px;border-radius:999px;flex-shrink:0}
.faq-accent-purple{background:linear-gradient(180deg,#c084fc,#9333ea)}
.faq-accent-cyan{background:linear-gradient(180deg,#7dd3fc,#0891b2)}
.faq-accent-orange{background:linear-gradient(180deg,#fbbf24,#f59e0b)}
.faq-section-title-row h2{flex:1;font-size:15px;font-weight:900;color:var(--ink);margin:0}
.faq-count{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex-shrink:0}
.faq-count-purple{background:rgba(147,51,234,.18);color:var(--purple2);border:1px solid rgba(147,51,234,.28)}
.faq-count-cyan{background:rgba(56,189,248,.12);color:#7dd3fc;border:1px solid rgba(56,189,248,.25)}
.faq-count-orange{background:rgba(245,158,11,.14);color:#fbbf24;border:1px solid rgba(245,158,11,.25)}
.faq-list{display:grid;gap:8px}
.faq-item{border:1px solid var(--border);border-radius:14px;background:var(--hover-fill-soft);overflow:hidden;transition:border-color .2s,box-shadow .2s,background .2s}
.faq-item summary{list-style:none;cursor:pointer;padding:14px 16px;font-size:12px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"⌄";font-size:14px;color:var(--subtle);transition:transform .2s,color .2s}
.faq-item[open]{border-color:rgba(147,51,234,.45);box-shadow:0 0 0 1px rgba(147,51,234,.18);background:rgba(147,51,234,.05)}
.faq-item[open] summary:after{transform:rotate(180deg);color:var(--purple2)}
.faq-answer{padding:0 16px 14px;font-size:12px;color:var(--muted);line-height:1.75}
.faq-wa-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100%;padding:34px 24px;background:var(--faq-wa-surface)}
.faq-wa-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;background:rgba(147,51,234,.2);border:1px solid rgba(147,51,234,.35);box-shadow:0 0 28px rgba(147,51,234,.25)}
.faq-wa-card p{font-size:13px;color:var(--faq-wa-text);line-height:1.7;margin:0 0 18px;max-width:240px}
.faq-wa-link{font-size:13px;font-weight:800;color:var(--purple2);text-decoration:none}
.faq-wa-link:hover{color:var(--ink)}
.faq-feature-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px;padding:22px 28px}
.faq-feature-item{display:flex;gap:14px;align-items:flex-start}
.faq-feature-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.faq-feature-icon.purple{background:rgba(147,51,234,.14);border:1px solid rgba(147,51,234,.22)}
.faq-feature-icon.cyan{background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.2)}
.faq-feature-icon.orange{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.22)}
.faq-feature-item strong{display:block;font-size:13px;font-weight:800;color:var(--ink);margin-bottom:4px}
.faq-feature-item span{display:block;font-size:11px;color:var(--muted);line-height:1.55}
@media(max-width:900px){
  .faq-top-grid{grid-template-columns:1fr}
  .faq-sidebar{position:static;min-height:auto}
  .faq-sidebar-inner{min-height:auto}
  .faq-contact-list{flex:none}
  .faq-sidebar-actions{margin-top:22px;padding-top:0}
  .faq-stats-card{grid-template-columns:repeat(2,1fr)}
  .faq-grid{grid-template-columns:1fr}
  .faq-feature-bar{grid-template-columns:1fr}
}
@keyframes spin{to{transform:rotate(360deg)}}
.spin-anim{animation:spin .7s linear infinite;display:inline-block}
#toast{position:fixed;bottom:24px;right:24px;z-index:9900;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;width:min(340px,calc(100vw - 28px));max-width:340px;box-sizing:border-box;background:var(--toast-bg);border:1px solid var(--border2);color:var(--text);font-size:13px;box-shadow:0 16px 40px rgba(0,0,0,.18);transform:translateY(12px);opacity:0;pointer-events:none;transition:all .3s ease}
#toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
#toast.is-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
#toast.is-error .t-title{color:#991b1b}
#toast.is-error .t-msg{color:#b91c1c}
.t-icon{flex-shrink:0;display:none;line-height:1}
.t-icon:not(:empty){display:inline-flex;align-items:center;justify-content:center}
.t-body{flex:1 1 auto;min-width:0;text-align:left}
.t-title{font-weight:700;margin:0 0 2px;line-height:1.25}
.t-msg{font-size:11px;color:var(--muted);line-height:1.45;margin:0}
.t-close{flex-shrink:0;margin-left:auto;color:var(--subtle);cursor:pointer;transition:color .2s,background .2s;border:none;background:transparent;padding:0;font:inherit;width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.t-close:hover{color:var(--ink);background:rgba(15,60,80,0.06)}
.t-close::before{content:"\00d7";font-size:18px;line-height:1}
#loading{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  background:var(--loading-bg);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
#loading.show{display:flex}
.spinner{
  width:40px;height:40px;
  border:3px solid rgba(232,41,74,.28);
  border-top-color:var(--red);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  .spinner{animation:none;border-top-color:var(--red);opacity:.85}
}

@media(max-width:700px){
  html,body{background:var(--page)!important;min-height:100%;overflow-x:clip;-webkit-text-size-adjust:100%;max-width:100%}
  html:has(#home.active),
  body:has(#home.active){
    overflow-x:clip;
    overscroll-behavior-x:none;
  }
  body:not(.public-site):has(#home.active){
    overflow:hidden;
    height:100dvh;
    max-height:100dvh;
    overscroll-behavior:none;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  body:not(.public-site):has(#home.active)::-webkit-scrollbar{display:none;width:0;height:0}
  body.public-site:has(#home.active){
    overflow-x:clip;
    overflow-y:visible;
    height:auto;
    max-height:none;
    /* Footer owns tab-bar clearance — avoid empty band under copyright */
    padding-bottom:0;
  }
  body.public-site:not(:has(#home.active)):not(:has(#gallery.active)):not(:has(#about.active)){
    padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));
  }
  body.login-mode-signup:has(#ops.active #ops-login-panel.active){
    padding-bottom:0!important;
  }
  body.login-mode-signin:has(#ops.active #ops-login-panel.active){
    padding-bottom:0!important;
  }
  body:not(.public-site):not(:has(#home.active)){padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  button,.nav-btn,.mobile-tab,.sb-item,.option-card{-webkit-tap-highlight-color:transparent}

  .mobile-tabbar{display:grid}

  #lg-nav{height:64px;padding-left:var(--lg-gutter,20px);padding-right:var(--lg-gutter,20px)}
  body.public-site{padding-top:64px}

  .page:not(#home) .hero{min-height:auto;padding:32px 16px 40px}
  .hero h1{font-size:clamp(1.85rem,11vw,2.65rem);line-height:1.05}
  .hero-chip{margin-bottom:18px;transform:none;font-size:9px}
  .hero-sub{font-size:13px;line-height:1.65}
  .hero-btns{align-items:stretch;gap:8px}
  .hero-btns{flex-direction:column;align-items:flex-start}
  .btn-hero{width:auto}
  .hero-slide-meta{max-width:100%;overflow-x:auto;margin-top:4px}
  .hero-progress span{width:28px}
  .hero-progress span.active{width:40px}

  .feat-strip,.results-grid,.svc-grid,.footer-grid{grid-template-columns:1fr}
  .feat-strip{padding:32px 16px}
  .section-wrap{padding:44px 16px}
  .svc-inner{padding:0 16px}
  .cta-wrap{padding:44px 16px}
  .cta-inner{padding:36px 20px;border-radius:22px}
  footer{padding:32px 16px 20px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}
  .app-copyright{font-size:8px;letter-spacing:.06em;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}

  /* Landing v2 mobile: full scroll, sticky bekerja */
  body.public-site #home.active{
    display:block;height:auto;min-height:100dvh;max-height:none;
    overflow:visible;
    padding-top:0;padding-bottom:0;
    background:#f8f8f6;
  }
  body.public-site #home.active .lg-shell{
    overflow:visible;max-width:100%;
  }
  /* Legacy home mobile (non-public lg-landing) */
  body:not(.public-site) #home.active{
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    padding-top:56px;
    padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px));
    height:100dvh;
    height:calc(100dvh - env(safe-area-inset-bottom, 0px));
    min-height:0;
    max-height:100dvh;
    overflow:hidden;
  }
  #home>.home-extra,
  #home>footer,
  #home>.feat-strip{display:none !important}
  body:not(.public-site) #home .hero{
    flex:1 1 0;
    min-height:0 !important;
    max-height:none;
    height:auto !important;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    padding:0 !important;
    gap:0;
    grid-template-columns:unset;
    overflow:hidden;
    background:var(--hero-surface);
  }
  body:not(.public-site) #home .hero-landing-inner{max-width:none;padding:0 4px}
  body:not(.public-site) #home .hero-copy{
    order:1;
    position:relative;
    z-index:2;
    flex:0 0 auto;
    width:100%;
    max-width:none;
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    text-align:center;
    padding:clamp(8px,2vh,16px) 16px clamp(10px,2vh,14px);
    gap:0;
    margin-block:0;
  }
  body:not(.public-site) #home .hero-ring-stage{
    order:2;
    flex:1 1 auto;
    min-height:0;
    margin-top:0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  }
  body:not(.public-site) #home .hero-ring-perspective{height:clamp(170px,28vh,240px)}
  body:not(.public-site) #home .hero-ring-card{
    width:clamp(118px,34vw,148px);
    height:clamp(156px,45vw,196px);
    margin-left:calc(clamp(118px,34vw,148px) / -2);
    margin-top:calc(clamp(156px,45vw,196px) / -2);
    border-radius:16px;
  }
  body:not(.public-site) #home .hero-ring-caption{margin-top:8px;min-height:44px;padding:0 12px}
  body:not(.public-site) #home .hero-ring-caption strong{font-size:13px}
  body:not(.public-site) #home .hero-slide-meta{order:3;margin:6px 0 0;align-self:center}
  body:not(.public-site) #home .hero-chip{
    margin:0 0 10px;
    padding:7px 12px;
    font-size:10px;
    line-height:1.2;
  }
  body:not(.public-site) #home .hero h1{
    margin:0 0 8px;
    font-size:clamp(1.65rem,8.5vw,2.15rem);
    line-height:1.06;
    letter-spacing:-.04em;
  }
  body:not(.public-site) #home .hero-sub{
    margin:0 0 14px;
    font-size:12px;
    line-height:1.62;
    max-width:36em;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  body:not(.public-site) #home .hero-btns{
    margin:0 0 8px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    align-self:stretch;
    gap:8px;
    flex-wrap:wrap;
  }
  body:not(.public-site) #home .btn-hero{
    padding:11px 18px;
    font-size:12px;
    min-height:40px;
    line-height:1;
    width:auto;
    max-width:100%;
  }
  body:not(.public-site) #home .btn-hero-outline{
    padding:10px 16px;font-size:12px;min-height:40px;
  }
  body:not(.public-site) #home .hero-progress{display:flex;align-items:center;gap:6px}
  body:not(.public-site) #home .hero-progress span{width:22px;height:2px;margin:0}
  body:not(.public-site) #home .hero-progress span.active{width:32px}

  #ops,#ops.active{background:var(--bg);margin-top:56px}
  #ops.active{display:flex;flex-direction:column;height:auto;min-height:calc(100dvh - 56px);overflow:visible}
  #ops.ops-shell-open.active{
    flex-direction:row;
    margin-top:0!important;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden;
  }
  #ops:has(#ops-login-panel.active){background:transparent}
  body.login-mode-signin #ops.active:has(#ops-login-panel.active),
  body.login-mode-signup #ops.active:has(#ops-login-panel.active){
    background:var(--login-canvas,#f8f8f6)!important;
    margin-top:0!important;
  }
  body.auth-gated #ops,
  body.auth-gated #ops.active,
  #ops:has(#ops-client-access-panel.active){
    margin-top:0!important;height:100dvh!important;min-height:100dvh!important;background:transparent;
  }
  /* Legacy ops sidebar scroll — only when shell is not open */
  #ops:not(.ops-shell-open) .ops-sidebar{
    width:100%;min-width:0;display:flex;padding:10px 12px;overflow-x:auto;overflow-y:hidden;
    border-right:none;border-bottom:1px solid var(--border);white-space:nowrap;
    cursor:default;box-shadow:none;z-index:auto;transition:none;
    -webkit-overflow-scrolling:touch;scrollbar-width:none
  }
  #ops:not(.ops-shell-open) .ops-sidebar::after{display:none}
  #ops:not(.ops-shell-open) .ops-sidebar > *{opacity:1;pointer-events:auto;transition:none}
  #ops:not(.ops-shell-open) .ops-sidebar .sb-menu-toggle{display:none}
  #ops:not(.ops-shell-open) .ops-sidebar .sb-ver,
  #ops:not(.ops-shell-open) .ops-sidebar .sb-label,
  #ops:not(.ops-shell-open) .ops-sidebar .sb-status span{
    opacity:1;max-width:none;height:auto;overflow:visible;pointer-events:auto;margin:unset;padding:unset
  }
  #ops:not(.ops-shell-open) .ops-sidebar .sb-item{
    justify-content:flex-start;gap:8px;padding:8px 12px;width:auto;margin:0
  }
  #ops:not(.ops-shell-open) .ops-sidebar .sb-status{justify-content:flex-start;padding:0 8px}
  #ops:not(.ops-shell-open) .ops-sidebar::-webkit-scrollbar{display:none}
  #ops:not(.ops-shell-open) .ops-sidebar>div:first-child{display:flex;align-items:center;gap:8px;width:100%}
  #ops:not(.ops-shell-open) .ops-sidebar>div:last-child{display:none}
  #ops:not(.ops-shell-open) .sb-group{display:flex;align-items:center;gap:6px;margin:0;flex:1;min-width:0}
  #ops:not(.ops-shell-open) .sb-group-lbl,
  #ops:not(.ops-shell-open) .sb-status{display:none}
  #ops:not(.ops-shell-open) .sb-item{flex:0 0 auto;margin:0;width:auto;white-space:nowrap;padding:8px 12px;font-size:11px;min-height:40px}
  .ops-main{min-height:calc(100dvh - 56px);overflow:hidden;background:var(--bg)}
  .ops-main>.app-copyright{background:var(--bg5);padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  #ops.ops-shell-open .ops-main{
    background:transparent!important;
    flex:1 1 auto;
    min-height:0!important;
    height:100%!important;
    width:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  #ops.ops-shell-open .ops-content{
    background:transparent!important;
    padding:12px 14px 16px;
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  #ops.ops-shell-open .ops-main>.app-copyright,
  #ops.ops-shell-open .ops-main>.ops-footer-copyright{
    background:transparent!important;
    padding:4px 12px calc(4px + env(safe-area-inset-bottom,0px));
    font-size:8px;
  }
  .ops-header{padding:12px 14px;gap:10px;align-items:center;flex-wrap:wrap}
  .ops-header h2{font-size:13px;line-height:1.35;flex:1;min-width:0}
  .admin-profile{max-width:none;flex:1;min-width:0}
  .admin-meta{display:block}
  .admin-name{max-width:120px;font-size:10px}
  .admin-role{font-size:8px}
  .btn-logout{min-height:36px;padding:8px 10px}
  .ops-content{padding:14px 14px 20px;overflow-y:auto;background:var(--bg)}
  .stats-bar,#pay-stats-bar{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .stat-pill{padding:10px;min-height:64px}
  .stat-pill-val{font-size:18px}
  .leads-toolbar{align-items:stretch;gap:8px}
  .search-box,.filter-box,.leads-toolbar .btn-p{width:100%;flex:1 1 100%;min-height:42px}
  .detail-row{grid-template-columns:1fr;gap:10px;padding:12px 14px}
  .project-detail-head{flex-direction:column;gap:12px}
  .project-detail-actions{width:100%;justify-content:flex-start}
  .project-detail-actions .btn-p,.project-detail-actions .btn-g{flex:1;min-width:0;justify-content:center}
  .project-detail-grid{grid-template-columns:1fr 1fr;gap:8px}
  .project-detail-body{grid-template-columns:1fr}
  .project-detail-item{flex-direction:column;gap:4px}
  .project-detail-item span:last-child{text-align:left}
  .project-detail-title h3{font-size:17px}
  .leads-card-grid{grid-template-columns:1fr}
  .leads-card-footer{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 14px}
  .pay-actions{justify-content:flex-start;width:100%}
  .pay-actions .btn-pay{flex:1;min-width:0;justify-content:center;min-height:38px}

  .payments-thead,.users-thead{display:none}
  .users-table{border:none;background:transparent;overflow:visible}

  .payments-row{
    display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;min-width:0!important;
    padding:14px;margin-bottom:10px;border-radius:16px;
    border:1px solid var(--border);background:var(--bg3)
  }
  .payments-row .lr-action .pay-actions{
    display:grid;grid-template-columns:1fr;gap:8px;width:100%
  }
  .payments-row .lr-action .btn-pay{
    width:100%;min-height:42px;padding:10px 14px;font-size:11px;
    display:inline-flex;align-items:center;justify-content:center
  }
  .payments-row .pay-status-wrap .status-select,
  .payments-row .pay-status-wrap .status-badge{width:100%;box-sizing:border-box}

  .booking-wrap{padding:28px 14px 48px}
  .booking-hero{flex-direction:column;align-items:flex-start;gap:14px}
  .booking-hero h1{font-size:clamp(1.65rem,9vw,2.2rem)}
  .booking-hero p{font-size:12px}
  .booking-stepper{gap:4px;margin:20px 0 24px}
  .booking-stepper:before{left:10%;right:10%}
  .bw-step{font-size:9px;line-height:1.3}
  .bw-dot{width:32px;height:32px;font-size:11px}
  .booking-panel{width:100%;max-width:100%;padding:0;border:none;background:transparent;border-radius:0}
  .booking-panel-title{font-size:15px;align-items:flex-start;flex-wrap:wrap;line-height:1.4}
  .phone-row,.email-otp-row,.email-otp-verify,.booking-actions{grid-template-columns:1fr}
  .option-grid{grid-template-columns:1fr!important}
  .option-card{padding:14px;min-height:48px}
  .shooting-calendar{padding:10px}
  .shooting-day{min-height:42px;font-size:13px}
  .info-box,.warning-box{font-size:12px;padding:12px 14px}
  .fc{font-size:16px;padding:12px 14px;min-height:46px}
  .summary-row{flex-direction:column;gap:4px;align-items:flex-start}
  .summary-row span:last-child{text-align:left}
  .thank-you-panel{padding:8px 0 0}
  .thank-you-panel h2{font-size:20px}
  .btn-primary,.btn-outline,.btn-submit,.btn-p{min-height:46px}

  #ops-access-gate:not(.is-client-shell){padding:0!important}
  #ops-access-gate.is-client-shell{padding:0!important;overflow:visible;height:auto}
  #ops-access-gate:not(.is-client-shell) .ops-access-wrap{padding:0;min-height:0}
  #ops-access-gate.is-client-shell .ops-access-wrap{padding:0;height:100%;min-height:0}
  body.login-mode-signin:has(#ops.active #ops-login-panel.active),
  body.login-mode-signup:has(#ops.active #ops-login-panel.active){
    --login-stage-top:64px;
    --login-stage-bottom:calc(68px + env(safe-area-inset-bottom,0px));
  }
  body.fa-auth-shell.login-mode-signin:has(#ops.active #ops-login-panel.active),
  body.fa-auth-shell.login-mode-signup:has(#ops.active #ops-login-panel.active){
    --login-stage-top:0px;
    --login-stage-bottom:0px;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  body.login-mode-signin:has(#ops.active #ops-login-panel.active) #lg-nav{--nav-d:0}
  body.login-mode-signin .lg-login,
  body.login-mode-signup .lg-login{padding:0 16px!important}
  body.login-mode-signin .lg-login-main,
  body.login-mode-signup .lg-login-main{
    min-height:0!important;
    height:auto!important;
    flex:1 1 auto;
    width:100%;
    max-width:380px;
    padding:12px 0 16px;
    margin:0 auto;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.login-mode-signin .lg-login-card{
    padding:20px 18px 18px;
  }
  #ops-signin-form,#ops-signup-form{display:block;width:100%}
  .ops-access-choice h3{font-size:20px}
  .ops-access-choice p{font-size:12px}
  .ops-access-option{padding:18px 16px}
  .ops-access-back{width:100%;justify-content:center;margin-bottom:12px}
  #ops-client-access-panel.active{height:100%;min-height:0}
  /* ── Fase 1: Client portal mobile shell ── */
  body.auth-gated:has(#ops-client-access-panel.active){
    height:100dvh;
    max-height:100dvh;
    overflow:hidden;
    overscroll-behavior:none;
  }
  #ops:has(#ops-client-access-panel.active){
    height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden;
  }
  .client-portal-shell{
    flex-direction:row!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }
  .client-portal-shell:not(.cp-sidebar-expanded) > .cp-sidebar{
    position:fixed;
    width:0!important;min-width:0!important;max-width:0!important;
    height:0!important;min-height:0!important;max-height:0!important;
    padding:0!important;margin:0!important;
    border:none!important;overflow:hidden!important;
    opacity:0;pointer-events:none;flex:0 0 0!important;
    box-shadow:none!important;
    transform:translateX(-105%);
  }
  .client-portal-shell > .cp-sidebar .cp-sidebar-menu{display:none!important}
  .client-portal-shell > .cp-sidebar .sb-rail-divider{display:none!important}
  .client-portal-shell.cp-sidebar-expanded::after{
    display:block!important;
    content:"";
    position:fixed;inset:0;z-index:150;
    background:rgba(15,35,50,.28);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    pointer-events:auto;
  }
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar{
    position:fixed;
    top:0;left:0;bottom:0;
    width:min(300px,88vw)!important;
    min-width:0!important;
    max-width:min(300px,88vw);
    height:100dvh!important;
    max-height:100dvh!important;
    flex:0 0 auto;
    flex-direction:column!important;
    align-items:stretch!important;
    padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px))!important;
    overflow-x:clip!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    z-index:200;
    opacity:1;
    pointer-events:auto;
    transform:translateX(0);
    background:#fff!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    border-right:1px solid rgba(15,60,80,0.08)!important;
    box-shadow:8px 0 32px rgba(15,35,50,.12)!important;
    white-space:normal;
  }
  .client-portal-shell .cp-drawer-head{
    margin:0 0 16px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(15,60,80,0.08);
  }
  .client-portal-shell .cp-drawer-brand{display:inline-flex}
  .client-portal-shell .cp-drawer-close{display:inline-flex}
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .sb-rail-top{
    flex-direction:column!important;
    align-items:stretch!important;
    overflow:visible;
    width:100%;
    gap:0;
  }
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .sb-group{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%;
    margin:0 0 18px;
  }
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .sb-group-lbl,
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .sb-label,
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .cp-user-meta{
    display:block!important;
    opacity:1!important;
    max-width:none!important;
    height:auto!important;
    overflow:visible!important;
    pointer-events:auto!important;
  }
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .sb-group-lbl{
    margin:0 0 8px;padding:0 10px;
    color:rgba(15,60,80,0.42)!important;
    font-size:10px!important;font-weight:700;letter-spacing:.08em;
  }
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .cp-sidebar-user{
    display:flex!important;
    width:auto;height:auto;
    justify-content:flex-start;gap:10px;
    padding:6px 4px;margin:0 0 14px;
  }
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .cp-avatar{
    width:40px;height:40px;border-radius:12px;font-size:13px;
    background:linear-gradient(145deg, rgba(40,185,216,0.85) 0%, rgba(15,35,50,0.85) 100%);
    color:#fff;border-color:rgba(255,255,255,0.35);
  }
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .sb-item{
    width:100%!important;
    min-height:44px!important;
    height:auto!important;
    margin:0 0 4px!important;
    padding:10px 12px!important;
    justify-content:flex-start!important;
    gap:10px!important;
    color:rgba(15,42,53,0.72)!important;
    background:transparent!important;
    border:1px solid transparent!important;
    border-radius:12px!important;
    box-shadow:none!important;
    white-space:normal;
  }
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .sb-item:hover,
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .sb-item:focus-visible{
    background:rgba(15,60,80,0.04)!important;
    color:#0f2a35!important;
  }
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .sb-item.active{
    background:linear-gradient(145deg,rgba(15,35,50,0.94) 0%,rgba(26,52,66,0.88) 100%)!important;
    color:#fff!important;
    border-color:transparent!important;
    font-weight:700;
  }
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .sb-rail-foot,
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .cp-sidebar-foot{
    display:flex!important;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid rgba(15,60,80,0.08);
  }
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .sb-logout{
    width:100%!important;
    min-height:44px!important;
    height:auto!important;
    margin:0!important;
    padding:10px 12px!important;
    justify-content:flex-start!important;
    gap:10px!important;
    color:rgba(15,42,53,0.55)!important;
    background:transparent!important;
    border-radius:12px!important;
  }
  .client-portal-shell.cp-sidebar-expanded > .cp-sidebar .sb-logout:hover{
    background:rgba(220,38,38,0.06)!important;
    color:#b91c1c!important;
  }
  .client-portal-shell > .cp-main{
    flex:1 1 auto;
    min-height:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    width:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:transparent!important;
  }
  .client-portal-shell{
    --cp-dock-clearance:calc(78px + env(safe-area-inset-bottom,0px));
  }
  .client-portal-shell .cp-header{
    display:flex!important;
    align-items:center;
    justify-content:flex-start;
    margin:0;
    padding:calc(12px + env(safe-area-inset-top,0px)) 16px 8px;
    border-radius:0;
    background:transparent!important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:none;
    box-shadow:none;
    z-index:100;
    flex:0 0 auto;
  }
  .client-portal-shell .cp-header-top{
    display:flex!important;width:100%;align-items:center;justify-content:flex-start;gap:11px;
  }
  .client-portal-shell .cp-logo-box{
    display:grid!important;place-items:center;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;
    background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.72);cursor:pointer;
    box-shadow:0 18px 45px rgba(27,58,72,.13), inset 0 1px 0 rgba(255,255,255,.8);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden;
    flex:0 0 auto;margin:0;
  }
  .client-portal-shell .cp-logo-box img{width:28px;height:28px;object-fit:contain;display:block}
  .client-portal-shell .cp-greeting{
    display:block!important;flex:0 1 auto;min-width:0;max-width:calc(100% - 56px);
    text-align:left;margin:0;margin-right:auto;
  }
  .client-portal-shell .cp-greeting b{
    display:block;font-size:14px;letter-spacing:-.2px;color:#102b38;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;line-height:1.2;font-weight:750;text-align:left;
  }
  .client-portal-shell .cp-greeting span{
    font-size:10px;color:#71858e;display:block;margin-top:2px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;line-height:1.25;text-align:left;
  }
  .client-portal-shell .cp-header-account,
  .client-portal-shell .cp-header-avatar{display:none!important}
  .client-portal-shell .cp-header-copy,
  .client-portal-shell .cp-header-desktop-copy,
  .client-portal-shell .cp-mobile-brand{display:none!important}
  .client-portal-shell .cp-main-body{
    flex:1 1 auto;
    min-height:0;
    padding:8px 16px calc(16px + var(--cp-dock-clearance,78px))!important;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  body.cp-sidebar-open .client-portal-shell .cp-main-body{
    overflow:hidden;
    pointer-events:none;
  }
  .client-portal-shell .cp-dock{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    width:min(calc(100% - 32px),398px);
    height:64px;
    bottom:calc(13px + env(safe-area-inset-bottom,0px));
    z-index:140;
    padding:6px;
    border-radius:25px;
    background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(255,255,255,.48))!important;
    backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
    border:1px solid rgba(255,255,255,.82)!important;
    box-shadow:
      0 16px 36px rgba(27,58,72,.12),
      0 2px 8px rgba(27,58,72,.05),
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -1px 0 rgba(255,255,255,.35)!important;
  }
  .client-portal-shell .cp-dock-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:0;height:100%;padding:6px 4px;border:none;border-radius:19px;
    background:transparent;cursor:pointer;font:inherit;
    color:#8a9aa1;
    transition:color .18s ease,background .18s ease,box-shadow .18s ease,transform .12s ease;
  }
  .client-portal-shell .cp-dock-ico{
    display:grid;place-items:center;width:20px;height:20px;color:inherit;
  }
  .client-portal-shell .cp-dock-ico svg{
    width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.85;
    stroke-linecap:round;stroke-linejoin:round;display:block;
  }
  .client-portal-shell .cp-dock-label{
    font-size:10px;font-weight:800;letter-spacing:.01em;line-height:1;
  }
  .client-portal-shell .cp-dock-item.is-active{
    background:rgba(255,255,255,.92)!important;
    color:#101e27!important;
    box-shadow:
      0 8px 18px rgba(27,58,72,.10),
      inset 0 1px 0 #fff,
      0 0 0 1px rgba(255,255,255,.65)!important;
  }
  .client-portal-shell .cp-dock-item:active{transform:scale(.94)}
  .cp-hero{padding:18px 16px 18px}
  .cp-hero h3{font-size:20px;line-height:1.25}
  .cp-hero .btn-p,
  .cp-hero .cp-hero-cta{
    width:100%;justify-content:center;
    min-height:48px;padding:14px 16px;font-size:13px;
  }
  .cp-onboard{gap:10px;margin-top:10px}
  .cp-layout-2,
  .cp-layout-2.is-equal{grid-template-columns:1fr!important}
  .cp-wait-notice{padding:16px}
  .cp-wait-title{font-size:18px}
  .cp-wait-steps{grid-template-columns:1fr}
  .cp-wait-wa{width:100%;justify-content:center}
  .cp-wait-hint{max-width:none}
  .client-login-card{padding:18px;border-radius:18px}
  .client-login-card .fg,.client-login-card .email-otp-verify,.client-login-card>div[style]{max-width:none!important;width:100%}
  .client-metric-grid,.cp-layout-2,.cp-pay-grid,.cp-snapshot-row{grid-template-columns:1fr;gap:8px}
  .cp-side-stack{gap:8px}
  .cp-metric-inline{grid-template-columns:1fr}
  .client-link-row{flex-direction:column}
  .client-link-row .btn-p,.client-link-row .btn-g{width:100%;justify-content:center}

  .faq-wrap{padding:20px 14px 16px}
  .faq-intro-card,.faq-stats-card,.faq-sidebar,.faq-section,.faq-wa-card,.faq-feature-bar{padding:18px;border-radius:18px}
  .faq-intro-card h1{font-size:clamp(1.65rem,8.5vw,2.2rem)}
  .faq-stats-card{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .faq-sidebar{position:static;min-height:auto}
  .faq-sidebar-inner{min-height:auto}
  .faq-contact-list{flex:none}
  .faq-sidebar-actions{margin-top:18px;padding-top:0}
  .faq-contact-row{padding:14px 0}
  .faq-item summary{font-size:11px;line-height:1.45;align-items:flex-start}
  .faq-answer{font-size:11px}
  .faq-wa-card{padding:28px 18px}
  .faq-feature-bar{gap:14px}

  .users-layout{grid-template-columns:1fr}
  .production-ops-toolbar,.prodops-page-head,.prodops-summary-grid{grid-template-columns:1fr}
  .prodops-page-head{flex-direction:column}
  .prodops-dept-row{gap:12px}
  .prodops-summary-top{flex-direction:column}
  .prodops-badges{justify-content:flex-start}
  .prodops-bar-row{grid-template-columns:88px 1fr 40px;gap:8px}
  .prodops-dept-edit{grid-template-columns:1fr}
  .users-thead,.users-row{min-width:0!important;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:10px 12px}
  .users-row{border-radius:12px;margin-bottom:6px;border:1px solid var(--border)}
  .users-row>div:first-child,.users-row .user-actions{grid-column:1/-1}
  .user-actions{justify-content:flex-start}
  .user-actions .btn-g,.user-actions .btn-pay{height:32px;padding:0 10px}
  .user-form-grid{grid-template-columns:1fr}
  .analytics-grid{grid-template-columns:1fr 1fr;gap:8px}
  .analytics-charts,.analytics-fin-grid{grid-template-columns:1fr}
  .analytics-layout,.analytics-split{grid-template-columns:1fr}
  .cashflow-export-panel{align-items:stretch;flex-direction:column}
  .analytics-card{padding:16px;border-radius:16px;min-height:108px}
  .analytics-value{font-size:22px}
  .analytics-row{grid-template-columns:88px 1fr 40px;gap:8px}
  .card-hdr{flex-direction:column;align-items:flex-start;gap:10px}
  .card-hdr .btn-g,.card-hdr .btn-p{width:100%;justify-content:center}

  .dev-page-wrap{padding:16px}
  .dev-card{min-height:300px;padding:20px}
  .dev-gif{width:min(210px,100%);height:140px}
  .gallery-wrap{padding:20px 14px 16px}
  .gallery-filters{gap:6px}
  .gallery-filter{padding:8px 12px;font-size:10px}

  #toast{
    left:14px;right:14px;bottom:calc(72px + env(safe-area-inset-bottom,0px));
    width:auto;max-width:none;border-radius:16px;
    padding:12px 12px 12px 16px;
  }
  #home{padding-top:56px}
  #faq-contact,#gallery,#about{padding-top:56px}
  #reset-password.active{
    height:auto!important;
    max-height:none!important;
    min-height:calc(100dvh - 64px)!important;
    align-items:center;
    justify-content:center;
    overflow-x:hidden!important;
    overflow-y:auto;
    padding:16px 16px 32px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  #reset-password.active .reset-password-shell{
    width:100%;
    max-width:400px;
    margin:0 auto;
  }
  #reset-password.active .lg-login-card,
  #reset-password.active .reset-password-panel.lg-login-card{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:22px 18px 20px;
    border-radius:24px;
    overflow:visible;
    box-sizing:border-box;
  }
  #reset-password.active .lg-login-card-brand{display:none}
  #reset-password.active .auth-head{text-align:center;margin:0 0 16px}
  #reset-password.active .auth-form-title{
    text-align:center;
    font-size:clamp(22px,6vw,28px);
    margin:0 0 8px;
  }
  #reset-password.active .auth-form-sub{
    text-align:center;
    margin:0 0 14px;
    font-size:12px;
    line-height:1.55;
  }
  #reset-password.active .auth-fg{margin-bottom:12px}
  #reset-password.active .auth-fc,
  #reset-password.active .fc.auth-fc,
  #reset-password.active .lg-login-card .auth-fc{
    font-size:16px!important;
    min-height:46px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  #reset-password.active .email-otp-row,
  #reset-password.active .email-otp-verify,
  .reset-password-panel .email-otp-row,
  .reset-password-panel .email-otp-verify{
    grid-template-columns:1fr!important;
    gap:8px;
    width:100%;
  }
  #reset-password.active .btn-otp,
  .reset-password-panel .btn-otp{
    width:100%!important;
    min-width:0!important;
  }
  #reset-password.active .auth-switch--footer{
    text-align:center;
    margin-top:16px;
  }
  #booking.booking-modal-backdrop{padding:64px 10px 16px}
  .booking-modal{
    max-height:calc(100dvh - 80px);border-radius:18px;margin-bottom:12px;
    transform:translateY(36px) scale(1);
  }
  #booking.open .booking-modal{transform:translateY(0) scale(1)}
  .booking-modal-head{padding:14px 14px 12px}
  .booking-modal-body{padding:16px 14px 20px}
  .booking-thank-you-actions{grid-template-columns:1fr}
  .page.active,#home,#gallery,#about,#faq-contact,#ops,#reset-password{width:100%;max-width:100%;overflow-x:clip}
  .home-extra{padding-top:48px!important;padding-bottom:48px!important}
  .s-title{font-size:clamp(1.5rem,8vw,2rem)}
  .s-sub{font-size:12px;margin-bottom:28px}
  .r-card,.svc-card,.ops-card{padding:16px;border-radius:16px}
  .fw{max-width:none;width:100%}
  .pay-access-gate{padding:32px 18px}
  .pay-access-gate .fg{max-width:none!important;width:100%}
  .ops-card .fg[style*="max-width"]{max-width:none!important;width:100%}
}

@media(max-width:420px){
  .stats-bar,#pay-stats-bar{grid-template-columns:1fr!important}
  .project-detail-grid{grid-template-columns:1fr}
  .faq-stats-card{grid-template-columns:1fr 1fr}
  .analytics-grid{grid-template-columns:1fr}
  .hero h1{font-size:1.85rem}
  .admin-meta{display:none}
  .admin-profile{max-width:56vw}
}

/* ===== Light mode refinements ===== */
.gallery-filter.active{color:#fff}
.option-card.active,
.mood-chip.active{color:#312e81}
.stat-card .val,
.visual-caption,
.gallery-item-title,
.gallery-item-index,
.gallery-item-meta{color:#fff}
.faq-count-cyan{color:#0284c7;border-color:rgba(2,132,199,.28);background:rgba(14,165,233,.12)}
.faq-count-orange{color:#b45309;border-color:rgba(180,83,9,.28);background:rgba(245,158,11,.14)}
.faq-contact-icon.wa{color:#15803d}
.faq-contact-icon.link{color:#0284c7}
.faq-contact-icon.loc{color:#b45309}
.faq-wa-link{color:#6d28d9}
.faq-wa-link:hover{color:#4c1d95}
.faq-wa-icon{background:rgba(147,51,234,.14);border-color:rgba(147,51,234,.28);box-shadow:none}
.faq-item[open]{background:rgba(147,51,234,.06)}
.gallery-note{color:var(--badge-warn)}
.gallery-sell{border-color:rgba(147,51,234,.22);background:linear-gradient(135deg,rgba(147,51,234,.08),rgba(232,41,74,.04))}
.client-portal-status.ok{color:var(--badge-ok)}
.client-portal-status.warn{color:var(--badge-warn)}
.option-card:not(.active){color:var(--text)}
.shooting-schedule-box{background:rgba(147,51,234,.06);border-color:rgba(147,51,234,.28)}
.shooting-date-preview{background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.28);color:#14532d}
.shooting-day.is-booked{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.32);color:#b91c1c}
.shooting-day.is-blocked{background:rgba(220,38,38,.05);border-color:rgba(220,38,38,.14);color:rgba(185,28,28,.5)}
.shooting-day.is-inrange{background:rgba(147,51,234,.12);color:#4c1d95}
.option-card:not(.active) p{opacity:.72}
.mood-chip:not(.active){color:var(--muted)}
.btn-g{color:var(--text);background:var(--bg5)}
.btn-g:hover{color:var(--ink);border-color:rgba(147,51,234,.35)}
.btn-otp-send{box-shadow:0 4px 14px rgba(109,40,217,.18)}
.btn-otp-verify{box-shadow:0 4px 14px rgba(2,132,199,.16)}
.booking-hero h1{color:var(--ink)}
.ops-card,
.faq-intro-card,
.faq-stats-card,
.faq-sidebar,
.faq-section,
.faq-wa-card,
.faq-feature-bar,
.booking-modal,
.client-login-card,
.cp-hero,
.cp-panel,
.gallery-featured,
.r-card,
.svc-card{box-shadow:0 10px 30px rgba(20,20,40,.06)}
.hero-slide-meta{background:rgba(20,20,35,.04);border-color:rgba(20,20,35,.08)}
.glow-2{background:radial-gradient(circle,rgba(232,41,74,.08),transparent 70%)}
.summary-box,
.client-metric,
.production-progress-card,
.cp-step,
.cp-chip,
.cp-gate-row{border-color:var(--border)}
.production-bar{background:rgba(20,20,35,.08)}
.cp-gate-row.is-ready span{color:#15803d}
.client-timeline,
.client-timeline-item{border-color:var(--hairline)}
.lead-card,
.payments-row,
.payments-thead,
.users-row,
.detail-row,
.leads-card-footer,
.leads-table-footer{border-color:var(--ops-divider)}
.payments-thead{border-bottom-color:var(--ops-divider-strong)}
.lead-card{background:var(--bg3)}
.lc-bottom{border-color:var(--ops-divider)}
.project-detail-metric,
.project-detail-section,
.project-detail-item,
.timeline-note{border-color:var(--ops-divider)}
.project-detail-section{background:var(--ops-surface-soft)}
.timeline-note{background:var(--ops-surface-muted)}
.analytics-bar{background:var(--ops-bar-track)}
.analytics-row-label{color:var(--ops-chart-label)}
.detail-row-val,
.project-detail-notes,
.timeline-desc{color:var(--ops-muted-text)}
.ops-header{background:var(--bg3)}
.sb-item.active{color:var(--purple2);background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.22)}
.btn-logout{color:#dc2626}
.stat-pill{background:var(--bg3)}
.search-box,
.filter-box{background:var(--bg4)}
.analytics-card,
.stat-pill,
.users-table,
.ops-access-option{background:var(--bg3)}
.invoice-preview{background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.18)}

/* ── Internal system: liquid glass dashboard ── */
#ops.ops-shell-open{
  --glass-light: rgba(255,255,255,0.12);
  --glass-medium: rgba(255,255,255,0.18);
  --glass-sidebar: rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.45);
  --glass-border-soft: rgba(255,255,255,0.24);
  --glass-highlight: rgba(255,255,255,0.88);
  --glass-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    0 10px 40px rgba(15,80,100,0.06),
    0 2px 8px rgba(15,80,100,0.03);
  --glass-blur: blur(52px) saturate(210%) brightness(1.06);
  --glass-fill-light: linear-gradient(145deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 48%, rgba(255,255,255,0.18) 100%);
  --glass-fill-medium: linear-gradient(150deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 52%, rgba(255,255,255,0.14) 100%);
  --glass-fill-sidebar: linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.06) 100%);
  --ops-ink: #0f2a35;
  --ops-muted: rgba(15,60,80,0.52);
  --ops-faint: rgba(15,60,80,0.45);
  --ops-cyan: #28b9d8;
  --ops-cyan-soft: rgba(40,185,216,0.38);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 10% 0%, rgba(40,185,216,0.045) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 90% 100%, rgba(40,185,216,0.035) 0%, transparent 65%),
    linear-gradient(160deg, #f6f8f9 0%, #f9fafb 50%, #f5f8f9 100%);
}
#ops.ops-shell-open::before,
#ops.ops-shell-open::after{display:none}
#ops.ops-shell-open > .ops-sidebar,
#ops.ops-shell-open > .ops-main{
  position:relative;
  z-index:1;
}
#ops.ops-shell-open .ops-main{
  background: transparent;
  height: calc(100dvh - 64px);
  display:flex;
  flex-direction:column;
}
#ops.ops-shell-open .ops-content{
  background: transparent;
  padding: 12px 20px 12px;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
}
#ops.ops-shell-open .ops-main>.app-copyright,
#ops.ops-shell-open .ops-main>.ops-footer-copyright{
  flex:0 0 auto;
  margin-top:auto;
  background: transparent;
  border-top: none;
  color: var(--ops-faint);
  padding: 4px 16px 6px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  font-size: 8px;
  line-height: 1.25;
  letter-spacing: .06em;
}

.glass-card,.glass-light{
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.glass-medium{
  background: var(--glass-fill-medium);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.glass-dark{
  background:
    linear-gradient(145deg, rgba(15,35,50,0.72) 0%, rgba(15,35,50,0.52) 52%, rgba(15,35,50,0.66) 100%);
  backdrop-filter: blur(48px) saturate(190%) brightness(1.02);
  -webkit-backdrop-filter: blur(48px) saturate(190%) brightness(1.02);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 14px 40px rgba(15,80,100,0.22);
}

@keyframes glassEnter{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.glass-enter{
  animation: glassEnter .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--enter-delay,0s);
}
/* Saat parent sempat display:none (login gate), animasi tidak jalan → opacity 0 abadi. */
#ops.ops-shell-open .glass-enter,
#ops-client-access-panel.active .glass-enter{
  opacity:1;
}
#ops.ops-shell-open.ops-shell-reveal .glass-enter,
#ops-client-access-panel.active.ops-shell-reveal .glass-enter{
  animation: glassEnter .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--enter-delay,0s);
}

@keyframes opsReveal{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes pdShellReveal{
  from{opacity:0;transform:translateY(18px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.pd-enter,
.chart-enter{
  opacity:0;
  animation:opsReveal .42s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--enter-delay,0s);
}
#ops.ops-shell-open .pd-enter,
#ops.ops-shell-open .chart-enter,
#ops-client-access-panel.active .pd-enter,
#ops-client-access-panel.active .chart-enter{
  opacity:1;
}
#view-internal-db #project-detail-card.project-detail.pd-animate-in{
  animation:pdShellReveal .5s cubic-bezier(.22,1,.36,1) both;
}
#view-analytics .analytics-donut-center{
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1);
}
#view-analytics .analytics-donut-seg{
  transition:stroke-dasharray .9s cubic-bezier(.22,1,.36,1);
}
#view-analytics .analytics-fin-bar span{
  transition:width .85s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion:reduce){
  .pd-enter,.chart-enter,.glass-enter,
  #view-internal-db #project-detail-card.project-detail.pd-animate-in{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  #view-analytics .analytics-donut-seg,
  #view-analytics .analytics-fin-bar span,
  #view-internal-db .pd-progress-fill,
  #view-internal-db .pd-log-overlay,
  #view-internal-db .pd-log-modal{
    transition:none !important;
  }
  #view-internal-db .pd-log-overlay.open .pd-log-modal{
    transform:none !important;
    opacity:1 !important;
  }
}

#ops > .ops-sidebar{
  width: 72px;
  min-width: 72px;
  padding: 16px 0 14px;
  align-items: center;
  background: var(--glass-fill-sidebar);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border-soft);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.12);
  overflow: hidden;
  white-space: nowrap;
}
.sb-rail-top{display:flex;flex-direction:column;align-items:center;width:100%;gap:0}
.sb-rail-foot{display:flex;flex-direction:column;align-items:center;width:100%;padding-top:8px}
.sb-logo-card{
  width:44px;height:44px;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background: var(--glass-fill-medium);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  margin-bottom: 12px;
}
.sb-hamburger-btn{padding:0;cursor:pointer;color:var(--ops-ink);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.sb-hamburger-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 8px 22px rgba(15,80,100,0.10);
}
.sb-hamburger-btn svg{
  width:18px;height:18px;display:block;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.sb-rail-divider{
  width:24px;height:1px;background:var(--glass-border-soft);margin:0 0 14px;
}
#ops > .ops-sidebar .sb-group{margin:0 0 8px;width:100%;display:flex;flex-direction:column;align-items:center}
#ops > .ops-sidebar .sb-group-lbl,
#ops > .ops-sidebar .sb-label,
#ops > .ops-sidebar .sb-ver,
#ops > .ops-sidebar .sb-menu-toggle{display:none !important}
#ops > .ops-sidebar .sb-item{
  width:44px;height:44px;margin:0 auto 8px;padding:0;
  justify-content:center;gap:0;border-radius:12px;border:1px solid transparent;
  color: rgba(15,60,80,0.50);background:transparent;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
#ops > .ops-sidebar .sb-item:hover{
  background:rgba(255,255,255,0.22);
  border-color:var(--glass-border-soft);
  color:var(--ops-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45);
}
#ops > .ops-sidebar .sb-item.active{
  background: linear-gradient(145deg, rgba(15,35,50,0.88) 0%, rgba(15,35,50,0.72) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 4px 16px rgba(15,35,50,0.28);
  border-color: rgba(255,255,255,0.10);
}
#ops > .ops-sidebar .sb-ico,
#ops > .ops-sidebar .sb-ico svg{width:18px;height:18px}
#ops > .ops-sidebar .sb-logout{margin-bottom:0}

#ops.ops-sidebar-expanded > .ops-sidebar{
  width:224px;
  min-width:224px;
  padding:16px 12px 14px;
  overflow-y:auto;
}
#ops.ops-sidebar-expanded .sb-rail-top,
#ops.ops-sidebar-expanded .sb-rail-foot{align-items:stretch}
#ops.ops-sidebar-expanded .sb-rail-divider{width:100%;margin:0 0 14px}
#ops.ops-sidebar-expanded > .ops-sidebar .sb-group{
  align-items:stretch;
  margin:0 0 14px;
}
/* Keep labels visible while pinned open — ignore legacy hover opacity collapse */
#ops.ops-sidebar-expanded > .ops-sidebar .sb-group-lbl,
#ops.ops-sidebar-expanded > .ops-sidebar .sb-label,
#ops.ops-sidebar-expanded > .ops-sidebar .sb-ver,
#ops.ops-sidebar-expanded > .ops-sidebar .sb-status span{
  display:block !important;
  opacity:1 !important;
  max-width:none !important;
  height:auto !important;
  overflow:visible !important;
  pointer-events:auto !important;
}
#ops.ops-sidebar-expanded > .ops-sidebar .sb-group-lbl{
  margin:0 0 8px;
  padding:0 8px;
}
#ops.ops-sidebar-expanded > .ops-sidebar .sb-item{
  width:100%;
  height:44px;
  margin:0 0 6px;
  padding:0 12px;
  justify-content:flex-start;
  gap:10px;
}
#ops.ops-sidebar-expanded > .ops-sidebar .sb-logout{
  margin:0;
}

@media(min-width:701px){
  #ops > .ops-sidebar,
  #ops > .ops-sidebar:hover,
  #ops > .ops-sidebar:focus-within{
    width:72px !important;
    min-width:72px !important;
    padding:16px 0 14px !important;
    overflow:hidden !important;
    box-shadow:none !important;
  }
  #ops > .ops-sidebar:hover .sb-label,
  #ops > .ops-sidebar:focus-within .sb-label,
  #ops > .ops-sidebar:hover .sb-group-lbl,
  #ops > .ops-sidebar:focus-within .sb-group-lbl{
    display:none !important;
  }
  #ops > .ops-sidebar:hover .sb-item,
  #ops > .ops-sidebar:focus-within .sb-item{
    width:44px;height:44px;padding:0;justify-content:center;gap:0;margin:0 auto 8px;
  }
  #ops.ops-sidebar-expanded > .ops-sidebar,
  #ops.ops-sidebar-expanded > .ops-sidebar:hover,
  #ops.ops-sidebar-expanded > .ops-sidebar:focus-within{
    width:224px !important;
    min-width:224px !important;
    padding:16px 12px 14px !important;
    overflow-y:auto !important;
    box-shadow:
      inset -1px 0 0 rgba(255,255,255,0.12),
      0 16px 48px rgba(15,80,100,0.12) !important;
  }
  #ops.ops-sidebar-expanded > .ops-sidebar .sb-label,
  #ops.ops-sidebar-expanded > .ops-sidebar .sb-group-lbl,
  #ops.ops-sidebar-expanded > .ops-sidebar .sb-ver,
  #ops.ops-sidebar-expanded > .ops-sidebar .sb-status span{
    display:block !important;
    opacity:1 !important;
    max-width:none !important;
    height:auto !important;
    overflow:visible !important;
    pointer-events:auto !important;
  }
  #ops.ops-sidebar-expanded > .ops-sidebar .sb-item{
    width:100% !important;
    height:44px !important;
    margin:0 0 6px !important;
    padding:0 12px !important;
    justify-content:flex-start !important;
    gap:10px !important;
  }
}

#ops.ops-shell-open .ops-header{
  margin:10px 14px 0;
  padding:12px 18px;
  border-radius:18px;
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-bottom: none;
  gap:12px;
  position:relative;
  z-index:40;
  overflow:visible;
}
#ops.ops-shell-open .ops-content{
  position:relative;
  z-index:1;
}
#ops.ops-shell-open .ops-header-left{
  display:flex;align-items:center;gap:12px;min-width:0;flex:1;
}
.ops-header-copy{min-width:0}
#ops.ops-shell-open .ops-header h2{
  font-size:21px;font-weight:800;color:var(--ops-ink);margin:0;line-height:1.15;
  letter-spacing:-.03em;
}
#ops-subtitle{
  margin:3px 0 0;font-size:11px;color:var(--ops-muted);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#ops.ops-shell-open .ops-header-actions{gap:8px;flex-wrap:wrap;position:relative;z-index:2}
.ops-stats-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:14px;
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  font-size:11px;font-weight:600;color:var(--ops-muted);
}
.ops-stats-pill strong{color:var(--ops-ink);font-weight:800}
.ops-stats-div{width:1px;height:16px;background:var(--glass-border-soft)}
/* Production Ops: hide finance summary in header */
#ops:has(#view-production-ops.active) .ops-stats-pill{display:none !important}
.ops-icon-btn{
  width:36px;height:36px;border-radius:12px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--ops-ink);cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
}
.ops-icon-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 8px 22px rgba(15,80,100,0.10);
}
.ops-icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#ops.ops-shell-open .approval-bell-wrap{z-index:60}
#ops.ops-shell-open .approval-bell-btn{
  width:36px;height:36px;border-radius:12px;
  background: var(--glass-fill-light);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--ops-ink);
}
#ops.ops-shell-open .approval-bell-btn.open,
#ops.ops-shell-open .approval-bell-btn:hover{
  border-color: rgba(40,185,216,0.35);
  color: var(--ops-cyan, #28b9d8);
  background: rgba(255,255,255,0.55);
}
#ops.ops-shell-open .approval-dropdown{
  width:min(420px,calc(100vw - 28px));
  max-height:min(70vh,540px);
  border-radius:18px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.97) 0%, rgba(252,254,255,0.95) 55%, rgba(246,250,252,0.96) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.92);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,0.35),
    0 24px 64px rgba(15,80,100,0.22),
    0 8px 20px rgba(15,80,100,0.10);
  z-index: 200;
  overflow:hidden;
  isolation:isolate;
}
#ops.ops-shell-open .approval-dd-head{
  padding:12px 14px 10px;
  border-bottom:1px solid rgba(15,60,80,0.08);
  background: rgba(255,255,255,0.88);
}
#ops.ops-shell-open .approval-dd-head strong{
  font-size:13px;font-weight:800;color:var(--ops-ink);letter-spacing:-.01em;
}
#ops.ops-shell-open .approval-dd-head span{
  font-size:10px;font-weight:600;color:var(--ops-muted);
}
#ops.ops-shell-open .approval-dd-tabs{
  gap:6px;padding:10px 12px;
  border-bottom:1px solid rgba(15,60,80,0.07);
  background: rgba(248,251,252,0.92);
}
#ops.ops-shell-open .approval-dd-tab{
  padding:8px 6px;border-radius:10px;
  font-size:10px;font-weight:700;letter-spacing:.02em;
  color:var(--ops-muted);
  border:1px solid transparent;
  background:transparent;
  transition:background .15s,border-color .15s,color .15s;
}
#ops.ops-shell-open .approval-dd-tab:hover{
  color:var(--ops-ink);background:rgba(255,255,255,0.85);
}
#ops.ops-shell-open .approval-dd-tab.active{
  color:var(--ops-ink);
  background: #fff;
  border-color: rgba(40,185,216,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 12px rgba(15,80,100,0.08);
}
#ops.ops-shell-open .approval-dd-list{
  padding:12px;
  gap:10px;
  background: rgba(242,247,249,0.92);
}
#ops.ops-shell-open .approval-dd-group-head{
  background: rgba(242,247,249,0.96);
  padding:2px 2px 4px;
}
#ops.ops-shell-open .approval-dd-group-label{
  color:var(--ops-faint);letter-spacing:.08em;
}
#ops.ops-shell-open .approval-dd-group-count{
  color:var(--ops-muted);
  background: rgba(255,255,255,0.92);
  border-color: rgba(15,60,80,0.10);
}
#ops.ops-shell-open .approval-dd-empty{
  color:var(--ops-muted);
  background: rgba(255,255,255,0.88);
  border:1px dashed rgba(15,60,80,0.14);
  border-radius:14px;
  margin:4px 0;
}
#ops.ops-shell-open .approval-dd-item{
  border-radius:14px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(15,60,80,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 4px 14px rgba(15,80,100,0.06);
}
#ops.ops-shell-open .approval-dd-item:hover,
#ops.ops-shell-open .approval-dd-item:focus-visible{
  border-color: rgba(40,185,216,0.32);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 10px 24px rgba(15,80,100,0.10);
}
#ops.ops-shell-open .approval-dd-item.is-read{opacity:1;background:rgba(255,255,255,0.90)}
#ops.ops-shell-open .approval-dd-item.is-dismissed{opacity:.72}
#ops.ops-shell-open .approval-dd-item.is-unread{
  border-color: rgba(40,185,216,0.28);
}
#ops.ops-shell-open .approval-dd-item.is-unread:before{
  background: var(--ops-cyan, #28b9d8);
}
#ops.ops-shell-open .approval-dd-title{color:var(--ops-ink)}
#ops.ops-shell-open .approval-dd-meta,
#ops.ops-shell-open .approval-dd-time,
#ops.ops-shell-open .approval-dd-project{color:var(--ops-muted)}
#ops.ops-shell-open .approval-dd-actor,
#ops.ops-shell-open .approval-dd-amount,
#ops.ops-shell-open .approval-dd-progress strong{color:var(--ops-cyan, #28b9d8)}
#ops.ops-shell-open .approval-dd-tag.pending{
  color:#0e7490;background:rgba(40,185,216,0.12);border-color:rgba(40,185,216,0.24);
}
#ops.ops-shell-open .admin-profile{
  background: var(--glass-fill-medium);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  padding: 4px 10px 4px 4px;
  border-radius: 14px;
}
#ops.ops-shell-open .admin-avatar{
  width:28px;height:28px;border-radius:8px;
  background: linear-gradient(145deg, rgba(15,35,50,0.92) 0%, rgba(15,35,50,0.76) 100%);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16);
}
#ops.ops-shell-open .admin-name{color:var(--ops-ink);max-width:110px}
#ops.ops-shell-open .admin-role{color:var(--ops-muted);letter-spacing:.04em}
.ops-refresh-cta{
  height:36px;padding:0 14px;border-radius:12px;cursor:pointer;
  background: linear-gradient(145deg, rgba(15,35,50,0.84) 0%, rgba(15,35,50,0.68) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;font-size:11px;font-weight:600;letter-spacing:.01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 10px 24px rgba(15,80,100,0.18);
  transition:transform .18s ease,box-shadow .18s ease;
}
.ops-refresh-cta:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 12px 28px rgba(15,80,100,0.22);
}
.ops-refresh-cta:disabled{opacity:.6;cursor:wait;transform:none}
.ops-refresh-cta--icon{
  display:none;width:36px;padding:0;
  align-items:center;justify-content:center;
}
.ops-refresh-cta--icon svg{
  width:16px;height:16px;display:block;
  stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.ops-header-top{display:none}
.ops-mobile-brand{display:flex;align-items:center;gap:10px;min-width:0}
.ops-header-logo{
  display:inline-flex;align-items:center;padding:0;border:none;background:transparent;cursor:pointer;
}
.ops-header-logo img{display:block;height:18px;width:auto;max-width:min(110px,36vw)}
.ops-header-menu{width:40px;height:40px;margin-bottom:0;flex-shrink:0}
.ops-drawer-head{
  display:flex;align-items:center;gap:10px;width:100%;margin:0 0 4px;
}
.ops-drawer-brand{display:none;align-items:center;min-width:0;flex:1}
.ops-drawer-brand img{display:block;height:18px;width:auto;max-width:120px}
.ops-drawer-close{
  display:none;
  width:44px;height:44px;flex-shrink:0;margin-left:auto;
  border:1px solid var(--glass-border-soft,rgba(255,255,255,.35));
  border-radius:12px;padding:0;cursor:pointer;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.35);color:var(--ops-ink,#0f2a35);
}
.ops-drawer-close svg{
  width:18px;height:18px;display:block;
  stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

#view-analytics .glass-card{
  position:relative;
}
#view-analytics .analytics-action-panel,
#view-analytics .analytics-card{
  overflow:hidden;
}
#view-analytics .analytics-action-panel::before,
#view-analytics .analytics-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 32%);
  opacity:.45;
}
#view-analytics .analytics-action-panel > *{position:relative;z-index:1}
#view-analytics .analytics-action-panel{
  border-radius:20px;padding:20px;margin-bottom:16px;
  background: linear-gradient(150deg, rgba(255,255,255,0.78) 0%, rgba(245,248,250,0.92) 100%);
  border: 1px solid rgba(255,255,255,0.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 10px 28px rgba(15,80,100,0.08);
}
#view-analytics .analytics-action-hdr h3{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:15px;font-weight:800;color:var(--ops-ink);margin:0;
}
.analytics-dot{
  width:6px;height:6px;border-radius:50%;background:var(--ops-cyan-soft);display:inline-block;
  box-shadow:0 0 0 2px rgba(40,185,216,0.12);
}
#view-analytics .analytics-action-badge{
  min-width:0;height:auto;padding:4px 10px;font-size:11px;font-weight:700;
  background: rgba(40,185,216,0.14);
  color:#0f6f86;
  box-shadow:none;
  border:1px solid rgba(40,185,216,0.28);
  border-radius:999px;
}
#view-analytics .analytics-action-lead{font-size:12px;color:rgba(15,60,80,0.55)}
#view-analytics .analytics-action-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 12px;
  padding:10px;border-radius:14px;
  background: rgba(15,60,80,0.04);
  border: 1px solid rgba(15,60,80,0.08);
}
#view-analytics .analytics-action-chip{
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(15,60,80,0.12);
  color: rgba(15,60,80,0.62);
  border-radius:12px;padding:8px 12px 8px 10px;gap:8px;
  box-shadow: 0 2px 8px rgba(15,80,100,0.04);
  font-size:11px;font-weight:600;
}
#view-analytics .analytics-action-chip strong{
  color:var(--ops-ink,#0f2a35);font-weight:800;font-variant-numeric:tabular-nums;
}
#view-analytics .analytics-action-chip i{
  font-style:normal;width:20px;height:20px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background: rgba(40,185,216,0.14);font-size:10px;font-weight:800;color:#0f6f86;
}
#view-analytics .analytics-action-chip.is-warn{
  background: rgba(217,119,6,0.08);
  border-color: rgba(217,119,6,0.28);
  color:#b45309;
}
#view-analytics .analytics-action-chip.is-warn i{background:rgba(217,119,6,0.16);color:#b45309}
#view-analytics .analytics-action-chip.is-danger{
  background: rgba(230,55,86,0.08);
  border-color: rgba(230,55,86,0.28);
  color:#c81e45;
}
#view-analytics .analytics-action-chip.is-danger i{background:rgba(230,55,86,0.16);color:#c81e45}
#view-analytics .analytics-action-empty{
  border:1px dashed rgba(15,60,80,0.18);
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size:11px;color:rgba(15,60,80,0.55);border-radius:14px;
}
#view-analytics .analytics-action-item{
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(15,60,80,0.12);
  box-shadow: 0 4px 14px rgba(15,80,100,0.05);
  border-radius:14px;
  padding:14px 16px;
}
#view-analytics .analytics-action-item:hover{
  border-color: rgba(40,185,216,0.35);
  background: rgba(40,185,216,0.06);
  transform:none;
  box-shadow: 0 6px 18px rgba(15,80,100,0.08);
}
#view-analytics .analytics-action-item-title{color:var(--ops-ink,#0f2a35)}
#view-analytics .analytics-action-item-desc{color:rgba(15,60,80,0.55)}
#view-analytics .analytics-action-go{color:#0f6f86}
#view-analytics .analytics-action-tag.risk{
  background:rgba(230,55,86,0.10);color:#c81e45;border:1px solid rgba(230,55,86,0.22);
}

#view-analytics .analytics-grid{gap:14px;margin-bottom:16px}
#view-analytics .analytics-card.an-kpi-card{
  display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  position:relative;overflow:hidden;
  min-height:148px;padding:18px 18px 14px;border-radius:20px;
  background:rgba(15,35,50,0.62);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.10),0 8px 28px rgba(15,80,100,0.16);
}
#view-analytics .analytics-card.an-kpi-card:before{display:none}
#view-analytics .analytics-card.an-kpi-card .analytics-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
#view-analytics .analytics-card.an-kpi-card .analytics-card-body{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;
}
#view-analytics .analytics-card.an-kpi-card .analytics-label{
  margin:0;padding:0;
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.42);line-height:1.3;
}
#view-analytics .analytics-card.an-kpi-card .analytics-ico{
  position:relative !important;inset:auto !important;float:none !important;transform:none !important;
  width:32px;height:32px;border-radius:10px;flex-shrink:0;margin:0 !important;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--accent,#4ade80);
  background:color-mix(in srgb, var(--accent,#4ade80) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--accent,#4ade80) 28%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}
#view-analytics .analytics-card.an-kpi-card .analytics-ico svg{
  width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;
}
#view-analytics .analytics-card.an-kpi-card .analytics-money,
#view-analytics .analytics-card.an-kpi-card .analytics-value{
  margin:0;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  color:#fff;
}
#view-analytics .analytics-card.an-kpi-card .analytics-sub{
  margin:0;font-size:11px;line-height:1.45;font-weight:500;
  color:rgba(255,255,255,0.42);
}
#view-analytics .analytics-card.an-kpi-card .analytics-trend{
  margin:0;margin-top:auto;padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.10);
  font-size:11px;font-weight:700;line-height:1.35;
  color:var(--accent,#4ade80);
}
#view-analytics .analytics-card.an-kpi-card .analytics-money,
#view-analytics .analytics-card.an-kpi-card .analytics-value{
  grid-area:auto;color:#fff;
}
#view-analytics .analytics-card.an-kpi-card .analytics-sub{
  grid-area:auto;color:rgba(255,255,255,0.42);
}
#view-analytics .analytics-card.an-kpi-card .analytics-label{
  grid-area:auto;
}
#view-analytics .analytics-card.an-kpi-card .analytics-ico{
  grid-area:auto;grid-row:auto;
}
#view-analytics .analytics-ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
#view-analytics .analytics-money,
#view-analytics .analytics-value{
  grid-area:value;
  font-size:20px;
  font-weight:800;
  color:var(--ops-ink);
  letter-spacing:-.03em;
  line-height:1.2;
  margin:8px 0 0;
  min-width:0;
  overflow-wrap:anywhere;
}
#view-analytics .analytics-sub{
  grid-area:sub;
  font-size:11px;
  color:rgba(15,60,80,0.55);
  margin:6px 0 0;
  line-height:1.45;
  min-width:0;
}
#view-analytics .analytics-trend{
  grid-area:trend;
  align-self:end;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--glass-border-soft);
  font-size:11px;
  font-weight:700;
  color:var(--accent,#28b9d8);
  line-height:1.35;
  position:relative;
  z-index:1;
}

#view-analytics .cashflow-export-panel{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-radius:20px;padding:16px 24px;margin-bottom:16px;
  /* Solid dark glass — no live backdrop sampling so sibling hover can't recolor it */
  background: linear-gradient(145deg, #163040 0%, #122836 52%, #152e3c 100%);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 14px 40px rgba(15,80,100,0.22);
  isolation:isolate;
  transform:none !important;
}
#view-analytics .cashflow-export-panel:hover{
  background: linear-gradient(145deg, #163040 0%, #122836 52%, #152e3c 100%);
  border-color: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 14px 40px rgba(15,80,100,0.22);
  transform:none !important;
}
.cashflow-export-copy{display:flex;align-items:center;gap:12px;min-width:0}
.cashflow-export-ico{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background: rgba(40,185,216,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(40,185,216,0.14);
  color:rgba(125,211,234,0.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}
.cashflow-export-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
#view-analytics .cashflow-export-panel h3{margin:0 0 4px;font-size:13px;font-weight:700;color:#fff}
#view-analytics .cashflow-export-panel p{margin:0;font-size:11px;color:rgba(255,255,255,0.42);line-height:1.45}
.cashflow-download-btn{
  height:36px;padding:0 16px;border-radius:12px;cursor:pointer;flex-shrink:0;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color:#0f2a35;
  border:1px solid rgba(255,255,255,0.72);
  font-size:11px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.95), 0 8px 20px rgba(15,80,100,0.12);
}
#view-analytics .analytics-charts{gap:16px;margin-bottom:16px}
#view-analytics .analytics-chart-card{
  background: var(--glass-fill-medium);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius:20px;padding:24px;margin:0;
  overflow:visible;
}
#view-analytics .analytics-chart-card .card-hdr h3{color:var(--ops-ink);font-size:14px}
.analytics-donut-body{display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
#view-analytics .analytics-donut-wrap{width:168px;height:168px;margin:0;flex-shrink:0}
#view-analytics .analytics-donut-svg{width:168px;height:168px;transform:none;display:block}
#view-analytics .analytics-donut-center strong{font-size:16px;color:var(--ops-ink)}
#view-analytics .analytics-donut-center span{font-size:9px;letter-spacing:.1em;color:var(--ops-muted)}
#view-analytics .analytics-donut-legend{
  flex:1 1 auto;
  min-width:148px;
  gap:8px;
  padding:0;
  overflow:visible;
}
#view-analytics .analytics-donut-legend-item{
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  font-size:11px;
  color:var(--ops-muted);
}
#view-analytics .analytics-donut-legend-item span{
  min-width:0;
  overflow:visible;
  white-space:nowrap;
}
#view-analytics .analytics-donut-legend-item strong{
  font-size:12px;
  color:var(--ops-ink);
  white-space:nowrap;
}
#view-analytics .ops-card.analytics-risk-panel,
#view-analytics .ops-card.analytics-fin-panel{
  background: linear-gradient(150deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.64) 52%, rgba(248,250,251,0.72) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 8px 24px rgba(15,80,100,0.08);
  border-radius:20px;
  isolation:isolate;
  contain:paint;
  transform:none !important;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#view-analytics .ops-card.analytics-risk-panel:hover,
#view-analytics .ops-card.analytics-fin-panel:hover{
  transform:none !important;
  border-color: rgba(255,255,255,0.88);
  background: linear-gradient(150deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.74) 52%, rgba(248,250,251,0.82) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 10px 28px rgba(15,80,100,0.10);
}
#view-analytics .analytics-chart-card{
  isolation:isolate;
  contain:paint;
  transform:none !important;
}
#view-analytics .analytics-chart-card:hover{
  transform:none !important;
}
.analytics-sync-foot{font-size:11px;color:var(--ops-muted);margin:4px 2px 0}

@media(max-width:900px){
  #view-analytics .analytics-grid{grid-template-columns:1fr 1fr}
  #view-analytics .analytics-charts{grid-template-columns:1fr}
  .ops-stats-pill{display:none}
  .analytics-donut-body{flex-wrap:wrap}
}
body.ops-sidebar-open{overflow:hidden!important}

@media(max-width:700px){
  /* ── Fase 1: Ops mobile shell ── */
  body.auth-gated:has(#ops.ops-shell-open.active){
    height:100dvh;
    max-height:100dvh;
    overflow:hidden;
    overscroll-behavior:none;
  }
  #ops.ops-shell-open.active{
    flex-direction:row;
    margin-top:0!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden;
  }
  #ops.ops-shell-open:not(.ops-sidebar-expanded) > .ops-sidebar{
    position:fixed;
    width:0!important;min-width:0!important;max-width:0!important;
    height:0!important;min-height:0!important;max-height:0!important;
    padding:0!important;margin:0!important;
    border:none!important;overflow:hidden!important;
    opacity:0;pointer-events:none;flex:0 0 0!important;
    box-shadow:none!important;
    transform:translateX(-105%);
  }
  #ops.ops-shell-open > .ops-sidebar .ops-sidebar-menu{display:none!important}
  #ops.ops-shell-open > .ops-sidebar .sb-rail-divider{display:none!important}
  #ops.ops-shell-open.ops-sidebar-expanded::after{
    display:block !important;
    content:"";
    position:fixed;inset:0;z-index:150;
    background:rgba(15,35,50,.28);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    pointer-events:auto;
  }
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar{
    position:fixed;
    top:0;left:0;bottom:0;
    width:min(300px,88vw) !important;
    min-width:0 !important;
    max-width:min(300px,88vw);
    height:100dvh !important;
    max-height:100dvh !important;
    flex:0 0 auto;
    flex-direction:column;
    align-items:stretch;
    padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px)) !important;
    overflow-x:clip !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    z-index:200;
    opacity:1;
    pointer-events:auto;
    transform:translateX(0);
    background:#fff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-right:1px solid rgba(15,60,80,0.08) !important;
    box-shadow:8px 0 32px rgba(15,35,50,.12) !important;
  }
  #ops.ops-shell-open .ops-drawer-head{
    margin:0 0 16px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(15,60,80,0.08);
  }
  #ops.ops-shell-open .ops-drawer-brand{
    display:inline-flex;
  }
  #ops.ops-shell-open .ops-drawer-close{
    display:inline-flex;
    background:#fff;
    border:1px solid rgba(15,60,80,0.12);
    color:#0f2a35;
    box-shadow:none;
  }
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-rail-top{
    flex-direction:column;
    align-items:stretch;
    overflow:visible;
    padding-bottom:4px;
  }
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-group{
    display:flex !important;
    flex-direction:column;
    align-items:stretch !important;
    width:100%;
    margin:0 0 18px;
  }
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-group-lbl,
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-label{
    display:block !important;
    opacity:1 !important;
    max-width:none !important;
    height:auto !important;
    overflow:visible !important;
    pointer-events:auto !important;
  }
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-group-lbl{
    margin:0 0 8px;padding:0 10px;
    color:rgba(15,60,80,0.42) !important;
    font-size:10px !important;
    font-weight:700;
    letter-spacing:.08em;
  }
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-item{
    width:100% !important;
    min-height:44px !important;
    height:auto !important;
    margin:0 0 4px !important;
    padding:10px 12px !important;
    justify-content:flex-start !important;
    gap:10px !important;
    color:rgba(15,42,53,0.72) !important;
    background:transparent !important;
    border:1px solid transparent !important;
    border-radius:12px !important;
    box-shadow:none !important;
  }
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-item:hover,
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-item:focus-visible{
    background:rgba(15,60,80,0.04) !important;
    color:#0f2a35 !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-item.active{
    background:rgba(15,60,80,0.07) !important;
    color:#0f2a35 !important;
    border-color:rgba(15,60,80,0.08) !important;
    box-shadow:none !important;
    font-weight:700;
  }
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-item .sb-label{
    color:inherit !important;
    font-size:13px !important;
    font-weight:inherit;
  }
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-ico{
    color:inherit;
    opacity:.85;
  }
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-rail-foot{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid rgba(15,60,80,0.08);
  }
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-logout{
    width:100% !important;
    min-height:44px !important;
    height:auto !important;
    margin:0 !important;
    padding:10px 12px !important;
    justify-content:flex-start !important;
    gap:10px !important;
    color:rgba(15,42,53,0.55) !important;
    background:transparent !important;
    border:1px solid transparent !important;
    border-radius:12px !important;
    box-shadow:none !important;
  }
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-logout:hover,
  #ops.ops-shell-open.ops-sidebar-expanded > .ops-sidebar .sb-logout:focus-visible{
    background:rgba(220,38,38,0.06) !important;
    color:#b91c1c !important;
  }
  #ops.ops-shell-open > .ops-main{
    flex:1 1 auto;
    min-height:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    width:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  #ops.ops-shell-open .ops-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    align-items:center;
    gap:8px 10px;
    margin:0;
    padding:calc(10px + env(safe-area-inset-top,0px)) 14px 12px;
    border-radius:0 0 18px 18px;
    z-index:100;
    flex:0 0 auto;
  }
  #ops.ops-shell-open .ops-header-top{
    display:block;
    grid-column:1;
    grid-row:1;
    min-width:0;
  }
  #ops.ops-shell-open .ops-header-menu{
    width:44px;height:44px;min-width:44px;min-height:44px;
  }
  #ops.ops-shell-open .ops-header-actions{
    grid-column:2;
    grid-row:1;
    gap:8px;
    flex-wrap:nowrap;
    align-items:center;
  }
  #ops.ops-shell-open .ops-header-left{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    flex:none;
  }
  #ops.ops-shell-open .ops-header h2{font-size:16px;line-height:1.25}
  #ops-subtitle{font-size:11px;line-height:1.4;white-space:normal}
  #ops.ops-shell-open .ops-icon-btn,
  #ops.ops-shell-open .approval-bell-btn,
  #ops.ops-shell-open .ops-refresh-cta--icon{
    width:44px;height:44px;min-width:44px;min-height:44px;
  }
  #ops.ops-shell-open .admin-meta{display:none}
  #ops.ops-shell-open .admin-profile{
    padding:0;background:transparent;border:none;box-shadow:none;
  }
  #ops.ops-shell-open .admin-avatar{
    width:36px;height:36px;font-size:12px;
  }
  .ops-refresh-cta--text{display:none}
  .ops-refresh-cta--icon{display:inline-flex}
  #ops.ops-shell-open .ops-content{
    flex:1 1 auto;
    min-height:0;
    padding:12px 14px 8px;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  body.ops-sidebar-open #ops.ops-shell-open .ops-content{
    overflow:hidden;
    pointer-events:none;
  }
  #ops.ops-shell-open .ops-main>.app-copyright,
  #ops.ops-shell-open .ops-main>.ops-footer-copyright{
    flex:0 0 auto;
    padding:8px 14px calc(10px + env(safe-area-inset-bottom,0px));
    font-size:8px;
  }
  #ops.ops-shell-open .approval-dropdown{
    position:fixed;
    left:12px;right:12px;
    top:calc(72px + env(safe-area-inset-top,0px));
    width:auto;
    max-width:none;
    max-height:min(70dvh,520px);
  }
  #view-analytics .analytics-grid{grid-template-columns:1fr}
  .analytics-donut-body{justify-content:center}
}

/* ── Client Status — liquid glass ── */
#view-internal-db .cs-status-bar{
  display:flex;
  overflow:hidden;
  margin-bottom:14px;
  border-radius:20px;
  background: var(--glass-fill-medium);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
#view-internal-db .cs-stat{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 0;
  min-width:0;
  padding:16px 20px;
  cursor:pointer;
  border:none;
  background:transparent;
  text-align:left;
  font:inherit;
  color:inherit;
  transition:background .2s ease;
}
#view-internal-db .cs-stat + .cs-stat{
  border-left:1px solid rgba(255,255,255,0.50);
}
#view-internal-db .cs-stat-all{
  flex:0 0 auto;
  padding:16px 20px;
}
#view-internal-db .cs-stat-all.is-active{
  background:rgba(15,35,50,0.08);
}
#view-internal-db .cs-stat-all.is-active::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:6px;
  height:2.5px;
  border-radius:999px;
  background:rgba(15,60,80,0.35);
}
#view-internal-db .cs-stat-all .cs-stat-badge{
  background:rgba(15,60,80,0.08);
  color:rgba(15,60,80,0.55);
}
#view-internal-db .cs-stat-all.is-active .cs-stat-badge{
  background:rgba(15,35,50,0.82);
  color:#fff;
  box-shadow:0 4px 12px rgba(15,35,50,0.18);
}
#view-internal-db .cs-stat-all.is-active .cs-stat-sub{
  color:rgba(15,60,80,0.55);
}
#view-internal-db .cs-stat:hover{background:rgba(255,255,255,0.18)}
#view-internal-db .cs-stat.is-active{
  background: var(--cs-bg, rgba(40,185,216,0.13));
}
#view-internal-db .cs-stat.is-active::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:6px;
  height:2.5px;
  border-radius:999px;
  background: var(--cs-color, #28b9d8);
}
#view-internal-db .cs-stat-badge{
  width:36px;height:36px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
  background: var(--cs-bg, rgba(40,185,216,0.13));
  color: var(--cs-color, #28b9d8);
}
#view-internal-db .cs-stat.is-active .cs-stat-badge{
  background: var(--cs-color, #28b9d8);
  color:#fff;
  box-shadow:0 4px 12px color-mix(in srgb, var(--cs-color,#28b9d8) 35%, transparent);
}
#view-internal-db .cs-stat-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
#view-internal-db .cs-stat-label{
  display:block;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(15,60,80,0.45);line-height:1.2;
}
#view-internal-db .cs-stat-sub{
  display:block;
  margin-top:0;font-size:11px;font-weight:600;
  color:rgba(15,60,80,0.55);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-internal-db .cs-stat.is-active .cs-stat-sub{color:var(--cs-color,#28b9d8)}

#view-internal-db .cs-toolbar{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;
}
#view-internal-db .cs-search{
  flex:1 1 220px;min-width:0;
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:12px;
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
#view-internal-db .cs-search-ico{
  width:16px;height:16px;flex-shrink:0;color:rgba(15,60,80,0.40);
  display:inline-flex;
}
#view-internal-db .cs-search-ico svg{
  width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;
}
#view-internal-db .cs-search input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-size:13px;font-weight:500;color:var(--ops-ink,#0f2a35);
  font-family:inherit;
}
#view-internal-db .cs-search input::placeholder{color:rgba(15,60,80,0.40)}

#view-internal-db .cs-filter-pill{
  position:relative;flex:0 0 auto;
  display:inline-flex;align-items:center;
  padding:10px 36px 10px 16px;border-radius:12px;
  background: var(--glass-fill-medium);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
#view-internal-db .cs-filter-pill select{
  appearance:none;-webkit-appearance:none;border:none;outline:none;background:transparent;
  font-size:12px;font-weight:600;color:var(--ops-ink,#0f2a35);font-family:inherit;cursor:pointer;padding:0;margin:0;
}
#view-internal-db .cs-filter-chevron{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;pointer-events:none;color:rgba(15,60,80,0.45);
}
#view-internal-db .cs-filter-chevron svg{
  width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

#view-internal-db .cs-sync-pill{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:10px 16px;border-radius:12px;
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  font-size:11px;font-weight:600;color:rgba(15,60,80,0.55);
  white-space:nowrap;
}
#view-internal-db .cs-sync-dot{
  width:6px;height:6px;border-radius:50%;background:#16a34a;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(22,163,74,0.16);
}

#view-internal-db .cs-sync-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;
  padding:10px 16px;border-radius:12px;cursor:pointer;
  background: rgba(15,35,50,0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 20px rgba(15,80,100,0.16);
  color:#fff;font-size:11px;font-weight:600;font-family:inherit;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
#view-internal-db .cs-sync-btn:hover{
  transform:translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 12px 28px rgba(15,80,100,0.22);
}
#view-internal-db .cs-sync-btn:disabled{opacity:.65;cursor:wait;transform:none}
#view-internal-db .cs-sync-btn svg{
  width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;
}

#view-internal-db .cs-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  isolation:isolate;
}
#view-internal-db .cs-card{
  position:relative;
  z-index:1;
  display:flex;flex-direction:row;align-items:stretch;
  border-radius:20px;overflow:hidden;cursor:pointer;
  /* Opaque enough to avoid backdrop-filter bleed into sibling cards on hover */
  background: linear-gradient(150deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.72) 52%, rgba(248,250,251,0.78) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.2),
    0 8px 24px rgba(15,80,100,0.08);
  isolation:isolate;
  contain:paint;
  transform:translateZ(0);
  transition:box-shadow .2s ease, border-color .2s ease, background .2s ease;
  animation: glassEnter .38s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--enter-delay, .14s);
}
#view-internal-db .cs-card:hover{
  z-index:2;
  border-color: color-mix(in srgb, var(--cs-color,#28b9d8) 28%, rgba(255,255,255,0.78));
  background: linear-gradient(150deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.82) 52%, rgba(248,250,251,0.88) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 10px 28px rgba(15,80,100,0.10);
}
#view-internal-db .cs-card.is-open{
  border-color: color-mix(in srgb, var(--cs-color,#28b9d8) 45%, rgba(255,255,255,0.72));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cs-color,#28b9d8) 22%, transparent);
}
#view-internal-db .cs-card.saving{opacity:.55;pointer-events:none}

#view-internal-db .cs-card-accent{
  width:88px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:20px 10px;
  background: var(--cs-bg, rgba(40,185,216,0.13));
  border-right:1px solid rgba(255,255,255,0.55);
}
#view-internal-db .cs-avatar{
  width:48px;height:48px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background: var(--cs-color, #28b9d8);
  color:#fff;font-size:14px;font-weight:800;letter-spacing:.02em;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--cs-color,#28b9d8) 55%, transparent);
}
#view-internal-db .cs-accent-label{
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color: var(--cs-color, #28b9d8);text-align:center;line-height:1.25;
}

#view-internal-db .cs-card-info{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:8px;
  padding:16px;
}
#view-internal-db .cs-card-id{
  font-size:9px;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:rgba(15,60,80,0.38);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-internal-db .cs-card-name{
  margin-top:4px;font-size:15px;font-weight:800;color:var(--ops-ink,#0f2a35);
  line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-internal-db .cs-card-service{
  margin-top:3px;font-size:10px;color:rgba(15,60,80,0.50);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-internal-db .cs-card-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
#view-internal-db .cs-pic-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:8px;
  background:rgba(255,255,255,0.60);
  font-size:10px;font-weight:600;color:rgba(15,60,80,0.65);
}
#view-internal-db .cs-pic-chip strong{color:var(--ops-ink,#0f2a35);font-weight:700}
#view-internal-db .cs-card-date{
  font-size:10px;color:rgba(15,60,80,0.38);
}

#view-internal-db .cs-card-value{
  width:148px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
  padding:16px;
  border-left:1px solid rgba(255,255,255,0.50);
}
#view-internal-db .cs-total-label{
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(15,60,80,0.40);
}
#view-internal-db .cs-total-amount{
  margin-top:4px;font-size:15px;font-weight:800;
  color: var(--cs-color, #28b9d8);
  font-variant-numeric:tabular-nums;line-height:1.2;text-align:right;
}
#view-internal-db .cs-drive-btn{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:auto;padding:6px 14px;border-radius:12px;
  background: rgba(15,35,50,0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
  color:#fff;font-size:10px;font-weight:600;text-decoration:none;
  font-family:inherit;cursor:pointer;
  transition:opacity .15s ease, box-shadow .15s ease, background .15s ease;
}
#view-internal-db .cs-drive-btn:hover{
  opacity:.94;
  background: rgba(15,35,50,0.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 6px 16px rgba(15,80,100,0.16);
}
#view-internal-db .cs-drive-btn svg{
  width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;
}
#view-internal-db .cs-deal-btn{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:auto;padding:6px 14px;border-radius:12px;
  background: var(--cs-color,#28b9d8);
  border:none;color:#fff;font-size:10px;font-weight:700;
  font-family:inherit;cursor:pointer;
}

#view-internal-db .cs-empty{
  grid-column:1 / -1;
  padding:48px 24px;border-radius:20px;text-align:center;
  background: var(--glass-fill-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px dashed var(--glass-border);
}
#view-internal-db .cs-empty p:first-child{
  margin:0;font-size:13px;font-weight:700;color:var(--ops-ink,#0f2a35);
}
#view-internal-db .cs-empty p:last-child{
  margin:6px 0 0;font-size:11px;color:rgba(15,60,80,0.45);
}

#view-internal-db .cs-footer{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:4px 2px 8px;
  font-size:11px;color:rgba(15,60,80,0.45);
}
#view-internal-db .cs-footer #leads-count{
  margin:0;font-size:11px;color:rgba(15,60,80,0.45);
}
#view-internal-db .cs-footer #leads-count strong{color:var(--ops-ink,#0f2a35);font-weight:800}
#view-internal-db #project-detail-card.glass-card{
  background: var(--glass-fill-medium);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius:20px;
}

/* Project detail — liquid glass */
#view-internal-db #project-detail-card.project-detail{
  display:none;
  margin-bottom:16px;
  padding:0;
  overflow:hidden;
  background: linear-gradient(160deg, #eef3f6 0%, #f5f8fa 45%, #eef2f7 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(15,60,80,0.08);
  box-shadow: 0 10px 32px rgba(15,80,100,0.08);
  border-radius:22px;
  isolation:isolate;
}
#view-internal-db #project-detail-card.project-detail.show{display:block}
#view-internal-db .pd-shell{padding:20px}
#view-internal-db .pd-head{
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px;
}
#view-internal-db .pd-kicker{
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(15,60,80,0.42);margin-bottom:6px;
}
#view-internal-db .pd-title h3{
  margin:0 0 6px;font-size:22px;font-weight:800;color:var(--ops-ink,#0f2a35);line-height:1.15;letter-spacing:-.02em;
}
#view-internal-db .pd-title p{
  margin:0;font-size:11px;color:rgba(15,60,80,0.52);line-height:1.5;
}
#view-internal-db .pd-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#view-internal-db .pd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 12px;border-radius:12px;cursor:pointer;
  font-size:11px;font-weight:600;font-family:inherit;text-decoration:none;
  transition:background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
#view-internal-db .pd-btn svg{
  width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;
}
#view-internal-db .pd-btn-ghost{
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.72);
  color: rgba(15,60,80,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
#view-internal-db .pd-btn-ghost:hover{background:rgba(255,255,255,0.78);color:var(--ops-ink,#0f2a35)}
#view-internal-db .pd-btn-dark{
  background: rgba(15,35,50,0.82);
  border: 1px solid rgba(255,255,255,0.14);
  color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 18px rgba(15,80,100,0.14);
}
#view-internal-db .pd-btn-dark:hover{opacity:.92}
#view-internal-db .pd-btn-dark:disabled{opacity:.6;cursor:wait}

#view-internal-db .pd-metrics{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px;
}
#view-internal-db .pd-metric{
  padding:14px;border-radius:16px;min-height:84px;
  background: #fff;
  border: 1px solid rgba(15,60,80,0.10);
  box-shadow: 0 4px 14px rgba(15,80,100,0.05);
  border-top: 3px solid var(--pd-accent,#28b9d8);
}
#view-internal-db .pd-metric span{
  display:block;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(15,60,80,0.45);margin-bottom:8px;
}
#view-internal-db .pd-metric strong{
  display:block;font-size:14px;font-weight:800;color:var(--ops-ink,#0f2a35);line-height:1.3;word-break:break-word;
}
#view-internal-db .pd-metric small{
  display:block;font-size:10px;color:rgba(15,60,80,0.48);line-height:1.45;margin-top:6px;
}

#view-internal-db .pd-panel{
  padding:16px;border-radius:18px;margin-bottom:0;
  background: #fff;
  border: 1px solid rgba(15,60,80,0.10);
  box-shadow: 0 4px 16px rgba(15,80,100,0.05);
}
#view-internal-db .pd-panel h4{
  margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ops-ink,#0f2a35);
}
#view-internal-db .pd-panel-head{margin-bottom:12px}
#view-internal-db .pd-panel-head h4{margin-bottom:4px}
#view-internal-db .pd-panel-head p{margin:0;font-size:11px;color:rgba(15,60,80,0.52);line-height:1.5}
#view-internal-db .pd-tracking{
  margin-bottom:14px;
  background: linear-gradient(160deg, #f7fbff 0%, #ffffff 48%, #f8f5ff 100%);
  border-color: rgba(40,185,216,0.18);
}
#view-internal-db .pd-progress{
  padding:14px;border-radius:14px;margin-bottom:14px;
  background: rgba(40,185,216,0.06);
  border: 1px solid rgba(40,185,216,0.16);
}
#view-internal-db .pd-progress-top{
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;
  font-size:12px;font-weight:700;color:var(--ops-ink,#0f2a35);
}
#view-internal-db .pd-progress-top span{font-variant-numeric:tabular-nums;color:rgba(15,60,80,0.55)}
#view-internal-db .pd-progress-bar{
  height:10px;border-radius:999px;overflow:hidden;background:rgba(15,60,80,0.10);
}
#view-internal-db .pd-progress-bar span{
  display:block;height:100%;border-radius:999px;
  background: linear-gradient(90deg, #28b9d8 0%, #5a8fd6 55%, #8b3c9e 100%);
}
#view-internal-db .pd-progress-note{margin:10px 0 0;font-size:11px;color:rgba(15,60,80,0.55);line-height:1.6}
#view-internal-db .pd-progress-meta{margin:8px 0 0;font-size:10px;color:rgba(15,60,80,0.40)}
#view-internal-db .pd-form .fg{margin-bottom:12px}
#view-internal-db .pd-form .fg label{
  display:block;margin-bottom:6px;font-size:11px;font-weight:700;color:rgba(15,60,80,0.55);
}
#view-internal-db .pd-form .fc{
  background: #f4f7f9;
  border: 1px solid rgba(15,60,80,0.14);
  color: var(--ops-ink,#0f2a35);
  border-radius:12px;
  box-shadow: inset 0 1px 2px rgba(15,60,80,0.04);
}
#view-internal-db .pd-form .fc:focus{
  border-color: rgba(40,185,216,0.45);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(40,185,216,0.12);
}
#view-internal-db .pd-form-actions{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
#view-internal-db .pd-hint{font-size:10px;color:rgba(15,60,80,0.42);line-height:1.45}

#view-internal-db .pd-body{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:12px;
}
#view-internal-db .pd-list{display:grid;gap:8px}
#view-internal-db .pd-item{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:10px 12px;border-radius:12px;
  background: #f4f7f9;
  border: 1px solid rgba(15,60,80,0.08);
  font-size:11px;color:rgba(15,60,80,0.55);
}
#view-internal-db .pd-item:last-child{border-bottom:1px solid rgba(15,60,80,0.08)}
#view-internal-db .pd-item span:first-child{
  color:rgba(15,60,80,0.48);font-weight:700;min-width:110px;
}
#view-internal-db .pd-item span:last-child{
  text-align:right;color:var(--ops-ink,#0f2a35);word-break:break-word;font-weight:700;
}
#view-internal-db .pd-notes{
  font-size:12px;line-height:1.7;color:var(--ops-ink,#0f2a35);white-space:pre-wrap;
  padding:12px;border-radius:12px;background:#f4f7f9;border:1px solid rgba(15,60,80,0.08);
}
#view-internal-db .quick-status-btns{gap:8px}
#view-internal-db .quick-btn{
  padding:6px 12px;border-radius:10px;font-size:11px;font-weight:700;
  border-width:1px;border-style:solid;
}

#view-internal-db .pd-log-gate{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;border-radius:18px;
  background: linear-gradient(145deg, rgba(15,35,50,0.88) 0%, rgba(15,35,50,0.72) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 28px rgba(15,80,100,0.16);
}
#view-internal-db .pd-log-gate-copy{display:flex;align-items:center;gap:12px;min-width:0}
#view-internal-db .pd-log-gate-ico{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,0.10);color:#7dd3ea;
  border:1px solid rgba(255,255,255,0.14);
}
#view-internal-db .pd-log-gate-ico svg{
  width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;
}
#view-internal-db .pd-log-gate h4{margin:0 0 4px;font-size:13px;font-weight:700;color:#fff;letter-spacing:0;text-transform:none}
#view-internal-db .pd-log-gate p{margin:0;font-size:11px;color:rgba(255,255,255,0.48);line-height:1.5}
#view-internal-db .pd-log-gate .pd-btn-dark{
  background: rgba(255,255,255,0.92);color:#0f2a35;border-color:rgba(255,255,255,0.8);flex-shrink:0;
}

#view-internal-db .pd-log-overlay{
  position:fixed;inset:0;z-index:9200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,18,26,0.42);backdrop-filter:blur(8px);
  visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .24s ease,visibility .24s ease;
}
#view-internal-db .pd-log-overlay.open{
  visibility:visible;opacity:1;pointer-events:auto;
}
#view-internal-db .pd-log-modal{
  width:min(680px,100%);max-height:min(82vh,720px);
  display:flex;flex-direction:column;overflow:hidden;border-radius:22px;
  background: linear-gradient(150deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.82) 100%);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 24px 64px rgba(15,80,100,0.22);
  transform:translateY(16px) scale(.98);
  opacity:0;
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .28s ease;
}
#view-internal-db .pd-log-overlay.open .pd-log-modal{
  transform:translateY(0) scale(1);
  opacity:1;
}
#view-internal-db .pd-log-modal-head{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:18px 20px;border-bottom:1px solid rgba(15,60,80,0.08);
}
#view-internal-db .pd-log-kicker{
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(15,60,80,0.42);margin-bottom:4px;
}
#view-internal-db .pd-log-modal-head h3{margin:0 0 4px;font-size:16px;font-weight:800;color:var(--ops-ink,#0f2a35)}
#view-internal-db .pd-log-modal-head p{margin:0;font-size:11px;color:rgba(15,60,80,0.50)}
#view-internal-db .pd-log-modal-body{
  padding:16px 20px 20px;overflow:auto;-webkit-overflow-scrolling:touch;
}
#view-internal-db .pd-log-empty{
  padding:28px 16px;text-align:center;border-radius:14px;
  border:1px dashed rgba(15,60,80,0.14);color:rgba(15,60,80,0.48);font-size:12px;
}
#view-internal-db .pd-log-modal-body .project-timeline{display:grid;gap:0}
#view-internal-db .pd-log-modal-body .timeline-item{
  position:relative;padding:0 0 16px 22px;border-left:1px solid rgba(40,185,216,0.22);
}
#view-internal-db .pd-log-modal-body .timeline-item:last-child{padding-bottom:0}
#view-internal-db .pd-log-modal-body .timeline-dot{
  position:absolute;left:-5px;top:2px;width:9px;height:9px;border-radius:50%;
  background:#28b9d8;box-shadow:0 0 0 4px rgba(40,185,216,0.14);
}
#view-internal-db .pd-log-modal-body .timeline-title{font-size:12px;font-weight:800;color:var(--ops-ink,#0f2a35);margin-bottom:4px}
#view-internal-db .pd-log-modal-body .timeline-desc{font-size:11px;color:rgba(15,60,80,0.58);line-height:1.5;margin-bottom:5px}
#view-internal-db .pd-log-modal-body .timeline-meta{font-size:10px;color:rgba(15,60,80,0.38);line-height:1.45}
#view-internal-db .pd-log-modal-body .timeline-note{
  margin-top:6px;padding:8px 10px;border-radius:10px;
  background:rgba(40,185,216,0.08);font-size:10px;color:rgba(15,60,80,0.55);line-height:1.5;
}

@media(max-width:900px){
  #view-internal-db .pd-metrics{grid-template-columns:1fr 1fr}
  #view-internal-db .pd-body{grid-template-columns:1fr}
  #view-internal-db .pd-head{flex-direction:column}
  #view-internal-db .pd-actions{width:100%;justify-content:flex-start}
}
@media(max-width:700px){
  #view-internal-db .pd-metrics{grid-template-columns:1fr}
  #view-internal-db .pd-log-gate{flex-direction:column;align-items:stretch}
  #view-internal-db .pd-log-gate .pd-btn-dark{width:100%}
  #view-internal-db .pd-item{flex-direction:column;gap:4px}
  #view-internal-db .pd-item span:last-child{text-align:left}
}

@media(max-width:1100px){
  #view-internal-db .cs-card-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  #view-internal-db .cs-status-bar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #view-internal-db .cs-stat{flex:0 0 auto;min-width:148px}
  #view-internal-db .cs-stat-all{min-width:168px}
}
@media(max-width:700px){
  #view-internal-db .cs-status-bar{flex-wrap:nowrap}
  #view-internal-db .cs-stat{
    min-width:132px;padding:14px 16px;min-height:44px;
  }
  #view-internal-db .cs-stat-all{min-width:152px}
  #view-internal-db .cs-toolbar{align-items:stretch;gap:10px}
  #view-internal-db .cs-search,
  #view-internal-db .cs-filter-pill,
  #view-internal-db .cs-sync-pill,
  #view-internal-db .cs-sync-btn{width:100%;flex:1 1 100%}
  #view-internal-db .cs-search{min-height:44px;padding:10px 14px}
  #view-internal-db .cs-search input{
    font-size:16px!important;min-height:24px;
  }
  #view-internal-db .cs-filter-pill{
    min-height:44px;padding:10px 36px 10px 14px;
  }
  #view-internal-db .cs-filter-pill select{font-size:16px!important}
  #view-internal-db .cs-sync-btn{min-height:44px;justify-content:center}
  #view-internal-db .cs-card{flex-direction:column}
  #view-internal-db .cs-card-accent{
    width:100%;flex-direction:row;justify-content:flex-start;
    padding:14px 16px;border-right:none;border-bottom:1px solid rgba(255,255,255,0.55);
  }
  #view-internal-db .cs-card-value{
    width:100%;flex-direction:row;align-items:center;justify-content:space-between;
    border-left:none;border-top:1px solid rgba(255,255,255,0.50);
  }
  #view-internal-db .cs-total-amount{margin-top:0}
  #view-internal-db .cs-drive-btn,
  #view-internal-db .cs-deal-btn{
    margin-top:0;min-height:44px;padding:10px 14px;
  }
  #view-internal-db .pd-btn,
  #view-internal-db .pd-btn-ghost,
  #view-internal-db .pd-btn-dark{
    min-height:44px;padding:10px 14px;
  }
  #view-internal-db .pd-shell{padding:16px}
  #view-internal-db .pd-head{flex-direction:column;align-items:stretch;gap:12px}
  #view-internal-db .pd-actions{width:100%;justify-content:stretch}
  #view-internal-db .pd-actions .pd-btn{flex:1 1 auto;justify-content:center}
  #view-internal-db .pd-log-overlay.open .pd-log-modal{
    width:calc(100% - 24px);
    max-height:min(82dvh,640px);
    margin:12px auto;
    border-radius:18px;
  }
}

/* ── Production Ops — liquid glass ── */
#view-production-ops .production-ops-layout{gap:14px}
#view-production-ops .production-ops-dashboard{gap:14px}

#view-production-ops .ops-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:20px;
  background: linear-gradient(160deg, #eef3f6 0%, #f5f8fa 45%, #eef2f7 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(15,60,80,0.08);
  box-shadow: 0 10px 32px rgba(15,80,100,0.08);
  isolation:isolate;
  contain:paint;
  transition: box-shadow .2s ease, border-color .2s ease;
}
#view-production-ops .ops-card::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.55) 0%, transparent 38%);
  opacity:.7;
}
#view-production-ops .ops-card > *{position:relative;z-index:1}
#view-production-ops .ops-card:hover{
  transform:none !important;
  border-color: rgba(40,185,216,0.22);
  box-shadow: 0 12px 36px rgba(15,80,100,0.10);
}

#view-production-ops .prodops-page-head{
  align-items:center;
  margin-bottom:18px;
}
#view-production-ops .prodops-page-title h3{
  font-size:18px;font-weight:800;color:var(--ops-ink,#0f2a35);letter-spacing:-.01em;
}
#view-production-ops .prodops-page-title .lead-ts{
  font-size:11px;color:rgba(15,60,80,0.52);line-height:1.55;max-width:560px;
}
#view-production-ops .prodops-page-head .btn-g{
  flex-shrink:0;
  padding:9px 16px;border-radius:12px;font-size:11px;font-weight:700;
  color:#fff;
  background: linear-gradient(145deg, rgba(15,35,50,0.92) 0%, rgba(15,35,50,0.78) 100%);
  border:1px solid rgba(15,35,50,0.20);
  box-shadow: 0 4px 14px rgba(15,35,50,0.18);
}
#view-production-ops .prodops-page-head .btn-g:hover{
  color:#fff;
  transform:translateY(-1px);
  box-shadow: 0 6px 18px rgba(15,35,50,0.22);
}

#view-production-ops .production-ops-toolbar{
  grid-template-columns:minmax(0,1.4fr) minmax(200px,.6fr);
  gap:16px;margin-bottom:0;
}
#view-production-ops .production-ops-toolbar .fg label{
  display:block;margin-bottom:6px;
  font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(15,60,80,0.42);
}
#view-production-ops .production-ops-toolbar .fc{
  width:100%;
  background:#fff;
  border:1px solid rgba(15,60,80,0.14);
  border-radius:14px;
  padding:12px 14px;
  font-size:12px;font-weight:600;color:var(--ops-ink,#0f2a35);
  box-shadow: inset 0 1px 2px rgba(15,60,80,0.04);
}
#view-production-ops .production-ops-toolbar .fc:focus{
  border-color:rgba(40,185,216,0.45);
  box-shadow:0 0 0 3px rgba(40,185,216,0.12);
}
#view-production-ops .production-ops-filter-row{gap:8px}
#view-production-ops .production-ops-filter{
  padding:10px 18px;border-radius:999px;
  font-size:11px;font-weight:700;
  color:rgba(15,60,80,0.55);
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(15,60,80,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
#view-production-ops .production-ops-filter:hover{
  color:var(--ops-ink,#0f2a35);
  border-color:rgba(40,185,216,0.28);
}
#view-production-ops .production-ops-filter.active{
  color:#fff;
  background:linear-gradient(145deg, rgba(15,35,50,0.92) 0%, rgba(15,35,50,0.78) 100%);
  border-color:transparent;
  box-shadow:0 4px 14px rgba(15,35,50,0.18);
}

#view-production-ops .prodops-section-divider{
  height:1px;margin:18px 0 20px;
  background:linear-gradient(90deg, transparent, rgba(15,60,80,0.10) 12%, rgba(15,60,80,0.10) 88%, transparent);
}

#view-production-ops .prodops-summary-top{
  margin-bottom:20px;
  animation:opsReveal .42s cubic-bezier(.22,1,.36,1) both;
}
#view-production-ops .prodops-summary-title h3{
  font-size:22px;font-weight:800;color:var(--ops-ink,#0f2a35);letter-spacing:-.02em;
}
#view-production-ops .prodops-summary-title p{
  font-size:11px;color:rgba(15,60,80,0.52);margin-top:5px;
}
#view-production-ops .prodops-badge{
  padding:6px 12px;border-radius:999px;
  font-size:9px;font-weight:800;letter-spacing:.08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}

#view-production-ops .prodops-summary-grid{
  grid-template-columns:180px minmax(0,1fr);
  gap:24px;align-items:center;
}
#view-production-ops .prodops-donut{
  position:relative;
  width:168px;height:168px;
  margin:auto;
  display:grid;place-items:center;
  background:none;
  border-radius:0;
  box-shadow:none;
  animation:prodopsPop .45s cubic-bezier(.22,1,.36,1) both;
  animation-delay:.04s;
}
#view-production-ops .prodops-donut-svg{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;
  overflow:visible;
}
#view-production-ops .prodops-donut-track{
  stroke:rgba(15,60,80,0.10);
}
#view-production-ops .prodops-donut-seg{
  transition:stroke-dasharray .95s cubic-bezier(.22,1,.36,1);
}
@keyframes prodopsPop{
  from{opacity:0;transform:scale(.92)}
  to{opacity:1;transform:scale(1)}
}
#view-production-ops .prodops-donut-inner{
  position:relative;z-index:1;
  width:118px;height:118px;
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(180deg,#fff 0%, #f8fafb 100%);
  border:1px solid rgba(15,60,80,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}
#view-production-ops .prodops-donut-inner strong{
  font-size:32px;font-weight:900;color:var(--ops-ink,#0f2a35);letter-spacing:-.03em;
}
#view-production-ops .prodops-donut-inner span{
  font-size:9px;font-weight:800;letter-spacing:.12em;color:rgba(15,60,80,0.42);
}
#view-production-ops .prodops-donut-meta{
  font-size:10px;color:rgba(15,60,80,0.48);line-height:1.55;margin-top:12px;padding:0 4px;
}

#view-production-ops .prodops-bars{gap:10px}
#view-production-ops .prodops-bar-row{
  grid-template-columns:minmax(120px,160px) 1fr 44px;
  gap:10px;
  animation:opsReveal .38s cubic-bezier(.22,1,.36,1) both;
}
#view-production-ops .prodops-bar-row:nth-child(1){animation-delay:.08s}
#view-production-ops .prodops-bar-row:nth-child(2){animation-delay:.12s}
#view-production-ops .prodops-bar-row:nth-child(3){animation-delay:.16s}
#view-production-ops .prodops-bar-row:nth-child(4){animation-delay:.20s}
#view-production-ops .prodops-bar-row:nth-child(5){animation-delay:.24s}
#view-production-ops .prodops-bar-row:nth-child(6){animation-delay:.28s}
#view-production-ops .prodops-bar-row:nth-child(7){animation-delay:.32s}
#view-production-ops .prodops-bar-row:nth-child(n+8){animation-delay:.36s}
#view-production-ops .prodops-bar-label{
  font-size:11px;font-weight:700;color:rgba(15,60,80,0.62);
}
#view-production-ops .prodops-bar{
  height:10px;
  background:rgba(15,60,80,0.08);
  border-radius:999px;
}
#view-production-ops .prodops-bar span{
  display:block;height:100%;border-radius:999px;
  transform-origin:left center;
  animation:prodopsBarGrow .85s cubic-bezier(.22,1,.36,1) both;
}
@keyframes prodopsBarGrow{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
#view-production-ops .prodops-bar-val{
  font-size:11px;font-weight:800;color:var(--ops-ink,#0f2a35);
  font-variant-numeric:tabular-nums;
}

#view-production-ops .prodops-note{
  margin-top:18px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(15,60,80,0.08);
  font-size:10px;color:rgba(15,60,80,0.52);line-height:1.6;
  animation:opsReveal .42s cubic-bezier(.22,1,.36,1) .34s both;
}

#view-production-ops .prodops-dept-heading{
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(15,60,80,0.42);margin-bottom:14px;
}
#view-production-ops .prodops-dept-scroll{
  padding-bottom:12px;
  scrollbar-color:rgba(40,185,216,0.35) transparent;
}
#view-production-ops .prodops-dept-scroll::-webkit-scrollbar-thumb{
  background:rgba(40,185,216,0.30);
}
#view-production-ops .prodops-dept-row{gap:12px}

#view-production-ops .prodops-dept-card{
  width:252px;flex:0 0 252px;min-height:252px;
  padding:16px 16px 14px;border-radius:18px;
  /* Soft accent wash (billing-card vibe) — bukan strip tipis di atas */
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--po-accent,#28b9d8) 22%, transparent) 0%, transparent 55%),
    linear-gradient(165deg,
      color-mix(in srgb, var(--po-accent,#28b9d8) 16%, #fff) 0%,
      #ffffff 48%,
      #f7fafb 100%);
  border:1px solid color-mix(in srgb, var(--po-accent,#28b9d8) 26%, rgba(15,60,80,0.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 8px 22px color-mix(in srgb, var(--po-accent,#28b9d8) 14%, rgba(15,80,100,0.05));
  isolation:isolate;contain:paint;
  animation:opsReveal .42s cubic-bezier(.22,1,.36,1) both;
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease,background .2s ease;
}
#view-production-ops .prodops-dept-card:nth-child(7n+1){--po-accent:#28b9d8}
#view-production-ops .prodops-dept-card:nth-child(7n+2){--po-accent:#10b981}
#view-production-ops .prodops-dept-card:nth-child(7n+3){--po-accent:#14b8a6}
#view-production-ops .prodops-dept-card:nth-child(7n+4){--po-accent:#3b82f6}
#view-production-ops .prodops-dept-card:nth-child(7n+5){--po-accent:#8b5cf6}
#view-production-ops .prodops-dept-card:nth-child(7n+6){--po-accent:#06b6d4}
#view-production-ops .prodops-dept-card:nth-child(7n){--po-accent:#94a3b8}
#view-production-ops .prodops-dept-card:nth-child(1){animation-delay:.04s}
#view-production-ops .prodops-dept-card:nth-child(2){animation-delay:.08s}
#view-production-ops .prodops-dept-card:nth-child(3){animation-delay:.12s}
#view-production-ops .prodops-dept-card:nth-child(4){animation-delay:.16s}
#view-production-ops .prodops-dept-card:nth-child(5){animation-delay:.20s}
#view-production-ops .prodops-dept-card:nth-child(6){animation-delay:.24s}
#view-production-ops .prodops-dept-card:nth-child(7){animation-delay:.28s}
#view-production-ops .prodops-dept-card:nth-child(n+8){animation-delay:.32s}
#view-production-ops .prodops-dept-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--po-accent,#28b9d8) 42%, rgba(15,60,80,0.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 14px 32px color-mix(in srgb, var(--po-accent,#28b9d8) 22%, rgba(15,80,100,0.06));
}

#view-production-ops .prodops-dept-top{
  display:flex;justify-content:space-between;align-items:flex-start;
}
#view-production-ops .prodops-dept-pct{
  order:1;
  font-size:24px;font-weight:900;color:var(--ops-ink,#0f2a35);letter-spacing:-.03em;
}
#view-production-ops .prodops-dept-icon{
  order:2;
  width:42px;height:42px;border-radius:14px;
  background:var(--po-accent,#28b9d8);
  color:#fff;
  border:none;
  box-shadow:0 4px 14px color-mix(in srgb, var(--po-accent,#28b9d8) 55%, transparent);
}
#view-production-ops .prodops-dept-name{
  font-size:14px;font-weight:800;color:var(--ops-ink,#0f2a35);
}
#view-production-ops .prodops-dept-pic{
  font-size:10px;color:rgba(15,60,80,0.48);
}
#view-production-ops .prodops-dept-status{
  font-size:9px;font-weight:800;letter-spacing:.04em;
  padding:5px 10px;
}
#view-production-ops .prodops-dept-bar{
  height:6px;background:rgba(15,60,80,0.08);margin-top:4px;
}
#view-production-ops .prodops-dept-bar span{
  transform-origin:left center;
  background:linear-gradient(90deg, color-mix(in srgb, var(--po-accent,#28b9d8) 50%, transparent), var(--po-accent,#28b9d8)) !important;
  animation:prodopsBarGrow .75s cubic-bezier(.22,1,.36,1) both;
  animation-delay:.12s;
}
#view-production-ops .prodops-folder-btn{
  padding:8px 12px;border-radius:10px;font-size:10px;font-weight:700;
  color:#fff;
  background:linear-gradient(145deg, rgba(15,35,50,0.92) 0%, rgba(15,35,50,0.78) 100%);
  border:1px solid rgba(15,35,50,0.16);
}
#view-production-ops .prodops-folder-btn:hover{
  opacity:1;transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,35,50,0.18);
}
#view-production-ops .prodops-dept-time{
  font-size:9px;color:rgba(15,60,80,0.38);
}
#view-production-ops .prodops-dept-edit-btn{
  font-size:10px;font-weight:700;color:#0f6f86;
}
#view-production-ops .prodops-dept-edit-btn:hover{color:#28b9d8}
#view-production-ops .prodops-dept-edit{
  border-top:1px solid rgba(15,60,80,0.08);
  margin-top:10px;padding-top:12px;
}
#view-production-ops .prodops-dept-edit .fc{
  background:#f4f7f9;
  border:1px solid rgba(15,60,80,0.12);
  border-radius:10px;color:var(--ops-ink,#0f2a35);
}
#view-production-ops .prodops-dept-edit .fc:focus{
  border-color:rgba(40,185,216,0.45);
  box-shadow:0 0 0 3px rgba(40,185,216,0.10);
}
#view-production-ops .prodops-dept-card.is-locked{
  --po-accent:#10b981;
  border-color:rgba(16,185,129,0.32);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(16,185,129,0.22) 0%, transparent 55%),
    linear-gradient(165deg, rgba(16,185,129,0.14) 0%, #fff 48%, #f7fafb 100%);
}
#view-production-ops .prodops-dept-card.is-locked .prodops-dept-pct{color:#059669}
#view-production-ops .prodops-dept-card.is-locked .prodops-dept-icon{
  background:#10b981;
  box-shadow:0 4px 14px rgba(16,185,129,0.45);
}
#view-production-ops .prodops-dept-lock-note{color:#059669;font-size:10px;font-weight:600}

#view-production-ops .prodops-empty{
  padding:40px 20px;border-radius:18px;
  background:rgba(255,255,255,0.55);
  border:1px dashed rgba(15,60,80,0.16);
  color:rgba(15,60,80,0.48);font-size:12px;
}

@media (prefers-reduced-motion:reduce){
  #view-production-ops .prodops-donut,
  #view-production-ops .prodops-summary-top,
  #view-production-ops .prodops-bar-row,
  #view-production-ops .prodops-note,
  #view-production-ops .prodops-dept-card,
  #view-production-ops .prodops-bar span,
  #view-production-ops .prodops-dept-bar span{
    animation:none !important;
    transform:none !important;
  }
  #view-production-ops .prodops-donut-seg,
  #view-production-ops .prodops-donut-inner{
    transition:none !important;
  }
}

@media(max-width:900px){
  #view-production-ops .production-ops-toolbar{grid-template-columns:1fr}
  #view-production-ops .prodops-summary-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  #view-production-ops .prodops-donut-meta{text-align:center}
  #view-production-ops .prodops-summary-top{flex-direction:column;align-items:flex-start}
  #view-production-ops .prodops-badges{justify-content:flex-start}
}
@media(max-width:700px){
  /* Fase 2 — Production Ops phone */
  #view-production-ops .ops-card{
    padding:12px;border-radius:14px;
    background:#fff!important;
    box-shadow:0 4px 14px rgba(15,80,100,0.05)!important;
  }
  #view-production-ops .ops-card::before{opacity:.35}
  #view-production-ops .prodops-page-head{
    flex-direction:column;align-items:stretch;gap:8px;margin-bottom:10px;
  }
  #view-production-ops .prodops-page-title h3{font-size:15px}
  #view-production-ops .prodops-page-title .lead-ts{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-size:10px;
  }
  #view-production-ops .prodops-page-head .btn-g{
    width:100%;min-height:40px;justify-content:center;padding:8px 12px;font-size:10px;
  }
  #view-production-ops .production-ops-toolbar{grid-template-columns:1fr;gap:8px}
  #view-production-ops .production-ops-toolbar .fc{
    font-size:16px!important;
    min-height:44px;
    padding:12px 14px;
  }
  #view-production-ops .production-ops-filter-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:6px;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  #view-production-ops .production-ops-filter-row::-webkit-scrollbar{display:none}
  #view-production-ops .production-ops-filter{
    flex:0 0 auto;
    min-height:36px;
    padding:8px 12px;
    display:inline-flex;align-items:center;
    font-size:10px;
  }
  #view-production-ops .prodops-section-divider{margin:10px 0 12px}

  /* Summary: compact donut + dense bar rows */
  #view-production-ops .prodops-summary-top{
    margin-bottom:10px;gap:8px;
  }
  #view-production-ops .prodops-summary-title h3{
    font-size:17px;line-height:1.15;
  }
  #view-production-ops .prodops-summary-title p{
    font-size:10px;margin-top:3px;line-height:1.4;
  }
  #view-production-ops .prodops-badge{
    padding:4px 8px;font-size:8px;letter-spacing:.06em;
  }
  #view-production-ops .prodops-summary-grid{
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:10px 12px!important;
    align-items:center;
    justify-items:stretch!important;
    text-align:left!important;
  }
  #view-production-ops .prodops-summary-grid > div:first-child{
    display:flex;flex-direction:column;align-items:center;gap:0;
  }
  #view-production-ops .prodops-donut,
  #view-production-ops .prodops-donut-svg{
    width:84px!important;height:84px!important;max-width:84px;margin:0;
  }
  #view-production-ops .prodops-donut-inner{
    width:56px!important;height:56px!important;
  }
  #view-production-ops .prodops-donut-inner strong{font-size:15px}
  #view-production-ops .prodops-donut-inner span{
    font-size:6px;letter-spacing:.04em;margin-top:1px;
  }
  #view-production-ops .prodops-donut-meta{
    display:none;
  }
  #view-production-ops .prodops-bars{gap:5px;width:100%;min-width:0}
  #view-production-ops .prodops-bar-row{
    grid-template-columns:68px minmax(0,1fr) 30px!important;
    gap:4px 6px!important;
    align-items:center;
  }
  #view-production-ops .prodops-bar-label{
    grid-column:auto!important;
    font-size:9px!important;
    font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  #view-production-ops .prodops-bar{
    grid-column:auto!important;
    height:4px!important;
  }
  #view-production-ops .prodops-bar-val{
    grid-column:auto!important;
    font-size:9px!important;
    text-align:right;
  }
  #view-production-ops .prodops-note{
    margin-top:8px;font-size:9px;line-height:1.4;
  }

  /* Dept cards: compact horizontal carousel */
  #view-production-ops .prodops-dept-scroll{
    overflow-x:auto!important;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
    margin:0 -4px;
    padding-left:4px;
    padding-right:4px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  #view-production-ops .prodops-dept-scroll::-webkit-scrollbar{display:none}
  #view-production-ops .prodops-dept-row{
    display:inline-flex!important;
    flex-direction:row!important;
    align-items:stretch;
    gap:10px;
    min-width:100%;
    width:max-content;
  }
  #view-production-ops .prodops-dept-card{
    width:196px!important;
    flex:0 0 196px!important;
    min-height:0!important;
    max-width:196px;
    padding:12px 12px 10px!important;
    border-radius:14px!important;
    gap:8px;
    scroll-snap-align:start;
    background:#fff!important;
    border:1px solid rgba(15,60,80,0.10)!important;
    box-shadow:0 4px 14px rgba(15,80,100,0.06)!important;
  }
  #view-production-ops .prodops-dept-card.is-locked{
    background:#fff!important;
    border-color:rgba(16,185,129,0.28)!important;
  }
  #view-production-ops .prodops-dept-card.is-editing{
    width:min(300px,86vw)!important;
    flex-basis:min(300px,86vw)!important;
    max-width:min(300px,86vw);
  }
  #view-production-ops .prodops-dept-pct{font-size:18px!important}
  #view-production-ops .prodops-dept-icon{
    width:32px!important;height:32px!important;border-radius:10px!important;
    box-shadow:0 2px 8px color-mix(in srgb, var(--po-accent,#28b9d8) 40%, transparent)!important;
  }
  #view-production-ops .prodops-dept-icon svg{width:15px;height:15px}
  #view-production-ops .prodops-dept-name{font-size:12px!important;line-height:1.25}
  #view-production-ops .prodops-dept-pic{font-size:9px!important}
  #view-production-ops .prodops-dept-status{
    font-size:8px!important;padding:3px 8px!important;
  }
  #view-production-ops .prodops-dept-lock-note{font-size:9px!important;margin-top:4px}
  #view-production-ops .prodops-dept-bar{height:4px!important;margin-top:2px}
  #view-production-ops .prodops-dept-foot{
    flex-direction:row;
    align-items:center;
    gap:6px;
    padding-top:4px;
  }
  #view-production-ops .prodops-dept-time{
    white-space:nowrap;
    font-size:8px!important;
  }
  #view-production-ops .prodops-folder-btn{
    min-height:32px;
    padding:6px 10px!important;
    border-radius:8px!important;
    font-size:9px!important;
  }
  #view-production-ops .prodops-folder-btn svg{width:12px;height:12px}
  #view-production-ops .prodops-dept-edit-btn{
    width:auto;
    min-height:0;
    margin-top:2px;
    padding:0;
    font-size:9px!important;
    text-align:left;
  }
  /* Drill-down edit form: compact, tetap hide sampai .is-editing */
  #view-production-ops .prodops-dept-edit{
    display:none!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px 8px!important;
    margin-top:8px!important;
    padding-top:8px!important;
    border-top:1px solid rgba(15,60,80,0.08);
  }
  #view-production-ops .prodops-dept-card.is-editing .prodops-dept-edit{
    display:grid!important;
  }
  #view-production-ops .prodops-dept-edit .fg{
    margin:0!important;
    min-width:0;
  }
  #view-production-ops .prodops-dept-edit .fg:nth-child(3),
  #view-production-ops .prodops-dept-edit .fg:nth-child(4),
  #view-production-ops .prodops-dept-edit-actions{
    grid-column:1 / -1;
  }
  #view-production-ops .prodops-dept-edit .fg label{
    display:block;
    margin:0 0 3px;
    font-size:8px!important;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:rgba(15,60,80,0.42);
  }
  #view-production-ops .prodops-dept-edit .fc{
    font-size:16px!important;
    min-height:36px!important;
    padding:6px 10px!important;
    border-radius:8px!important;
    line-height:1.25;
  }
  #view-production-ops .prodops-dept-edit-actions{
    display:flex;
    flex-direction:row;
    gap:6px;
    margin-top:2px!important;
  }
  #view-production-ops .prodops-dept-edit-actions .btn-p,
  #view-production-ops .prodops-dept-edit-actions .btn-g{
    width:100%;
    min-height:36px!important;
    padding:8px 10px!important;
    justify-content:center;
    font-size:11px!important;
    border-radius:8px;
  }
}

/* ── Billing & Invoices — liquid glass ── */
#view-doc-gen .bi-card-grid{margin:0}
#view-doc-gen .bi-layout{
  display:grid;
  gap:0;
  row-gap:0;
  min-width:0;
  position:relative;
}
#view-doc-gen .bi-filter-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;
}

#view-doc-gen .bi-access-gate{
  text-align:center;padding:40px 24px;border-radius:22px;
  background:linear-gradient(150deg, rgba(255,255,255,0.78) 0%, rgba(245,248,250,0.92) 100%);
  border:1px solid rgba(255,255,255,0.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 10px 28px rgba(15,80,100,0.08);
}
#view-doc-gen .bi-access-gate h3{color:var(--ops-ink,#0f2a35);margin-bottom:8px}
#view-doc-gen .bi-access-gate p{color:rgba(15,60,80,0.52);font-size:12px;margin-bottom:18px}

#view-doc-gen .bi-finance-banner{
  display:flex;align-items:stretch;overflow:hidden;border-radius:22px;
  margin:0 0 14px;
  background:rgba(15,35,50,0.62);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.10),0 8px 32px rgba(15,80,100,0.18);
  animation:opsReveal .38s cubic-bezier(.22,1,.36,1) both;
}
#view-doc-gen .bi-finance-left,
#view-doc-gen .bi-finance-mid,
#view-doc-gen .bi-finance-right{
  display:flex;align-items:center;gap:20px;padding:20px 24px;
}
#view-doc-gen .bi-finance-left{flex:1 1 auto;min-width:0}
#view-doc-gen .bi-finance-mid{flex:0 1 auto;gap:24px}
#view-doc-gen .bi-finance-right{flex-shrink:0}
#view-doc-gen .bi-finance-divider{
  width:1px;align-self:stretch;margin:20px 0;background:rgba(255,255,255,0.10);flex-shrink:0;
}
#view-doc-gen .bi-finance-mid-divider{
  width:1px;height:40px;background:rgba(255,255,255,0.10);flex-shrink:0;
}
#view-doc-gen .bi-mini-donut{
  position:relative;width:96px;height:96px;flex-shrink:0;
}
#view-doc-gen .bi-mini-donut-svg{width:100%;height:100%;display:block}
#view-doc-gen .bi-mini-donut-track{stroke:rgba(255,255,255,0.12)}
#view-doc-gen .bi-mini-donut-seg{transition:stroke-dasharray .9s cubic-bezier(.22,1,.36,1)}
#view-doc-gen .bi-mini-donut-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;
}
#view-doc-gen .bi-mini-donut-center strong{font-size:15px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
#view-doc-gen .bi-mini-donut-center span{
  margin-top:3px;font-size:7px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.45);
}
#view-doc-gen .bi-finance-label{
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.42);
}
#view-doc-gen .bi-finance-value{
  margin-top:4px;font-size:26px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1.1;
}
#view-doc-gen .bi-finance-sub{margin-top:4px;font-size:11px;color:rgba(255,255,255,0.42)}
#view-doc-gen .bi-finance-metric{display:flex;align-items:center;gap:10px}
#view-doc-gen .bi-finance-ico{
  width:28px;height:28px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
#view-doc-gen .bi-finance-ico svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
#view-doc-gen .bi-finance-ico.is-ok{background:rgba(74,222,128,0.18);color:#4ade80}
#view-doc-gen .bi-finance-ico.is-warn{background:rgba(251,191,36,0.18);color:#fbbf24}
#view-doc-gen .bi-finance-metric-val{margin-top:3px;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
#view-doc-gen .bi-finance-metric-val.is-ok{color:#4ade80}
#view-doc-gen .bi-finance-metric-val.is-warn{color:#fbbf24}
#view-doc-gen .bi-export-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:14px;border:none;cursor:pointer;
  background:rgba(255,255,255,0.92);color:#0f2a35;
  font-size:11px;font-weight:700;font-family:inherit;
  box-shadow:0 2px 16px rgba(0,0,0,0.18);
  transition:transform .15s ease,box-shadow .15s ease;
}
#view-doc-gen .bi-export-btn:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(0,0,0,0.22)}
#view-doc-gen .bi-export-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}

#view-doc-gen .bi-filter-strip{
  display:flex;overflow:hidden;border-radius:22px;
  margin:0 0 14px;
  background:rgba(255,255,255,0.38);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,0.78);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,0.2),0 8px 32px rgba(15,80,100,0.10);
  animation:opsReveal .35s cubic-bezier(.22,1,.36,1) .10s both;
}
#view-doc-gen .bi-filter-tab{
  position:relative;
  display:flex;align-items:center;gap:10px;
  flex:1 1 0;min-width:0;
  padding:14px 12px;border:none;background:transparent;
  font:inherit;color:inherit;cursor:pointer;text-align:left;
  transition:background .18s ease;
}
#view-doc-gen .bi-filter-tab + .bi-filter-tab{border-left:1px solid rgba(255,255,255,0.50)}
#view-doc-gen .bi-filter-all{flex:0 0 auto;padding:14px 20px;gap:10px}
#view-doc-gen .bi-filter-all.is-active{background:rgba(15,35,50,0.08)}
#view-doc-gen .bi-filter-all.is-active::after{
  content:"";position:absolute;left:18%;right:18%;bottom:6px;height:2.5px;border-radius:999px;
  background:rgba(15,60,80,0.35);
}
#view-doc-gen .bi-filter-all-badge{
  width:28px;height:28px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(15,60,80,0.08);color:rgba(15,60,80,0.55);font-size:13px;font-weight:800;
}
#view-doc-gen .bi-filter-all-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
#view-doc-gen .bi-filter-all-label{
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(15,60,80,0.40);
}
#view-doc-gen .bi-filter-all-sub{font-size:11px;font-weight:600;color:rgba(15,60,80,0.60)}
#view-doc-gen .bi-filter-tab.is-active{background:var(--bi-bg,rgba(40,185,216,0.12))}
#view-doc-gen .bi-filter-tab.is-active::after{
  content:"";position:absolute;left:16%;right:16%;bottom:5px;height:2.5px;border-radius:999px;
  background:var(--bi-color,#28b9d8);
}
#view-doc-gen .bi-filter-ico{
  width:32px;height:32px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bi-bg,rgba(40,185,216,0.12));color:var(--bi-color,#28b9d8);
}
#view-doc-gen .bi-filter-tab.is-active .bi-filter-ico{
  background:var(--bi-color,#28b9d8);color:#fff;
  box-shadow:0 4px 12px color-mix(in srgb, var(--bi-color,#28b9d8) 40%, transparent);
}
#view-doc-gen .bi-filter-ico svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#view-doc-gen .bi-filter-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
#view-doc-gen .bi-filter-label{
  font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(15,60,80,0.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-doc-gen .bi-filter-count{
  font-size:15px;font-weight:800;color:#0f2a35;font-variant-numeric:tabular-nums;line-height:1.1;
}
#view-doc-gen .bi-filter-tab.is-active .bi-filter-count{color:var(--bi-color,#28b9d8)}

#view-doc-gen .bi-toolbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;
  animation:opsReveal .32s cubic-bezier(.22,1,.36,1) .18s both;
}
#view-doc-gen .bi-search{
  flex:1 1 240px;min-width:0;
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:14px;
  background:rgba(255,255,255,0.28);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,0.72);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.95),inset 0 -1px 0 rgba(255,255,255,0.15),0 8px 32px rgba(15,80,100,0.10);
}
#view-doc-gen .bi-search-ico{color:rgba(15,60,80,0.40);display:inline-flex}
#view-doc-gen .bi-search-ico svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round}
#view-doc-gen .bi-search input{
  flex:1;min-width:0;border:none;background:transparent;outline:none;
  font-size:12px;font-weight:500;color:#0f2a35;font-family:inherit;
}
#view-doc-gen .bi-search input::placeholder{color:rgba(15,60,80,0.40)}
#view-doc-gen .bi-filter-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:14px;
  background:rgba(255,255,255,0.38);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,0.78);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),0 4px 16px rgba(15,80,100,0.06);
  font-size:11px;font-weight:600;color:rgba(15,60,80,0.55);
}
#view-doc-gen .bi-filter-chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
#view-doc-gen .bi-sync-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:14px;
  background:rgba(255,255,255,0.28);
  border:1px solid rgba(255,255,255,0.72);
  font-size:11px;color:rgba(15,60,80,0.50);font-weight:500;
}
#view-doc-gen .bi-sync-dot{
  width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,0.16);
}
#view-doc-gen .bi-sync-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 14px;border-radius:14px;border:none;cursor:pointer;
  background:linear-gradient(145deg, rgba(15,35,50,0.92) 0%, rgba(15,35,50,0.78) 100%);
  color:#fff;font-size:11px;font-weight:700;font-family:inherit;
  box-shadow:0 4px 14px rgba(15,35,50,0.18);
}
#view-doc-gen .bi-sync-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
#view-doc-gen .bi-sync-btn:hover{transform:translateY(-1px)}

#view-doc-gen .bi-card-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  isolation:isolate;
}
#view-doc-gen .bi-card{
  position:relative;z-index:1;
  display:flex;align-items:stretch;overflow:hidden;border-radius:22px;
  background:rgba(255,255,255,0.38);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,0.78);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,0.2),0 8px 32px rgba(15,80,100,0.10);
  isolation:isolate;
  min-width:0;
  animation:opsReveal .38s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--enter-delay,.24s);
  transition:box-shadow .2s ease,border-color .2s ease;
}
#view-doc-gen .bi-card:hover{
  z-index:2;
  border-color:color-mix(in srgb, var(--bi-color,#28b9d8) 28%, rgba(255,255,255,0.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 12px 28px rgba(15,80,100,0.10);
}
#view-doc-gen .bi-card-accent{
  width:80px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:20px 8px;
  background:var(--bi-bg,rgba(40,185,216,0.12));
  border-right:1px solid rgba(255,255,255,0.55);
}
#view-doc-gen .bi-card-ico{
  width:44px;height:44px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bi-color,#28b9d8);color:#fff;
  box-shadow:0 4px 14px color-mix(in srgb, var(--bi-color,#28b9d8) 55%, transparent);
}
#view-doc-gen .bi-card-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#view-doc-gen .bi-card-status{
  font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center;
  color:var(--bi-color,#28b9d8);line-height:1.25;padding:0 4px;
}
#view-doc-gen .bi-card-main{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:10px;
  padding:16px;
  overflow:hidden;
}
#view-doc-gen .bi-card-info{min-width:0}
#view-doc-gen .bi-card-id{
  font-size:9px;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:rgba(15,60,80,0.35);letter-spacing:.02em;
}
#view-doc-gen .bi-card-name{
  margin-top:2px;font-size:15px;font-weight:800;color:#0f2a35;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-doc-gen .bi-card-email,
#view-doc-gen .bi-card-cat{
  margin-top:2px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-doc-gen .bi-card-email{color:rgba(15,60,80,0.45)}
#view-doc-gen .bi-card-cat{color:rgba(15,60,80,0.38)}
#view-doc-gen .bi-reject-note{margin-top:6px;font-size:10px;color:#e63756;line-height:1.4}
#view-doc-gen .bi-pending-note{margin-top:6px;font-size:10px;color:#28b9d8;line-height:1.4}
#view-doc-gen .bi-card-progress{
  min-width:0;width:100%;
  overflow:hidden;
}
#view-doc-gen .bi-progress-top{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;
  font-size:10px;font-weight:600;color:rgba(15,60,80,0.50);
  min-width:0;
}
#view-doc-gen .bi-progress-top > span{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#view-doc-gen .bi-progress-top > strong{
  flex:0 0 auto;
  color:var(--bi-color,#28b9d8);font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#view-doc-gen .bi-paid-note{font-weight:500;opacity:.85}
#view-doc-gen .bi-progress-bar{
  height:6px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,0.55);
  width:100%;
}
#view-doc-gen .bi-progress-bar span{
  display:block;height:100%;max-width:100%;border-radius:999px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--bi-color,#28b9d8) 55%, transparent), var(--bi-color,#28b9d8));
  transform-origin:left center;
  animation:prodopsBarGrow .75s cubic-bezier(.22,1,.36,1) both;
}
#view-doc-gen .bi-stage-wrap{margin-top:8px;min-width:0;width:100%}
#view-doc-gen .bi-stage-wrap .status-select{
  width:100%;max-width:100%;font-size:10px;font-weight:700;padding:6px 10px;border-radius:10px;
}
#view-doc-gen .bi-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
#view-doc-gen .bi-chips{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
#view-doc-gen .bi-chip{display:flex;flex-direction:column;gap:2px;min-width:0}
#view-doc-gen .bi-chip span{
  font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(15,60,80,0.40);
}
#view-doc-gen .bi-chip strong{
  font-size:12px;font-weight:800;color:#0f2a35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-doc-gen .bi-chip strong.is-accent{color:var(--bi-color,#28b9d8)}
#view-doc-gen .bi-chip strong.is-pic{font-weight:600;text-transform:capitalize}
#view-doc-gen .bi-chip-div{width:1px;height:28px;background:rgba(255,255,255,0.55);flex-shrink:0}
#view-doc-gen .bi-card-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
#view-doc-gen .bi-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;border-radius:12px;border:1px solid transparent;
  font-size:10px;font-weight:600;font-family:inherit;text-decoration:none;cursor:pointer;
  transition:opacity .15s ease,transform .15s ease;
}
#view-doc-gen .bi-btn:hover{opacity:.88;transform:translateY(-1px)}
#view-doc-gen .bi-btn svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
#view-doc-gen .bi-btn-pdf{
  background:rgba(40,185,216,0.14);color:#0ea5e9;border-color:rgba(40,185,216,0.28);
}
#view-doc-gen .bi-btn-buat{
  background:rgba(217,119,6,0.12);color:#d97706;border-color:rgba(217,119,6,0.24);
}
#view-doc-gen .bi-btn-pay{
  background:rgba(15,35,50,0.80);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#fff;border-color:rgba(255,255,255,0.12);
}

#view-doc-gen .bi-empty{
  grid-column:1/-1;padding:40px 20px;text-align:center;border-radius:18px;
  border:1px dashed rgba(15,60,80,0.16);background:rgba(255,255,255,0.35);
  color:rgba(15,60,80,0.48);font-size:12px;
}
#view-doc-gen .bi-footer{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:4px 2px 8px;font-size:11px;color:rgba(15,60,80,0.45);
}
#view-doc-gen .bi-footer-note{color:rgba(15,60,80,0.35)}

/* Portal to body so overlay covers navbar + ops header */
body.pay-modal-open #lg-nav{z-index:90}
body.pay-modal-open #loading{z-index:13000}
body > .pay-modal-overlay,
#view-doc-gen .pay-modal-overlay{
  z-index:12000;
  background:rgba(8,22,32,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  padding:20px 16px;
}
body > .pay-modal-overlay .pay-modal,
#view-doc-gen .pay-modal{
  width:min(520px,100%);
  max-height:min(88vh,760px);
  border-radius:24px;
  background:linear-gradient(165deg, rgba(255,255,255,0.97) 0%, rgba(248,251,252,0.96) 100%);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,0.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 28px 72px rgba(8,28,38,0.38);
  color:#0f2a35;
  font-family:var(--font-family);
  transform:translateY(12px);
  opacity:0;
  transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .38s ease;
}
body > .pay-modal-overlay.open .pay-modal,
#view-doc-gen .pay-modal-overlay.open .pay-modal{
  transform:translateY(0);
  opacity:1;
}
#view-doc-gen .pay-modal.glass-enter{animation:none}
body > .pay-modal-overlay .pay-modal-header,
#view-doc-gen .pay-modal-header{
  padding:22px 24px 0;
  align-items:flex-start;
  gap:12px;
}
body > .pay-modal-overlay .pay-modal-title-wrap,
#view-doc-gen .pay-modal-title-wrap{min-width:0}
body > .pay-modal-overlay .pay-modal-kicker,
#view-doc-gen .pay-modal-kicker{
  display:block;margin:0 0 4px;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(40,185,216,0.95);
}
body > .pay-modal-overlay .pay-modal-header h3,
#view-doc-gen .pay-modal-header h3{
  margin:0;font-size:18px;font-weight:800;letter-spacing:-0.02em;color:#0f2a35;
}
body > .pay-modal-overlay .pay-modal-close,
#view-doc-gen .pay-modal-close{
  width:36px;height:36px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(15,60,80,0.06);
  border:1px solid rgba(15,60,80,0.12);
  color:rgba(15,60,80,0.55);font-size:22px;line-height:1;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
body > .pay-modal-overlay .pay-modal-close:hover,
#view-doc-gen .pay-modal-close:hover{
  background:rgba(15,60,80,0.10);color:#0f2a35;border-color:rgba(15,60,80,0.18);
}
body > .pay-modal-overlay .pay-modal-body,
#view-doc-gen .pay-modal-body{padding:14px 24px 24px}
body > .pay-modal-overlay .pay-modal-lead,
#view-doc-gen .pay-modal-lead{
  margin:0 0 16px;padding:12px 14px;border-radius:14px;
  background:rgba(40,185,216,0.08);
  border:1px solid rgba(40,185,216,0.16);
  font-size:11px;line-height:1.55;color:rgba(15,60,80,0.62);font-weight:500;
}
body > .pay-modal-overlay .pay-modal .fg,
#view-doc-gen .pay-modal .fg{margin-bottom:12px}
body > .pay-modal-overlay .pay-modal .fg label,
#view-doc-gen .pay-modal .fg label{
  display:block;margin:0 0 6px;
  font-size:11px;font-weight:700;color:rgba(15,60,80,0.72);letter-spacing:0.01em;
}
body > .pay-modal-overlay .pay-modal .lead-ts,
#view-doc-gen .pay-modal .lead-ts{
  margin-top:6px;font-size:10px;line-height:1.45;color:rgba(15,60,80,0.45);
}
body > .pay-modal-overlay .pay-modal .fc,
#view-doc-gen .pay-modal .fc{
  width:100%;box-sizing:border-box;
  background:#fff;
  border:1px solid rgba(15,60,80,0.14);
  border-radius:14px;
  color:#0f2a35;
  font-family:inherit;font-size:13px;font-weight:560;
  padding:11px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
body > .pay-modal-overlay .pay-modal select.fc,
#view-doc-gen .pay-modal select.fc{
  appearance:none;-webkit-appearance:none;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f3c50' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:36px;
}
body > .pay-modal-overlay .pay-modal textarea.fc,
#view-doc-gen .pay-modal textarea.fc{min-height:84px;resize:vertical;line-height:1.45}
body > .pay-modal-overlay .pay-modal .fc::placeholder,
#view-doc-gen .pay-modal .fc::placeholder{color:rgba(15,60,80,0.38);font-weight:500}
body > .pay-modal-overlay .pay-modal .fc:hover,
#view-doc-gen .pay-modal .fc:hover{
  background:#fff;border-color:rgba(15,60,80,0.22);
}
body > .pay-modal-overlay .pay-modal .fc:focus,
#view-doc-gen .pay-modal .fc:focus{
  outline:none;
  background:#fff;
  border-color:rgba(40,185,216,0.55);
  box-shadow:0 0 0 3px rgba(40,185,216,0.14);
}
body > .pay-modal-overlay .pay-modal input[type="file"].fc,
#view-doc-gen .pay-modal input[type="file"].fc{
  padding:10px 12px;font-size:12px;font-weight:500;cursor:pointer;
}
body > .pay-modal-overlay .pay-modal .invoice-preview,
#view-doc-gen .pay-modal .invoice-preview{
  margin:4px 0 14px;padding:14px 16px;border-radius:16px;
  background:rgba(40,185,216,0.08);
  border:1px solid rgba(40,185,216,0.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
  font-size:11px;color:rgba(15,60,80,0.58);line-height:1.5;
}
body > .pay-modal-overlay .pay-modal .bi-preview-empty,
#view-doc-gen .pay-modal .bi-preview-empty{margin:0;font-size:11px;color:rgba(15,60,80,0.50)}
body > .pay-modal-overlay .pay-modal .bi-preview-grid,
#view-doc-gen .pay-modal .bi-preview-grid{display:flex;flex-direction:column;gap:8px}
body > .pay-modal-overlay .pay-modal .bi-preview-row,
#view-doc-gen .pay-modal .bi-preview-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
body > .pay-modal-overlay .pay-modal .bi-preview-row span,
#view-doc-gen .pay-modal .bi-preview-row span{color:rgba(15,60,80,0.52);font-weight:500}
body > .pay-modal-overlay .pay-modal .bi-preview-row strong,
#view-doc-gen .pay-modal .bi-preview-row strong{
  color:#0f2a35;font-weight:760;font-variant-numeric:tabular-nums;text-align:right;
}
body > .pay-modal-overlay .pay-modal .bi-preview-row .is-accent,
body > .pay-modal-overlay .pay-modal .bi-preview-row strong.is-accent,
#view-doc-gen .pay-modal .bi-preview-row .is-accent,
#view-doc-gen .pay-modal .bi-preview-row strong.is-accent{color:#0e8eaa}
body > .pay-modal-overlay .pay-modal .bi-preview-row.is-total,
#view-doc-gen .pay-modal .bi-preview-row.is-total{
  margin-top:2px;padding-top:10px;
  border-top:1px solid rgba(40,185,216,0.18);
}
body > .pay-modal-overlay .pay-modal .bi-preview-row.is-total strong,
#view-doc-gen .pay-modal .bi-preview-row.is-total strong{font-size:12.5px}
body > .pay-modal-overlay .pay-modal .bi-preview-row.is-remain strong,
#view-doc-gen .pay-modal .bi-preview-row.is-remain strong{color:#0f7a5c}
body > .pay-modal-overlay .pay-modal .bi-preview-row.is-danger strong,
#view-doc-gen .pay-modal .bi-preview-row.is-danger strong{color:#c2410c}
body > .pay-modal-overlay .pay-modal .pay-modal-submit,
#view-doc-gen .pay-modal .pay-modal-submit{
  width:100%;margin-top:4px;border:none;border-radius:14px;cursor:pointer;
  padding:13px 16px;font-family:inherit;font-size:13px;font-weight:760;
  color:#fff;
  background:linear-gradient(145deg, rgba(15,35,50,0.94) 0%, rgba(15,35,50,0.78) 100%);
  box-shadow:0 8px 22px rgba(15,35,50,0.20);
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}
body > .pay-modal-overlay .pay-modal .pay-modal-submit.is-loading,
#view-doc-gen .pay-modal .pay-modal-submit.is-loading{
  opacity:.88;cursor:wait;pointer-events:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
body > .pay-modal-overlay .pay-modal .pay-modal-submit.is-loading::before,
#view-doc-gen .pay-modal .pay-modal-submit.is-loading::before{
  content:"";
  width:14px;height:14px;flex-shrink:0;
  border:2px solid rgba(255,255,255,0.35);
  border-top-color:#fff;border-radius:50%;
  animation:paySubmitSpin .7s linear infinite;
}
@keyframes paySubmitSpin{to{transform:rotate(360deg)}}
.btn-submit.is-loading,
.btn-p.is-loading,
.btn-otp.is-loading,
#view-users .tu-save-btn.is-loading{
  opacity:.88;cursor:wait;pointer-events:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn-submit.is-loading::before,
.btn-p.is-loading::before,
.btn-otp.is-loading::before,
#view-users .tu-save-btn.is-loading::before{
  content:"";
  width:14px;height:14px;flex-shrink:0;
  border:2px solid rgba(255,255,255,0.35);
  border-top-color:#fff;border-radius:50%;
  animation:paySubmitSpin .7s linear infinite;
}
body > .pay-modal-overlay .pay-modal .pay-modal-submit:disabled,
#view-doc-gen .pay-modal .pay-modal-submit:disabled{
  opacity:.88;cursor:wait;
}
body > .pay-modal-overlay .pay-modal .pay-modal-submit:hover,
#view-doc-gen .pay-modal .pay-modal-submit:hover{
  transform:translateY(-1px);box-shadow:0 12px 28px rgba(15,35,50,0.24);
}

@media (prefers-reduced-motion:reduce){
  #view-doc-gen .bi-finance-banner,
  #view-doc-gen .bi-filter-strip,
  #view-doc-gen .bi-toolbar,
  #view-doc-gen .bi-card,
  #view-doc-gen .bi-progress-bar span{
    animation:none !important;
  }
  #view-doc-gen .bi-mini-donut-seg{transition:none !important}
  body > .pay-modal-overlay .pay-modal,
  #view-doc-gen .pay-modal{
    transition:none !important;transform:none !important;opacity:1 !important;
  }
}

@media(max-width:1100px){
  #view-doc-gen .bi-finance-banner{flex-wrap:wrap}
  #view-doc-gen .bi-finance-divider{display:none}
  #view-doc-gen .bi-finance-left,
  #view-doc-gen .bi-finance-mid,
  #view-doc-gen .bi-finance-right{flex:1 1 100%}
  #view-doc-gen .bi-filter-strip{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #view-doc-gen .bi-filter-tab{min-width:128px}
  #view-doc-gen .bi-filter-all{min-width:150px}
}
@media(max-width:900px){
  #view-doc-gen .bi-card-grid{grid-template-columns:1fr}
  /* Finance banner: stacked, bukan 1 row desktop */
  #view-doc-gen .bi-finance-banner{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "hero hero"
      "mid mid"
      "action action";
    gap:0;
    align-items:stretch;
    border-radius:16px;
    overflow:hidden;
    background:#fff!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    border:1px solid rgba(15,60,80,0.10)!important;
    box-shadow:0 4px 14px rgba(15,80,100,0.06)!important;
  }
  #view-doc-gen .bi-finance-left{
    grid-area:hero;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:14px;
    padding:14px 14px 12px;
    border-bottom:1px solid rgba(15,60,80,0.08);
  }
  #view-doc-gen .bi-finance-mid{
    grid-area:mid;
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:0;
    padding:0;
    align-items:stretch;
  }
  #view-doc-gen .bi-finance-metric{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:12px 14px;
    min-width:0;
  }
  #view-doc-gen .bi-finance-metric:last-child{
    border-left:1px solid rgba(15,60,80,0.08);
  }
  #view-doc-gen .bi-finance-right{
    grid-area:action;
    padding:10px 14px 14px;
    border-top:1px solid rgba(15,60,80,0.08);
  }
  #view-doc-gen .bi-finance-divider,
  #view-doc-gen .bi-finance-mid-divider{display:none!important}
  #view-doc-gen .bi-mini-donut{width:64px;height:64px}
  #view-doc-gen .bi-mini-donut-track{stroke:rgba(15,60,80,0.10)}
  #view-doc-gen .bi-mini-donut-center strong{font-size:13px;color:#0f2a35}
  #view-doc-gen .bi-mini-donut-center span{font-size:6px;color:rgba(15,60,80,0.42)}
  #view-doc-gen .bi-finance-label{font-size:8px;color:rgba(15,60,80,0.42);letter-spacing:.08em}
  #view-doc-gen .bi-finance-value{margin-top:3px;font-size:20px;color:#0f2a35}
  #view-doc-gen .bi-finance-sub{margin-top:3px;font-size:10px;color:rgba(15,60,80,0.45)}
  #view-doc-gen .bi-finance-ico{width:26px;height:26px;border-radius:8px}
  #view-doc-gen .bi-finance-ico.is-ok{background:rgba(34,197,94,0.12);color:#16a34a}
  #view-doc-gen .bi-finance-ico.is-warn{background:rgba(245,158,11,0.14);color:#d97706}
  #view-doc-gen .bi-finance-metric-val{margin-top:2px;font-size:14px;color:#0f2a35}
  #view-doc-gen .bi-finance-metric-val.is-ok{color:#16a34a}
  #view-doc-gen .bi-finance-metric-val.is-warn{color:#d97706}
  #view-doc-gen .bi-export-btn{
    width:100%;min-height:40px;justify-content:center;
    background:rgba(15,60,80,0.06);color:#0f2a35;
    box-shadow:none;border:1px solid rgba(15,60,80,0.08);
    border-radius:10px;font-size:11px;
  }
}
@media(max-width:700px){
  /* Fase 2 — Billing phone: compact clean white */
  #view-doc-gen .bi-finance-banner{
    margin:0 0 10px;
    border-radius:14px;
  }
  #view-doc-gen .bi-finance-left{
    padding:12px;gap:12px;
  }
  #view-doc-gen .bi-finance-metric{padding:10px 12px;gap:5px}
  #view-doc-gen .bi-finance-right{padding:8px 12px 12px}
  #view-doc-gen .bi-mini-donut{width:56px;height:56px}
  #view-doc-gen .bi-mini-donut-center strong{font-size:12px}
  #view-doc-gen .bi-finance-value{font-size:18px}
  #view-doc-gen .bi-finance-metric-val{font-size:13px}
  #view-doc-gen .bi-export-btn{min-height:36px;padding:8px 12px;font-size:10px}

  #view-doc-gen .bi-filter-strip{
    border-radius:12px;margin:0 0 10px;
    background:#fff;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border:1px solid rgba(15,60,80,0.10);
    box-shadow:0 2px 10px rgba(15,80,100,0.04);
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;scrollbar-width:none;
  }
  #view-doc-gen .bi-filter-strip::-webkit-scrollbar{display:none}
  #view-doc-gen .bi-filter-tab{
    flex:0 0 auto;
    min-width:0;
    min-height:40px;
    padding:8px 10px;
    gap:8px;
  }
  #view-doc-gen .bi-filter-tab + .bi-filter-tab{
    border-left:1px solid rgba(15,60,80,0.08);
  }
  #view-doc-gen .bi-filter-all{min-width:0;padding:8px 12px}
  #view-doc-gen .bi-filter-all-badge{
    width:24px;height:24px;border-radius:8px;font-size:11px;
  }
  #view-doc-gen .bi-filter-all-sub{display:none}
  #view-doc-gen .bi-filter-all-label{font-size:10px;letter-spacing:.04em}
  #view-doc-gen .bi-filter-ico{
    width:24px;height:24px;border-radius:8px;
  }
  #view-doc-gen .bi-filter-ico svg{width:12px;height:12px}
  #view-doc-gen .bi-filter-label{
    display:block;
    max-width:64px;
    font-size:8px;
  }
  #view-doc-gen .bi-filter-count{font-size:12px}
  #view-doc-gen .bi-filter-tab.is-active::after,
  #view-doc-gen .bi-filter-all.is-active::after{display:none}

  #view-doc-gen .bi-card{
    flex-direction:column;
    border-radius:14px;
    background:#fff!important;
    border:1px solid rgba(15,60,80,0.10)!important;
    box-shadow:0 4px 14px rgba(15,80,100,0.06)!important;
    position:relative;
  }
  #view-doc-gen .bi-card-accent{
    position:absolute;
    top:10px;right:10px;
    z-index:2;
    width:auto!important;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:4px 8px!important;
    border:none!important;
    border-radius:999px!important;
    background:var(--bi-bg,rgba(40,185,216,0.12))!important;
    box-shadow:none;
  }
  #view-doc-gen .bi-card-ico{
    width:18px;height:18px;border-radius:6px;
    box-shadow:none;
  }
  #view-doc-gen .bi-card-ico svg{width:11px;height:11px}
  #view-doc-gen .bi-card-status{
    text-align:left;
    font-size:8px;
    padding:0;
    max-width:72px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* Hindari status dobel: chip cukup jika ada select stage */
  #view-doc-gen .bi-card:has(.bi-stage-wrap) .bi-card-status{display:none}
  #view-doc-gen .bi-card-main{
    padding:12px;
    padding-right:96px;
    gap:10px;
  }
  #view-doc-gen .bi-card:has(.bi-stage-wrap) .bi-card-main{
    padding-right:52px;
  }
  #view-doc-gen .bi-card-id{font-size:8px;margin:0}
  #view-doc-gen .bi-card-name{margin-top:4px;font-size:14px}
  #view-doc-gen .bi-card-email,
  #view-doc-gen .bi-card-cat{
    margin-top:2px;font-size:10px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  #view-doc-gen .bi-progress-top{
    margin-bottom:4px;gap:8px;font-size:9px;
  }
  #view-doc-gen .bi-paid-note{display:none}
  #view-doc-gen .bi-progress-bar{height:4px;background:rgba(15,60,80,0.08)}
  #view-doc-gen .bi-stage-wrap{margin-top:6px}
  #view-doc-gen .bi-stage-wrap .status-select{
    width:auto;max-width:100%;
    min-height:28px;padding:4px 8px;border-radius:8px;font-size:9px;
  }
  #view-doc-gen .bi-card-foot{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-top:2px;
    padding-top:10px;
    border-top:1px solid rgba(15,60,80,0.08);
  }
  #view-doc-gen .bi-chips{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
  }
  #view-doc-gen .bi-chip-div{display:none}
  #view-doc-gen .bi-chip strong{font-size:11px}
  #view-doc-gen .bi-card-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  #view-doc-gen .bi-card-actions .bi-btn,
  #view-doc-gen .bi-card-actions a.bi-btn,
  #view-doc-gen .bi-card-actions button{
    width:100%;
    min-height:36px;
    justify-content:center;
    padding:8px 10px;
    border-radius:10px;
    font-size:10px;
    box-sizing:border-box;
  }
  #view-doc-gen .bi-card-actions .bi-btn-pay{
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  /* Satu tombol penuh jika hanya 1 aksi */
  #view-doc-gen .bi-card-actions .bi-btn:only-child,
  #view-doc-gen .bi-card-actions a.bi-btn:only-child,
  #view-doc-gen .bi-card-actions button:only-child{
    grid-column:1 / -1;
  }
  #view-doc-gen .bi-toolbar{align-items:stretch;gap:8px;margin:0 0 10px}
  #view-doc-gen .bi-search,
  #view-doc-gen .bi-filter-chip,
  #view-doc-gen .bi-sync-pill,
  #view-doc-gen .bi-sync-btn{width:100%;flex:1 1 100%}
  #view-doc-gen .bi-search{min-height:40px;padding:8px 12px;border-radius:12px}
  #view-doc-gen .bi-search input,
  #view-doc-gen .bi-filter-chip select,
  #view-doc-gen .pay-modal .fc,
  #view-doc-gen .fc{
    font-size:16px!important;
  }
  #view-doc-gen .bi-sync-btn{min-height:40px}
  #view-doc-gen .pay-modal{
    width:calc(100% - 20px);
    max-height:min(88dvh,720px);
    border-radius:16px;
  }
}

/* ── Manage Internal Users — liquid glass ── */
#view-users .tu-layout{display:grid;gap:14px;min-width:0}
#view-users .tu-stats-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  animation:opsReveal .35s cubic-bezier(.22,1,.36,1) both;
}
#view-users .tu-kpis{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#view-users .tu-kpi{
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 16px;border-radius:14px;
  background:linear-gradient(150deg, rgba(255,255,255,0.92) 0%, rgba(248,250,251,0.96) 100%);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,0.92);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),0 8px 24px rgba(15,80,100,0.08);
  isolation:isolate;
}
#view-users .tu-kpi-val{
  width:36px;height:36px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tu-bg,rgba(40,185,216,0.13));color:var(--tu-color,#28b9d8);
  font-size:16px;font-weight:800;
}
#view-users .tu-kpi-label{font-size:12px;font-weight:600;color:rgba(15,60,80,0.52)}
#view-users .tu-stats-divider{
  width:1px;height:24px;background:rgba(255,255,255,0.55);flex-shrink:0;
}
#view-users .tu-role-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
#view-users .tu-role-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:10px;
  background:var(--tu-bg,rgba(40,185,216,0.12));color:var(--tu-color,#28b9d8);
  font-size:10px;font-weight:600;
}
#view-users .tu-role-pill i{
  width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;
}
#view-users .tu-sync-pill{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:14px;
  background:rgba(255,255,255,0.28);
  border:1px solid rgba(255,255,255,0.72);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.95),0 8px 32px rgba(15,80,100,0.08);
  font-size:11px;color:rgba(15,60,80,0.50);font-weight:500;
}
#view-users .tu-sync-dot{
  width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,0.16);
}

#view-users .tu-main{
  display:flex;align-items:flex-start;gap:16px;
  isolation:isolate;
  animation:opsReveal .38s cubic-bezier(.22,1,.36,1) .08s both;
}
#view-users .tu-list-card,
#view-users .tu-form-card{
  /* Opaque glass — avoid backdrop-filter bleed from sibling Off/focus colors */
  background:linear-gradient(150deg, rgba(255,255,255,0.94) 0%, rgba(248,250,251,0.98) 52%, rgba(245,248,250,0.96) 100%);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,0.92);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,0.2),0 8px 28px rgba(15,80,100,0.08);
  border-radius:22px;
  display:flex;flex-direction:column;min-width:0;
  isolation:isolate;
  contain:paint;
  transform:translateZ(0);
}
#view-users .tu-list-card{flex:1 1 auto;overflow:hidden}
#view-users .tu-form-card{
  width:320px;flex-shrink:0;
  animation:opsReveal .38s cubic-bezier(.22,1,.36,1) .18s both;
}

#view-users .tu-list-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:20px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,0.55);
}
#view-users .tu-list-head h3{margin:0;font-size:15px;font-weight:800;color:#0f2a35}
#view-users .tu-list-head p{
  margin:6px 0 0;font-size:10px;color:rgba(15,60,80,0.50);line-height:1.5;max-width:28rem;
}
#view-users .tu-refresh-btn{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:8px 14px;border-radius:12px;border:1px solid rgba(15,35,50,0.20);cursor:pointer;
  background:linear-gradient(145deg, rgba(15,35,50,0.94) 0%, rgba(15,35,50,0.82) 100%);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  color:#fff;font-size:10px;font-weight:600;font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 4px 16px rgba(15,35,50,0.22);
}
#view-users .tu-refresh-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
#view-users .tu-refresh-btn:hover{transform:translateY(-1px)}

#view-users .tu-tabs{
  display:flex;gap:8px;padding:12px 20px;margin:0;
}
#view-users .tu-tab{
  padding:6px 16px;border-radius:12px;border:1px solid rgba(255,255,255,0.72);
  background:rgba(255,255,255,0.28);color:rgba(15,60,80,0.60);
  font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
#view-users .tu-tab.active{
  background:rgba(15,35,50,0.82);color:#fff;border-color:rgba(255,255,255,0.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 4px 16px rgba(15,35,50,0.18);
}

#view-users .tu-cols{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px 72px minmax(156px,auto);
  align-items:center;gap:12px;
  padding:8px 20px;
  border-bottom:1px solid rgba(255,255,255,0.42);
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(15,60,80,0.40);
}
#view-users .tu-col-user{min-width:0}
#view-users .tu-col-role{text-align:center}
#view-users .tu-col-status{text-align:center}
#view-users .tu-col-aksi{text-align:right}

#view-users .tu-rows{
  display:flex;flex-direction:column;gap:6px;
  padding:12px;
}
#view-users .tu-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px 72px minmax(156px,auto);
  align-items:center;gap:12px;
  padding:10px 12px;border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,60,80,0.08);
  isolation:isolate;
  contain:paint;
  animation:tuRowIn .30s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--enter-delay,.14s);
  transition:background .18s ease,border-color .18s ease;
}
@keyframes tuRowIn{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:translateX(0)}
}
#view-users .tu-row.is-editing{
  background:var(--tu-bg,rgba(40,185,216,0.12));
  border-color:color-mix(in srgb, var(--tu-color,#28b9d8) 27%, transparent);
}
#view-users .tu-row-user{min-width:0;display:flex;align-items:center;gap:12px}
#view-users .tu-avatar{
  width:36px;height:36px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tu-color,#28b9d8);color:#fff;
  font-size:11px;font-weight:800;
  box-shadow:0 3px 10px color-mix(in srgb, var(--tu-color,#28b9d8) 45%, transparent);
}
#view-users .tu-identity{min-width:0}
#view-users .tu-name{
  font-size:13px;font-weight:800;color:#0f2a35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-users .tu-email{
  margin-top:2px;font-size:9px;color:rgba(15,60,80,0.45);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-users .tu-row-role{display:flex;justify-content:center;min-width:0}
#view-users .tu-badge{
  padding:4px 10px;border-radius:10px;
  background:var(--tu-bg,rgba(40,185,216,0.12));color:var(--tu-color,#28b9d8);
  font-size:9px;font-weight:700;letter-spacing:.04em;
}
#view-users .tu-row-status{display:flex;justify-content:center;min-width:0;position:relative;z-index:1}
#view-users .tu-status{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:10px;font-size:9px;font-weight:700;
}
#view-users .tu-status i{width:6px;height:6px;border-radius:50%;display:inline-block}
#view-users .tu-status.is-on{background:rgba(22,163,74,0.12);color:#16a34a}
#view-users .tu-status.is-on i{background:#16a34a}
#view-users .tu-status.is-off{background:rgba(230,55,86,0.12);color:#e63756}
#view-users .tu-status.is-off i{background:#e63756}
#view-users .tu-row-aksi{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;
  min-width:0;position:relative;z-index:2;
}
#view-users .tu-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 10px;border-radius:10px;border:1px solid transparent;
  font-size:9px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:opacity .15s ease,transform .15s ease;
}
#view-users .tu-btn:hover{opacity:.88;transform:translateY(-1px)}
#view-users .tu-btn svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
#view-users .tu-btn-edit{
  background:rgba(40,185,216,0.13);color:#0ea5e9;border-color:rgba(40,185,216,0.26);
}
#view-users .tu-btn-off{
  background:#e63756;color:#fff;border-color:rgba(230,55,86,0.55);
}
#view-users .tu-btn-on{
  background:rgba(22,163,74,0.16);color:#16a34a;border-color:rgba(22,163,74,0.28);
}
#view-users .tu-btn-del{
  background:rgba(230,55,86,0.12);color:#e63756;border-color:rgba(230,55,86,0.28);
}

#view-users .tu-list-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 20px;border-top:1px solid rgba(255,255,255,0.45);
  font-size:10px;color:rgba(15,60,80,0.45);
}
#view-users .tu-list-foot strong{color:#0f2a35;font-weight:700}
#view-users .tu-foot-note{color:rgba(15,60,80,0.35)}
#view-users .tu-empty{
  padding:36px 16px;text-align:center;border-radius:14px;
  border:1px dashed rgba(15,60,80,0.16);color:rgba(15,60,80,0.48);font-size:12px;
}

#view-users .tu-form-head{
  padding:20px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,0.55);
}
#view-users .tu-form-head h3{margin:0;font-size:14px;font-weight:800;color:#0f2a35}
#view-users .tu-form-head p{margin:6px 0 0;font-size:10px;color:rgba(15,60,80,0.50);line-height:1.45}
#view-users .tu-form-head-edit{display:flex;align-items:center;gap:12px}
#view-users .tu-form-avatar{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:800;
}

#view-users .tu-form-fields{display:flex;flex-direction:column;gap:14px;padding:20px}
#view-users .tu-form-row{display:flex;gap:10px}
#view-users .tu-form-row .fg{flex:1 1 auto;min-width:0;margin:0}
#view-users .tu-status-field{width:100px;flex:0 0 100px}
#view-users .tu-form-fields .fg{margin:0}
#view-users .tu-form-fields .fg.full{width:100%}
#view-users .tu-form-fields label{
  display:block;margin-bottom:6px;
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(15,60,80,0.45);
}
#view-users .tu-form-fields .fc{
  width:100%;padding:10px 16px;border-radius:14px;
  background:#f4f7f9;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(15,60,80,0.12);
  box-shadow:inset 0 1px 2px rgba(15,60,80,0.04);
  color:#0f2a35;font-size:12px;font-weight:500;outline:none;
}
#view-users .tu-form-fields .fc::placeholder{color:rgba(15,60,80,0.32)}
#view-users .tu-form-fields .fc:focus{
  background:#fff;
  border-color:rgba(40,185,216,0.45);
  box-shadow:0 0 0 3px rgba(40,185,216,0.12);
}
#view-users .tu-pass-hint{margin-top:6px;font-size:9px;color:rgba(15,60,80,0.38)}

#view-users .tu-preview{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:14px;
  background:var(--tu-bg,rgba(40,185,216,0.12));
  border:1px solid rgba(255,255,255,0.60);
}
#view-users .tu-preview-avatar{
  width:36px;height:36px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tu-color,#28b9d8);color:#fff;font-size:11px;font-weight:800;
  box-shadow:0 3px 10px color-mix(in srgb, var(--tu-color,#28b9d8) 45%, transparent);
}
#view-users .tu-preview-copy{min-width:0;flex:1}
#view-users .tu-preview-name{
  font-size:12px;font-weight:800;color:#0f2a35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-users .tu-preview-meta{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
#view-users .tu-preview-role{
  display:inline-flex;align-items:center;gap:4px;
  font-size:9px;font-weight:600;color:var(--tu-color,#28b9d8);
}
#view-users .tu-preview-role svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
#view-users .tu-preview-status{
  padding:2px 6px;border-radius:6px;font-size:8px;font-weight:700;
}
#view-users .tu-preview-status.is-on{background:rgba(22,163,74,0.12);color:#16a34a}
#view-users .tu-preview-status.is-off{background:rgba(230,55,86,0.12);color:#e63756}

#view-users .tu-form-actions{display:flex;flex-direction:column;gap:8px;padding:0 20px 20px}
#view-users .tu-save-btn{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:14px;border:1px solid rgba(15,35,50,0.20);cursor:pointer;
  background:linear-gradient(145deg, rgba(15,35,50,0.94) 0%, rgba(15,35,50,0.82) 100%);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  color:#fff;font-size:12px;font-weight:700;font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 4px 16px rgba(15,35,50,0.22);
}
#view-users .tu-save-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
#view-users .tu-save-btn:hover{transform:translateY(-1px)}
#view-users .tu-reset-btn{
  width:100%;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,0.72);cursor:pointer;
  background:rgba(255,255,255,0.28);color:rgba(15,60,80,0.60);
  font-size:11px;font-weight:600;font-family:inherit;
}

@media (prefers-reduced-motion:reduce){
  #view-users .tu-stats-row,
  #view-users .tu-main,
  #view-users .tu-form-card,
  #view-users .tu-row{
    animation:none !important;
    transform:none !important;
  }
}

@media(max-width:1100px){
  #view-users .tu-main{flex-direction:column}
  #view-users .tu-form-card{width:100%}
  #view-users .tu-sync-pill{margin-left:0}
}
@media(max-width:700px){
  #view-users .tu-cols{display:none}
  #view-users .tu-row{
    display:flex;flex-wrap:wrap;gap:10px;
    grid-template-columns:none;
  }
  #view-users .tu-row-user{flex:1 1 100%}
  #view-users .tu-row-role,
  #view-users .tu-row-status{width:auto;justify-content:flex-start}
  #view-users .tu-row-aksi{width:100%;justify-content:flex-end;gap:8px}
  #view-users .tu-btn{
    min-height:44px;padding:10px 12px;
  }
  #view-users .tu-form-row{flex-direction:column}
  #view-users .tu-status-field{width:100%;flex:1 1 auto}
  #view-users .tu-form-fields .fc{
    font-size:16px!important;min-height:44px;
  }
  #view-users .tu-save-btn,
  #view-users .tu-refresh-btn{
    min-height:44px;padding:10px 14px;
  }
  #view-users .tu-tabs{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;scrollbar-width:none;
  }
  #view-users .tu-tabs::-webkit-scrollbar{display:none}
  #view-users .tu-tab{
    flex:0 0 auto;min-height:44px;padding:10px 14px;
  }
  #view-users .tu-main{flex-direction:column}
  #view-users .tu-list-card,
  #view-users .tu-form-card{width:100%;max-width:100%}
  #view-analytics .analytics-grid{grid-template-columns:1fr 1fr;gap:10px}
  #view-analytics .analytics-card.an-kpi-card{min-height:0;padding:14px}
  #view-analytics .analytics-card.an-kpi-card .analytics-money,
  #view-analytics .analytics-card.an-kpi-card .analytics-value{font-size:20px}
  #view-analytics .analytics-action-item{
    grid-template-columns:1fr;gap:8px;
  }
  #view-analytics .analytics-action-item-meta{
    align-items:flex-start;flex-direction:row;flex-wrap:wrap;
  }
  #view-analytics .analytics-action-chip,
  #view-analytics .analytics-action-item{
    min-height:44px;
  }
  #view-analytics .cashflow-export-panel .fc,
  #view-analytics .fc{
    font-size:16px!important;min-height:44px;
  }
}

/* ── Fase 3 — Ops cross-cutting (phone ≤700) ── */
@media(max-width:700px){
  /* Body scroll lock while inbox / approval modal open */
  body.ops-inbox-open,
  body.ops-modal-open{
    overflow:hidden;
  }
  body.ops-inbox-open #ops.ops-shell-open .ops-content,
  body.ops-modal-open #ops.ops-shell-open .ops-content{
    overflow:hidden;
    pointer-events:none;
  }

  /* Approval inbox */
  #ops.ops-shell-open .approval-dropdown{
    z-index:160;
    max-height:min(72dvh,560px);
    border-radius:18px;
    box-shadow:0 20px 48px rgba(15,23,42,.18);
  }
  .approval-dd-head{
    padding:12px 14px 10px;
  }
  .approval-dd-head strong{font-size:13px}
  .approval-dd-tabs{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;padding:10px;
  }
  .approval-dd-tab{
    min-height:44px;
    padding:10px 6px;
    font-size:11px;
    border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .approval-dd-list{padding:10px 10px 12px;gap:12px}
  .approval-dd-item{
    padding:14px 44px 14px 14px;
    min-height:44px;
    border-radius:14px;
  }
  .approval-dd-item.is-unread{padding-left:18px}
  .approval-dd-dismiss{
    opacity:1;
    top:10px;right:10px;
    width:36px;height:36px;
    min-width:36px;min-height:36px;
    border-radius:10px;
    background:rgba(15,60,80,0.06);
    color:var(--ink);
    font-size:18px;
  }
  .approval-dd-empty{
    padding:36px 18px;
    font-size:13px;
    line-height:1.55;
  }

  /* Approval modal → phone sheet */
  .approval-modal-backdrop{
    z-index:9600;
    align-items:flex-end;
    justify-content:stretch;
    padding:0;
    padding-top:env(safe-area-inset-top,0px);
  }
  .approval-modal-backdrop.open{display:flex}
  .approval-modal{
    width:100%;
    max-width:none;
    max-height:min(92dvh,820px);
    border-radius:20px 20px 0 0;
    margin:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .approval-modal-hero{padding:18px 16px 14px}
  .approval-modal-hero h3{font-size:17px}
  .approval-modal .am-sub{font-size:12px;line-height:1.5}
  .approval-modal-body{padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px))}
  .approval-modal .am-amount{
    flex-direction:column;align-items:flex-start;gap:6px;
    padding:14px;
  }
  .approval-modal .am-amount-value{font-size:20px}
  .approval-modal .am-row{
    grid-template-columns:1fr;
  }
  .approval-modal .am-row span:first-child{
    padding:8px 12px 2px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  }
  .approval-modal .am-row span:last-child{padding:2px 12px 10px;font-size:13px}
  .approval-modal textarea,
  .approval-modal .fc,
  #am-reject-notes,
  #am-director-notes{
    font-size:16px!important;
    min-height:96px;
    width:100%;
    box-sizing:border-box;
    border-radius:12px;
    padding:12px 14px;
  }
  .approval-modal .am-actions{
    display:flex;flex-direction:column;gap:8px;margin-top:8px;
  }
  .approval-modal .am-actions .btn-p,
  .approval-modal .am-actions .btn-s{
    width:100%;
    min-height:44px;
    justify-content:center;
    border-radius:12px;
  }
  .approval-modal .am-proof a{
    display:inline-flex;align-items:center;min-height:44px;font-size:13px;
  }

  /* Toast — auth-gated ops (no public tabbar) */
  body.auth-gated #toast{
    left:12px;right:12px;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    width:auto;
    max-width:none;
    border-radius:16px;
    padding:12px 12px 12px 16px;
    align-items:center;
    gap:10px;
    z-index:9900;
  }
  body.auth-gated:has(#ops-client-access-panel.active) #toast{
    bottom:calc(88px + env(safe-area-inset-bottom,0px));
  }
  #toast .t-close{
    width:36px;height:36px;min-width:36px;min-height:36px;
    margin-left:auto;
    border:none;border-radius:10px;
    background:rgba(15,60,80,0.06);
    color:var(--ink);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:18px;line-height:1;cursor:pointer;padding:0;
    font-family:inherit;
  }
  #toast .t-body{padding-right:4px}
  #toast .t-title{font-size:13px;font-weight:800}
  #toast .t-msg{font-size:12px;line-height:1.45}

  /* Loading overlay */
  #loading{
    z-index:240;
    padding:env(safe-area-inset-top,0px) 16px env(safe-area-inset-bottom,0px);
  }
  body.pay-modal-open #loading{z-index:13000}
  #loading .spinner{
    width:44px;height:44px;
  }

  /* Empty states — shared readable phone polish */
  #view-internal-db .cs-empty,
  #view-doc-gen .bi-empty,
  #view-users .tu-empty,
  #view-production-ops .prodops-empty,
  #view-analytics .analytics-action-empty,
  #ops.ops-shell-open .approval-dd-empty{
    padding:40px 20px;
    border-radius:18px;
    text-align:center;
    font-size:13px;
    line-height:1.55;
    color:rgba(15,60,80,0.52);
  }
  #view-internal-db .cs-empty p:first-child,
  #view-doc-gen .bi-empty strong,
  #view-users .tu-empty strong{
    font-size:14px;font-weight:800;color:rgba(15,42,53,0.88);
  }
  #view-internal-db .cs-empty p:last-child{
    margin-top:8px;font-size:12px;color:rgba(15,60,80,0.45);
  }
  #view-analytics .analytics-action-empty{
    min-height:72px;
    display:flex;align-items:center;justify-content:center;
    padding:24px 16px;
  }
}

.nav-logo-dark,.auth-logo-dark{display:none!important}
.nav-logo-light,.auth-logo-light{display:block}

/* ─── Public landing: global glass nav ─── */
body.public-site{background:#f8f8f6;color:#070707;overscroll-behavior-y:auto}
body.public-site #home{padding-top:0}
html:has(body.public-site){overscroll-behavior-y:auto}

#lg-nav.lg-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  --lg-gutter:clamp(20px,5vw,72px);
  padding-left:var(--lg-gutter);
  padding-right:var(--lg-gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  height:64px;
  min-height:64px;
  max-height:64px;
  flex-wrap:nowrap;
  max-width:100%;
  overflow-x:clip;
  box-sizing:border-box;
}
#lg-nav .lg-logo{
  justify-self:start;min-width:0;flex-shrink:0;
}
#lg-nav .lg-nav-links{
  display:none;
}
#lg-nav .lg-nav-right{
  justify-self:end;
  display:flex;align-items:center;gap:8px;
  min-width:0;flex-shrink:0;margin-left:auto;
  flex-wrap:nowrap;
}
#lg-nav .lg-nav-ig{display:none}
#lg-nav .lg-nav-cta:not(.lg-nav-cta--home){
  display:inline-flex;
  padding:10px 14px;
  font-size:10px;
  min-height:35px;
  white-space:nowrap;
}
.lg-nav-cta--home{
  display:none!important;
  align-items:center;justify-content:center;
  padding:8px 11px;border-radius:999px;border:none;
  font-family:inherit;font-size:9px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  background:transparent;color:inherit;
}
body:has(#home.active) .lg-nav-cta--home,
body:has(#gallery.active) .lg-nav-cta--home,
body:has(#about.active) .lg-nav-cta--home{display:none!important}
#lg-nav button.lg-logo,
#lg-nav .lg-nav-links button{
  border:none;background:none;padding:0;color:inherit;
  font-family:inherit;cursor:pointer;
}

.lg-nav-cta-short{display:none}

#home.lg-landing{padding-top:0!important;background:#f8f8f6!important;min-height:100dvh;overflow:visible;max-width:100%}
#home.lg-landing.active{display:block}

/* ========== Liquid glass landing (scoped) ========== */
.lg-shell{
  --lg-black:#070707;
  --lg-white:#f8f8f6;
  --lg-muted:#8d8d87;
  --lg-line:#deded8;
  --lg-gutter:clamp(20px,5vw,72px);
  background:var(--lg-white);
  color:var(--lg-black);
  font-family:var(--font-family);
  overflow:visible;
  max-width:100%;
}
.lg-shell a{color:inherit;text-decoration:none}
.lg-shell button{
  font-family:inherit;cursor:pointer;
}
.lg-shell button.lg-logo,
.lg-shell .lg-nav-links button,
.lg-shell .lg-footer-links button,
.lg-shell .lg-hero-scroll{
  border:none;background:none;padding:0;color:inherit;
}

/* Nav — liquid glass */
.lg-nav{
  --nav-d:0;
  position:sticky;top:0;z-index:40;
  height:76px;
  color:color-mix(in srgb,#f4f4f1 calc(var(--nav-d)*100%),#070707);
  background:color-mix(in srgb,rgba(10,8,16,.92) calc(var(--nav-d)*100%),rgba(248,248,246,.94));
  border-bottom:1px solid color-mix(in srgb,rgba(192,132,252,.18) calc(var(--nav-d)*100%),rgba(0,0,0,.06));
  box-shadow:0 8px 35px rgba(0,0,0,calc(.035 + var(--nav-d)*0.22));
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
}
/* Work / About: always light opaque nav (ignore leftover --nav-d from Home scroll) */
body:has(#gallery.active) #lg-nav.lg-nav,
body:has(#about.active) #lg-nav.lg-nav{
  --nav-d:0 !important;
  color:#070707;
  background:rgba(248,248,246,.96);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 24px rgba(0,0,0,.04);
}
body:has(#gallery.active) #lg-nav .lg-logo-img--white,
body:has(#about.active) #lg-nav .lg-logo-img--white{opacity:0!important}
body:has(#gallery.active) #lg-nav .lg-logo-img--black,
body:has(#about.active) #lg-nav .lg-logo-img--black{opacity:1!important}
body:has(#gallery.active) #lg-nav .lg-nav-links button,
body:has(#about.active) #lg-nav .lg-nav-links button{color:#656560}
body:has(#gallery.active) #lg-nav .lg-nav-links button.is-active,
body:has(#gallery.active) #lg-nav .lg-nav-links button:hover,
body:has(#about.active) #lg-nav .lg-nav-links button.is-active,
body:has(#about.active) #lg-nav .lg-nav-links button:hover{color:#111}
.lg-nav:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.55),transparent 45%,rgba(255,255,255,.2));
  opacity:calc(.7 * (1 - var(--nav-d)));
}
.lg-nav > *{position:relative;z-index:2}
.lg-logo{
  display:flex;align-items:center;gap:9px;
  font-weight:800;letter-spacing:-.05em;font-size:15px;
}
.lg-logo-stack{
  position:relative;display:block;
  width:112px;height:24px;
}
.lg-logo-img{
  display:block;width:112px;height:24px;
  object-fit:contain;object-position:left center;
}
.lg-logo-img--white{
  position:absolute;left:0;top:0;
  opacity:var(--nav-d,0);
}
.lg-logo-img--black{
  opacity:calc(1 - var(--nav-d,0));
}
.lg-logo-mark{font-size:22px;line-height:1}
.lg-nav-links{gap:34px}
.lg-nav-links button{
  font-size:11px;letter-spacing:.02em;
  color:color-mix(in srgb,#c9c9c4 calc(var(--nav-d)*100%),#656560);
}
.lg-nav-links button:hover{color:color-mix(in srgb,#fff calc(var(--nav-d)*100%),#111)}
.lg-nav-links button.is-active{color:color-mix(in srgb,#fff calc(var(--nav-d)*100%),#111);font-weight:600}
.lg-nav-right{display:flex;align-items:center;gap:10px}
.lg-ig{
  width:35px;height:35px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;
  background:color-mix(in srgb,rgba(255,255,255,.1) calc(var(--nav-d)*100%),rgba(255,255,255,.34));
  border:1px solid color-mix(in srgb,rgba(255,255,255,.18) calc(var(--nav-d)*100%),rgba(255,255,255,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 5px 18px rgba(0,0,0,.06);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.lg-button{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 18px;border-radius:999px;border:none;
  background:linear-gradient(135deg,#7c3aed,#c084fc);
  color:#fff !important;
  font-size:11px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px rgba(124,58,237,.28);
}
.lg-shell a.lg-button{color:#fff !important}
.lg-button:hover{filter:brightness(1.06)}

@media(min-width:851px){
  body.public-site{padding-top:76px}
  html:has(body.public-site){scroll-padding-top:76px}
  #lg-nav.lg-nav{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    column-gap:24px;
    height:76px;
    min-height:76px;
    max-height:76px;
    flex-wrap:unset;
  }
  #lg-nav .lg-nav-links{
    display:flex;
    justify-self:center;
  }
  #lg-nav .lg-nav-ig{display:grid}
  #lg-nav .lg-nav-cta{
    display:inline-flex;
    padding:12px 18px;
    font-size:11px;
    min-height:auto;
  }
  #lg-nav .lg-nav-right{
    gap:10px;
    margin-left:0;
  }
  .lg-nav-cta-full{display:inline}
  .lg-nav-cta-short{display:none}
}

/* Hero */
.lg-hero{padding:5.4vw 5vw 8vw}
.lg-hero-heading{position:relative}
.lg-hero-kicker{
  display:flex;align-items:center;gap:10px;
  font-size:9px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:22px
}
.lg-hero-kicker-dot{width:7px;height:7px;border-radius:50%;background:#080808}
.lg-hero-kicker-line{height:1px;width:46px;background:#cfcfc9;margin-left:4px}
.lg-hero-title-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 220px;
  gap:30px;align-items:start
}
.lg-hero-heading{
  will-change:opacity,transform;
}
.lg-hero-title{
  font-size:clamp(64px,10.3vw,158px);
  line-height:.79;letter-spacing:-.085em;margin:0;font-weight:800;
  max-width:1100px
}
.lg-hero-title span{font-weight:400}
.lg-hero-title strong{font-weight:800}
.lg-hero-side-copy{
  padding-top:clamp(8px,1.2vh,18px);
  padding-bottom:0;
}
.lg-mini-index{
  display:block;font-size:9px;font-weight:700;letter-spacing:.12em;
  color:#999994;margin-bottom:14px
}
.lg-hero-side-copy p{
  font-size:11px;line-height:1.75;color:#777771;margin:0;
  max-width:200px
}

/* Stage — sticky pin + photo; scroll scrub reveals 3 toasts */
.lg-stage-scroll-wrap{
  height:320vh;
  position:relative;
}
.lg-hero-stage{
  position:sticky;top:76px;z-index:6;
  /* No margin-top — sticky + margin leaves a white gap under the fixed nav */
  margin-top:0;padding-bottom:36px;
}
.lg-stage-image{
  height:min(520px,calc(100vh - 140px));border-radius:34px;overflow:hidden;position:relative;
  background:#c9c9c4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 24px 70px rgba(0,0,0,.08);
}
/* Toast layer di dalam sticky stage → posisi relatif ke foto, bukan ke 280vh wrap */
.lg-hero-stage > .lg-toast-layer{
  position:absolute;
  left:0;right:0;top:0;
  height:min(520px,calc(100vh - 140px));
  z-index:30;pointer-events:none;
}
.lg-stage-photo{
  /* Dolly via size (not transform:scale) — stays sharp on desktop */
  --lg-dolly:1;
  position:absolute;z-index:0;
  left:calc(50% - (50% * var(--lg-dolly)));
  top:calc(50% - (50% * var(--lg-dolly)));
  width:calc(100% * var(--lg-dolly));
  height:calc(100% * var(--lg-dolly));
  object-fit:cover;object-position:center 40%;
  border-radius:inherit;
  transform:none;
  -webkit-transform:none;
}
.lg-stage-surface{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.12),transparent 28%),
    linear-gradient(0deg,rgba(0,0,0,.18),transparent 32%);
  mix-blend-mode:normal;
  opacity:.55;
}
.lg-stage-subject{display:none}
.lg-stage-topline,
.lg-stage-caption,
.lg-stage-play,
.lg-hero-scroll{display:none!important}

/* Desktop hero: fit title + stage in viewport; avoid clipping under fixed nav.
   Mobile (≤850px) keeps its own rules — leave untouched. */
@media(min-width:851px){
  .lg-hero{
    padding:clamp(24px,3.2vh,48px) 5vw clamp(36px,5vw,8vw);
  }
  .lg-hero-heading{
    position:relative;
    z-index:8;
    overflow:visible;
    margin-bottom:clamp(20px,3.2vh,38px);
  }
  .lg-hero-kicker{
    margin-bottom:clamp(12px,2vh,22px);
  }
  .lg-hero-title{
    font-size:clamp(64px,10.3vw,158px);
    line-height:.79;
    overflow:visible;
    padding-top:.06em;
    max-width:1100px;
  }
  .lg-hero-stage{
    margin-top:0;
    padding-bottom:clamp(20px,3vh,36px);
    z-index:5;
  }
  /* Desktop: Creativity splits black→white where it overlaps the stage photo */
  .lg-hero-title .lg-hero-creativity{
    position:relative;z-index:2;display:inline-block;
    color:var(--lg-black,#070707);
    overflow:visible;
    padding-right:.04em;
    line-height:1.02;
    padding-bottom:.08em;
  }
  .lg-hero-title .lg-hero-creativity::before{
    content:"Creativity";
    position:absolute;left:0;top:0;right:0;bottom:0;
    white-space:nowrap;
    line-height:1.02;
    padding-bottom:.08em;
    box-sizing:border-box;
    color:#fff;
    clip-path:var(--lg-creativity-white-clip, inset(100% 0 0 0));
    -webkit-clip-path:var(--lg-creativity-white-clip, inset(100% 0 0 0));
    pointer-events:none;
    text-shadow:0 1px 14px rgba(0,0,0,.35);
  }
  .lg-hero-side-copy{
    position:relative;
    z-index:9;
    margin-bottom:0;
    padding-top:clamp(10px,1.4vh,22px);
  }
  .lg-stage-image,
  .lg-hero-stage > .lg-toast-layer{
    width:100%;
    max-width:none;
    height:clamp(340px,min(56vh,calc(100dvh - 250px)),620px);
  }
  .lg-stage-photo{
    filter:none!important;
  }
  .lg-stage-surface{
    /* Keep readability without washing/softening the photo */
    opacity:.4;
    mix-blend-mode:normal;
  }
  .lg-stage-image{
    isolation:auto;
    transform:none;
    -webkit-transform:none;
  }
}
@media(min-width:851px) and (max-height:820px){
  .lg-hero-title{
    font-size:clamp(56px,9.2vw,120px);
  }
  .lg-hero-title-wrap{gap:20px;align-items:start}
  .lg-hero-side-copy p{margin:0;font-size:10.5px}
  .lg-mini-index{margin-bottom:14px}
  .lg-stage-scroll-wrap{height:260vh}
}

/* Toast layer — system notifications over sticky stage photo */
.lg-toast-layer{
  pointer-events:none;
}
.lg-toast{
  --toast-p:0;
  position:absolute;left:50%;
  width:min(420px,calc(100% - 48px));
  padding:15px 18px 15px 15px;
  border-radius:20px;
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr);
  gap:12px;
  align-items:flex-start;
  opacity:var(--toast-p);
  pointer-events:none;
  will-change:transform,opacity;
  transform:translateZ(0);
  backface-visibility:hidden;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 14px 36px rgba(0,0,0,.2),
    0 4px 12px rgba(0,0,0,.08);
  backdrop-filter:blur(42px) saturate(180%);
  -webkit-backdrop-filter:blur(42px) saturate(180%);
}
.lg-toast.is-on{pointer-events:auto}
.lg-toast[aria-hidden="true"]{pointer-events:none}
/* Stack di area bawah foto — center / kiri / kanan */
.lg-toast--1{
  left:50%;bottom:22px;z-index:33;
  transform:translate3d(-50%, calc((1 - var(--toast-p)) * 16px), 0) scale(calc(.98 + var(--toast-p) * .02));
}
.lg-toast--2{
  left:max(20px, 3.5%);top:auto;bottom:42%;z-index:32;
  transform:translate3d(calc((1 - var(--toast-p)) * -18px), 0, 0) scale(calc(.98 + var(--toast-p) * .02));
}
.lg-toast--3{
  left:auto;right:max(20px, 3.5%);top:auto;bottom:22%;z-index:31;
  transform:translate3d(calc((1 - var(--toast-p)) * 18px), 0, 0) scale(calc(.98 + var(--toast-p) * .02));
}
.lg-toast-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#0a0a0a 0%,#1c1c1e 42%,#3a3a3c 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.22);
}
.lg-toast-icon img{
  display:block;width:70%;height:70%;
  object-fit:contain;object-position:center;
}
.lg-toast-content{min-width:0;padding-right:20px}
.lg-toast-meta{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:3px;
}
.lg-toast-app{
  font-size:12px;font-weight:600;color:#111;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lg-toast-time{
  font-size:11px;font-weight:500;color:rgba(60,60,67,.55);
  flex-shrink:0;
}
.lg-toast-dismiss{
  position:absolute;top:10px;right:10px;z-index:3;
  width:22px;height:22px;border-radius:50%;
  border:none;padding:0;
  background:rgba(120,120,128,.16);
  color:rgba(60,60,67,.72);font-size:14px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
.lg-toast-dismiss:hover{background:rgba(120,120,128,.28);color:#111}
.lg-toast-title{
  font-size:15px;font-weight:700;letter-spacing:-.025em;color:#111;
  line-height:1.28;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lg-toast-copy{
  margin:4px 0 0;color:rgba(60,60,67,.8);font-size:13px;line-height:1.4;font-weight:400;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* About — sticky scroll-lock for word reveal */
.lg-about-scroll-wrap{
  height:400vh;
  position:relative;
  background:var(--lg-white);
}
.lg-about{
  position:sticky;top:0;
  min-height:100vh;
  padding:15vw 5vw 10vw;border-top:1px solid var(--lg-line);
  display:grid;grid-template-columns:.32fr 1fr;gap:5vw;
  align-content:center;
  background:
    radial-gradient(circle at 82% 20%,rgba(255,255,255,.95),transparent 25%),
    var(--lg-white);
}
.lg-label{font-size:10px;font-weight:700;letter-spacing:.13em;color:#777771}
.lg-about h2{
  margin:0;max-width:900px;font-size:clamp(40px,5.4vw,78px);
  line-height:.98;letter-spacing:-.065em;color:var(--lg-black)
}
.lg-about-word{
  display:inline-block;
  opacity:var(--w-o,.18);
  transition:opacity .12s ease;
}
.lg-about p{
  max-width:520px;margin:35px 0 0 auto;
  color:#72726d;font-size:13px;line-height:1.9
}

/* Services — dark liquid glass */
.lg-services{
  position:relative;overflow-x:clip;overflow-y:visible;color:#fff;
  border-radius:42px 42px 0 0;padding:10vw 5vw 12vw;
  background:
    radial-gradient(ellipse 70% 50% at 82% 8%,rgba(147,51,234,.32),transparent 55%),
    radial-gradient(ellipse 50% 45% at 12% 92%,rgba(192,132,252,.16),transparent 52%),
    radial-gradient(ellipse 40% 36% at 50% 50%,rgba(232,41,74,.08),transparent 60%),
    #080808;
}
.lg-services:before{
  content:"";position:absolute;left:50%;top:10%;width:340px;height:340px;
  border-radius:50%;transform:translateX(-50%);
  background:rgba(147,51,234,.12);filter:blur(2px);pointer-events:none;
}
.lg-services > *{position:relative;z-index:2}
.lg-section-head{
  display:flex;justify-content:space-between;align-items:end;margin-bottom:50px
}
.lg-section-head h2{
  font-size:clamp(48px,6vw,84px);line-height:.9;
  letter-spacing:-.07em;margin:13px 0 0;color:inherit
}
.lg-work .lg-section-head h2{color:var(--lg-black)}
.lg-section-note{font-size:10px;line-height:1.8;color:#858580;text-align:right}
.lg-service-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;
}
.lg-svc-card{grid-column:span 3}
.lg-svc-card{
  --lg-svc-color:#ff7a18;
  --svc-on:0;
  position:relative;border-radius:28px;overflow:visible;
  min-height:340px;cursor:pointer;
  opacity:calc(.16 + var(--svc-on) * .84);
  transform:translate3d(0,calc((1 - var(--svc-on)) * 40px),0) scale(calc(.94 + var(--svc-on) * .06));
}
.lg-svc-warm{--lg-svc-color:#ff6a22}
.lg-svc-violet{--lg-svc-color:#c06bff}
.lg-svc-teal{--lg-svc-color:#1eccb8}
.lg-svc-blue{--lg-svc-color:#4a86ff}

.lg-svc-glow{
  position:absolute;z-index:0;pointer-events:none;
  left:4%;right:4%;bottom:-22%;height:52%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 45%,var(--lg-svc-color) 0%,transparent 72%);
  filter:blur(16px) saturate(150%);
  opacity:calc(.12 + var(--svc-on) * .7);
  transform:scale(calc(.9 + var(--svc-on) * .12));
}
.lg-svc-glow:before,
.lg-svc-glow:after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
.lg-svc-glow:before{
  width:120px;height:120px;left:0;top:-200%;
  background:radial-gradient(circle,color-mix(in srgb,var(--lg-svc-color) 40%,#fff) 0%,transparent 70%);
  filter:blur(18px);opacity:.42;
}
.lg-svc-glow:after{
  inset:-32% -16% -40%;
  background:radial-gradient(ellipse at 50% 55%,var(--lg-svc-color) 0%,transparent 72%);
  filter:blur(32px);opacity:.42;
}

.lg-svc-glass{
  position:relative;z-index:1;height:100%;min-height:340px;
  padding:32px 30px 28px;
  display:flex;flex-direction:column;
  overflow:hidden;border-radius:28px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(8,8,10,.68) 26%,rgba(6,6,8,.86) 58%,rgba(0,0,0,.28) 100%),
    rgba(7,7,9,.72);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.26),
    inset 0 -36px 70px color-mix(in srgb,var(--lg-svc-color) 28%,transparent),
    0 0 0 1px color-mix(in srgb,var(--lg-svc-color) 16%,transparent),
    0 18px 50px rgba(0,0,0,.38),
    0 16px 50px color-mix(in srgb,var(--lg-svc-color) 32%,transparent);
  transition:transform .35s ease,box-shadow .35s ease;
}
.lg-svc-glass:before{
  content:"";position:absolute;inset:0;border-radius:28px;pointer-events:none;z-index:1;
  background:
    linear-gradient(125deg,rgba(255,255,255,.16),transparent 34%),
    radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--lg-svc-color) 18%,transparent),transparent 24%),
    radial-gradient(ellipse at 50% 122%,color-mix(in srgb,var(--lg-svc-color) 48%,transparent),transparent 46%);
}
.lg-svc-card:hover .lg-svc-glass{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.32),
    inset 0 -44px 80px color-mix(in srgb,var(--lg-svc-color) 36%,transparent),
    0 0 0 1px color-mix(in srgb,var(--lg-svc-color) 22%,transparent),
    0 24px 60px rgba(0,0,0,.4),
    0 22px 70px color-mix(in srgb,var(--lg-svc-color) 42%,transparent);
}
.lg-svc-icon{
  width:54px;height:54px;
  display:grid;place-items:center;
  border-radius:14px;margin-bottom:auto;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  position:relative;z-index:2;
}
.lg-svc-icon-svg{display:block;width:24px;height:24px}
.lg-svc-card h3{
  font-size:clamp(24px,2.8vw,34px);letter-spacing:-.04em;
  margin:24px 0 14px;position:relative;z-index:2;
}
.lg-svc-card p{
  font-size:12px;line-height:1.8;color:rgba(255,255,255,.66);
  max-width:420px;margin:0 0 24px;position:relative;z-index:2;
}
.lg-svc-link{
  font-size:12px;font-weight:700;letter-spacing:.02em;
  text-decoration:underline;text-underline-offset:4px;
  color:rgba(255,255,255,.82);cursor:pointer;
  position:relative;z-index:2;
}
.lg-svc-link:hover{color:#fff}

/* Work */
.lg-work{padding:10vw 5vw;background:var(--lg-white);color:var(--lg-black)}
.lg-work-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lg-work-card{
  --wk-on:0;
  height:510px;border-radius:28px;position:relative;overflow:hidden;
  padding:25px;color:#fff;background:#111;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 45px rgba(0,0,0,.08);
  opacity:calc(.12 + var(--wk-on) * .88);
  transform:translate3d(calc(var(--lg-drift,0px) * (1 - var(--wk-on))), calc(32px * (1 - var(--wk-on))),0);
}
.lg-work-card:nth-child(odd){--lg-drift:-36px}
.lg-work-card:nth-child(even){--lg-drift:36px}
.lg-work-card.light{background:#d2d2cd;color:#111}
.lg-work-card.mid{background:#7c7c77}
.lg-work-card:after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(125deg,rgba(255,255,255,.14),transparent 28%,rgba(255,255,255,.04) 70%);
  mix-blend-mode:screen;
}
.lg-work-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0;
  opacity:.55;
  transform:none;
  -webkit-transform:none;
  will-change:auto;
}
.lg-work-card.light .lg-work-photo{opacity:.28;mix-blend-mode:multiply}
/* Featured / real cover: full-bleed sharp photo */
.lg-work-card.is-cover .lg-work-photo{
  opacity:1;
  filter:none;
  image-rendering:auto;
  object-fit:cover;
  inset:0;
  width:100%;
  height:100%;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.lg-work-card.is-cover:after{
  /* Light text scrim only — avoid muddy blend that softens the photo */
  background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,transparent 42%,rgba(0,0,0,.52) 100%);
  mix-blend-mode:normal;
  opacity:1;
}
.lg-work-card.is-cover:before{
  /* Kill the default glass screen-blend that softens real covers */
  content:none;
}
.lg-work-no{position:relative;z-index:2;font-size:10px;opacity:.65}
.lg-art{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.lg-circle{
  width:270px;height:270px;border:1px solid currentColor;
  border-radius:50%;opacity:.35
}
.lg-line{
  position:absolute;width:130%;height:1px;background:currentColor;
  transform:rotate(-27deg);opacity:.35
}
.lg-art-word{
  position:absolute;font-size:clamp(60px,8vw,115px);
  line-height:.72;font-weight:800;letter-spacing:-.09em;text-align:center
}
.lg-work-info{
  position:absolute;left:25px;right:25px;bottom:25px;z-index:4;
  display:flex;justify-content:space-between;align-items:end
}
.lg-work-info small{font-size:9px;opacity:.65}
.lg-work-info h3{font-size:22px;margin:6px 0 0;letter-spacing:-.04em}
.lg-work-note{
  margin:8px 0 0;max-width:min(34ch,78%);
  font-size:11px;line-height:1.35;font-weight:500;
  letter-spacing:.01em;opacity:.78;
}

/* CTA */
.lg-cta{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  padding:9vw 5vw 7vw;min-height:72vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 8%,rgba(147,51,234,.28),transparent 52%),
    radial-gradient(ellipse 50% 40% at 50% 100%,rgba(192,132,252,.14),transparent 55%),
    #070707;
}

.lg-cta-glow{
  position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.08),transparent 65%);
  pointer-events:none;z-index:0;
  transform:translate(-50%,-50%);
  transition:opacity .3s ease;
  opacity:0;
}
.lg-cta:hover .lg-cta-glow{opacity:1}

.lg-cta-rings{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0;
}
.lg-cta-ring{
  --ring-p:0;
  position:absolute;border-radius:50%;
  opacity:calc(.22 + var(--ring-p) * .78);
  transform:scale(calc(.5 + var(--ring-p) * .65));
}
.lg-cta-ring:before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px dashed rgba(192,132,252,.55);
  box-shadow:0 0 36px rgba(147,51,234,.28),inset 0 0 28px rgba(192,132,252,.1);
  animation:lgRingSpin 14s linear infinite;
}
.lg-cta-ring-1{width:280px;height:280px}
.lg-cta-ring-2{width:430px;height:430px}
.lg-cta-ring-3{width:600px;height:600px}
.lg-cta-ring-4{width:780px;height:780px}
.lg-cta-ring-2:before{animation-duration:20s;animation-direction:reverse;border-color:rgba(232,41,74,.42)}
.lg-cta-ring-3:before{animation-duration:26s;border-color:rgba(192,132,252,.4)}
.lg-cta-ring-4:before{animation-duration:34s;animation-direction:reverse;border-color:rgba(56,189,248,.32)}

@keyframes lgRingSpin{
  from{transform:rotate(0deg) scale(1)}
  to{transform:rotate(360deg) scale(1.16)}
}

.lg-cta .lg-label,
.lg-cta h2,
.lg-cta-stats,
.lg-cta-btn{
  position:relative;z-index:2;opacity:0;transform:translateY(32px);
  transition:opacity .8s ease,transform .85s cubic-bezier(.22,1,.36,1);
}
.lg-cta.is-in .lg-label,
.lg-cta.is-in h2,
.lg-cta.is-in .lg-cta-stats,
.lg-cta.is-in .lg-cta-btn{opacity:1;transform:none}
.lg-cta.is-in .lg-label{transition-delay:.05s}
.lg-cta.is-in h2{transition-delay:.15s}
.lg-cta.is-in .lg-cta-stats{transition-delay:.3s}
.lg-cta.is-in .lg-cta-btn{transition-delay:.45s}

.lg-cta h2{
  font-size:clamp(60px,9vw,130px);line-height:.92;
  letter-spacing:-.08em;margin:24px 0 0;overflow:visible
}
.lg-cta h2 em{
  font-style:italic;font-weight:400;
  display:inline-block;padding:0 .18em .12em 0;line-height:1.05;
  background:linear-gradient(115deg,#e8294a 0%,#9333ea 48%,#c084fc 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.lg-cta-stats{
  display:flex;gap:clamp(30px,5vw,80px);margin:38px 0 42px;
  justify-content:center;
}
.lg-cta-stat{display:flex;flex-direction:column;align-items:center}
.lg-cta-num{
  font-size:clamp(42px,5.5vw,72px);font-weight:800;
  letter-spacing:-.06em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.lg-cta-num--text{
  font-size:clamp(28px,3.6vw,48px);
  letter-spacing:-.04em;
  text-align:center;
  max-width:9ch;
}
.lg-cta-plus{
  font-size:clamp(28px,3.5vw,48px);font-weight:300;
  opacity:.6;margin-left:2px;
}
.lg-cta-stat small{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-top:10px;font-weight:600;
}

.lg-cta .lg-button{
  background:linear-gradient(135deg,#7c3aed,#c084fc)!important;color:#fff!important;
  border:1px solid rgba(192,132,252,.45);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 14px 35px rgba(124,58,237,.35);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  font-size:13px;padding:16px 36px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.lg-cta .lg-button:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.34),0 20px 50px rgba(147,51,234,.4);
}

/* Footer */
.lg-footer{
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%,rgba(147,51,234,.16),transparent 60%),
    #070707;
  color:#fff;border-top:1px solid rgba(192,132,252,.12);
  padding:36px 5vw 34px;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px 40px;flex-wrap:wrap;
}
.lg-footer-links{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:8px 26px;font-size:13px;font-weight:500;color:rgba(255,255,255,.72)
}
.lg-footer-links button,.lg-footer-links a{
  color:inherit;padding:4px 0;letter-spacing:.01em
}
.lg-footer-links button:hover,.lg-footer-links a:hover{color:#fff}
.lg-footer-copy{
  margin-left:auto;text-align:right;font-size:12px;line-height:1.4;
  color:rgba(255,255,255,.42);white-space:nowrap
}

@media (prefers-reduced-motion:reduce){
  .lg-hero-heading,.lg-stage-photo,.lg-work-photo{transform:none!important;opacity:1!important}
  .lg-toast.is-on{opacity:1!important}
  .lg-toast--1.is-on{transform:translate3d(-50%,0,0)!important}
  .lg-toast--2.is-on,
  .lg-toast--3.is-on{transform:none!important}
  .lg-about-word,.lg-svc-card,.lg-work-card,.lg-cta > *{opacity:1!important;transform:none!important;transition:none!important}
  .lg-svc-card{--svc-on:1}
  .lg-work-card{--wk-on:1}
  .lg-about-scroll-wrap,.lg-stage-scroll-wrap{height:auto}
  .lg-about{position:relative;min-height:0}
  .lg-hero-stage{position:relative;top:auto}
}
@media (prefers-reduced-motion:reduce) and (max-width:850px){
  .lg-toast--1.is-on,
  .lg-toast--2.is-on,
  .lg-toast--3.is-on{transform:none!important}
}
@media(max-width:850px){
  .lg-hero{padding:12px var(--lg-gutter,20px) 6vw}
  .lg-hero-title-wrap{display:block}
  .lg-hero-side-copy{display:none}
  .lg-hero-heading{overflow:visible;margin-bottom:0}
  .lg-hero-title{overflow:visible;max-width:none}

  /* ── Mobile: height:auto → zero void.
     Animasi toast & about-words berdasarkan posisi elemen di viewport (JS),
     bukan scroll-scrub dari container pin. ── */
  .lg-stage-scroll-wrap{height:auto}
  .lg-hero-heading{position:relative;z-index:8}
  .lg-stage-play,
  .lg-stage-topline{display:none!important}
  .lg-hero-title .lg-hero-creativity{
    position:relative;z-index:2;display:inline-block;
    color:var(--lg-black);
    overflow:visible;
    padding-right:.04em;
    line-height:1.02;
    padding-bottom:.12em;
  }
  .lg-hero-title .lg-hero-creativity::before{
    content:"Creativity";
    position:absolute;left:0;top:0;right:0;bottom:0;
    white-space:nowrap;
    line-height:1.02;
    padding-bottom:.12em;
    box-sizing:border-box;
    color:#fff;
    clip-path:var(--lg-creativity-white-clip, inset(100% 0 0 0));
    -webkit-clip-path:var(--lg-creativity-white-clip, inset(100% 0 0 0));
    pointer-events:none;
    text-shadow:0 1px 12px rgba(0,0,0,.4);
  }
  .lg-hero-stage{position:relative;top:auto;margin-top:-52px;padding-bottom:20px;z-index:5}
  .lg-stage-image{
    /* Leave room below fold so scroll affordance is obvious on phones */
    height:min(62svh,520px);
    min-height:280px;border-radius:24px;overflow:hidden;
    clip-path:inset(0 round 24px);
    -webkit-clip-path:inset(0 round 24px);
  }
  .lg-stage-photo{
    border-radius:24px;
  }
  .lg-stage-surface{border-radius:24px}

  .lg-about-scroll-wrap{height:auto;background:var(--lg-white)}
  .lg-about{
    position:relative;top:auto;min-height:0;
    padding:14vw var(--lg-gutter,20px) 12vw;
    grid-template-columns:1fr;gap:24px;align-content:start;
  }
  .lg-about-scroll-wrap .lg-about.lg-reveal{opacity:1;transform:none}
  .lg-about h2{font-size:clamp(32px,9vw,52px)}
  .lg-about-word{transition:opacity .25s ease}
  .lg-about p{margin:20px 0 0;max-width:none}

  /* Toast mobile: sequence satu per satu di bawah foto */
  .lg-hero-stage > .lg-toast-layer{
    position:relative;inset:auto;left:auto;right:auto;top:auto;
    height:82px;
    overflow:visible;pointer-events:auto;
    margin-top:12px;
  }
  .lg-toast,
  .lg-toast--1,
  .lg-toast--2,
  .lg-toast--3{
    position:absolute;
    left:50%;top:0;bottom:auto;right:auto;
    width:calc(100% - 32px);max-width:420px;
    transform:translate3d(-50%, calc((1 - var(--toast-p)) * 10px), 0);
    opacity:var(--toast-p);
    padding:10px 14px 10px 10px;border-radius:14px;gap:10px;
    grid-template-columns:36px minmax(0,1fr);
    transition:opacity .28s ease, transform .28s ease;
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
  }
  .lg-toast-icon{width:36px;height:36px;border-radius:9px}
  .lg-toast-content{padding-right:16px}
  .lg-toast-app{font-size:10.5px}.lg-toast-time{font-size:9px}
  .lg-toast-title{font-size:13px}
  .lg-toast-copy{font-size:11px;-webkit-line-clamp:2;margin-top:2px}
  .lg-toast-dismiss{width:18px;height:18px;top:7px;right:7px;font-size:11px}

  .lg-about p{margin-left:0}
  .lg-service-grid{grid-template-columns:1fr;overflow-x:clip;gap:14px;max-width:100%}
  .lg-work-grid{
    display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;
    gap:12px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-padding-left:20px;
    padding:2px 0 10px;
    scrollbar-width:none;
  }
  .lg-work-grid::-webkit-scrollbar{display:none}
  .lg-work-card,.lg-work-card:nth-child(odd),.lg-work-card:nth-child(even){--lg-drift:0}
  .lg-work-card{
    flex:0 0 min(78vw,300px);width:min(78vw,300px);height:min(62vw,340px);
    min-height:280px;max-height:360px;
    scroll-snap-align:start;
    padding:16px;
  }
  .lg-work-card.is-cover:after{
    background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 36%,rgba(0,0,0,.72) 100%);
  }
  .lg-work-no{
    font-size:11px;opacity:.8;letter-spacing:.04em;
    text-shadow:0 1px 8px rgba(0,0,0,.45);
  }
  .lg-work-info{
    left:16px;right:16px;bottom:16px;
    align-items:flex-end;gap:10px;
  }
  .lg-work-info > div{min-width:0;flex:1 1 auto}
  .lg-work-info > small{
    flex:0 0 auto;font-size:10px;opacity:.8;white-space:nowrap;
    text-shadow:0 1px 6px rgba(0,0,0,.5);
  }
  .lg-work-info small{font-size:9px;letter-spacing:.06em;opacity:.85}
  .lg-work-info h3{
    font-size:clamp(17px,4.6vw,22px);line-height:1.12;margin:5px 0 0;
    text-shadow:0 2px 14px rgba(0,0,0,.55);
  }
  .lg-work-note{
    max-width:100%;margin:6px 0 0;
    font-size:11px;line-height:1.35;opacity:.88;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
    text-shadow:0 1px 10px rgba(0,0,0,.5);
  }
  .lg-svc-card,.lg-svc-card:nth-child(n+3){grid-column:auto}
  .lg-svc-card{
    min-height:240px;border-radius:20px;
    overflow:hidden;
    --svc-on:0;
    transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1);
  }
  .lg-service:nth-child(odd){border-right:0}

  /* Section headers — stack rapi di mobile */
  .lg-work{padding:12vw 20px 10vw}
  .lg-services{padding:12vw 20px 10vw;border-radius:28px 28px 0 0}
  .lg-section-head{
    display:flex;flex-direction:column;align-items:flex-start;
    gap:18px;margin-bottom:32px;
  }
  .lg-section-head h2{
    font-size:clamp(34px,9.5vw,48px);
    line-height:.92;margin:8px 0 0;max-width:100%;
  }
  .lg-section-head .lg-button{align-self:flex-start;margin-top:0}
  .lg-section-note{text-align:left;margin-top:0;line-height:1.7}
  .lg-cta{min-height:0;padding:12vw 20px 9vw}

  /* Footer mobile — copyright sits just above floating tab bar */
  .lg-footer{
    padding:10px 16px calc(64px + env(safe-area-inset-bottom,0px));
    flex-direction:column;align-items:center;justify-content:center;gap:0;
    border-top:1px solid rgba(255,255,255,.06);
    min-height:0;
  }
  .lg-footer-links{display:none}
  .lg-footer-copy{
    margin:0;text-align:center;
    font-size:9px;line-height:1.2;
    color:rgba(255,255,255,.28);
    white-space:normal;width:100%;
  }
}
@media(max-width:560px){
  .lg-nav-cta-full{display:none}
  .lg-nav-cta-short{display:inline}
  #lg-nav .lg-nav-cta{padding:10px 12px}
  .lg-logo-stack{width:98px;height:20px}
  .lg-logo-img{width:98px;height:20px}
  .lg-hero,.lg-about,.lg-services,.lg-work{padding-left:20px;padding-right:20px}
  .lg-services,.lg-work{padding-top:10vw;padding-bottom:8vw}
  .lg-section-head{gap:14px;margin-bottom:28px}
  .lg-section-head h2{font-size:clamp(30px,8.5vw,40px);margin-top:6px}
  .lg-section-head .lg-button{padding:10px 16px;font-size:10px}
  .lg-hero-title-wrap{display:block}
  .lg-hero-title{font-size:clamp(48px,14.5vw,64px);overflow-wrap:break-word;overflow:visible}
  .lg-hero-stage{margin-top:-38px}
  .lg-hero-side-copy{display:none}
  .lg-stage-caption{right:16px;bottom:18px;font-size:8px}
  .lg-stage-image{
    height:min(58svh,480px);min-height:260px;border-radius:20px;
    clip-path:inset(0 round 20px);
    -webkit-clip-path:inset(0 round 20px);
  }
  .lg-stage-photo,.lg-stage-surface{border-radius:20px}
  .lg-hero-stage{padding-bottom:16px}
  /* 560px: toast sequence tetap sama, hanya sedikit lebih compact */
  .lg-toast,
  .lg-toast--1,
  .lg-toast--2,
  .lg-toast--3{
    width:calc(100% - 24px);
    padding:9px 11px 9px 9px;border-radius:12px;
    gap:8px;grid-template-columns:30px minmax(0,1fr);
  }
  .lg-toast-icon{width:30px;height:30px;border-radius:8px}
  .lg-toast-title{font-size:11px}.lg-toast-copy{font-size:9px}
  .lg-toast-dismiss{width:16px;height:16px;top:6px;right:6px;font-size:10px}
  .lg-section-note{text-align:left;margin-top:0}
  .lg-service{min-height:255px;padding:24px}
  .lg-work-card{border-radius:22px}
  .lg-cta{overflow-x:clip;min-height:0;padding:14vw 20px 10vw}
  .lg-footer{padding:10px 16px calc(64px + env(safe-area-inset-bottom,0px));justify-content:center}
  .lg-footer-copy{font-size:8.5px}
  #gallery .lg-page-end .lg-footer,
  #about .lg-page-end .lg-footer{
    padding:10px 16px calc(64px + env(safe-area-inset-bottom,0px));
    justify-content:center;
  }
  #gallery .lg-page-end .lg-footer-copy,
  #about .lg-page-end .lg-footer-copy{font-size:8.5px}
  .lw-hero{padding:5vw var(--lg-gutter,20px) 0}
  .lw-hero-title{font-size:clamp(52px,14vw,72px)}
  .lw-hero-filter-name{font-size:clamp(13px,3.5vw,16px);line-height:1.2;letter-spacing:-.02em}
  .lw-toolbar{padding:0 var(--lg-gutter,20px) 6px}
  .lw-toolbar-glass{padding:5px 8px;border-radius:12px}
  .lw-filters{gap:5px}
  .lw-pill{padding:6px 9px;font-size:8.5px}
  .lw-content{padding:0 var(--lg-gutter,20px) 48px}
  .lw-featured{grid-template-columns:1fr}
  .lw-featured-media{min-height:220px}
  .lw-cta-band{padding:48px 20px}
  .lw-lightbox{padding:12px}
  .lw-lb-panel{
    grid-template-columns:1fr;
    width:min(100%,calc(100vw - 24px));
    max-height:min(92dvh,900px);
    border-radius:20px;
  }
  .lw-lb-media{min-height:220px}
  .lw-lb-media.is-video .gallery-lightbox-yt{
    min-height:200px;aspect-ratio:16/9;height:auto;
  }
  .lw-lb-body{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.08);
    padding:20px 18px 18px;
  }
  .lw-lb-facts{grid-template-columns:1fr 1fr;gap:8px}
  .lw-lb-close{top:10px;right:10px}
  .lw-lb-nav{display:none}
}

/* ========== Work page — liquid glass (matches Home) ========== */
#gallery.lg-work-page .lg-shell,
#about.lg-about-page .lg-shell{
  background:
    radial-gradient(ellipse 70% 55% at 10% 0%,rgba(40,185,216,.04),transparent 70%),
    radial-gradient(ellipse 50% 60% at 90% 100%,rgba(147,51,234,.035),transparent 65%),
    var(--lg-white);
}

.lg-reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
}
.lg-reveal.is-in{opacity:1;transform:none}

.lw-hero{padding:4vw var(--lg-gutter,5vw) 2vw}
.lw-hero-title-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.42fr);
  gap:28px;align-items:end;margin-top:8px;
}
.lw-hero-title{
  font-size:clamp(56px,9.5vw,128px);line-height:.82;
  letter-spacing:-.085em;margin:0;font-weight:800;color:var(--lg-black);
}
.lw-hero-title span{font-weight:400}
.lw-hero-copy{
  font-size:12px;line-height:1.8;color:#777771;margin:0 0 8px;max-width:240px;
}
.lw-hero-meta{
  margin-top:28px;padding-top:18px;border-top:1px solid var(--lg-line);
}
.lw-hero-filter-name{
  display:block;
  font-size:clamp(28px,4.2vw,44px);font-weight:800;
  letter-spacing:-.04em;line-height:1.05;color:var(--lg-black);
}

.lw-toolbar{
  position:sticky;top:calc(76px + 14px);z-index:30;
  padding:0 var(--lg-gutter,5vw) 12px;
}
.lw-toolbar-stack{display:block}
.lw-toolbar-scroll{display:none}
.lw-toolbar-glass{
  padding:12px 18px;border-radius:20px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 40px rgba(15,80,100,.06);
}
@media(min-width:901px){
.lw-toolbar-glass{
  background:rgba(255,255,255,.52);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
}
}
.lw-filters{
  display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;
  gap:8px 10px;
}
.lw-pill{
  padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.34);font-size:10px;font-weight:600;
  letter-spacing:.04em;color:#656560;cursor:pointer;
  transition:all .22s ease;font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 14px rgba(0,0,0,.04);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.lw-pill:hover{color:#111;border-color:rgba(255,255,255,.95);transform:translateY(-1px)}
.lw-pill.active{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#7c3aed,#c084fc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px rgba(124,58,237,.28);
}

.lw-content{padding:8px var(--lg-gutter,5vw) 6vw}
.lw-layout{display:grid;gap:20px}
.lw-stack{display:grid;gap:20px}
.lw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.lw-grid--mv .lw-card-photo{inset:0;width:100%;height:100%;opacity:1}
.lw-grid--mv .lw-card:hover .lw-card-photo{opacity:1}
.lw-grid--mv .lw-card.mid,
.lw-grid--mv .lw-card.light{background:#111;color:#fff}
.lw-grid--mv .lw-card.light .lw-card-photo{opacity:1;mix-blend-mode:normal}
.lw-grid--mv .lw-card.light .lw-card-info h3{color:#fff}
.lw-grid--mv .lw-card-shine{display:none}
.lw-grid--mv .lw-card:before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.88) 100%);
  pointer-events:none;
}

.lw-card-year{
  display:block;margin-top:6px;font-size:10px;letter-spacing:.06em;opacity:.62;
}
.lw-card-peek{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1);
}
.lw-card-peek:after{
  content:"";width:18px;height:1px;background:currentColor;
  transform:scaleX(.4);transform-origin:left;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.lw-card.is-hot .lw-card-peek,
.lw-card:focus-visible .lw-card-peek{
  opacity:.92;transform:none;
}
.lw-card.is-hot .lw-card-peek:after,
.lw-card:focus-visible .lw-card-peek:after{transform:scaleX(1)}

@media(min-width:901px){
  .lw-grid--archive{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }
  .lw-grid--archive .lw-card{
    height:auto;aspect-ratio:4/5;border-radius:20px;
    --mx:50%;--my:78%;--lw-pos:center;
    transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,filter .45s ease;
  }
  .lw-grid--archive .lw-card-photo{
    inset:0;width:100%;height:100%;opacity:1;
    object-fit:cover;object-position:var(--lw-pos,center);
    transform:none;
    transition:object-position .45s ease;
  }
  .lw-grid--archive .lw-card:hover .lw-card-photo{
    transform:none;opacity:1;
  }
  .lw-grid--archive .lw-card.light,
  .lw-grid--archive .lw-card.mid{background:#111;color:#fff}
  .lw-grid--archive .lw-card.light .lw-card-photo{opacity:1;mix-blend-mode:normal}
  .lw-grid--archive .lw-card.light .lw-card-info h3{color:#fff}
  .lw-grid--archive .lw-card-shine{display:none}
  .lw-grid--archive .lw-card-info h3{
    font-size:clamp(15px,1.35vw,20px);margin:0;
  }
  .lw-grid--archive .lw-card:before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.78) 100%);
  }
  .lw-grid--archive .lw-card:after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:radial-gradient(380px circle at var(--mx) var(--my),rgba(255,255,255,.18),transparent 58%);
    opacity:0;transition:opacity .3s ease;
  }
  .lw-grid--archive .lw-card.is-hot:after,
  .lw-grid--archive .lw-card:focus-visible:after{opacity:1}
  .lw-grid--archive.is-focus .lw-card:not(.is-hot){
    filter:saturate(.5) brightness(.68);
    transform:scale(.965);
  }
  .lw-grid--archive.is-focus .lw-card.is-hot{
    transform:translateY(-8px);
    z-index:3;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 28px 64px rgba(0,0,0,.32);
  }
}
@media(min-width:1280px){
  .lw-grid--archive{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .lw-grid--archive .lw-card{aspect-ratio:3/4}
}
@media (prefers-reduced-motion:reduce){
  .lw-grid--archive .lw-card,
  .lw-grid--archive .lw-card-photo,
  .lw-card-peek{transition:none!important;transform:none!important}
  .lw-grid--archive.is-focus .lw-card:not(.is-hot){filter:none}
}

.lw-trust{
  padding:24px 26px;border-radius:24px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 14px 40px rgba(15,80,100,.05);
  backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
}
.lw-trust:before{
  content:"";position:absolute;top:-30%;right:-5%;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(147,51,234,.14),transparent 68%);pointer-events:none;
}
.lw-trust p{
  margin:10px 0 0;font-size:clamp(15px,2vw,18px);font-weight:600;
  line-height:1.6;color:var(--lg-black);max-width:760px;position:relative;z-index:1;
}
.lw-trust em{font-style:normal;color:#7c3aed}

.lw-featured{
  position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:0;border-radius:28px;overflow:hidden;cursor:pointer;
  background:rgba(255,255,255,.38);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 50px rgba(15,80,100,.08);
  backdrop-filter:blur(28px) saturate(170%);
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  transition:transform .3s ease,box-shadow .3s ease;
}
.lw-featured:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 28px 70px rgba(124,58,237,.12);
}
.lw-featured-media{
  position:relative;background:#111;min-height:320px;overflow:hidden;
}
.lw-featured-media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;min-height:320px;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.lw-featured:hover .lw-featured-media img{transform:scale(1.04)}
.lw-featured-body{
  padding:30px 28px;display:flex;flex-direction:column;justify-content:center;gap:10px;
}
.lw-featured-body h2{
  font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:800;
  line-height:1.08;letter-spacing:-.04em;margin:4px 0 0;color:var(--lg-black);
}
.lw-featured-body p{font-size:12px;line-height:1.75;color:#72726d;margin:0}
.lw-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.lw-chip{
  padding:7px 12px;border-radius:999px;font-size:10px;font-weight:600;
  color:#555550;background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.8);
}
.lw-link{
  margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#7c3aed;
}

.lw-card{
  --lw-lift:0;
  position:relative;height:460px;border-radius:28px;overflow:hidden;
  cursor:pointer;color:#fff;background:#111;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 45px rgba(0,0,0,.08);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;
}
.lw-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 26px 60px rgba(0,0,0,.14)}
.lw-card.mid{background:#7c7c77}
.lw-card.light{background:#d2d2cd;color:#111}
.lw-card-photo{
  position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;
  opacity:.42;z-index:0;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .35s ease;
}
.lw-card:hover .lw-card-photo{transform:scale(1.06);opacity:.52}
.lw-card.light .lw-card-photo{opacity:.24;mix-blend-mode:multiply}
.lw-card-shine{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(125deg,rgba(255,255,255,.16),transparent 30%,rgba(255,255,255,.05) 72%);
  mix-blend-mode:screen;
}
.lw-card-no{
  position:absolute;top:18px;left:18px;z-index:3;
  font-size:10px;font-weight:700;letter-spacing:.1em;opacity:.7;
  padding:6px 10px;border-radius:999px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
}
.lw-card-info{
  position:absolute;left:22px;right:22px;bottom:22px;z-index:4;
}
.lw-card-info small{
  display:block;font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;opacity:.72;margin-bottom:8px;
}
.lw-card-info h3{
  font-size:clamp(18px,2.2vw,24px);margin:0 0 8px;
  letter-spacing:-.04em;line-height:1.1;font-weight:800;
}
.lw-card.light .lw-card-info h3{color:#111}
.lw-card-meta{font-size:10px;opacity:.72}
.lw-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;font-size:16px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  color:#fff;backdrop-filter:blur(12px);pointer-events:none;
  box-shadow:0 8px 28px rgba(0,0,0,.2);
}
.lw-play--lg{width:64px;height:64px;font-size:18px}
.lw-featured.has-video .lw-featured-media:after,
.lw-card.has-video .lw-card-shine{display:none}

.lw-empty{
  padding:56px 24px;text-align:center;border-radius:24px;
  color:#8d8d87;font-size:13px;font-weight:500;
  background:rgba(255,255,255,.4);border:1px dashed rgba(0,0,0,.08);
}

/* Work — 3D Animation on-development placeholder */
.lw-on-dev{
  width:100%;
  min-height:min(52vh,520px);
  display:flex;align-items:center;justify-content:center;
  padding:8px 0 12px;
}
.lw-on-dev-card{
  position:relative;overflow:hidden;isolation:isolate;
  width:min(720px,100%);
  padding:clamp(36px,6vw,56px) clamp(22px,4vw,40px);
  border-radius:28px;text-align:center;color:#f5f5f7;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%,rgba(168,85,247,.28),transparent 55%),
    radial-gradient(ellipse 55% 50% at 85% 100%,rgba(45,226,230,.16),transparent 50%),
    radial-gradient(ellipse 50% 45% at 10% 90%,rgba(232,41,74,.14),transparent 48%),
    #0a0a0f;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 70px rgba(0,0,0,.18);
}
.lw-on-dev-card:before{
  content:"";position:absolute;inset:16%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(147,51,234,.22),transparent 68%);
  filter:blur(12px);animation:pulseDev 2s ease-in-out infinite;
}
.lw-on-dev-gif{
  position:relative;z-index:1;
  width:min(360px,92%);aspect-ratio:360/220;height:auto;margin:0 auto 22px;
  border-radius:22px;overflow:hidden;
  background:#0a0a0f;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 48px rgba(0,0,0,.35);
}
.lw-on-dev-gif img{
  display:block;width:100%;height:100%;object-fit:cover;
}
.lw-on-dev-kicker{
  position:relative;z-index:1;margin:0 0 8px;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,245,247,.55);
}
.lw-on-dev-title{
  position:relative;z-index:1;margin:0;
  font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1.05;
  color:#fff;
}
.lw-on-dev-copy{
  position:relative;z-index:1;
  margin:14px auto 0;max-width:42ch;
  font-size:13px;line-height:1.65;font-weight:500;
  color:rgba(245,245,247,.62);
}
@media(max-width:850px){
  .lw-on-dev{min-height:min(48vh,420px);padding:4px 0 8px}
  .lw-on-dev-card{border-radius:22px;padding:32px 20px 34px}
  .lw-on-dev-gif{width:min(300px,100%);border-radius:18px;margin-bottom:18px}
  .lw-on-dev-title{font-size:clamp(24px,7vw,32px)}
  .lw-on-dev-copy{font-size:12px;line-height:1.6}
}
@media (prefers-reduced-motion:reduce){
  .lw-on-dev-card:before{animation:none}
}

.lw-cta-band{padding:8vw var(--lg-gutter,5vw) 4vw}
.lg-page-end{
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,rgba(147,51,234,.2),transparent 52%),
    radial-gradient(ellipse 50% 40% at 50% 100%,rgba(192,132,252,.1),transparent 55%),
    #070707;
  color:#fff;
}
.lg-page-end .lw-cta-band{
  padding:clamp(48px,8vw,80px) var(--lg-gutter,5vw) clamp(28px,4vw,40px);
  background:transparent;
}
.lg-page-end .lg-footer{
  background:transparent;
  border-top:1px solid rgba(192,132,252,.12);
  padding:28px var(--lg-gutter,5vw) 34px;
}
.lw-cta-glass{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(48px,8vw,80px) clamp(24px,5vw,48px);
  border-radius:32px;color:#fff;
  background:
    radial-gradient(ellipse 70% 55% at 50% 8%,rgba(147,51,234,.28),transparent 52%),
    radial-gradient(ellipse 50% 40% at 50% 100%,rgba(192,132,252,.14),transparent 55%),
  #070707;
  border:1px solid rgba(192,132,252,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 80px rgba(124,58,237,.15);
}
.lw-cta-glass h2{
  font-size:clamp(42px,7vw,88px);line-height:.92;
  letter-spacing:-.07em;margin:16px 0 14px;font-weight:800;
}
.lw-cta-glass h2 em{
  font-style:italic;font-weight:400;
  background:linear-gradient(115deg,#e8294a 0%,#9333ea 48%,#c084fc 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.lw-cta-glass p{
  max-width:480px;margin:0 auto 28px;font-size:12px;line-height:1.75;color:rgba(255,255,255,.62);
}

/* Lightbox — cinematic viewer */
.lw-lightbox{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:28px 72px;
  background:rgba(4,4,8,.78);
  backdrop-filter:blur(28px) saturate(130%);
  -webkit-backdrop-filter:blur(28px) saturate(130%);
}
.lw-lightbox.open{display:flex}
.lw-lb-panel{
  position:relative;
  width:min(1120px,100%);
  max-height:min(88dvh,860px);
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.7fr);
  border-radius:24px;
  overflow:hidden;
  background:#0c0c10;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 120px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);
  animation:lwLbIn .38s cubic-bezier(.22,1,.36,1) both;
}
@keyframes lwLbIn{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:none}
}
.lw-lb-media{
  position:relative;background:#000;min-height:0;
  display:flex;align-items:center;justify-content:center;
  isolation:isolate;
}
.lw-lb-media img{
  width:100%;height:100%;max-height:min(88dvh,860px);
  object-fit:cover;object-position:center;display:block;
}
.gallery-lightbox-yt{
  display:none;width:100%;height:100%;min-height:320px;
  aspect-ratio:16/9;max-height:min(72dvh,760px);
  border:0;background:#000;
}
.lw-lb-media.is-video img{display:none}
.lw-lb-media.is-video .gallery-lightbox-yt{display:block;max-height:none;aspect-ratio:auto}
.lw-lb-body{
  position:relative;
  padding:28px 26px 26px;
  display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;
  color:#f4f4f1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 28%),
    #121218;
  border-left:1px solid rgba(255,255,255,.08);
}
.lw-lb-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.lw-lb-body .lg-label{
  color:rgba(255,255,255,.48);
  letter-spacing:.14em;
}
.lw-lb-index{
  font-size:10px;font-weight:700;letter-spacing:.12em;
  color:rgba(255,255,255,.38);white-space:nowrap;
}
.lw-lb-body h3{
  font-size:clamp(1.45rem,2.5vw,2rem);font-weight:800;
  line-height:1.08;letter-spacing:-.045em;margin:0;color:#fff;
}
.lw-lb-desc{
  font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.58);margin:0;
  max-width:34ch;
}
.lw-lb-facts{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-top:auto;padding-top:8px;
}
.lw-lb-fact{
  display:flex;flex-direction:column;gap:5px;
  padding:12px 12px 11px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
}
.lw-lb-fact span{
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
.lw-lb-fact strong{
  font-size:12px;font-weight:650;line-height:1.35;color:rgba(255,255,255,.92);
  letter-spacing:-.01em;
}
.lw-lb-close{
  position:absolute;top:14px;right:14px;z-index:5;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;padding:0;
  background:rgba(20,20,26,.72);border:1px solid rgba(255,255,255,.14);
  color:#fff;cursor:pointer;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.lw-lb-close:hover{
  transform:scale(1.05);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.28);
}
.lw-lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;padding:0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#fff;cursor:pointer;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.lw-lb-nav:hover{
  transform:translateY(-50%) scale(1.06);
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.3);
}
.lw-lb-nav.prev{left:max(16px,calc(50% - 620px))}
.lw-lb-nav.next{right:max(16px,calc(50% - 620px))}
@media (prefers-reduced-motion:reduce){
  .lw-lb-panel{animation:none}
}

/* ========== About page — liquid glass layout ========== */
.la-glass{
  background:rgba(255,255,255,.46);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 40px rgba(15,80,100,.06);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-radius:24px;
}

.la-hero{
  padding:4vw var(--lg-gutter,5vw) 2vw;
}
.la-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:32px;
  align-items:end;
  margin-top:8px;
}
.la-hero-title{
  font-size:clamp(52px,9vw,120px);
  line-height:.84;
  letter-spacing:-.085em;
  margin:0;
  font-weight:800;
  color:var(--lg-black);
}
.la-hero-title span{font-weight:400}
.la-hero-aside{display:flex;flex-direction:column;gap:14px;padding-bottom:6px}
.la-hero-copy{
  margin:0;
  font-size:13px;
  line-height:1.85;
  color:#72726d;
  max-width:340px;
}
.la-hero-tagline{
  margin:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.6;
  color:#9333ea;
}
.la-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:28px;
  padding:0;
  overflow:hidden;
}
.la-stat{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:24px 28px;
  border-right:1px solid rgba(0,0,0,.05);
}
.la-stat:last-child{border-right:none}
.la-stat-val{
  font-size:clamp(24px,3.2vw,36px);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--lg-black);
}
.la-stat-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#8d8d87;
}

.la-pillars{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  padding:0 var(--lg-gutter,5vw) 3vw;
}
.la-pillar{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:22px 20px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.la-pillar:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 20px 50px rgba(124,58,237,.1);
}
.la-pillar-ico{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  font-size:13px;font-weight:800;flex-shrink:0;
}
.la-pillar-ico.violet{background:rgba(147,51,234,.12);color:#9333ea}
.la-pillar-ico.cyan{background:rgba(40,185,216,.12);color:#0891b2}
.la-pillar-ico.warm{background:rgba(245,158,11,.12);color:#b45309}
.la-pillar strong{
  display:block;
  font-size:13px;
  font-weight:800;
  color:var(--lg-black);
  margin-bottom:6px;
  letter-spacing:-.01em;
}
.la-pillar p{
  margin:0;
  font-size:11px;
  line-height:1.65;
  color:#8d8d87;
}

.la-body{padding:0 var(--lg-gutter,5vw) 4vw}
.la-section-head{margin-bottom:28px;max-width:640px}
.la-section-head h2{
  font-size:clamp(36px,5.5vw,64px);
  line-height:.92;
  letter-spacing:-.06em;
  margin:10px 0 12px;
  font-weight:800;
  color:var(--lg-black);
}
.la-section-head h2 span{font-weight:400}
.la-section-head p{
  margin:0;
  font-size:12px;
  line-height:1.8;
  color:#777771;
}

/* Mobile-first: stack contact above FAQ. Desktop 2-col + sticky only ≥901px */
.la-body-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:start;
  width:100%;
  max-width:100%;
}
.la-body-grid > *{min-width:0;max-width:100%}
.la-faq{display:flex;flex-direction:column;gap:16px;min-width:0;order:2}
.la-faq-group{padding:22px 22px 18px}
.la-faq-group-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.la-faq-group-head h3{
  margin:0;
  font-size:14px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--lg-black);
}
.la-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.la-dot.violet{background:#9333ea}
.la-dot.cyan{background:#28b9d8}
.la-dot.warm{background:#f59e0b}

.la-faq-list{display:flex;flex-direction:column;gap:8px}
.la-faq-item{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.34);
  overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.la-faq-item[open]{
  border-color:rgba(124,58,237,.28);
  box-shadow:0 8px 24px rgba(124,58,237,.08);
}
.la-faq-item summary{
  list-style:none;cursor:pointer;padding:14px 16px;
  font-size:12px;font-weight:700;line-height:1.45;color:var(--lg-black);
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.la-faq-item summary::-webkit-details-marker{display:none}
.la-faq-item summary:after{
  content:"+";font-size:16px;font-weight:400;color:#999994;flex-shrink:0;line-height:1;
}
.la-faq-item[open] summary:after{content:"−"}
.la-faq-answer{
  padding:0 16px 14px;font-size:11px;line-height:1.75;color:#72726d;
  border-top:1px solid rgba(0,0,0,.05);
}
.la-faq-answer strong{color:var(--lg-black);font-weight:700}

.la-sidebar{
  position:static;
  top:auto;
  inset:auto;
  order:1;
  display:block;
  min-width:0;
  max-width:100%;
  width:100%;
}
.la-sidebar > * + *{margin-top:14px}
.la-contact{
  display:block;
  padding:24px 22px 20px;
  min-width:0;
  position:static;
}
.la-contact .lg-label{margin-bottom:10px}
.la-contact-lead{
  margin:0 0 16px;
  font-size:11px;
  line-height:1.65;
  color:#8d8d87;
}
.la-contact-row{
  display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;
  align-items:start;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.06);
  text-decoration:none;color:inherit;
}
.la-contact-row:last-of-type{border-bottom:none}
.la-contact-ico{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:800;
}
.la-contact-ico.wa{background:rgba(34,197,94,.12);color:#15803d;border:1px solid rgba(34,197,94,.22)}
.la-contact-ico.mail{background:rgba(124,58,237,.12);color:#7c3aed;border:1px solid rgba(124,58,237,.22)}
.la-contact-ico.loc{background:rgba(245,158,11,.12);color:#b45309;border:1px solid rgba(245,158,11,.22)}
.la-contact-body{min-width:0}
.la-contact-body strong{
  display:block;font-size:12px;font-weight:700;color:var(--lg-black);line-height:1.35;
  overflow-wrap:anywhere;word-break:break-word;
}
.la-contact-body small{display:block;margin-top:3px;font-size:10px;color:#8d8d87;line-height:1.45}
.la-contact-row:hover strong{color:#7c3aed}
.la-contact-actions{
  display:block;
  margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(0,0,0,.06);
}
.la-contact-actions .lg-button{
  display:block;width:100%;text-align:center;
  box-sizing:border-box;
}
.la-contact-actions .la-contact-signin{display:block;width:100%;margin-top:10px}
.la-contact-signin{
  border:none;background:none;padding:0;font-size:11px;font-weight:700;
  color:#777771;cursor:pointer;font-family:inherit;text-align:center;
}
.la-contact-signin:hover{color:#111}

.la-wa{padding:22px 20px;text-align:center;position:relative;overflow:hidden}
.la-wa.la-glass{
  background:
    linear-gradient(145deg,#011F1B 0%,#034A42 26%,#075E54 52%,#128C7E 78%,#25D366 100%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(1,31,27,.28),
    0 16px 40px rgba(2,40,33,.34);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.la-wa.la-glass:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.16),transparent 38%,rgba(255,255,255,.06));
}
.la-wa p{
  margin:0 0 12px;font-size:13px;font-weight:700;line-height:1.55;
  color:#fff;position:relative;z-index:1;
}
.la-wa .la-wa-link,
.lg-shell a.la-wa-link{
  display:inline-flex;align-items:center;gap:6px;position:relative;z-index:1;
  font-size:11px;font-weight:800;color:#fff !important;text-decoration:none;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.38);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.la-wa .la-wa-link:hover,
.lg-shell a.la-wa-link:hover{
  text-decoration:none;color:#fff !important;
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.55);
  transform:translateY(-1px);
}

/* Desktop About: 2-col — contact scrolls with page (no sticky) */
@media(min-width:901px){
  .la-body-grid{
    grid-template-columns:minmax(0,1fr) minmax(280px,340px);
    gap:22px;
  }
  .la-faq{order:0}
  .la-sidebar{
    position:static !important;
    top:auto !important;
    inset:auto !important;
    order:0;
    width:auto;
    align-self:start;
    display:block;
  }
}

@media (prefers-reduced-motion:reduce){
  .lg-reveal{opacity:1!important;transform:none!important;transition:none!important}
}

@media(max-width:900px){
  .lw-hero-title-wrap{grid-template-columns:1fr;gap:16px}
  .lw-hero-copy{max-width:none}
  .lw-hero-title{font-size:clamp(48px,13vw,88px);overflow-wrap:break-word}
  .lw-hero-meta{margin-top:14px;padding-top:12px}
  .lw-hero-filter-name{
    font-size:clamp(14px,3.8vw,17px);
    letter-spacing:-.025em;line-height:1.18;
  }
  .lw-toolbar{top:calc(64px + 12px);overflow-x:clip;max-width:100%;padding:0 var(--lg-gutter,20px) 8px}
  .lw-toolbar-stack{display:flex;flex-direction:column;gap:7px}
  .lw-toolbar-glass{
    position:relative;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;max-width:100%;
    padding:7px 10px;border-radius:14px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .lw-toolbar-glass::-webkit-scrollbar{display:none;height:0;width:0}
  .lw-toolbar-scroll{
    display:none;height:3px;border-radius:999px;
    background:rgba(7,7,7,.08);position:relative;overflow:hidden;
    margin:0 6px;
    opacity:1;visibility:visible;
    transition:opacity .22s ease,visibility .22s ease,height .22s ease,margin .22s ease;
  }
  .lw-toolbar-stack.is-scrollable .lw-toolbar-scroll{display:block}
  .lw-toolbar-stack.is-scrollable.is-bar-hidden{gap:0}
  .lw-toolbar-stack.is-scrollable.is-bar-hidden .lw-toolbar-scroll{
    opacity:0;visibility:hidden;height:0;margin:0;
  }
  .lw-toolbar-scroll-thumb{
    position:absolute;top:0;left:0;height:100%;min-width:28px;border-radius:999px;
    background:linear-gradient(90deg,#7c3aed 0%,#c084fc 100%);
    transition:left .1s ease-out,width .1s ease-out;
    will-change:left,width;
  }
  .lw-filters{flex-wrap:nowrap;width:max-content;max-width:none;gap:6px}
  .lw-pill{
    padding:7px 11px;font-size:9px;font-weight:600;letter-spacing:.02em;
    line-height:1.2;white-space:nowrap;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 2px 8px rgba(0,0,0,.03);
  }
  .lw-pill.active{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 14px rgba(124,58,237,.22);
  }
  .lw-featured{grid-template-columns:1fr}
  .lw-featured-media,.lw-featured-media img{min-height:240px}
  .lw-card-peek{display:none}
  .lw-grid,
  .lw-stack{
    display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;
    gap:12px;
    overflow-x:auto;overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--lg-gutter,20px);
    padding:2px 0 10px;
    scrollbar-width:none;
    min-height:232px;
  }
  .lw-grid::-webkit-scrollbar,.lw-stack::-webkit-scrollbar{display:none}
  .lw-grid.is-rail-autoplay,.lg-work-grid.is-rail-autoplay{
    scroll-snap-type:none;overscroll-behavior-x:contain;scroll-behavior:auto;
    touch-action:pan-x;
  }
  .lw-grid .lw-card,.lw-stack .lw-featured{
    flex:0 0 min(78vw,300px);width:min(78vw,300px);
    scroll-snap-align:start;scroll-snap-stop:always;
  }
  .lw-grid .lw-card{height:232px;border-radius:16px}
  .lw-grid .lw-card-photo{inset:0;width:100%;height:100%;opacity:1}
  .lw-grid .lw-card-shine{display:none}
  .lw-grid .lw-card:before{
    content:"";position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;
    background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.88) 100%);
    pointer-events:none;
  }
  .lw-featured,.lw-card{backdrop-filter:none;-webkit-backdrop-filter:none}
  .la-hero-grid{grid-template-columns:1fr;gap:20px}
  .la-hero-copy{max-width:none}
  .la-hero-title{font-size:clamp(44px,12vw,72px);overflow-wrap:break-word}
  .la-stats{grid-template-columns:1fr 1fr}
  .la-stat:nth-child(2){border-right:none}
  .la-stat:nth-child(1),.la-stat:nth-child(2){border-bottom:1px solid rgba(0,0,0,.05)}
  .la-pillars{
    position:relative;
    display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;
    gap:12px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--lg-gutter,20px);
    padding:2px var(--lg-gutter,20px) 12px;
    margin-bottom:0;
    scrollbar-width:none;
    max-width:100%;
    width:100%;
  }
  .la-pillars::after{
    content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;
    height:28px;pointer-events:none;
    background:linear-gradient(180deg,rgba(248,248,246,0) 0%,rgba(248,248,246,.55) 45%,var(--lg-white) 100%);
  }
  .la-pillars::-webkit-scrollbar{display:none}
  .la-pillar{
    flex:0 0 min(78vw,300px);width:min(78vw,300px);
    scroll-snap-align:start;scroll-snap-stop:always;
    min-height:112px;
  }
  .la-pillar:hover{transform:none}
  .la-body{
    padding-top:4px;
    position:relative;
    max-width:100%;
  }
  .la-body::before{
    content:"";position:absolute;left:0;right:0;top:-20px;z-index:1;
    height:28px;pointer-events:none;
    background:linear-gradient(180deg,rgba(248,248,246,.35),transparent);
  }
  .la-body .la-section-head{margin-top:4px;padding-top:4px}
  .la-body-grid{
    grid-template-columns:1fr;
    width:100%;
    max-width:100%;
  }
  .la-sidebar{
    position:static !important;
    top:auto !important;
    inset:auto !important;
    order:1;
    width:100%;
    max-width:100%;
    transform:none !important;
    display:block !important;
  }
  .la-faq{order:2}
  .la-contact,
  .la-wa,
  .la-sidebar,
  .la-body-grid{
    transform:none !important;
  }
  #about.lg-about-page,
  #about.lg-about-page .lg-shell{
    max-width:100%;
    width:100%;
    overflow-x:visible;
  }
  #about .la-section-head,
  #about .la-hero,
  #about .la-contact,
  #about .la-faq-group{
    scroll-margin-top:calc(64px + 12px);
  }
  .lg-page-end .lw-cta-band{padding:40px var(--lg-gutter,20px) 16px}
  /* Only when active — never force .lg-work-page/.lg-about-page visible while hidden */
  #gallery.active,
  #about.active{
    display:block;
    min-height:0;
    height:auto;
  }
  #gallery.active .lg-shell,
  #about.active .lg-shell{
    min-height:0;
  }
  #gallery .lg-page-end,
  #about .lg-page-end{
    padding-bottom:0;
    margin-bottom:0;
  }
  #gallery .lg-page-end .lg-footer,
  #about .lg-page-end .lg-footer{
    padding:10px var(--lg-gutter,20px) calc(64px + env(safe-area-inset-bottom,0px));
    flex-direction:column;align-items:center;justify-content:center;gap:0;
    background:transparent;
    border-top:1px solid rgba(255,255,255,.06);
    min-height:0;
  }
  #gallery .lg-page-end .lg-footer-copy,
  #about .lg-page-end .lg-footer-copy{
    margin:0;width:100%;text-align:center;
    font-size:9px;line-height:1.2;letter-spacing:.02em;
    color:rgba(255,255,255,.28);white-space:normal;
  }
  body.public-site:has(#gallery.active),
  body.public-site:has(#about.active){
    padding-bottom:0 !important;
  }
  .lw-cta-glass h2{font-size:clamp(36px,10vw,72px)}
}

/* ========== Mobile: no horizontal page scroll ========== */
@media(max-width:900px){
  html{overflow-x:clip;width:100%}
  body{overflow-x:clip;width:100%;max-width:100%}
  html:has(body.public-site){
    height:auto;min-height:100%;
    overflow-x:clip;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.public-site,
  body.public-site:has(#home.active){
    height:auto;max-height:none;
    overflow-x:clip;overflow-y:visible;
  }
  body.public-site #home.lg-landing,
  body.public-site #home.lg-landing.active,
  body.public-site #home.active .lg-shell{
    overflow:visible!important;
    max-height:none;
  }
  #lg-nav,
  .page.active,
  #gallery,#about,#faq-contact,#ops,#reset-password,
  .lg-page-end,
  .lw-content,.lw-layout,.lw-stack,
  .la-hero,.la-body,
  .lw-lightbox,
  #booking.booking-modal-backdrop,
  .booking-modal,
  .ops-content,
  #ops-access-gate{
    max-width:100%;
    overflow-x:clip;
  }
  .lg-shell{
    max-width:100%;
    overflow:visible;
  }
  .lg-cta,
  .lg-services,
  .lg-service-grid{overflow-x:clip;max-width:100%}
  .lw-grid,.lw-stack,.lg-work-grid,.la-pillars{overflow-x:auto !important}
  .lg-stage-scroll-wrap,
  .lg-about-scroll-wrap,
  .lg-hero-stage,
  .lg-toast-layer{overflow:visible;max-width:100%}
  .lg-stage-image{overflow:hidden}
  .lg-hero-title,
  .lw-hero-title,
  .la-hero-title,
  .lg-section-head h2,
  .lw-cta-glass h2,
  .lg-about h2{
    overflow-wrap:break-word;
    word-break:break-word;
  }
  .lg-shell img,
  .lw-lb-media img,
  .lg-stage-photo,
  .lw-card-photo,
  .lw-featured-media img,
  .gallery-lightbox-yt{
    max-width:100%;
  }
  .lw-lb-panel{width:min(1080px,calc(100vw - 32px))}
  .lw-lightbox.open{overflow-x:clip;overflow-y:auto}
}

/* ─── Video & Film Production · unified BTS gallery ─── */
.lw-bts{
  --bts-pink:#ff4d9a;
  --bts-cyan:#2de2e6;
  --bts-purple:#a855f7;
  position:relative;
  margin:8px 0 0;
  padding:clamp(28px,4vw,48px);
  border-radius:28px;
  overflow:hidden;
  color:#f5f5f7;
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%,rgba(255,77,154,.22),transparent 55%),
    radial-gradient(ellipse 60% 50% at 88% 8%,rgba(45,226,230,.16),transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 100%,rgba(168,85,247,.18),transparent 55%),
    #07070a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 28px 80px rgba(0,0,0,.28);
}
.lw-bts:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center,black 30%,transparent 78%);
}
.lw-bts-head{
  position:relative;z-index:1;
  max-width:640px;margin:0 0 22px;
}
.lw-bts-kicker{
  margin:0 0 10px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:transparent;
  background:linear-gradient(90deg,var(--bts-cyan),var(--bts-purple),var(--bts-pink));
  -webkit-background-clip:text;background-clip:text;
}
.lw-bts-head h2{
  margin:0 0 10px;
  font-size:clamp(28px,4.2vw,44px);
  letter-spacing:-.05em;line-height:1.05;font-weight:800;
}
.lw-bts-head p{
  margin:0;font-size:14px;line-height:1.65;
  color:rgba(245,245,247,.62);max-width:52ch;
}
.lw-bts-filters{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 22px;
}
.lw-bts-chip{
  appearance:none;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(245,245,247,.72);
  border-radius:999px;
  padding:9px 14px;
  font-size:11px;font-weight:600;letter-spacing:.04em;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.lw-bts-chip:hover{
  color:#fff;border-color:rgba(45,226,230,.45);
  background:rgba(45,226,230,.1);
}
.lw-bts-chip.is-active{
  color:#07070a;
  border-color:transparent;
  background:linear-gradient(120deg,var(--bts-cyan),var(--bts-purple) 55%,var(--bts-pink));
  box-shadow:0 10px 28px rgba(168,85,247,.28);
}
.lw-bts-wall{
  --bts-mx:50%;--bts-my:40%;
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:56px;
  gap:10px;
}
.lw-bts-wall:after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(420px circle at var(--bts-mx) var(--bts-my),rgba(255,77,154,.12),transparent 55%);
  opacity:.9;transition:opacity .3s ease;
}
.lw-bts-tile{
  position:relative;z-index:1;
  display:block;margin:0;padding:0;border:0;cursor:default;
  border-radius:18px;overflow:hidden;
  background:#111;
  isolation:isolate;
  animation:lwBtsIn .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i,0) * 35ms);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease;
}
@keyframes lwBtsIn{
  from{opacity:0;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:none}
}
.lw-bts-tile--tall{grid-column:span 3;grid-row:span 5}
.lw-bts-tile--wide{grid-column:span 6;grid-row:span 3}
.lw-bts-tile--sq{grid-column:span 3;grid-row:span 4}
.lw-bts-tile img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);
  transition:transform .55s cubic-bezier(.22,1,.36,1),filter .45s ease;
  filter:saturate(.92) contrast(1.05);
}
.lw-bts-tile-glow{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,60%),rgba(45,226,230,.28),transparent 58%);
  transition:opacity .3s ease;
  mix-blend-mode:screen;
}
.lw-bts-tile:hover,
.lw-bts-tile:focus-visible{
  transform:translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 0 0 1px rgba(168,85,247,.35),
    0 22px 50px rgba(0,0,0,.45);
  outline:none;
  z-index:3;
}
.lw-bts-tile:hover img,
.lw-bts-tile:focus-visible img{
  transform:scale(1.06);
  filter:saturate(1.08) contrast(1.08);
}
.lw-bts-tile:hover .lw-bts-tile-glow,
.lw-bts-tile:focus-visible .lw-bts-tile-glow{opacity:1}
.lw-empty--dark{
  color:rgba(245,245,247,.55);
  border:1px dashed rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
}
@media(max-width:1100px){
  .lw-bts-tile--tall{grid-column:span 4;grid-row:span 4}
  .lw-bts-tile--wide{grid-column:span 8;grid-row:span 3}
  .lw-bts-tile--sq{grid-column:span 4;grid-row:span 3}
}
@media(max-width:760px){
  .lw-bts{padding:16px 14px 20px;border-radius:18px;margin-top:4px}
  .lw-bts-head{max-width:none;margin:0 0 14px}
  .lw-bts-kicker{
    margin:0 0 6px;
    font-size:9px;letter-spacing:.12em;
  }
  .lw-bts-head h2{
    margin:0 0 6px;
    font-size:clamp(20px,5.6vw,24px);
    letter-spacing:-.04em;line-height:1.12;
  }
  .lw-bts-head p{
    font-size:12px;line-height:1.5;
    max-width:none;
  }
  .lw-bts-filters{gap:6px;margin:0 0 14px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .lw-bts-filters::-webkit-scrollbar{display:none}
  .lw-bts-chip{
    flex:0 0 auto;
    padding:7px 11px;
    font-size:10px;letter-spacing:.03em;
  }
  .lw-bts-wall{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:120px;
    gap:7px;
  }
  .lw-bts-tile{border-radius:14px}
  .lw-bts-tile--tall,
  .lw-bts-tile--wide,
  .lw-bts-tile--sq{grid-column:span 1;grid-row:span 1}
  .lw-bts-tile--tall:nth-child(3n){grid-row:span 2}
}
@media (prefers-reduced-motion:reduce){
  .lw-bts-tile{animation:none}
  .lw-bts-tile,
  .lw-bts-tile img{transition:none}
}

/* Home — BTS horizontal marquee */
.lg-bts-marquee{
  position:relative;
  padding:9vw 0 8vw;
  background:
    radial-gradient(90% 70% at 12% 0%,rgba(168,85,247,.22),transparent 55%),
    radial-gradient(80% 60% at 88% 100%,rgba(45,226,230,.14),transparent 50%),
    #07070b;
  color:#f5f5f7;
  overflow:hidden;
}
.lg-bts-marquee-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:0 5vw 36px;max-width:1400px;margin:0 auto;
}
.lg-bts-marquee-head .lg-label{color:rgba(245,245,247,.55)}
.lg-bts-marquee-head h2{
  margin:10px 0 0;font-size:clamp(28px,4.2vw,48px);letter-spacing:-.04em;line-height:1.05;color:#fff;
}
.lg-bts-marquee-head p{
  margin:12px 0 0;max-width:42ch;font-size:14px;line-height:1.55;color:rgba(245,245,247,.62);
}
.lg-bts-marquee-cta{
  flex:0 0 auto;
  background:linear-gradient(120deg,#a855f7,#2de2e6);
  color:#0a0a0f;border:0;
}
.lg-bts-marquee-stage{display:flex;flex-direction:column;gap:14px}
.lg-bts-track-wrap{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lg-bts-track{
  display:flex;align-items:stretch;gap:12px;width:max-content;
  will-change:transform;
}
.lg-bts-track--ltr{animation:lgBtsMarqueeLtr 52s linear infinite}
.lg-bts-track--rtl{animation:lgBtsMarqueeRtl 64s linear infinite}
.lg-bts-marquee-stage:hover .lg-bts-track{animation-play-state:paused}
.lg-bts-shot{
  margin:0;flex:0 0 auto;width:min(38vw,420px);height:220px;
  border-radius:18px;overflow:hidden;background:#111;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.lg-bts-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05) contrast(1.04);
}
@keyframes lgBtsMarqueeLtr{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@keyframes lgBtsMarqueeRtl{
  from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}
}
@media(max-width:850px){
  .lg-bts-marquee{padding:14vw 0 12vw}
  .lg-bts-marquee-head{flex-direction:column;align-items:flex-start;padding:0 20px 28px;gap:16px}
  .lg-bts-shot{width:72vw;height:168px;border-radius:14px}
  .lg-bts-track--ltr{animation-duration:38s}
  .lg-bts-track--rtl{animation-duration:46s}
}
@media (prefers-reduced-motion:reduce){
  .lg-bts-track--ltr,
  .lg-bts-track--rtl{animation:none;transform:none}
  .lg-bts-track-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}