/* Jadwal Cuci v1.1.7 — application shell, sidebar, header, hero, surfaces */
/* Sidebar */
.sidebar{
  position:sticky;top:0;height:100dvh;z-index:40;
  display:flex;flex-direction:column;
  padding:18px 14px 20px;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 64%,#f3f9ff 100%);
  border-right:1px solid var(--line);
  box-shadow:8px 0 28px rgba(17,141,255,.025);
}
.brand{display:flex;align-items:center;gap:12px;padding:5px 8px 22px}
.brand strong{display:block;font-size:18px;font-weight:750;letter-spacing:-.45px;color:#0f3158}
.brand-copy>span{display:block;margin-top:3px;color:var(--muted);font-size:12px;font-weight:500}
.brand-logo-shell{
  width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;
  border-radius:16px;border:1px solid #d9ecfb;
  background:linear-gradient(145deg,#fff 0%,#e9f6ff 100%);
  box-shadow:0 7px 20px rgba(17,141,255,.1),inset 0 1px 0 rgba(255,255,255,.82);
}
.brand-logo{display:block;width:42px;height:42px;object-fit:contain}
.compact-logo{width:36px;height:36px;border-radius:12px}
.compact-logo .brand-logo{width:32px;height:32px}
.nav-list{display:flex;flex-direction:column;gap:5px}
.nav-item{
  position:relative;overflow:hidden;min-height:48px;padding:0 15px;
  display:flex;align-items:center;gap:13px;
  border:0;border-radius:15px;background:transparent;color:#49627c;
  text-align:left;font-weight:550;text-decoration:none;
}
.nav-item.active{background:linear-gradient(90deg,#e4f3ff 0%,#f2f9ff 100%);color:var(--blue-strong);font-weight:700;box-shadow:inset 3px 0 0 var(--blue),0 5px 18px rgba(17,141,255,.05)}
.nav-item svg{width:19px;height:19px}
.sidebar-note{margin-top:auto;padding:14px;display:flex;gap:10px;border:1px solid #d7ebfb;border-radius:18px;background:linear-gradient(145deg,#f2f9ff,#eaf6ff)}
.note-icon{width:25px;height:25px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#fff;color:var(--blue-strong);font-weight:800;box-shadow:0 3px 10px rgba(17,141,255,.1)}
.sidebar-note strong{font-size:13px;color:#173f68}
.sidebar-note p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.5}

/* Header */
.topbar{
  position:sticky;top:0;z-index:30;height:76px;padding:0 28px;
  display:flex;align-items:center;gap:18px;
  border-bottom:1px solid rgba(216,234,247,.82);
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(140%);
  transition:box-shadow .2s var(--ease-standard),background-color .2s var(--ease-standard),border-color .2s var(--ease-standard);
}
.topbar.scrolled{background:rgba(255,255,255,.975);box-shadow:0 8px 24px rgba(17,141,255,.06);border-bottom-color:rgba(216,234,247,.94)}
.topbar-title{min-width:0}
.topbar-title h1{margin:0;color:#102f52;font-size:22px;font-weight:750;letter-spacing:-.55px}
.topbar-title p{margin:3px 0 0;color:var(--muted);font-size:12px}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.live-clock{
  min-width:224px;padding:8px 12px;display:flex;align-items:center;gap:10px;
  border:1px solid #d8eaf8;border-radius:15px;background:rgba(255,255,255,.94);
  box-shadow:0 4px 16px rgba(17,141,255,.045);
}
.status-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#34a853;box-shadow:0 0 0 3px #e6f4ea;animation:status-pulse 2.6s ease-in-out infinite}
.clock-copy{min-width:0}
.clock-primary{display:flex;align-items:baseline;gap:5px;line-height:1}
.live-clock strong{display:block;color:#123a62;font-size:13.5px;font-variant-numeric:tabular-nums;font-weight:750;letter-spacing:.15px}
.live-clock .clock-date-full,.live-clock .clock-date-compact{display:block;margin-top:4px;color:var(--muted);font-size:10.5px;white-space:nowrap}
.clock-date-compact{display:none!important}
.mobile-brand{display:none}
@keyframes status-pulse{0%,100%{box-shadow:0 0 0 3px #e6f4ea}50%{box-shadow:0 0 0 6px rgba(52,168,83,.1)}}

/* Views */
.content-view{display:none;min-width:0;max-width:1500px;margin:0 auto;padding:24px 28px 96px}
.content-view.active{display:block}
.content-view.active.swap-in{animation:view-in .25s var(--ease-emphasized) both}
.swap-in{animation:content-swap .2s var(--ease-standard) both}
@keyframes view-in{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes content-swap{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Hero */
.hero-card{
  min-height:220px;position:relative;isolation:isolate;overflow:hidden;
  display:flex;border-radius:24px;color:#fff;
  background:linear-gradient(125deg,#087ff0 0%,#1298ff 48%,#3bc2ff 100%);
  box-shadow:0 18px 52px rgba(17,141,255,.17),inset 0 1px 0 rgba(255,255,255,.18);
  transform:translateZ(0);
}
.hero-card:before{content:"";position:absolute;right:-40px;bottom:-120px;width:410px;height:410px;border:62px solid rgba(255,255,255,.075);border-radius:50%}
.hero-card:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.09),transparent 36%,transparent 72%,rgba(255,255,255,.04));pointer-events:none}
.hero-main{position:relative;z-index:2;align-self:center;padding:34px 38px}
.eyebrow,.section-kicker{font-size:11px;font-weight:750;letter-spacing:1.05px}
.eyebrow{color:#dff4ff}
.hero-main h2{margin:7px 0 6px;font-size:38px;font-weight:780;letter-spacing:-1.25px}
.hero-main p{margin:0 0 22px;color:#eaf8ff;font-size:15px;font-weight:500}
.shift-line{display:flex;align-items:center;gap:9px;color:#edf9ff;font-size:13px;font-weight:550}
.shift-pill{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.97);color:#0871d6;font-weight:750;box-shadow:0 4px 14px rgba(4,82,153,.13)}
.separator-dot{opacity:.58}
.hero-art{margin-left:auto;min-width:320px;display:grid;place-items:center;position:relative;z-index:1}
.washer{width:174px;height:184px;padding:16px;border-radius:24px;background:#fff;box-shadow:0 14px 36px rgba(0,0,0,.17);transform:translateZ(0);animation:washer-float 6s var(--ease-standard) infinite alternate}
.washer-top{display:flex;gap:7px;justify-content:flex-end}
.washer-top i{display:block;width:9px;height:9px;border-radius:50%;background:#dceaf7}
.washer-top i:first-child{margin-right:auto;width:38px;border-radius:7px;background:#e8f1f8}
.washer-door{width:118px;height:118px;margin:11px auto 0;overflow:hidden;position:relative;border:9px solid #e8f1f8;border-radius:50%;background:#e7f4ff;box-shadow:inset 0 0 0 4px #9bd2fb}
.water-wave{position:absolute;left:-15px;right:-15px;bottom:-12px;height:62%;border-radius:45% 55% 0 0/22% 28% 0 0;background:#4285f4;transform-origin:center bottom;animation:water-drift 5s ease-in-out infinite alternate}
@keyframes washer-float{from{translate:0 0}to{translate:0 -5px}}
@keyframes water-drift{from{transform:rotate(-5deg) translateX(-2px)}to{transform:rotate(1deg) translateX(3px)}}

/* Shared surfaces */
.surface{background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(12px);backface-visibility:hidden}
.schedule-now,.notice-card,.week-preview,.schedule-toolbar,.search-panel{padding:22px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-kicker{color:var(--blue)}
.section-head h3,.notice-card h3,.toolbar-heading h2,.search-panel h2{margin:4px 0 0;font-size:19px;font-weight:730;letter-spacing:-.45px}