:root {
  color-scheme: light;
  --ink: #14251e;
  --muted: #6b7b74;
  --forest: #123f2c;
  --forest-2: #226247;
  --lime: #bdf35d;
  --lime-soft: #e9f8c9;
  --canvas: #f3f6f1;
  --surface: #ffffff;
  --line: #dfe7df;
  --danger: #b64b3a;
  --warning: #a86512;
  --radius: 22px;
  --shadow: 0 18px 48px rgba(18, 63, 44, .11);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink); }
body { min-height: 100dvh; overscroll-behavior-y: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.login-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: minmax(235px, 38vh) 1fr;
  background: var(--surface);
}
.login-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: max(30px, env(safe-area-inset-top)) 28px 35px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 14%, rgba(189,243,93,.26) 0 8%, transparent 8.5%),
    radial-gradient(circle at 102% -8%, rgba(255,255,255,.11) 0 28%, transparent 28.5%),
    linear-gradient(148deg, #092d1e 0%, #15533a 64%, #27684b 100%);
}
.login-brand::before, .login-brand::after { content:""; position:absolute; pointer-events:none; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.login-brand::before { width:220px; height:220px; right:-90px; bottom:-115px; }
.login-brand::after { width:145px; height:145px; right:-52px; bottom:-78px; }
.brand-glow { position:absolute; width:230px; height:230px; right:-60px; top:10px; border-radius:50%; background:radial-gradient(circle,rgba(189,243,93,.16),transparent 68%); filter:blur(3px); }
.brand-lockup { position:relative; z-index:1; display:flex; align-items:center; gap:16px; }
.brand-badge { flex:none; width:68px; height:68px; display:grid; place-items:center; border-radius:22px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 32px rgba(0,0,0,.12); backdrop-filter:blur(10px); }
.brand-mark { width:58px; height:58px; filter:drop-shadow(0 7px 15px rgba(0,0,0,.2)); }
.login-kicker, .hero-kicker { display:block; font-size:.68rem; font-weight:800; letter-spacing:.16em; }
.login-brand h1 { margin:0; white-space:nowrap; font-size:clamp(1.65rem,7.5vw,2.55rem); letter-spacing:-.055em; line-height:1; }
.login-card { position:relative; z-index:2; padding:30px 24px calc(26px + env(safe-area-inset-bottom)); max-width:500px; width:100%; margin:-18px auto 0; border-radius:28px 28px 0 0; background:var(--surface); }
.login-heading { margin-bottom:24px; }
.login-kicker { margin-bottom:7px; color:var(--forest-2); }
.login-card h2 { margin: 0 0 7px; font-size: 1.35rem; }
.login-heading p { margin:0; color:var(--muted); line-height:1.55; font-size:.9rem; }
.field { display: grid; gap: 8px; margin-bottom: 17px; }
.field label { font-size: .88rem; font-weight: 700; }
.field input, .field textarea, .field select {
  width: 100%; border: 1px solid var(--line); border-radius: 15px; background: #f6f8f5;
  padding: 14px 15px; min-height: 50px; color: var(--ink); outline: none;
}
.field textarea { resize: vertical; min-height: 98px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(36,85,68,.10); background: #fff; }
.text-btn { border: 0; background: transparent; color: var(--forest-2); font-weight: 700; padding: 8px; }
.captcha-row { display: flex; gap: 10px; align-items: center; }
.captcha-row input { flex: 1; min-width: 0; }
.captcha-refresh { flex: 0 0 140px; height: 52px; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #edf3ef; color: var(--forest); font-size: .88rem; }
.captcha-refresh img { width: 100%; height: 100%; object-fit: contain; }
.captcha-hint { color: var(--muted); font-size: .8rem; }
.login-brand { min-height: 210px; }
@media (max-width: 719px) { .login-shell { grid-template-rows:minmax(220px,30vh) 1fr; } }
.primary-btn, .secondary-btn, .danger-btn {
  border: 0; border-radius: 15px; min-height: 50px; padding: 0 18px; font-weight: 750;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.primary-btn { color: #fff; background: var(--forest); box-shadow: 0 10px 25px rgba(23,60,47,.22); }
.primary-btn:active { transform: translateY(1px); }
.primary-btn:disabled { opacity: .55; cursor: wait; }
.secondary-btn { color: var(--forest); background: #edf3ef; }
.danger-btn { color: var(--danger); background: #fff0ed; }
.wide { width: 100%; }
.login-submit { justify-content:space-between; padding:0 18px 0 22px; background:linear-gradient(110deg,#123f2c,#226247); }
.login-submit b { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:var(--forest); background:var(--lime); font-size:1.1rem; }
.login-foot { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: .83rem; }
.secure-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ca56d; }
.install-entry { display: block; margin-top: 18px; text-align: center; color: var(--forest-2); text-decoration: none; font-size: .9rem; font-weight: 700; }
.install-page { max-width: 520px; margin: 0 auto; padding: calc(32px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom)); }
.install-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 25px; box-shadow: var(--shadow); }
.install-mark { width: 72px; height: 72px; }
.install-card h1 { font-size: 1.5rem; margin: 18px 0 8px; }
.install-card p, .install-steps { color: var(--muted); line-height: 1.7; font-size: .92rem; }
.install-card a.primary-btn { text-decoration: none; margin: 12px 0; }
.install-steps { padding-left: 22px; }
.install-steps li { margin: 12px 0; padding-left: 4px; }
.install-notice { padding: 14px; background: #edf3ef; border-radius: 14px; overflow-wrap: anywhere; }
.install-card small { display: block; color: var(--muted); line-height: 1.65; }
.pwa-update { position: fixed; bottom: 76px; left: 16px; right: 16px; z-index: 100; background: #173c2f; color: #fff; border-radius: 16px; padding: 14px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; font-size: .85rem; }
.pwa-update[hidden], [data-pwa-install][hidden] { display: none; }
.pwa-update button { margin-left: auto; flex: none; border: 0; border-radius: 10px; padding: 10px; background: var(--lime); color: var(--forest); }
.form-error { min-height: 22px; margin: -5px 0 10px; color: var(--danger); font-size: .86rem; }

.app-shell { min-height: 100dvh; padding-bottom: calc(85px + env(safe-area-inset-bottom)); }
.topbar {
  position: sticky; top: 0; z-index: 20; padding: calc(13px + env(safe-area-inset-top)) 18px 13px;
  display: flex; align-items: center; justify-content: space-between;
  color:#fff; background:rgba(18,63,44,.97); backdrop-filter:blur(16px);
}
.topbar-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.topbar-brand > img { width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 5px 10px rgba(0,0,0,.18)); }
.topbar-title small { display: block; color: rgba(255,255,255,.65); font-size: .75rem; margin-bottom: 2px; }
.topbar-title strong { font-size: 1.16rem; }
.avatar { width: 40px; height: 40px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: #d9ef83; color: var(--forest); font-weight: 800; }
.page { max-width:760px; margin:0 auto; padding:18px 16px 10px; }
.home-page { padding-top:0; }
.home-hero { margin:0 -16px 0; padding:20px 16px 22px; color:#fff; border-radius:0 0 30px 30px; background:linear-gradient(155deg,#123f2c 0%,#1b503a 62%,#2b684d 100%); box-shadow:0 18px 42px rgba(18,63,44,.14); }
.hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 2px 2px 18px; }
.hello h1 { margin: 0 0 4px; font-size: 1.65rem; letter-spacing: -.035em; }
.hello p { margin:0; color:rgba(255,255,255,.65); font-size:.86rem; }
.hero-kicker { margin-bottom:8px; color:var(--lime); }
.date-chip { flex:none; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); padding:8px 10px; border-radius:12px; font-size:.76rem; font-weight:700; }
.summary-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.summary-card { min-height:112px; padding:16px; border-radius:20px; color:#fff; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.11); box-shadow:none; backdrop-filter:blur(8px); }
.summary-card.featured { color:var(--forest); background:var(--lime); border-color:var(--lime); }
.summary-label { display:flex; justify-content:space-between; align-items:center; color:rgba(255,255,255,.66); font-size:.8rem; }
.featured .summary-label { color:rgba(18,63,44,.72); }
.summary-label svg { width:18px; height:18px; }
.summary-value { display: block; margin-top: 12px; font-size: 2rem; line-height: 1; font-weight: 800; letter-spacing: -.05em; }
.summary-note { margin-top:9px; font-size:.72rem; color:rgba(255,255,255,.55); }
.featured .summary-note { color:var(--forest-2); }
.section-head { margin: 25px 2px 12px; display: flex; align-items: center; justify-content: space-between; }
.section-head h2 { margin: 0; font-size: 1.08rem; }
.section-head button { font-size: .84rem; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:15px 10px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 10px 30px rgba(18,63,44,.055); }
.quick-item { border:0; background:transparent; padding:0; color:var(--ink); text-align:center; font-size:.76rem; font-weight:650; }
.quick-icon { width:54px; height:54px; margin:0 auto 8px; border-radius:18px; display:grid; place-items:center; color:var(--forest); background:#eaf3e8; transition:transform .16s ease; }
.quick-item:active .quick-icon { transform:scale(.94); }
.quick-icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.quick-item:nth-child(2) .quick-icon { background:#fff0dc; color:#975616; }
.quick-item:nth-child(3) .quick-icon { background:#e7eefb; color:#365991; }
.quick-item:nth-child(4) .quick-icon { background:#f3eafd; color:#6d4795; }

.notice-card { margin-top:20px; padding:17px; border-radius:20px; color:#fff; background:linear-gradient(135deg,#276048,#123f2c); display:flex; gap:14px; align-items:center; box-shadow:0 12px 30px rgba(18,63,44,.14); }
.notice-card .bell { flex:none; width: 42px; height: 42px; border-radius: 14px; display:grid; place-items:center; background:rgba(217,239,131,.16); color:var(--lime); }
.notice-card h3 { margin:0 0 4px; font-size:.96rem; }
.notice-card p { margin:0; color:rgba(255,255,255,.68); font-size:.78rem; line-height:1.45; }
.notice-card .secondary-btn { margin-left:auto; min-height:38px; padding:0 12px; background:var(--lime); font-size:.78rem; }

.filter-row { display:flex; gap:8px; overflow:auto; padding: 2px 0 12px; scrollbar-width:none; }
.filter-row::-webkit-scrollbar { display:none; }
.filter-chip { flex:none; border:1px solid var(--line); background:#fff; color:var(--muted); min-height:39px; padding:0 14px; border-radius:999px; font-weight:650; font-size:.85rem; }
.filter-chip.active { background:var(--forest); color:#fff; border-color:var(--forest); }
.task-list { display:grid; gap:11px; }
.task-card { width:100%; text-align:left; border:1px solid var(--line); border-radius:19px; padding:16px; background:#fff; color:var(--ink); }
.task-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.task-title { margin:0; font-size:.98rem; line-height:1.45; }
.status-pill { flex:none; padding:5px 9px; border-radius:999px; font-size:.72rem; font-weight:750; background:#f0f3f2; color:var(--muted); }
.status-pill.pending { background:#fff2d9; color:#8c570c; }
.status-pill.processing { background:#e2eefc; color:#315c92; }
.status-pill.completed { background:#e4f3e9; color:#287044; }
.status-pill.rejected, .status-pill.overdue { background:#fde8e4; color:#a53d31; }
.task-meta { display:flex; flex-wrap:wrap; gap:7px 13px; margin-top:12px; color:var(--muted); font-size:.78rem; }
.task-meta span { display:flex; align-items:center; gap:5px; }
.empty-state { padding:45px 22px; text-align:center; color:var(--muted); border:1px dashed #cbd8d1; border-radius:20px; background:rgba(255,255,255,.6); }
.empty-state strong { display:block; color:var(--ink); margin-bottom:6px; }
.skeleton { position:relative; overflow:hidden; min-height:118px; border-radius:19px; background:#e9eeeb; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); animation:shimmer 1.2s infinite; }
@keyframes shimmer { to { transform:translateX(100%); } }

.bottom-nav { position:fixed; z-index:30; left:0; right:0; bottom:0; height:64px; padding:6px 14px 8px; display:grid; grid-template-columns:repeat(3,1fr); background:rgba(255,255,255,.96); border-top:1px solid var(--line); backdrop-filter:blur(18px); }
.nav-item { border:0; padding:0; background:transparent; color:#7a8983; display:grid; place-items:center; align-content:end; gap:3px; font-size:.7rem; }
.nav-item svg { width:22px; height:22px; }
.nav-item.active { color:var(--forest); font-weight:750; }
.nav-item.active svg { filter:drop-shadow(0 3px 5px rgba(18,63,44,.18)); }
.fab { position:fixed; z-index:25; right:18px; bottom:76px; width:56px; height:56px; border:0; border-radius:19px; color:#173c2f; background:var(--lime); box-shadow:0 12px 30px rgba(23,60,47,.25); display:grid; place-items:center; }
.fab svg { width:25px; height:25px; }

.profile-card { padding:22px; color:#fff; border-radius:24px; background:linear-gradient(145deg,#173c2f,#2e6752); box-shadow:var(--shadow); }
.profile-row { display:flex; align-items:center; gap:14px; }
.profile-avatar { width:58px; height:58px; border-radius:20px; display:grid; place-items:center; background:var(--lime); color:var(--forest); font-size:1.2rem; font-weight:850; }
.profile-card h2 { margin:0 0 4px; font-size:1.25rem; }
.profile-card p { margin:0; color:rgba(255,255,255,.65); font-size:.83rem; }
.settings-list { margin-top:17px; overflow:hidden; border-radius:20px; background:#fff; border:1px solid var(--line); }
.setting-item { width:100%; min-height:65px; padding:0 16px; border:0; border-bottom:1px solid var(--line); background:#fff; color:var(--ink); display:flex; align-items:center; gap:12px; text-align:left; }
.setting-item:last-child { border-bottom:0; }
.setting-icon { width:38px; height:38px; border-radius:13px; display:grid; place-items:center; background:#edf3ef; color:var(--forest); }
.setting-copy { flex:1; }
.setting-copy strong { display:block; font-size:.9rem; }
.setting-copy small { color:var(--muted); font-size:.74rem; }
.chevron { color:#9aaaA4; }

.sheet-backdrop { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; background:rgba(9,27,21,.42); backdrop-filter:blur(3px); }
.sheet { width:100%; max-width:640px; max-height:92dvh; overflow:auto; margin:0 auto; padding:13px 20px calc(24px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; background:#fff; animation:rise .2s ease-out; }
@keyframes rise { from { transform:translateY(20px); opacity:.7; } }
.sheet-grabber { width:42px; height:5px; margin:0 auto 17px; border-radius:99px; background:#d8dfdb; }
.sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.sheet-head h2 { margin:0; font-size:1.2rem; }
.icon-btn { width:40px; height:40px; border:0; border-radius:13px; background:#f0f4f2; color:var(--ink); display:grid; place-items:center; }
.detail-title { margin:0 0 8px; font-size:1.4rem; line-height:1.35; }
.detail-content { margin:18px 0; color:#40534b; line-height:1.7; white-space:pre-wrap; }
.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.detail-cell { padding:13px; border-radius:15px; background:#f5f8f6; }
.detail-cell small { display:block; color:var(--muted); margin-bottom:5px; }
.detail-cell strong { font-size:.9rem; }
.action-row { display:flex; gap:10px; margin-top:20px; }
.action-row > * { flex:1; }
.toast { position:fixed; z-index:100; left:50%; bottom:76px; max-width:min(86vw,420px); transform:translate(-50%,18px); padding:11px 15px; border-radius:13px; background:#142921; color:#fff; font-size:.86rem; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.2s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.offline-bar { padding:9px 15px; text-align:center; font-size:.78rem; color:#784807; background:#fff0cf; }

@media (min-width: 720px) {
  .login-shell { grid-template-columns:minmax(330px,44%) 1fr; grid-template-rows:1fr; }
  .login-brand { min-height:100dvh; padding:46px; justify-content:center; }
  .login-brand h1 { font-size:clamp(1.55rem,3vw,2.8rem); }
  .login-card { align-self:center; padding:42px; margin:0 auto; border-radius:28px; box-shadow:var(--shadow); }
  .summary-grid { grid-template-columns:repeat(4,1fr); }
  .quick-grid { grid-template-columns:repeat(6,1fr); }
  .bottom-nav { left:50%; right:auto; width:520px; transform:translateX(-50%); border:1px solid var(--line); border-bottom:0; border-radius:22px 22px 0 0; }
}

/* Forest & lime reference: real leaf login and illustrated mountain workbench. */
.login-shell { display:flex; flex-direction:column; justify-content:center; gap:0; padding:calc(42px + env(safe-area-inset-top)) 22px calc(36px + env(safe-area-inset-bottom)); background:linear-gradient(rgba(6,35,20,.27),rgba(4,30,16,.36)),url('./assets/forest-login.png') center/cover; }
.login-brand { background:none; min-height:0; padding:0; overflow:visible; align-items:center; justify-content:center; }
.login-brand::before, .login-brand::after, .brand-glow { display:none; }
.brand-lockup { flex-direction:column; gap:12px; }
.brand-badge { background:rgba(255,255,255,.16); border-radius:20px; width:62px; height:62px; }
.brand-mark { width:54px; height:54px; }
.login-brand h1 { font-size:1.7rem; letter-spacing:-.04em; }
.login-card { background:none; border-radius:0; box-shadow:none; padding:26px 0 0; max-width:370px; margin:0 auto; }
.login-heading { text-align:center; margin-bottom:22px; }
.login-heading h2 { display:none; }
.login-kicker { color:var(--lime); }
.login-heading p { color:rgba(255,255,255,.76); font-size:.8rem; }
.login-shell .field label { color:rgba(255,255,255,.88); font-size:.8rem; }
.login-shell .field input { background:rgba(249,252,246,.93); border:1px solid rgba(255,255,255,.5); border-radius:11px; }
.login-shell .captcha-refresh { background:rgba(249,252,246,.93); border-radius:11px; flex-basis:130px; }
.login-shell .captcha-hint, .login-shell .login-foot { color:rgba(255,255,255,.75); }
.login-shell .install-entry { color:#e6f6d7; font-size:.78rem; }
.login-shell .form-error { color:#ffcebf; }
.login-submit { background:var(--lime); color:var(--forest); border-radius:999px; justify-content:center; box-shadow:0 8px 28px rgba(157,231,56,.2); }
.login-submit b { display:none; }
.topbar { color:var(--forest); background:rgba(246,250,242,.96); border-bottom:1px solid rgba(20,60,30,.04); }
.topbar-title small { color:var(--muted); }
.topbar-title strong { font-size:1rem; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.avatar { width:34px; height:34px; padding:0; flex:none; white-space:nowrap; border-radius:12px; background:#e1efd5; border:1px solid #d6e5ce; font-size:.8rem; }
.notification-button { width:38px; height:38px; position:relative; border:0; background:transparent; color:var(--forest); display:grid; place-items:center; }
.notification-button svg { width:23px; height:23px; stroke-width:1.7; }
.notification-badge { position:absolute; top:0; right:0; min-width:15px; height:15px; padding:0 3px; display:grid; place-items:center; background:#fa7e4c; color:#fff; font-size:9px; font-weight:700; border-radius:9px; border:1px solid #fff; }
.home-hero { position:relative; min-height:215px; padding:24px 20px 65px; border-radius:0; box-shadow:none; color:var(--ink); background:linear-gradient(90deg,rgba(247,251,241,.76),rgba(247,251,241,.04) 80%),url('./assets/forest-workbench.png') center 60%/cover; }
.hello { align-items:flex-start; }
.hello h1 { max-width:none; font-size:1.45rem; line-height:1.35; }
.hello p { color:#58715b; font-size:.82rem; margin-top:6px; }
.hero-kicker { color:#617a58; font-size:.6rem; letter-spacing:.1em; }
.date-chip { position:absolute; right:16px; bottom:53px; color:#36593e; background:rgba(255,255,255,.8); border-color:rgba(255,255,255,.6); font-size:.68rem; }
.home-page .summary-grid { position:relative; z-index:1; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:-38px; padding:9px; border:1px solid #edf2e8; border-radius:20px; background:rgba(255,255,255,.97); box-shadow:0 8px 24px rgba(36,71,39,.07); }
.home-page .summary-card { min-height:109px; padding:12px; border:0; border-radius:13px; background:#f6f9f2; color:var(--ink); backdrop-filter:none; }
.home-page .summary-label { color:#758170; font-size:.73rem; margin-top:7px; }
.home-page .summary-value { font-size:1.55rem; margin-top:4px; }
.stat-icon { width:23px; height:23px; display:grid; place-items:center; background:#83c844; color:white; border-radius:8px; }
.stat-icon svg { width:15px; height:15px; stroke-width:1.8; }
.summary-card.featured .stat-icon { background:#ffa43b; }
.summary-card:last-child .stat-icon { background:#246239; }
.overdue-notice { width:100%; display:flex; align-items:center; gap:8px; margin-top:12px; padding:10px 12px; border:0; border-radius:12px; background:#fff2e8; color:#976020; font-size:.76rem; text-align:left; }
.overdue-notice svg { width:17px; height:17px; flex:none; }
.overdue-notice b { margin-left:auto; }
.home-page .section-head { margin-top:21px; }
.home-page .quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0; border:0; background:none; box-shadow:none; }
.home-page .quick-item { min-height:94px; padding:13px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:14px; background:#e5f1df; font-size:.84rem; gap:5px; }
.home-page .quick-item:nth-child(2) { background:#ecf7cc; }
.home-page .quick-item.quick-primary { background:#205631; color:white; }
.home-page .quick-icon, .home-page .quick-item:nth-child(n) .quick-icon { width:31px; height:31px; margin:0; border-radius:0; background:none; color:var(--forest); }
.home-page .quick-item.quick-primary .quick-icon { color:#fff; }
.notice-card { background:#f0f6e9; color:var(--forest); border:1px solid #dfe9d7; box-shadow:none; padding:13px; }
.notice-card h3 { font-size:.84rem; }
.notice-card p { color:#6e7f66; font-size:.73rem; }
.notice-card .bell { width:33px; height:33px; color:#427836; background:#deedcf; }
.notice-card .secondary-btn { min-height:33px; }
.profile-card { background:linear-gradient(120deg,rgba(16,62,34,.92),rgba(31,76,41,.68)),url('./assets/forest-workbench.png') center/cover; }
.bottom-nav { background:rgba(255,255,255,.97); }
.page { max-width:600px; }
@media (min-width:720px) {
  .login-shell { display:flex; min-height:100dvh; padding-top:48px; padding-bottom:48px; }
  .login-brand { min-height:0; padding:0; }
  .login-brand h1 { font-size:2rem; }
  .login-card { padding:26px 0 0; margin:0 auto; background:none; border-radius:0; box-shadow:none; }
  .topbar { padding-left:max(20px,calc((100vw - 600px)/2)); padding-right:max(20px,calc((100vw - 600px)/2)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* Logged-in app, including Home: only the content pane can scroll. */
html.app-mode, body.app-mode {
  height:100%; min-height:0; overflow:hidden; overscroll-behavior:none;
}
body.app-mode { height:100vh; height:100dvh; height:var(--app-viewport-height,100dvh); }
body.app-mode #app { height:100%; min-height:0; overflow:hidden; }
body.app-mode .app-shell {
  position:relative; display:flex; flex-direction:column; height:100%; min-height:0;
  padding-bottom:calc(64px + env(safe-area-inset-bottom)); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); overflow:hidden;
}
body.app-mode .topbar { position:relative; top:auto; flex:none; }
body.app-mode .offline-bar { flex:none; }
body.app-mode .app-shell > .page {
  flex:1 1 0; min-height:0; width:100%; overflow-x:hidden; overflow-y:auto;
  overscroll-behavior-y:none; -webkit-overflow-scrolling:touch;
  padding-bottom:28px; scrollbar-width:none;
}
body.app-mode .app-shell > .page::-webkit-scrollbar { display:none; }
body.app-mode .app-shell > .page:has(.task-list) { padding-bottom:84px; }
body.app-mode .bottom-nav {
  position:absolute; left:0; right:0; bottom:env(safe-area-inset-bottom);
  width:100%; transform:none; margin:0 auto;
}
body.app-mode .bottom-nav::after {
  content:""; position:absolute; z-index:-1; left:0; right:0; top:100%;
  height:env(safe-area-inset-bottom); background:rgba(255,255,255,.97);
}
body.app-mode .sheet { overscroll-behavior-y:contain; }
@media (min-width:720px) {
  body.app-mode .bottom-nav { left:50%; right:auto; max-width:520px; transform:translateX(-50%); }
}

/* Fluid sizing: fit narrow phones, landscape cutouts and the keyboard. */
body.app-mode .topbar-brand { flex:1; overflow:hidden; }
body.app-mode .topbar-title { min-width:0; }
body.app-mode .topbar-title small, body.app-mode .topbar-title strong {
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.app-mode .topbar-actions { flex:none; }
body.app-mode .page { max-width:760px; }
body.app-mode .sheet { max-height:calc(var(--app-viewport-height,100dvh) - env(safe-area-inset-top) - 12px); }
body.app-mode .erp-toolbar { top:0; }
@media (max-width:359px) {
  body.app-mode .topbar { padding-left:12px; padding-right:12px; }
  body.app-mode .topbar-title strong { font-size:1rem; }
  body.app-mode .hello h1 { font-size:1.3rem; }
  body.app-mode .business-metrics { gap:6px; }
  body.app-mode .business-metrics article { padding:14px 8px; border-radius:15px; }
  body.app-mode .business-metrics strong { font-size:.92rem; }
  body.app-mode .business-feed button { gap:8px; padding:13px 10px; }
  body.app-mode .business-feed-total strong { font-size:.78rem; }
}
@media (orientation:landscape) and (max-height:500px) {
  body.app-mode .topbar { padding-top:calc(7px + env(safe-area-inset-top)); padding-bottom:7px; }
  body.app-mode .app-shell { padding-bottom:calc(56px + env(safe-area-inset-bottom)); }
  body.app-mode .bottom-nav { height:56px; padding-top:4px; padding-bottom:5px; }
}