/* 喵的，又要上班了 v3 UI layer.
   Loaded after every inline <style> block, so it wins the cascade without editing the older layers.
   Sections: 1 midnight theme · 2 floating nav (2b login) · 3 duotone icons · 4 calendar markers · 5 onboarding · 6 settings + plan · 7 stitched buttons · 8 opening + login. */

/* 1 ─ Midnight: a darker, warmer-text variant of the coffee dark theme for night shifts. */
html.dark.midnight{
  --bg:#0e1019!important;--paper:#141723!important;--card:#191c28!important;
  --ink:#f3e6cf!important;--brown:#d8b48a!important;--muted:#a89c8a!important;--line:#2a2e40!important;
  --shadow:0 10px 28px rgba(0,0,0,.35)!important;
  --mobile-surface:#191c28!important;--mobile-field:#141723!important;--mobile-soft:#222536!important;
  --mobile-text:#f3e6cf!important;--mobile-muted:#a89c8a!important;--mobile-line:#2a2e40!important;
  --mobile-track:#2f3347!important;--mobile-accent:#f2b260!important;--mobile-nav-active:#2f2c2a!important;
  --mobile-gold-surface:#2d2a26!important;--mobile-gold-icon:#3a352c!important;--mobile-gold-ink:#f6cf86!important;
  --mobile-blue-surface:#1b2640!important;--mobile-blue-icon:#243354!important;--mobile-blue-ink:#8fb4ef!important;
  --mobile-pink-surface:#35202c!important;--mobile-pink-icon:#4a2b3b!important;--mobile-pink-ink:#f2a0b4!important;
  --mobile-green-surface:#1a2e25!important;--mobile-green-icon:#244034!important;--mobile-green-ink:#8fd3a8!important;
  --mobile-purple-surface:#2a2442!important;--mobile-purple-icon:#3a3159!important;--mobile-purple-ink:#c3a6f0!important;
  --mobile-teal-surface:#1a2c34!important;--mobile-teal-icon:#23404a!important;--mobile-teal-ink:#8fd6e0!important;
  --mobile-gray-surface:#20232f!important;--mobile-gray-icon:#2c3040!important;--mobile-gray-ink:#cfc6bd!important;
  background:#0e1019!important;
}
html.dark.midnight body,
html.dark.midnight .app,
html.dark.midnight .main,
html.dark.midnight .shell,
html.dark.midnight .page{background:#0e1019!important;color:#f3e6cf}
/* The coffee theme hard-codes its two surface browns in many layers; map both to midnight navy. */
html.dark.midnight :is(.card,.settings-card,.ref-settings-card,.v219-settings-profile-card,.account-name-editor,
  .mda-worktypes,.mda-kpi,.mda-next-shift,.mda-leave-shell,.mda-leave-card,.mda-reminder,
  .ref-template-card,.calendar-card,.schedule-legend-card,.v219-board-card,
  .salary-card,.salary-section,.salary-field,.result-card,.formula,.btn,dialog,.dialog,.sheet){
  background:#191c28!important;border-color:#2a2e40!important;
}
html.dark.midnight :is(.day,.weekdays,.icon-btn,.today-btn,.schedule-template-fold,.attendance-v142-tabs,.salary-tabs,.salary-tab,
  .ref-settings-rows,.ref-settings-row,.ref-settings-icon,#settingsProfileLogout,input,select,textarea){
  background:#141723!important;border-color:#2a2e40!important;
}
html.dark.midnight #calendarDays .day.empty{background:#11131d!important}
html.dark.midnight :is(.field-icon,.summary-icon,.settings-section-icon,.v219-settings-profile-card small){background:#222536!important}
html.dark.midnight :is(.salary-tab.active,#attendanceTabEvents.active,#attendanceTabTodos.active){background:#2a2e45!important;color:#f6cf86!important}
html.dark.midnight :is(.mda-kpi-blue,.mda-kpi-pink){background:linear-gradient(145deg,#1c2030,#171a26)!important}
html.dark.midnight .mda-next-pill{background:linear-gradient(#3a352c,#2d2a26)!important}
html.dark.midnight .btn.primary{background:#2d2a26!important;color:#f6cf86!important;border-color:#4a4232!important}
html.dark.midnight .btn.danger{color:#f2a0b4!important}

/* 2 ─ Floating liquid-glass bottom navigation (phone layout). */
@media (max-width:760px){
  html body nav.bottom-nav{
    left:14px!important;right:14px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;
    height:68px!important;padding:6px!important;gap:2px!important;
    border-radius:34px!important;border:1px solid rgba(255,255,255,.85)!important;
    background:rgba(255,253,250,.66)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
    box-shadow:0 12px 32px rgba(111,70,43,.18),inset 0 1px 0 rgba(255,255,255,.9)!important;
  }
  html body nav.bottom-nav button{border-radius:27px!important;min-height:0!important;height:100%!important;gap:2px!important;color:var(--brown)!important;background:transparent!important;border:0!important;box-shadow:none!important}
  html body nav.bottom-nav button .icon{font-size:22px!important}
  html body nav.bottom-nav button span{font-size:11px!important;font-weight:900!important;line-height:1.1!important}
  html body nav.bottom-nav button.active{
    background:var(--mobile-nav-active,#ffe7ae)!important;color:var(--mobile-gold-ink,#ae5b0c)!important;
    box-shadow:inset 0 0 0 1.5px rgba(243,210,163,.95)!important;
  }
  html.dark body nav.bottom-nav{
    background:rgba(42,33,29,.64)!important;border-color:rgba(255,255,255,.12)!important;
    box-shadow:0 12px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)!important;
  }
  html.dark body nav.bottom-nav button{color:#e2b28f!important}
  html.dark body nav.bottom-nav button.active{background:rgba(226,173,108,.16)!important;color:#ffdb91!important;box-shadow:inset 0 0 0 1.5px rgba(226,173,108,.35)!important}
  html.dark.midnight body nav.bottom-nav{background:rgba(25,28,40,.66)!important}
  html.dark.midnight body nav.bottom-nav button{color:#d8b48a!important}
  html.dark.midnight body nav.bottom-nav button.active{background:rgba(242,178,96,.14)!important;color:#f6cf86!important}
  /* Content can scroll under the floating bar; keep the last card clear of it. */
  html body .main{padding-bottom:calc(68px + 40px + env(safe-area-inset-bottom))!important}
}

/* 2b ─ Login: full-bleed art with one row of round liquid-glass buttons at the bottom. */
#welcomeDialog .welcome-head-v3{display:flex!important;flex-direction:column;align-items:center;gap:4px;margin:0 0 16px!important;text-align:center}
#welcomeDialog .welcome-head-v3 b{display:block!important;font-size:18px!important;font-weight:950!important;color:#fff!important;text-shadow:0 1px 6px rgba(40,18,8,.55)!important}
#welcomeDialog .welcome-head-v3 span{display:block!important;font-size:13px!important;font-weight:700!important;color:rgba(255,255,255,.92)!important;text-shadow:0 1px 6px rgba(40,18,8,.55)!important}
#welcomeDialog .welcome-actions-v3{display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:flex-start!important;gap:20px!important;width:auto!important;margin:0 auto!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
#welcomeDialog .welcome-actions-v3 .welcome-button{
  display:flex!important;flex-direction:column!important;align-items:center!important;gap:7px!important;
  width:auto!important;min-width:0!important;min-height:0!important;height:auto!important;padding:0!important;margin:0!important;
  background:none!important;border:0!important;box-shadow:none!important;color:#fff!important;cursor:pointer;
}
#welcomeDialog .welcome-actions-v3 .welcome-button[hidden]{display:none!important}
#welcomeDialog .welcome-orb{
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:rgba(255,255,255,.14);border:1.2px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 8px 18px rgba(40,18,8,.25),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -8px 16px rgba(255,255,255,.08);
  transition:transform .15s ease;
}
#welcomeDialog .welcome-button:active .welcome-orb{transform:scale(.94)}
#welcomeDialog .welcome-button:focus-visible .welcome-orb{outline:3px solid #ffd38c;outline-offset:3px}
#welcomeDialog .welcome-orb svg{width:26px!important;height:26px!important}
/* 訪客: the logo's felt paw without the clock (assets/opening/logo-paw-v1.png). */
#welcomeDialog .welcome-guest-paw{position:relative;z-index:1;display:block;width:34px;height:auto;filter:drop-shadow(0 1px 1px rgba(60,10,5,.35))}
#welcomeDialog .welcome-actions-v3 .welcome-button .welcome-orb{background:rgba(255,255,255,.14)!important;color:#fff!important;font-size:inherit!important;margin:0!important;padding:0!important}
#welcomeDialog .welcome-actions-v3 .welcome-button .welcome-orb-line{background:rgba(6,199,85,.62)!important}
#welcomeDialog.welcome-auto-login{max-width:360px!important;width:calc(100vw - 32px)!important}
#welcomeDialog .welcome-content{max-width:360px!important;width:100%!important}
#welcomeDialog .welcome-head-v3 span{max-width:330px}
#welcomeDialog .welcome-orb-line b{font:950 12px/1 Inter,system-ui,sans-serif;letter-spacing:.02em;color:#fff}
#welcomeDialog .welcome-orb-label{font-size:12px!important;font-weight:900!important;color:#fff!important;text-shadow:0 1px 5px rgba(40,18,8,.6)!important;white-space:nowrap}
#welcomeDialog .welcome-foot-v3{display:flex!important;align-items:center;justify-content:center;gap:5px;margin:16px 0 0!important;font-size:11px!important;font-weight:700!important;color:rgba(255,255,255,.88)!important;text-shadow:0 1px 5px rgba(40,18,8,.6)}
#welcomeDialog .welcome-foot-v3 svg{width:12px;height:12px}
#welcomeDialog .welcome-message:empty{display:none}

/* 3 ─ Duotone icons: the outline stays; .duo adds a light fill of the same colour. */
svg.icon .duo,svg .duo{fill:currentColor!important;fill-opacity:.22!important;stroke:none!important}

/* 4 ─ Calendar: overtime, holiday and today must not look alike. */
#page-calendar .calendar-key-v3{display:flex;flex-wrap:wrap;gap:6px 8px;margin:2px 4px 10px;align-items:center}
#page-calendar .calendar-key-v3 .key-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:8px;font-size:11px;font-weight:900;line-height:1.3}
#page-calendar .calendar-key-v3 .key-chip .icon{font-size:11px}
#page-calendar .key-a{background:var(--mobile-gold-surface,#fff0d4);color:var(--mobile-gold-ink,#ae5b0c)}
#page-calendar .key-b{background:var(--mobile-blue-surface,#e2f0ff);color:var(--mobile-blue-ink,#3b82c8)}
#page-calendar .key-ot{background:var(--mobile-purple-surface,#f1e4ff);color:#8a47c2;box-shadow:inset 0 0 0 1.5px #9c59cf}
#page-calendar .key-holiday{background:var(--mobile-pink-surface,#ffe6e9);color:#e2566a;box-shadow:none;outline:1px dashed #f16b78;outline-offset:-1px}
#page-calendar .key-today{background:var(--mobile-gold-surface,#fff0d4);color:#e9770f;box-shadow:inset 0 0 0 2px #e9770f}
html.dark #page-calendar .key-ot{color:#dec6ff;box-shadow:inset 0 0 0 1.5px #b991e8}
html.dark #page-calendar .key-holiday{color:#ffb9cf}
html.dark #page-calendar .key-today{color:#f2b260;box-shadow:inset 0 0 0 2px #f2b260}

/* The full legend's A/B dots must match the chips in the grid (A = honey, B = blue). */
#page-calendar #calendarLegend .dot.a{background:#f6b444!important}
#page-calendar #calendarLegend .dot.b{background:#4f9feb!important}

/* Overtime: purple solid box with a clock (holidays keep the pink dashed tag). */
#page-calendar #calendarDays .status-pill.st-ot{
  background:var(--mobile-purple-surface,#f1e4ff)!important;color:#8a47c2!important;
  box-shadow:inset 0 0 0 1.5px #9c59cf!important;border:0!important;border-radius:8px!important;
}
html.dark #page-calendar #calendarDays .status-pill.st-ot{color:#dec6ff!important;box-shadow:inset 0 0 0 1.5px #b991e8!important}
#page-calendar #calendarDays .holiday-tag{
  background:var(--mobile-pink-surface,#ffe6e9)!important;color:#e2566a!important;
  border:1px dashed #f16b78!important;box-shadow:none!important;border-radius:7px!important;
}
html.dark #page-calendar #calendarDays .holiday-tag{color:#ffb9cf!important;border-color:#e97a92!important}
#page-calendar #calendarDays .day.has-holiday .date-num{color:#e2566a!important}
html.dark #page-calendar #calendarDays .day.has-holiday .date-num{color:#ff9fb4!important}

/* Today: the whole cell is framed, instead of a small circle around the number. */
#page-calendar #calendarDays .day.today{
  background:var(--mobile-gold-surface,#fff0d4)!important;
  box-shadow:inset 0 0 0 2px #e9770f!important;border-radius:12px!important;
}
#page-calendar #calendarDays .day.today .date-num{
  background:transparent!important;color:#e9770f!important;box-shadow:none!important;
  width:auto!important;height:auto!important;font-weight:950!important;
}
html.dark #page-calendar #calendarDays .day.today{box-shadow:inset 0 0 0 2px #f2b260!important}
html.dark #page-calendar #calendarDays .day.today .date-num{color:#f2b260!important}

/* 5 ─ Onboarding (#meowOnboarding, built by meow-v3.js). Full-screen, follows light / coffee dark / midnight. */
#meowOnboarding{
  --ob-bg:#fff9f1;--ob-card:#ffffff;--ob-soft:#fff3e8;--ob-ink:#3c1c15;--ob-brown:#8f583e;--ob-muted:#8e776c;--ob-line:#efe5dc;
  --ob-orange:#e9770f;--ob-orange2:#f6b444;--ob-gold-soft:#fff0d4;--ob-gold-ink:#ae5b0c;--ob-gold-line:#f3d2a3;--ob-on-accent:#fff;
  --ob-blue:#4f9feb;--ob-blue-soft:#e2f0ff;--ob-green:#55ae68;--ob-green-soft:#e2f6e5;--ob-pink:#f16b78;--ob-pink-soft:#ffe6e9;
  --ob-purple:#9c59cf;--ob-purple-soft:#f1e4ff;--ob-shadow:0 10px 28px rgba(143,88,62,.10);
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;
  background:var(--ob-bg)!important;color:var(--ob-ink);overflow:hidden;z-index:2147483000;
}
html.dark #meowOnboarding{
  --ob-bg:#18120f;--ob-card:#2a211d;--ob-soft:#322720;--ob-ink:#f7eee8;--ob-brown:#e2b28f;--ob-muted:#c9b5a7;--ob-line:#513d31;
  --ob-orange:#e2ad6c;--ob-orange2:#f0c070;--ob-gold-soft:#403323;--ob-gold-ink:#ffdb91;--ob-gold-line:#6a5236;--ob-on-accent:#2a1a0e;
  --ob-blue:#acd9ff;--ob-blue-soft:#20364a;--ob-green:#b6ecc3;--ob-green-soft:#273d31;--ob-pink:#ffb9cf;--ob-pink-soft:#422c38;
  --ob-purple:#dec6ff;--ob-purple-soft:#3d304b;--ob-shadow:0 10px 28px rgba(0,0,0,.28);
}
html.dark.midnight #meowOnboarding{
  --ob-bg:#0e1019;--ob-card:#191c28;--ob-soft:#222536;--ob-ink:#f3e6cf;--ob-brown:#d8b48a;--ob-muted:#9c95a0;--ob-line:#2a2e40;
  --ob-orange:#f2b260;--ob-orange2:#f2c46a;--ob-gold-soft:#2d2a26;--ob-gold-ink:#f6cf86;--ob-gold-line:#4a4232;--ob-on-accent:#1a1208;
  --ob-blue:#8fb4ef;--ob-blue-soft:#1b2640;--ob-green:#8fd3a8;--ob-green-soft:#1a2e25;--ob-pink:#f2a0b4;--ob-pink-soft:#35202c;
  --ob-purple:#c3a6f0;--ob-purple-soft:#2a2442;--ob-shadow:0 10px 28px rgba(0,0,0,.35);
}
#meowOnboarding::backdrop{background:#fff9f1}
html.dark #meowOnboarding::backdrop{background:#18120f}
html.dark.midnight #meowOnboarding::backdrop{background:#0e1019}
html.meow-onboarding-open,html.meow-onboarding-open body{overflow:hidden}
#meowOnboarding .ob-shell{display:flex;flex-direction:column;height:100%;max-width:440px;margin:0 auto;
  padding:env(safe-area-inset-top) 0 0;box-sizing:border-box}
#meowOnboarding .ob-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px 6px;min-height:58px;box-sizing:border-box}
#meowOnboarding .ob-back,#meowOnboarding .ob-back-space{width:40px;height:40px;flex:0 0 40px}
#meowOnboarding .ob-back{display:grid;place-items:center;border-radius:50%;border:1px solid var(--ob-line);background:var(--ob-card)!important;color:var(--ob-ink);box-shadow:var(--ob-shadow);padding:0}
#meowOnboarding .ob-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#meowOnboarding .ob-paws{display:flex;gap:6px;align-items:center}
#meowOnboarding .ob-paws svg{width:18px;height:18px;fill:var(--ob-line);transition:transform .2s,fill .2s}
#meowOnboarding .ob-paws svg.past{fill:var(--ob-gold-line)}
#meowOnboarding .ob-paws svg.on{fill:var(--ob-orange);transform:scale(1.15)}
#meowOnboarding .ob-skip{min-width:40px;height:40px;border:0;background:none!important;color:var(--ob-muted);font-family:inherit;font-size:15px;font-weight:700;line-height:1;padding:0 2px}
#meowOnboarding .ob-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 16px 18px;-webkit-overflow-scrolling:touch}
#meowOnboarding .ob-hero{border-radius:22px;overflow:hidden;box-shadow:var(--ob-shadow);aspect-ratio:2.69/1;margin:12px 0 0;background:var(--ob-soft)}
#meowOnboarding .ob-hero img{display:block;width:100%;height:100%;object-fit:cover}
#meowOnboarding .ob-title{margin:20px 4px 0;font-size:28px;line-height:1.3;font-weight:800;letter-spacing:.01em;color:var(--ob-ink)}
#meowOnboarding .ob-sub{margin:6px 4px 0;font-size:14px;line-height:1.6;color:var(--ob-muted)}
#meowOnboarding .ob-card{position:relative;margin-top:18px;padding:16px;border-radius:22px;background:var(--ob-card)!important;border:1px solid var(--ob-line)!important;box-shadow:var(--ob-shadow)}
#meowOnboarding .ob-card+.ob-card{margin-top:14px}
#meowOnboarding .ob-card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
#meowOnboarding .ob-card-head h3{margin:0;font-size:18px;font-weight:800;color:var(--ob-ink);flex:1}
#meowOnboarding .ob-card-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--ob-soft);color:var(--ob-brown)}
#meowOnboarding .ob-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#meowOnboarding .ob-card-icon svg ellipse,#meowOnboarding .ob-card-icon svg circle:not([r="8.5"]){fill:currentColor;stroke:none}
#meowOnboarding .ob-tag{font-size:12px;font-weight:700;color:var(--ob-muted);background:var(--ob-soft);border-radius:999px;padding:4px 10px}
#meowOnboarding .ob-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
#meowOnboarding .ob-day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 8px;border-radius:13px;border:1px solid var(--ob-line);background:var(--ob-bg)}
#meowOnboarding .ob-day small{font-size:12px;color:var(--ob-muted);font-weight:700}
#meowOnboarding .ob-day em{font-style:normal;font-size:15px;font-weight:800;color:var(--ob-ink)}
#meowOnboarding .ob-day b{font-size:13px;font-weight:800;min-width:22px;text-align:center;border-radius:7px;padding:1px 0}
#meowOnboarding .ob-day.today{background:var(--ob-gold-soft);border:2px solid var(--ob-orange2)}
#meowOnboarding .ob-sa b{color:var(--ob-gold-ink);background:var(--ob-gold-soft)}
#meowOnboarding .ob-sb b{color:var(--ob-blue);background:var(--ob-blue-soft)}
#meowOnboarding .ob-soff b{color:var(--ob-green);background:var(--ob-green-soft)}
#meowOnboarding .ob-week:not(.ob-week-dates) .ob-day{border:0}
#meowOnboarding .ob-week:not(.ob-week-dates) .ob-day b{font-size:16px}
#meowOnboarding .ob-day.ob-early{background:var(--ob-gold-soft)}#meowOnboarding .ob-day.ob-early b{color:var(--ob-gold-ink)}
#meowOnboarding .ob-day.ob-middle{background:var(--ob-blue-soft)}#meowOnboarding .ob-day.ob-middle b{color:var(--ob-blue)}
#meowOnboarding .ob-day.ob-night{background:var(--ob-purple-soft)}#meowOnboarding .ob-day.ob-night b{color:var(--ob-purple)}
#meowOnboarding .ob-day.ob-off{background:var(--ob-green-soft)}#meowOnboarding .ob-day.ob-off b{color:var(--ob-green)}
#meowOnboarding .ob-next{display:flex;align-items:center;gap:8px;margin-top:12px;padding:12px 96px 12px 14px;border-radius:14px;border:1px solid var(--ob-line);background:var(--ob-bg);font-size:15px}
#meowOnboarding .ob-next svg{width:18px;height:18px;color:var(--ob-brown)}
#meowOnboarding .ob-next b{color:var(--ob-ink)}
#meowOnboarding .ob-next span{color:var(--ob-muted);font-weight:700}
#meowOnboarding .ob-has-cat{margin-bottom:24px}
#meowOnboarding .ob-cat{pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 8px 10px rgba(60,28,21,.18))}
#meowOnboarding .ob-cat-corner{position:absolute;right:-6px;bottom:-30px;width:92px;height:auto}
#meowOnboarding .ob-setup-head,#meowOnboarding .ob-done-head{display:flex;align-items:flex-start;gap:4px}
#meowOnboarding .ob-setup-head>div,#meowOnboarding .ob-done-head>div{flex:1;min-width:0}
#meowOnboarding .ob-cat-head{width:92px;height:auto;flex:0 0 92px;margin-top:10px}
#meowOnboarding .ob-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
#meowOnboarding .ob-stats.ob-stats-3{grid-template-columns:repeat(3,1fr);margin-top:14px}
#meowOnboarding .ob-stats span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:16px;background:var(--ob-card);border:1px solid var(--ob-line);box-shadow:var(--ob-shadow)}
#meowOnboarding .ob-stats small{font-size:12px;color:var(--ob-muted);font-weight:700}
#meowOnboarding .ob-stats b{font-size:15px;color:var(--ob-ink);font-weight:800;text-align:center}
#meowOnboarding .ob-pay{display:flex;align-items:baseline;gap:6px;padding:0 2px}
#meowOnboarding .ob-pay small{font-size:15px;font-weight:800;color:var(--ob-brown)}
#meowOnboarding .ob-pay b{font-size:34px;font-weight:900;color:var(--ob-ink);letter-spacing:.01em}
#meowOnboarding .ob-pay-rows{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-right:84px}
#meowOnboarding .ob-pay-rows span{font-size:12px;font-weight:700;padding:5px 9px;border-radius:999px;background:var(--ob-soft);color:var(--ob-brown)}
#meowOnboarding .ob-pay-rows .up{background:var(--ob-purple-soft);color:var(--ob-purple)}
#meowOnboarding .ob-pay-rows .down{background:var(--ob-pink-soft);color:var(--ob-pink)}
#meowOnboarding .ob-leave{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#meowOnboarding .ob-leave span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 2px;border-radius:15px}
#meowOnboarding .ob-leave small{font-size:12px;font-weight:700;color:var(--ob-muted)}
#meowOnboarding .ob-leave b{font-size:14px;font-weight:800}
#meowOnboarding .ob-leave em{font-style:normal;font-size:11px;color:var(--ob-muted)}
#meowOnboarding .ob-leave .ob-green{background:var(--ob-green-soft)}#meowOnboarding .ob-leave .ob-green b{color:var(--ob-green)}
#meowOnboarding .ob-leave .ob-blue{background:var(--ob-blue-soft)}#meowOnboarding .ob-leave .ob-blue b{color:var(--ob-blue)}
#meowOnboarding .ob-leave .ob-gold{background:var(--ob-gold-soft)}#meowOnboarding .ob-leave .ob-gold b{color:var(--ob-gold-ink)}
#meowOnboarding .ob-leave .ob-pink{background:var(--ob-pink-soft)}#meowOnboarding .ob-leave .ob-pink b{color:var(--ob-pink)}
#meowOnboarding .ob-note{margin:12px 0 0;font-size:12.5px;color:var(--ob-muted);padding-right:84px}
#meowOnboarding .ob-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#meowOnboarding .ob-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px;border-radius:16px;
  border:1.5px solid var(--ob-line)!important;background:var(--ob-bg)!important;color:var(--ob-ink)!important;text-align:left;font:inherit;min-height:96px}
#meowOnboarding .ob-tile:last-child:nth-child(odd){grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;gap:10px}
#meowOnboarding .ob-tile .ob-ic{width:24px;height:24px;color:var(--ob-brown);margin-bottom:6px}
#meowOnboarding .ob-tile:last-child:nth-child(odd) .ob-ic{margin:0}
#meowOnboarding .ob-tile:last-child:nth-child(odd) small{margin-left:4px}
#meowOnboarding .ob-tile b{font-size:16px;font-weight:800}
#meowOnboarding .ob-tile small{font-size:12px;color:var(--ob-muted)}
#meowOnboarding .ob-tile.on{background:var(--ob-gold-soft)!important;border-color:var(--ob-orange2)!important;box-shadow:inset 0 0 0 1px var(--ob-orange2)}
#meowOnboarding .ob-tile.on b,#meowOnboarding .ob-tile.on .ob-ic{color:var(--ob-gold-ink)}
#meowOnboarding .ob-tick{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ob-orange);color:var(--ob-on-accent)}
#meowOnboarding .ob-tick .ob-ic{width:15px;height:15px;margin:0;color:inherit;stroke-width:3}
#meowOnboarding .ob-chips{display:flex;flex-wrap:wrap;gap:8px}
#meowOnboarding .ob-chips.ob-chips-4{display:grid;grid-template-columns:1fr 1fr}
#meowOnboarding .ob-chip{flex:1 1 calc(33.333% - 8px);min-width:88px;height:42px;padding:0 12px;border-radius:14px;border:1.5px solid var(--ob-line)!important;
  background:var(--ob-bg)!important;color:var(--ob-ink)!important;font-family:inherit;font-size:15px;font-weight:700;line-height:1}
#meowOnboarding .ob-chip.on{background:var(--ob-gold-soft)!important;border-color:var(--ob-orange2)!important;color:var(--ob-gold-ink)!important}
#meowOnboarding .ob-row{display:flex;gap:10px;margin-top:4px}
#meowOnboarding .ob-row+.ob-row{margin-top:10px}
#meowOnboarding .ob-field{display:flex;flex-direction:column;gap:6px;min-width:0;position:relative}
#meowOnboarding .ob-field.ob-grow{flex:1}
#meowOnboarding .ob-field.ob-wide{margin-top:10px}
#meowOnboarding .ob-card-head+.ob-field.ob-wide{margin-top:0}
#meowOnboarding .ob-field>span{font-size:12.5px;font-weight:700;color:var(--ob-muted);padding-left:2px}
#meowOnboarding .ob-input{box-sizing:border-box;width:100%;min-width:0;height:48px;padding:0 14px;border-radius:14px;border:1.5px solid var(--ob-line)!important;
  background-color:var(--ob-bg)!important;color:var(--ob-ink)!important;font-family:inherit;font-size:16px;font-weight:700;-webkit-appearance:none;appearance:none}
#meowOnboarding input[type=number].ob-input{-moz-appearance:textfield}
#meowOnboarding input[type=number].ob-input::-webkit-inner-spin-button,#meowOnboarding input[type=number].ob-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#meowOnboarding select.ob-input{padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--ob-muted) 50%),linear-gradient(135deg,var(--ob-muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 21px,calc(100% - 12px) 21px;background-size:5px 5px;background-repeat:no-repeat}
#meowOnboarding .ob-input:focus{outline:none;border-color:var(--ob-orange2)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ob-orange2) 28%,transparent)}
#meowOnboarding :is(.ob-unit-yuan,.ob-unit-date,.ob-unit-hour,.ob-unit-day,.ob-unit-times)::after{position:absolute;right:14px;bottom:15px;font-size:14px;font-weight:700;color:var(--ob-muted);pointer-events:none}
#meowOnboarding .ob-unit-yuan::after{content:"元"}
#meowOnboarding .ob-unit-date::after{content:"日"}
#meowOnboarding .ob-unit-hour::after{content:"小時"}
#meowOnboarding .ob-unit-day::after{content:"天"}
#meowOnboarding .ob-unit-times::after{content:"倍"}
#meowOnboarding :is(.ob-unit-yuan,.ob-unit-date,.ob-unit-hour,.ob-unit-day,.ob-unit-times) .ob-input{padding-right:46px}
#meowOnboarding .ob-hint{margin:10px 2px 0;font-size:12.5px;line-height:1.55;color:var(--ob-muted)}
#meowOnboarding .ob-label{margin:16px 2px 8px;font-size:12.5px;font-weight:700;color:var(--ob-muted)}
#meowOnboarding .ob-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#meowOnboarding .ob-sum{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;padding:14px;border-radius:16px;min-width:0}
#meowOnboarding .ob-sum .ob-ic{grid-row:1/3;width:22px;height:22px}
#meowOnboarding .ob-sum small{font-size:12px;font-weight:700;color:var(--ob-muted)}
#meowOnboarding .ob-sum b{font-size:16px;font-weight:800;color:var(--ob-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#meowOnboarding .ob-sum.ob-blue{background:var(--ob-blue-soft)}#meowOnboarding .ob-sum.ob-blue .ob-ic{color:var(--ob-blue)}
#meowOnboarding .ob-sum.ob-gold{background:var(--ob-gold-soft)}#meowOnboarding .ob-sum.ob-gold .ob-ic{color:var(--ob-orange)}
#meowOnboarding .ob-sum.ob-green{background:var(--ob-green-soft)}#meowOnboarding .ob-sum.ob-green .ob-ic{color:var(--ob-green)}
#meowOnboarding .ob-sum.ob-purple{background:var(--ob-purple-soft)}#meowOnboarding .ob-sum.ob-purple .ob-ic{color:var(--ob-purple)}
#meowOnboarding .ob-foot{padding:10px 24px calc(14px + env(safe-area-inset-bottom));text-align:center}
#meowOnboarding .ob-error{display:block;font-size:13px;font-weight:700;color:var(--ob-pink);margin-bottom:8px}
#meowOnboarding .ob-error:empty{display:none}
#meowOnboarding .ob-cta{width:100%;height:56px;border:0;border-radius:18px;background:var(--ob-orange)!important;color:var(--ob-on-accent)!important;
  font-family:inherit;font-size:18px;font-weight:800;line-height:1;letter-spacing:.06em;box-shadow:0 10px 22px color-mix(in srgb,var(--ob-orange) 32%,transparent)}
#meowOnboarding .ob-cta:active{transform:scale(.985)}
#meowOnboarding .ob-foot-note{margin:10px 0 0;font-size:12.5px;color:var(--ob-muted)}
#meowOnboarding button{cursor:pointer;-webkit-tap-highlight-color:transparent}
#meowOnboarding button:focus-visible{outline:3px solid color-mix(in srgb,var(--ob-orange2) 60%,transparent);outline-offset:2px}
@media (max-height:700px){#meowOnboarding .ob-title{font-size:24px;margin-top:14px}#meowOnboarding .ob-card{margin-top:14px;padding:14px}}
@media (prefers-reduced-motion:reduce){#meowOnboarding .ob-paws svg{transition:none}}

/* 6 ─ Settings home list, full-screen settings pages and the plan page (built by meow-v3.js). */
#page-settings.v3-settings{
  --v3-bg:#fff9f1;--v3-card:#ffffff;--v3-soft:#fff3e8;--v3-ink:#3c1c15;--v3-brown:#8f583e;--v3-muted:#8e776c;--v3-line:#efe5dc;
  --v3-orange:#e9770f;--v3-orange2:#f6b444;--v3-gold-soft:#fff0d4;--v3-gold-ink:#ae5b0c;--v3-gold-line:#f3d2a3;--v3-on-accent:#ffffff;
  --v3-blue:#4f9feb;--v3-blue-soft:#e2f0ff;--v3-green:#3f9d55;--v3-green-soft:#e2f6e5;--v3-pink:#e0566a;--v3-pink-soft:#ffe6e9;
  --v3-purple:#9c59cf;--v3-purple-soft:#f1e4ff;--v3-shadow:0 8px 22px rgba(143,88,62,.08);
}
html.dark #page-settings.v3-settings{
  --v3-bg:#18120f;--v3-card:#2a211d;--v3-soft:#322720;--v3-ink:#f7eee8;--v3-brown:#e2b28f;--v3-muted:#c9b5a7;--v3-line:#513d31;
  --v3-orange:#e2ad6c;--v3-orange2:#f0c070;--v3-gold-soft:#403323;--v3-gold-ink:#ffdb91;--v3-gold-line:#6a5236;--v3-on-accent:#2a1a0e;
  --v3-blue:#acd9ff;--v3-blue-soft:#20364a;--v3-green:#b6ecc3;--v3-green-soft:#273d31;--v3-pink:#ffb9cf;--v3-pink-soft:#422c38;
  --v3-purple:#dec6ff;--v3-purple-soft:#3d304b;--v3-shadow:0 8px 22px rgba(0,0,0,.25);
}
html.dark.midnight #page-settings.v3-settings{
  --v3-bg:#0e1019;--v3-card:#191c28;--v3-soft:#222536;--v3-ink:#f3e6cf;--v3-brown:#d8b48a;--v3-muted:#9c95a0;--v3-line:#2a2e40;
  --v3-orange:#f2b260;--v3-orange2:#f2c46a;--v3-gold-soft:#2d2a26;--v3-gold-ink:#f6cf86;--v3-gold-line:#4a4232;--v3-on-accent:#1a1208;
  --v3-blue:#8fb4ef;--v3-blue-soft:#1b2640;--v3-green:#8fd3a8;--v3-green-soft:#1a2e25;--v3-pink:#f2a0b4;--v3-pink-soft:#35202c;
  --v3-purple:#c3a6f0;--v3-purple-soft:#2a2442;--v3-shadow:0 8px 22px rgba(0,0,0,.32);
}
#page-settings.v3-settings>.v219-settings-profile-card,#page-settings.v3-settings>.settings-stack{display:none!important}

/* Shared rows */
#page-settings .v3-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
#page-settings .v3-group-title{margin:18px 8px 8px;font-size:13px;font-weight:800;color:var(--v3-muted);letter-spacing:.02em}
#page-settings .v3-group{border-radius:20px;background:var(--v3-card)!important;border:1px solid var(--v3-line)!important;box-shadow:var(--v3-shadow);overflow:hidden}
#page-settings .v3-group+.v3-group{margin-top:14px}
#page-settings .v3-group-solo{margin-top:18px}
#page-settings .v3-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:60px;margin:0;padding:10px 14px;border:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;color:var(--v3-ink)!important;font:inherit;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#page-settings .v3-row+.v3-row::before{content:"";position:absolute;left:62px;right:14px;top:0;border-top:1px solid var(--v3-line)}
#page-settings .v3-row:active{background:var(--v3-soft)!important}
#page-settings .v3-row:focus-visible{outline:3px solid color-mix(in srgb,var(--v3-orange2) 60%,transparent);outline-offset:-3px}
#page-settings .v3-row-icon{display:grid!important;place-items:center;width:36px!important;height:36px!important;flex:0 0 36px;border-radius:12px!important;border:0!important;box-shadow:none!important;margin:0!important}
#page-settings .v3-row-icon svg{width:21px!important;height:21px!important}
#page-settings .v3-tone-gold{background:var(--v3-gold-soft)!important;color:var(--v3-orange)!important}
#page-settings .v3-tone-orange{background:var(--v3-gold-soft)!important;color:var(--v3-gold-ink)!important}
#page-settings .v3-tone-green{background:var(--v3-green-soft)!important;color:var(--v3-green)!important}
#page-settings .v3-tone-blue{background:var(--v3-blue-soft)!important;color:var(--v3-blue)!important}
#page-settings .v3-tone-purple{background:var(--v3-purple-soft)!important;color:var(--v3-purple)!important}
#page-settings .v3-tone-brown{background:var(--v3-soft)!important;color:var(--v3-brown)!important}
#page-settings .v3-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#page-settings .v3-row-text b{font-size:15.5px;font-weight:800;line-height:1.3;color:var(--v3-ink)}
#page-settings .v3-row-text small{font-size:12px;line-height:1.4;color:var(--v3-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-settings .v3-row-value{font-size:13px;font-weight:700;color:var(--v3-muted);white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis}
#page-settings .v3-row-chev{display:grid;place-items:center;color:var(--v3-muted)}
#page-settings .v3-row-chev .v3-ic{width:16px;height:16px;stroke-width:2.2}
#page-settings .v3-pill{display:inline-flex;align-items:center;gap:3px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
#page-settings .v3-pill .v3-ic{width:12px;height:12px;stroke-width:3}
#page-settings .v3-pill-green{background:var(--v3-green-soft);color:var(--v3-green)}
#page-settings .v3-pill-gold{background:var(--v3-gold-soft);color:var(--v3-gold-ink)}
#page-settings .v3-pill-orange{background:var(--v3-orange);color:var(--v3-on-accent)}
#page-settings .v3-hint{margin:8px 8px 0;font-size:12px;line-height:1.55;color:var(--v3-muted)}
#page-settings .v3-hint-top{margin:0 6px 12px}

/* Home list */
#v3SettingsHub{display:flex;flex-direction:column;padding:0 0 8px}
#v3SettingsHub .v3-profile{display:flex;align-items:center;gap:14px;width:100%;margin-top:12px;padding:14px 16px;border-radius:22px;border:1px solid var(--v3-line);
  background:var(--v3-card);box-shadow:var(--v3-shadow);color:var(--v3-ink);font:inherit;text-align:left;cursor:pointer}
#v3SettingsHub .v3-profile img{width:58px;height:58px;border-radius:50%;object-fit:cover;background:var(--v3-soft);flex:0 0 58px}
#v3SettingsHub .v3-profile-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
#v3SettingsHub .v3-profile-text b{font-size:20px;font-weight:800;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#v3SettingsHub .v3-profile-text small{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--v3-gold-soft);color:var(--v3-gold-ink)}
#v3SettingsHub .v3-profile-text small.v3-who-on{background:var(--v3-green-soft);color:var(--v3-green)}
#v3SettingsHub .v3-profile-text small .v3-ic{width:13px;height:13px;stroke-width:2.4}
#v3SettingsHub .v3-login-card{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:16px;border-radius:22px;border:1px solid var(--v3-gold-line);
  background:var(--v3-gold-soft);color:var(--v3-ink);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--v3-shadow)}
#v3SettingsHub .v3-login-card[hidden]{display:none}
#v3SettingsHub .v3-login-text{flex:1;display:flex;flex-direction:column;gap:4px}
#v3SettingsHub .v3-login-text b{font-size:18px;font-weight:800}
#v3SettingsHub .v3-login-text small{font-size:12px;color:var(--v3-brown)}
#v3SettingsHub .v3-login-marks{display:flex;gap:8px;margin-top:8px}
#page-settings .v3-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-style:normal}
#page-settings .v3-mark[hidden]{display:none}
#page-settings .v3-mark svg{width:17px;height:17px}
#page-settings .v3-mark.google{background:#fff;border:1px solid #e6ddd5}
#page-settings .v3-mark.line{background:#06c755}
#page-settings .v3-mark.line svg{width:22px;height:22px}
#page-settings .v3-mark.apple{background:#111;color:#fff}

/* Full-screen pages */
#page-settings dialog.v3-sheet{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0!important;border-radius:0;
  background:var(--v3-bg)!important;color:var(--v3-ink);overflow:hidden;box-shadow:none}
#page-settings dialog.v3-sheet::backdrop{background:#fff9f1}
html.dark #page-settings dialog.v3-sheet::backdrop{background:#18120f}
html.dark.midnight #page-settings dialog.v3-sheet::backdrop{background:#0e1019}
#page-settings .v3-sheet-shell{display:flex;flex-direction:column;height:100%;max-width:520px;margin:0 auto;padding-top:env(safe-area-inset-top);box-sizing:border-box}
#page-settings .v3-sheet-top{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;padding:12px 16px 8px}
#page-settings .v3-sheet-top h2{margin:0;text-align:center;font-size:18px;font-weight:800;color:var(--v3-ink)}
#page-settings .v3-sheet-back{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--v3-line)!important;
  background:var(--v3-card)!important;color:var(--v3-ink)!important;box-shadow:var(--v3-shadow);cursor:pointer}
#page-settings .v3-sheet-back .v3-ic{stroke-width:2.4}
#page-settings .v3-sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px 16px calc(32px + env(safe-area-inset-bottom))}
#page-settings .v3-sheet-body>.v3-group-title:first-child{margin-top:6px}
#page-settings .v3-in-sheet :is(#toggleWorkSettings,#toggleDataSync){display:none!important}
#page-settings .v3-in-sheet{margin:0!important}
#page-settings .v3-flash{animation:v3flash 1.4s ease}
@keyframes v3flash{0%,55%{box-shadow:0 0 0 3px var(--v3-orange2);border-radius:14px}100%{box-shadow:0 0 0 0 transparent}}

/* Account page */
#page-settings .v3-account-head{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0 2px}
#page-settings .v3-avatar-wrap{position:relative;width:88px;height:88px}
#page-settings .v3-avatar-wrap img{width:88px;height:88px;border-radius:50%;object-fit:cover;background:var(--v3-soft);border:3px solid var(--v3-card);box-shadow:var(--v3-shadow)}
#page-settings .v3-avatar-edit{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--v3-orange);color:var(--v3-on-accent);border:3px solid var(--v3-bg);cursor:pointer}
#page-settings .v3-avatar-edit .v3-ic{width:15px;height:15px;stroke-width:2.2}
#page-settings .v3-account-head b{margin-top:8px;font-size:22px;font-weight:800;color:var(--v3-ink)}
#page-settings .v3-account-head small{font-size:13px;color:var(--v3-muted)}
#page-settings #refAccountCard.v3-account-card{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
#page-settings #refAccountCard.v3-account-card>.ref-settings-card-title{display:none!important}
#page-settings #refAccountCard.v3-account-card>.ref-settings-rows{border-radius:20px;background:var(--v3-card)!important;border:1px solid var(--v3-line)!important;box-shadow:var(--v3-shadow);overflow:hidden;padding:0!important;margin:0!important}
#page-settings #refAccountCard.v3-account-card .ref-settings-row{min-height:62px;padding:10px 14px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important;width:100%}
#page-settings #refAccountCard.v3-account-card .ref-settings-row+.ref-settings-row{border-top:1px solid var(--v3-line)!important}
#page-settings #refAccountCard.v3-account-card .ref-settings-icon.apple{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#111;color:#fff;font-style:normal}
#page-settings #refAccountCard.v3-account-card .ref-settings-icon.apple svg{width:20px;height:20px}
#page-settings #refAccountCard.v3-account-card .settings-account-details{margin:0!important}
#page-settings #refAccountCard.v3-account-card .settings-account-details>summary{display:none!important}
#page-settings #refAccountCard.v3-account-card .settings-account-detail-body{padding:16px!important;border-radius:20px;background:var(--v3-card)!important;border:1px solid var(--v3-line)!important;box-shadow:var(--v3-shadow)}
#page-settings #refAccountCard.v3-account-card #accountLogout:not(.hidden){display:block!important;width:100%;height:52px;margin:18px 0 0!important;border-radius:16px!important;border:1px solid var(--v3-line)!important;
  background:var(--v3-bg)!important;color:var(--v3-ink)!important;font-size:16px;font-weight:800;box-shadow:none!important;position:static!important}
#page-settings #refAccountCard.v3-account-card #accountDeleteZone:not(.hidden){margin-top:14px;text-align:center}
#page-settings #refAccountCard.v3-account-card #deleteAccount{background:none!important;border:0!important;box-shadow:none!important;color:var(--v3-pink)!important;font-weight:800;font-size:15px;padding:8px 12px}
#page-settings .v3-sheet.v3-guest .v3-avatar-edit{display:none}

/* Appearance page */
#page-settings .v3-radio{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:2px solid var(--v3-line);color:var(--v3-on-accent)}
#page-settings .v3-radio.on{background:var(--v3-orange);border-color:var(--v3-orange)}
#page-settings .v3-radio .v3-ic{width:14px;height:14px;stroke-width:3}
#page-settings .v3-row.on .v3-row-text b{color:var(--v3-gold-ink)}
#page-settings .v3-row.disabled{opacity:.5}
#page-settings .v3-switch{position:relative;width:50px;height:30px;flex:0 0 50px;border-radius:999px;background:var(--v3-line);transition:background .2s}
#page-settings .v3-switch i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:left .2s}
#page-settings .v3-switch.on{background:var(--v3-green)}
#page-settings .v3-switch.on i{left:23px}

/* About page */
#page-settings .v3-about-head{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0 18px}
#page-settings .v3-about-head img{width:150px;height:auto;border-radius:20px;box-shadow:var(--v3-shadow)}
#page-settings .v3-about-head b{margin-top:10px;font-size:22px;font-weight:800;color:var(--v3-ink)}
#page-settings .v3-about-head small{font-size:13px;color:var(--v3-muted)}
#page-settings .v3-sheet #settingsReleaseVersion{display:none}
#page-settings .v3-foot{margin:22px 0 0;text-align:center;font-size:12px;color:var(--v3-muted)}

/* Plan page */
html #page-settings #proPlanDialog.v3-plan{position:fixed!important;inset:0!important;top:0!important;right:0!important;bottom:0!important;left:0!important;transform:none!important;
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0 0 calc(28px + env(safe-area-inset-bottom))!important;
  border:0!important;border-radius:0!important;background:var(--v3-bg)!important;color:var(--v3-ink)!important;overflow-y:auto!important;box-shadow:none!important}
#page-settings #proPlanDialog.v3-plan::backdrop{background:#fff9f1}
html.dark #page-settings #proPlanDialog.v3-plan::backdrop{background:#18120f}
html.dark.midnight #page-settings #proPlanDialog.v3-plan::backdrop{background:#0e1019}
#page-settings #proPlanDialog.v3-plan>*{max-width:520px;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
#page-settings #proPlanDialog.v3-plan .dialog-head{display:grid!important;grid-template-columns:44px 1fr 44px;align-items:center;padding:calc(12px + env(safe-area-inset-top)) 16px 8px!important;border:0!important;background:none!important;position:static!important}
#page-settings #proPlanDialog.v3-plan .dialog-head>div{grid-column:2;grid-row:1;text-align:center}
#page-settings #proPlanDialog.v3-plan .dialog-head b{font-size:18px!important;font-weight:800;color:var(--v3-ink)!important}
#page-settings #proPlanDialog.v3-plan .dialog-close{grid-column:1;grid-row:1;width:40px!important;height:40px!important;border-radius:50%!important;border:1px solid var(--v3-line)!important;
  background:var(--v3-card)!important;color:var(--v3-ink)!important;font-size:22px!important;line-height:1!important;box-shadow:var(--v3-shadow)}
html #page-settings #proPlanDialog.v3-plan .ref-pro-dialog-hero{display:flex!important;flex-direction:column;align-items:center;gap:6px;min-height:0!important;margin:6px 16px 0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;text-align:center}
#page-settings #proPlanDialog.v3-plan .v3-plan-crown{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,var(--v3-orange2),var(--v3-orange));color:#fff;box-shadow:0 10px 22px color-mix(in srgb,var(--v3-orange) 30%,transparent)}
#page-settings #proPlanDialog.v3-plan .v3-plan-crown svg{width:32px;height:32px}
#page-settings #proPlanDialog.v3-plan .v3-plan-headline{margin-top:8px;font-size:28px!important;font-weight:900;color:var(--v3-ink)!important}
#page-settings #proPlanDialog.v3-plan .v3-plan-tagline{font-size:14px;color:var(--v3-muted)}
#page-settings #proPlanDialog.v3-plan #proDialogPlanTitle{display:none}
#page-settings #proPlanDialog.v3-plan.is-pro #proDialogPlanTitle{display:block;margin-top:8px;font-size:24px!important;font-weight:900;color:var(--v3-ink)!important}
#page-settings #proPlanDialog.v3-plan.is-pro :is(.v3-plan-headline,.v3-plan-tagline,.pro-simple-benefits,.pro-pricing,#v3PlanCta){display:none!important}
#page-settings #proPlanDialog.v3-plan .pro-simple-benefits{display:block!important;margin:18px 16px 0!important;padding:4px 16px 6px!important;border-radius:20px;background:var(--v3-card)!important;border:1px solid var(--v3-line)!important;box-shadow:var(--v3-shadow);font-size:14px!important}
#page-settings #proPlanDialog.v3-plan .v3-cmp-head{display:grid;grid-template-columns:1fr 52px 52px;align-items:center;padding:10px 0 8px;font-size:12px;font-weight:700;color:var(--v3-muted)}
#page-settings #proPlanDialog.v3-plan .v3-cmp-head b{text-align:center;font-size:12px}
#page-settings #proPlanDialog.v3-plan .v3-cmp-head span::before{content:none!important}
#page-settings #proPlanDialog.v3-plan .v3-cmp-head b.pro{justify-self:center;padding:3px 10px;border-radius:999px;background:var(--v3-gold-soft);color:var(--v3-gold-ink)}
#page-settings #proPlanDialog.v3-plan .pro-simple-benefits>span{display:grid!important;grid-template-columns:1fr 52px 52px;align-items:center;padding:11px 0;border-top:1px solid var(--v3-line);font-weight:700;color:var(--v3-ink)}
#page-settings #proPlanDialog.v3-plan .pro-simple-benefits>span::before{content:"✕";order:1;margin:0!important;text-align:center;color:var(--v3-line);font-weight:900}
#page-settings #proPlanDialog.v3-plan .pro-simple-benefits>span[data-free]::before{content:"✓";color:var(--v3-green)}
#page-settings #proPlanDialog.v3-plan .pro-simple-benefits>span::after{content:"✓";order:2;text-align:center;color:var(--v3-orange);font-weight:900}
html #page-settings #proPlanDialog.v3-plan .pro-pricing{margin:16px 16px 0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
#page-settings #proPlanDialog.v3-plan :is(.pro-price-intro,.pro-free-note,.pro-price-tag,.pro-price-card>p,.pro-card-checkout){display:none!important}
#page-settings #proPlanDialog.v3-plan .pro-price-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important}
@media(max-width:350px){#page-settings #proPlanDialog.v3-plan .pro-price-grid{grid-template-columns:minmax(0,1fr)!important}}
html #page-settings #proPlanDialog.v3-plan .pro-price-card{position:relative;display:flex!important;flex-direction:column;align-items:flex-start;gap:4px;min-height:0!important;padding:14px 14px 12px!important;border-radius:18px!important;
  border:1.5px solid var(--v3-line)!important;background:var(--v3-card)!important;box-shadow:none!important;cursor:pointer;text-align:left}
html #page-settings #proPlanDialog.v3-plan .pro-price-card.selected{border-color:var(--v3-orange)!important;background:var(--v3-gold-soft)!important;box-shadow:inset 0 0 0 1px var(--v3-orange)!important}
#page-settings #proPlanDialog.v3-plan .pro-price-card .v3-radio{position:absolute;top:14px;right:12px;width:20px;height:20px;border-radius:50%;border:2px solid var(--v3-line)}
#page-settings #proPlanDialog.v3-plan .pro-price-card.selected .v3-radio{border:6px solid var(--v3-orange);background:#fff}
#page-settings #proPlanDialog.v3-plan .pro-price-label{font-size:15px!important;font-weight:800!important;color:var(--v3-ink)!important}
#page-settings #proPlanDialog.v3-plan .pro-price-value{flex-wrap:wrap!important}
#page-settings #proPlanDialog.v3-plan .pro-price-value strong{font-size:clamp(22px,6.4vw,28px)!important;color:var(--v3-ink)!important}
#page-settings #proPlanDialog.v3-plan .pro-price-value>span{color:var(--v3-muted)!important}
#page-settings #proPlanDialog.v3-plan .v3-plan-note{font-size:12px;font-weight:700;color:var(--v3-gold-ink)}
#page-settings #proPlanDialog.v3-plan .pro-price-card:not(.pro-price-year) .v3-plan-note{color:var(--v3-muted)}
#page-settings #proPlanDialog.v3-plan .v3-plan-cta{display:block;width:100%;height:56px;margin:16px 0 0;border:0;border-radius:18px;background:linear-gradient(90deg,var(--v3-orange2),var(--v3-orange));
  color:var(--v3-on-accent);font-family:inherit;font-size:18px;font-weight:800;letter-spacing:.04em;box-shadow:0 10px 22px color-mix(in srgb,var(--v3-orange) 30%,transparent);cursor:pointer}
#page-settings #proPlanDialog.v3-plan .v3-plan-cta:disabled{opacity:.55;cursor:default;box-shadow:none}
#page-settings #proPlanDialog.v3-plan :is(.pro-price-trial,.pro-price-store){margin:10px 4px 0!important;font-size:12px!important;line-height:1.6;color:var(--v3-muted)!important;text-align:center}
html #page-settings #proPlanDialog.v3-plan .dialog-body{padding:4px 16px 0!important}
#page-settings #proPlanDialog.v3-plan .pro-plan-status{margin-top:14px;padding:14px 16px;border-radius:18px;background:var(--v3-card);border:1px solid var(--v3-line);color:var(--v3-muted);font-size:13px}
#page-settings #proPlanDialog.v3-plan .pro-plan-status.hidden{display:none}
#page-settings #proPlanDialog.v3-plan .pro-plan-status b{color:var(--v3-ink);font-size:15px;margin-bottom:2px}
#page-settings #proPlanDialog.v3-plan.is-pro .pro-plan-status{background:linear-gradient(135deg,var(--v3-orange2),var(--v3-orange));border:0;color:color-mix(in srgb,#fff 88%,transparent)}
#page-settings #proPlanDialog.v3-plan.is-pro .pro-plan-status b{color:#fff;font-size:18px}
#page-settings #proPlanDialog.v3-plan .subscription-legal-links{justify-content:center;font-size:12px}
/* Midnight: the moved settings controls carry id-scoped coffee colours from older layers. */
html.dark.midnight #page-settings .v3-sheet :is(#workSettingsCard,#dataSyncCard){background:var(--v3-card)!important;border-color:var(--v3-line)!important}
html.dark.midnight #page-settings .v3-sheet :is(#workSettingsCard,#dataSyncCard,#refAccountCard) :is(input,select,textarea){background:#141723!important;border-color:var(--v3-line)!important;color:var(--v3-ink)!important}
html.dark.midnight #page-settings .v3-sheet #dataSyncCard :is(.sync-method-card,.ref-settings-rows,.ref-settings-row,.ref-settings-icon){background:var(--v3-soft)!important;border-color:var(--v3-line)!important}
html.dark.midnight #page-settings .v3-sheet #dataSyncCard .ref-settings-rows .ref-settings-row{background:transparent!important}
html.dark.midnight #page-settings .v3-sheet #refAccountCard .account-name-editor{background:var(--v3-soft)!important;border-color:var(--v3-line)!important}
html.dark #page-settings #proPlanDialog.v3-plan .dialog-body{background:transparent!important}
html.dark #page-settings #v3SettingsHub #refPlanAction .v3-row-icon{background:var(--v3-gold-soft)!important;color:var(--v3-orange)!important}
html.dark #page-settings #proPlanDialog.v3-plan .v3-plan-crown{color:var(--v3-on-accent)}

/* 7 ─ Stitched leather buttons: primary actions in brick red, dialog secondary actions in coffee brown, each with a
   cream dashed seam inside and a thick bottom edge. Danger buttons and the round login orbs keep their own look. */
:root{
  --stitch-red:#bb453d;--stitch-red-hi:#c55d51;--stitch-red-lo:#c4584b;--stitch-red-edge:#9b4334;--stitch-red-base:#7f241c;
  --stitch-brown:#8a5c3f;--stitch-brown-hi:#986e51;--stitch-brown-lo:#906446;--stitch-brown-edge:#755136;--stitch-brown-base:#5a3a26;
  --stitch-ink:#fff7ec;--stitch-thread:rgba(255,241,226,.6);--stitch-drop:rgba(127,36,28,.22);
  --stitch-font:"Songti TC","Noto Serif TC","Noto Serif CJK TC","Source Han Serif TC","PMingLiU",serif;
}
html.dark{
  --stitch-red:#b0433a;--stitch-red-hi:#bd574b;--stitch-red-lo:#b85246;--stitch-red-edge:#8a3a2e;--stitch-red-base:#55180f;
  --stitch-brown:#7c533a;--stitch-brown-hi:#8b6249;--stitch-brown-lo:#83593f;--stitch-brown-edge:#5f412c;--stitch-brown-base:#3a2416;
  --stitch-drop:rgba(0,0,0,.35);
}
html body :is(.btn.primary,#meowOnboarding .ob-cta,#page-settings #proPlanDialog.v3-plan .v3-plan-cta),
html body dialog:not(.v3-sheet):not(#welcomeDialog) .btn:not(.primary):not(.danger):not(.dialog-close),
html body #rotationDialog .rotation-actions .btn:not(.primary):not(.danger){
  position:relative!important;overflow:visible!important;
  border-radius:14px!important;
  color:var(--stitch-ink)!important;
  font-family:var(--stitch-font)!important;font-weight:800!important;letter-spacing:.1em!important;
  text-shadow:0 1px 0 rgba(70,16,10,.45)!important;
  transition:transform .08s ease,box-shadow .08s ease,filter .15s ease!important;
  -webkit-tap-highlight-color:transparent;
}
html body :is(.btn.primary,#meowOnboarding .ob-cta,#page-settings #proPlanDialog.v3-plan .v3-plan-cta){
  background:linear-gradient(180deg,var(--stitch-red-hi) 0%,var(--stitch-red) 16%,var(--stitch-red) 84%,var(--stitch-red-lo) 100%)!important;
  border:1px solid var(--stitch-red-edge)!important;
  box-shadow:0 3px 0 var(--stitch-red-base),0 7px 14px var(--stitch-drop),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
html body dialog:not(.v3-sheet):not(#welcomeDialog) .btn:not(.primary):not(.danger):not(.dialog-close),
html body #rotationDialog .rotation-actions .btn:not(.primary):not(.danger){
  background:linear-gradient(180deg,var(--stitch-brown-hi) 0%,var(--stitch-brown) 16%,var(--stitch-brown) 84%,var(--stitch-brown-lo) 100%)!important;
  border:1px solid var(--stitch-brown-edge)!important;
  box-shadow:0 3px 0 var(--stitch-brown-base),0 7px 14px rgba(70,40,20,.2),inset 0 1px 0 rgba(255,255,255,.14)!important;
}
/* The seam. */
html body :is(.btn.primary,#meowOnboarding .ob-cta,#page-settings #proPlanDialog.v3-plan .v3-plan-cta)::after,
html body dialog:not(.v3-sheet):not(#welcomeDialog) .btn:not(.primary):not(.danger):not(.dialog-close)::after,
html body #rotationDialog .rotation-actions .btn:not(.primary):not(.danger)::after{
  content:""!important;position:absolute!important;inset:4px!important;display:block!important;
  border:1.5px dashed var(--stitch-thread)!important;border-radius:10px!important;
  background:none!important;pointer-events:none!important;
}
/* Pressing sinks the tag onto its bottom edge. */
html body :is(.btn.primary,#meowOnboarding .ob-cta,#page-settings #proPlanDialog.v3-plan .v3-plan-cta):active:not(:disabled){
  transform:translateY(2px)!important;box-shadow:0 1px 0 var(--stitch-red-base),0 3px 8px var(--stitch-drop)!important;
}
html body dialog:not(.v3-sheet):not(#welcomeDialog) .btn:not(.primary):not(.danger):not(.dialog-close):active:not(:disabled),
html body #rotationDialog .rotation-actions .btn:not(.primary):not(.danger):active:not(:disabled){
  transform:translateY(2px)!important;box-shadow:0 1px 0 var(--stitch-brown-base),0 3px 8px rgba(70,40,20,.2)!important;
}
html body :is(.btn.primary,#meowOnboarding .ob-cta,#page-settings #proPlanDialog.v3-plan .v3-plan-cta):disabled,
html body dialog:not(.v3-sheet):not(#welcomeDialog) .btn:not(.primary):not(.danger):not(.dialog-close):disabled{
  filter:saturate(.35)!important;opacity:.6!important;transform:none!important;
}
html body :is(.btn.primary,#meowOnboarding .ob-cta,#page-settings #proPlanDialog.v3-plan .v3-plan-cta):focus-visible{
  outline:3px solid rgba(246,180,68,.75)!important;outline-offset:3px!important;
}
/* Large call-to-action buttons get the full tag height. */
html body :is(#meowOnboarding .ob-cta,#page-settings #proPlanDialog.v3-plan .v3-plan-cta){border-radius:16px!important;letter-spacing:.14em!important}
html body :is(#meowOnboarding .ob-cta,#page-settings #proPlanDialog.v3-plan .v3-plan-cta)::after{inset:5px!important;border-radius:12px!important}
/* Small dialog buttons need room for the seam: at least a 44px tag with side padding. */
html body dialog:not(.v3-sheet):not(#welcomeDialog) :is(.btn.primary,.btn:not(.primary):not(.danger):not(.dialog-close)):not(.hidden){
  min-height:44px!important;padding:0 18px!important;font-size:15px!important;
}

/* 8 ─ Opening film behind the first full-screen login (built by meow-v3.js) and the round stitched login buttons.
   The page fills the screen; logo + title sit above the tram in the film's last frame, the buttons along the bottom.
   Login brand colours follow Apple / Google / LINE rules (black, white, #06C755); the guest button is ours, in red. */
html body #welcomeDialog.welcome-auto-login.v3-op{
  position:fixed!important;inset:0!important;top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:100vw!important;min-width:0!important;max-width:none!important;height:100vh!important;height:100dvh!important;max-height:none!important;
  margin:0!important;padding:0!important;transform:none!important;border:0!important;border-radius:0!important;
  background:#0e1a35!important;box-shadow:none!important;overflow:hidden!important;color:#fff!important;
}
html body #welcomeDialog.v3-op::backdrop{background:#0e1a35!important}
#welcomeDialog .v3-op-stage{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0e1a35}
#welcomeDialog .v3-op-stage .v3-op-film,#welcomeDialog .v3-op-stage .v3-op-end{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
#welcomeDialog .v3-op-brand{position:absolute;left:0;right:0;top:27%;transform:translateY(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
#welcomeDialog .v3-op-logo{width:min(36vw,150px);height:auto}
#welcomeDialog .v3-op-title{width:min(84vw,340px);height:auto}
#welcomeDialog[data-op-lang="ja"] .v3-op-title{width:min(84vw,340px)}
#welcomeDialog[data-op-lang="ko"] .v3-op-title{width:min(58vw,236px)}
#welcomeDialog[data-op-lang="en"] .v3-op-title{width:min(76vw,310px)}
html body #welcomeDialog.v3-op .welcome-sheet{
  position:absolute!important;left:0!important;right:0!important;bottom:calc(env(safe-area-inset-bottom,0px) + 16px)!important;z-index:2;
  padding:0!important;background:none!important;
}
html body #welcomeDialog.v3-op .welcome-content{max-width:none!important;width:100%!important;padding:0 12px!important;background:none!important}
html body #welcomeDialog.v3-op .welcome-head-v3{display:none!important}
html body #welcomeDialog.v3-op .welcome-actions-v3{gap:16px!important}
html body #welcomeDialog.v3-op .welcome-actions-v3 .welcome-button{gap:6px!important}
html body #welcomeDialog.v3-op .welcome-actions-v3 .welcome-button .welcome-orb{
  width:56px;height:56px;-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:transform .08s ease,box-shadow .08s ease;
}
#welcomeDialog.v3-op .welcome-orb::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px dashed var(--op-seam);pointer-events:none}
#welcomeDialog.v3-op .welcome-orb svg,#welcomeDialog.v3-op .welcome-orb b{position:relative;z-index:1}
html body #welcomeDialog.v3-op .welcome-actions-v3 .welcome-apple .welcome-orb{
  --op-seam:rgba(255,255,255,.45);background:radial-gradient(circle at 50% 30%,#3d3835,#1b1816 70%)!important;border:1px solid #000!important;
  box-shadow:0 3px 0 #000,0 7px 14px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14)!important;
}
html body #welcomeDialog.v3-op .welcome-actions-v3 .welcome-google .welcome-orb{
  --op-seam:rgba(116,119,117,.5);background:radial-gradient(circle at 50% 30%,#fff,#f3f3f3 75%)!important;border:1px solid #747775!important;
  box-shadow:0 3px 0 #b9b5af,0 7px 14px rgba(40,20,10,.25)!important;
}
html body #welcomeDialog.v3-op .welcome-actions-v3 .welcome-line .welcome-orb{
  --op-seam:rgba(255,255,255,.62);background:radial-gradient(circle at 50% 30%,#2bd877,#06c755 70%)!important;border:1px solid #05a648!important;
  box-shadow:0 3px 0 #03843a,0 7px 14px rgba(3,80,40,.3),inset 0 1px 0 rgba(255,255,255,.2)!important;
}
html body #welcomeDialog.v3-op .welcome-actions-v3 .welcome-guest .welcome-orb{
  --op-seam:rgba(255,241,226,.65);background:radial-gradient(circle at 50% 30%,#cf6a5d,#bb453d 70%)!important;border:1px solid #9b4334!important;
  box-shadow:0 3px 0 #7f241c,0 7px 14px rgba(127,36,28,.3),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
/* Pressing sinks the button onto its bottom edge, like the stitched tags elsewhere. */
html body #welcomeDialog.v3-op .welcome-actions-v3 .welcome-button:active .welcome-orb{transform:translateY(2px)!important;box-shadow:0 1px 0 rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.2)!important}
#welcomeDialog.v3-op .welcome-orb-label{font-size:12px!important}
html body #welcomeDialog.v3-op .welcome-foot-v3{margin:10px 0 0!important}
html body #welcomeDialog.v3-op .welcome-message{color:#fff!important;text-shadow:0 1px 5px rgba(40,18,8,.7)}
/* While the film runs only the film shows; when it ends the logo, title, buttons and note come in in order. */
#welcomeDialog.v3-op-playing .v3-op-end,#welcomeDialog.v3-op-playing .v3-op-brand{opacity:0}
/* A film stopped by a tap, or one that never started, must not stay over the scene: its opening paw would sit under the logo. */
#welcomeDialog.v3-op-done .v3-op-film{opacity:0}
html body #welcomeDialog.v3-op-playing .welcome-sheet{opacity:0;pointer-events:none}
#welcomeDialog.v3-op-done:not(.v3-op-static) .v3-op-logo{animation:v3OpIn .6s ease-out both}
#welcomeDialog.v3-op-done:not(.v3-op-static) .v3-op-title{animation:v3OpIn .8s ease-out .5s both}
#welcomeDialog.v3-op-done:not(.v3-op-static) .welcome-actions-v3 .welcome-button{animation:v3OpRise .45s ease-out 1.3s both}
#welcomeDialog.v3-op-done:not(.v3-op-static) .welcome-actions-v3 .welcome-button:nth-child(2){animation-delay:1.39s}
#welcomeDialog.v3-op-done:not(.v3-op-static) .welcome-actions-v3 .welcome-button:nth-child(3){animation-delay:1.48s}
#welcomeDialog.v3-op-done:not(.v3-op-static) .welcome-actions-v3 .welcome-button:nth-child(4){animation-delay:1.57s}
#welcomeDialog.v3-op-done:not(.v3-op-static) .welcome-foot-v3{animation:v3OpFade .4s ease-out 1.8s both}
@keyframes v3OpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes v3OpRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes v3OpFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  #welcomeDialog.v3-op-done .v3-op-logo,#welcomeDialog.v3-op-done .v3-op-title,
  #welcomeDialog.v3-op-done .welcome-actions-v3 .welcome-button,#welcomeDialog.v3-op-done .welcome-foot-v3{animation:v3OpFade .5s ease-out both!important}
}

/* Daily short opening over the app (signed-in launches): the film, then the login scene with the paw clock and
   lettering placed like the login screen and the launch screen, then it fades into the app. */
#v3DailyOpening{position:fixed;inset:0;z-index:100001;background:#0e1a35;overflow:hidden;transition:opacity .45s ease}
#v3DailyOpening.leaving{opacity:0;pointer-events:none}
#v3DailyOpening .v3-daily-film,#v3DailyOpening .v3-daily-end{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
#v3DailyOpening .v3-daily-end{opacity:0;transition:opacity .25s ease}
#v3DailyOpening .v3-daily-brand{position:absolute;left:0;right:0;top:27%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;transition:opacity .6s ease}
#v3DailyOpening .v3-daily-logo{width:min(36vw,150px);height:auto}
#v3DailyOpening .v3-daily-title{width:min(84vw,340px);height:auto}
#v3DailyOpening.done .v3-daily-end,#v3DailyOpening.done .v3-daily-brand{opacity:1}