/* Trại Vịt THÀNH ĐẠT V10 – consistent typography, non-janky native bottom navigation */
:root{--base-size:17px;--bg:#f5f9f7;--ink:#183c32;--muted:#647f75;--line:#e1ebe5;--green:#08734a;--green-soft:#e2f5e9;--orange:#9e5f23;--orange-soft:#fff0df;--accent:#08774c}
html{scroll-behavior:auto!important;overscroll-behavior-x:none}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.shell{padding-bottom:calc(94px + env(safe-area-inset-bottom,0px));}
.page-head{align-items:center;padding:16px 2px 13px;gap:10px}
.brandmark{background:#e2f5e9;color:#08744b;border-radius:14px;box-shadow:none}
.brandtext .overline{color:#608577;font-size:.69rem;font-weight:600;letter-spacing:.015em}
h1{font-weight:725;color:#183e31;letter-spacing:-.035em;font-size:1.14rem;line-height:1.18}
.font-controls button{background:white;border:1px solid #d9e8de;color:#2f6951;min-height:44px;min-width:44px;width:44px;height:44px;font-weight:700;font-size:.86rem;border-radius:13px}
/* The calendar filter intentionally scrolls away. Only bottom navigation stays fixed. */
.sticky-tools{position:static!important;top:auto;z-index:auto;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;padding:0 0 12px}
.filters{background:#e7f0ec;border-radius:14px}
.filters button{color:#54796a;font-weight:570}
.filters button.active{color:#096742;background:#fff;box-shadow:0 2px 7px #144c2d0b}
.toggle-details{color:#0a744c;border-color:#d4e7dc;background:#fff}
.manage-line{color:#718a80;line-height:1.3}
.manage-line button{color:#096d47;font-weight:610}
.annual-grid{gap:12px}
.month-card{border-color:#dfeae4;background:#fff;box-shadow:0 2px 8px #0e593107;border-radius:18px}
.month-card h2{color:#1b3d31;font-weight:690;letter-spacing:-.026em}
.stat.out{background:#e1f5e9;color:#087049}
.stat.in{background:#fff0df;color:#9a5a1d}
.stat span{font-weight:580}
.stat strong{font-weight:720;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.weekday{color:#748e83;font-weight:610}
.day{color:#4a6c5d;font-variant-numeric:tabular-nums}
.day.out{background:#d8f2e4;color:#087448;font-weight:720}
.day.in{background:#ffecd7;color:#985616;font-weight:720}
.day.both{background:linear-gradient(135deg,#d8f2e4 50%,#ffecd7 50%);color:#175b43}
.day.outside{color:#bbc9c3}
.event.out{background:#eef8f2}.event.in{background:#fff6ec}
.event-qty,.event-date{font-variant-numeric:tabular-nums}
.page-note{color:#7a9084}
/* Fixed bottom tabs: no blur, transform, transitions, scroll listener or scroll-dependent layout. */
#mode-switch{position:fixed!important;inset:auto 0 0!important;z-index:70!important;display:flex!important;justify-content:center;align-items:stretch;gap:12px;padding:8px max(16px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));min-height:calc(70px + env(safe-area-inset-bottom,0px));border-top:1px solid #dce9e1;background:#fff;box-shadow:0 -5px 20px #123f2c0c;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;contain:layout style;touch-action:manipulation}
#mode-switch button{border:0;border-radius:14px;background:transparent;color:#6d887b;max-width:245px;flex:1 1 0;min-width:0;min-height:54px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:7px 12px;font-family:inherit;font-size:.77rem;font-weight:640;line-height:1.1;transition:none!important;box-shadow:none!important}
#mode-switch button svg{display:block;width:23px;height:23px;flex:none;stroke-width:1.85}
#mode-switch button[aria-current="page"]{color:#087448;background:#e5f6ec}
#mode-switch button:focus-visible{outline:3px solid #77bea0;outline-offset:-3px}
#mode-switch button:active{background:#dff3e8}
#calendar-main[hidden],#expense-view[hidden],#calendar-tools[hidden],#data-manager[hidden]{display:none!important}
.sheet-back{z-index:100}
/* Keep content and closing controls away from the home indicator. */
.sheet-content{padding-bottom:max(23px,env(safe-area-inset-bottom,0px))}
@media(max-width:740px){
 .shell{padding-left:11px;padding-right:11px;padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
 .page-head{padding:12px 1px 12px;gap:8px}
 .brandtext .overline{font-size:.62rem}
 h1{font-size:1.03rem;font-weight:710}
 .brandmark{width:41px;height:41px}
 .brandmark svg{width:28px;height:28px}
 .font-controls{gap:5px}.font-controls button{width:39px;min-width:39px;min-height:41px;height:41px;font-size:.78rem}
 .sticky-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center;padding-bottom:10px}
 .filters{min-width:0;padding:4px;gap:3px}
 .filters button{min-height:43px;font-size:clamp(11px,.72rem,14px);padding:5px 3px;white-space:nowrap}
 .toggle-details{min-height:49px;font-size:.74rem;padding:8px 9px}
 .annual-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .month-card{padding:11px 9px 12px;border-radius:15px}
 .month-card h2{font-size:clamp(14px,.95rem,17px);margin:0 0 9px;white-space:nowrap}
 .stats{gap:4px;margin-bottom:9px}
 .stat{padding:8px 2px 9px;border-radius:10px}
 .stat span{font-size:clamp(10px,.68rem,12px)}
 .stat strong{font-size:clamp(13px,.91rem,17px);line-height:1.25}
 .stat strong small{display:block;font-size:clamp(9px,.57rem,11px);margin:2px 0 0}
 .mini-calendar{gap:2px 1px}
 .weekday,.day,.blank{height:28px;font-size:clamp(11px,.76rem,14px);border-radius:7px}
 .weekday{font-size:clamp(9px,.65rem,12px)}
 .event{padding:10px}.event-type{font-size:.70rem}.event-barns{font-size:.76rem}
 .manage-line{font-size:.70rem}
 #mode-switch{gap:10px}
 #mode-switch button{min-height:54px;font-size:.77rem}
}
@media(max-width:355px){
 .shell{padding-left:8px;padding-right:8px}
 h1{font-size:.98rem}.page-head{gap:6px}
 .brandmark{width:35px;height:35px;border-radius:11px}.brandmark svg{width:25px;height:25px}
 .font-controls button{width:35px;min-width:35px;height:38px;min-height:38px}
 .month-card{padding:9px 7px 10px}.month-card h2{font-size:13px}
 .stat{padding:6px 1px 8px}.stat strong{font-size:13px}.stat span{font-size:9.5px}
 .weekday,.day,.blank{height:26px;font-size:11px}.weekday{font-size:9px}
 .filters button{font-size:10px}.toggle-details{font-size:10px;padding:7px}
}
@media(min-width:1100px){.annual-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){#mode-switch,#mode-switch *{transition:none!important;animation:none!important}}
@media print{#mode-switch{display:none!important}.shell{padding-bottom:0}}