@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800;900&display=swap');
:root{--green:#079b75;--green2:#087f63;--mint:#d9f8eb;--ink:#123b35;--muted:#7a918b;--line:#e6efed;--bg:#f2f8fa;--white:rgba(255,255,255,.91);--shadow:0 8px 28px rgba(30,76,88,.10);--blue:#3687f5;--orange:#ffb23e;--purple:#8b65f7;--pink:#f28bb6}
*{box-sizing:border-box}html{font-size:19.2px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 10% 0%,#d9f7ed 0,transparent 34%),radial-gradient(ellipse at 100% 12%,#e5eaff 0,transparent 34%),linear-gradient(160deg,#f6fbfa,#f0f6fc 70%,#f8f9ff);color:var(--ink);font-family:'Noto Sans Thai',Tahoma,sans-serif;line-height:1.55;min-height:100vh}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #55c7b1;outline-offset:2px}
.topbar{height:76px;background:rgba(255,255,255,.76);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:30;box-shadow:0 4px 22px rgba(29,79,79,.05)}.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:21.6px;color:var(--green2)}.brand small{display:block;color:var(--muted);font-size:13.2px;font-weight:500}.brand-mark{height:62px;width:62px;display:grid;place-items:center;border-radius:22px;background:linear-gradient(145deg,#d7fff0,#dceaff);font-size:38.4px;margin:0 auto 12px;box-shadow:inset 0 1px 0 #fff}.brand-mark.small{height:48px;width:48px;border-radius:17px;font-size:30px;margin:0}.top-actions{display:flex;align-items:center;gap:12px;font-size:14px}.user-chip{background:rgba(234,247,242,.9);padding:9px 14px;border-radius:999px;font-weight:700}.logout{color:#087c5c;font-weight:800;padding:11px 17px;border-radius:16px;background:linear-gradient(135deg,#e4f8ef,#e5f2ff)}.app-shell{display:grid;grid-template-columns:244px minmax(0,1fr);max-width:1440px;margin:auto}.sidebar{padding:24px 14px;min-height:calc(100vh - 76px);border-right:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.42);backdrop-filter:blur(14px)}.sidebar-caption{font-size:14.4px;color:#91aaa3;font-weight:800;padding:0 14px 12px}.nav-item{display:flex;align-items:center;gap:8px;padding:14px;border-radius:16px;margin:5px 0;color:#617d76;font-size:18px;font-weight:800;transition:transform .16s,background .16s}.nav-item:hover{background:#effaf5;transform:translateY(-1px)}.nav-item.active{background:linear-gradient(135deg,#d9faed,#e0f0ff);color:#078267;box-shadow:0 5px 18px rgba(21,155,117,.10)}.sidebar-note{margin:35px 8px 0;padding:14px;background:rgba(238,248,244,.9);color:#7c968d;border-radius:15px;font-size:12px}.main-content{padding:28px;min-width:0}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.page-heading h1{font-size:36px;line-height:1.25;margin:3px 0 7px;letter-spacing:-.03em;font-weight:900}.eyebrow{font-size:15.6px;color:var(--green2);font-weight:900;margin:0}.muted{color:var(--muted);font-size:16.8px;margin:0}.btn{border:0;border-radius:16px;padding:13px 18px;font-weight:800;font-size:18px;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:50px;transition:transform .15s,filter .15s}.btn:active{transform:scale(.98)}.btn.primary{background:linear-gradient(120deg,#08a985,#32b56d);color:white;box-shadow:0 7px 18px rgba(8,160,117,.22)}.btn.primary:hover{filter:saturate(1.1)}.btn.secondary{background:linear-gradient(120deg,#e0f7ee,#e4efff);color:#087e64}.btn.ghost{background:transparent;color:var(--muted)}.btn.danger{background:#fff0f4;color:#d43e68}.btn.tiny{padding:8px 12px;min-height:38px;font-size:15.6px;border-radius:12px}.filter-bar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;background:rgba(255,255,255,.76);backdrop-filter:blur(18px);padding:16px;border:1px solid rgba(255,255,255,.95);border-radius:21px;margin-bottom:20px;box-shadow:var(--shadow)}.filter-bar label{display:flex;flex-direction:column;gap:6px;font-size:15.6px;color:#617d76;font-weight:800}.filter-bar input{min-width:150px}.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}.metric-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}.metric-card,.panel{background:var(--white);border:1px solid rgba(255,255,255,.98);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.metric-card{padding:21px;position:relative;overflow:hidden;isolation:isolate}.metric-card:after{content:"";position:absolute;z-index:-1;width:130px;height:130px;border-radius:50%;right:-40px;top:-54px;background:linear-gradient(135deg,rgba(69,208,174,.13),rgba(97,157,255,.10))}.metric-card:nth-child(2):after{background:rgba(76,155,255,.13)}.metric-card:nth-child(3):after{background:rgba(255,179,61,.17)}.metric-card:nth-child(4):after{background:rgba(143,101,247,.14)}.metric-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#69847c;font-size:16.8px;font-weight:800}.metric-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:19px}.metric-icon.green{background:linear-gradient(135deg,#c7f8df,#9de9c7);color:#07966b}.metric-icon.blue{background:linear-gradient(135deg,#d9e9ff,#b8d4ff);color:#3478df}.metric-icon.amber{background:linear-gradient(135deg,#fff0cb,#ffd68a);color:#c37b0a}.metric-icon.purple{background:linear-gradient(135deg,#eee2ff,#d3b9ff);color:#7b52d7}.metric-value{font-size:clamp(30px,3vw,40.8px);font-weight:900;letter-spacing:-.035em;margin:12px 0 7px;white-space:nowrap;line-height:1.3}.metric-value small{font-size:15.6px;letter-spacing:0;font-weight:700;color:var(--muted);margin-left:5px}.metric-value.negative{color:#d43e68}.metric-foot{border-top:1px solid #edf4f1;padding-top:10px;font-size:15.6px;color:var(--muted)}.content-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);gap:18px;margin-bottom:18px}.lower-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.panel{padding:23px;margin-bottom:18px;min-width:0}.content-grid .panel{margin-bottom:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.panel h2,.panel-heading h2{font-size:24px;margin:0;font-weight:900;line-height:1.35}.panel-heading .muted{font-size:15.6px;margin-top:5px}.pill{background:linear-gradient(135deg,#e0f8ed,#e7f0ff);color:var(--green2);padding:8px 12px;border-radius:999px;font-size:14.4px;font-weight:800;white-space:nowrap}.chart-wrap{height:270px;position:relative}.share-big{padding:19px;border-radius:19px;background:linear-gradient(120deg,#d9fae8,#dff2ff);display:flex;flex-direction:column;gap:5px;margin-bottom:15px}.share-big span{font-size:16.8px;color:#5d8275}.share-big strong{font-size:36px;color:#078368}.share-row{display:flex;justify-content:space-between;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}.share-row strong{white-space:nowrap}.hint{font-size:14.4px;color:var(--muted);line-height:1.8;margin:14px 0}.text-link{color:var(--green2);font-size:16.8px;font-weight:900}.recent-list{display:flex;flex-direction:column}.recent-item{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #eff5f2}.recent-item:last-child{border-bottom:0}.recent-date{width:48px;height:50px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:15px;background:linear-gradient(145deg,#e2faee,#e1efff);color:var(--green2)}.recent-date strong{font-size:21.6px;line-height:1.1}.recent-date small{font-size:11px}.recent-info{min-width:0;flex:1;display:flex;flex-direction:column}.recent-info strong{font-size:16.8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-info small{font-size:14.4px;color:var(--muted)}.recent-amount{font-size:18px;white-space:nowrap}.empty-state{text-align:center;padding:34px 12px;color:#98aaa4;font-size:15px}.form-panel{max-width:1000px}.form-panel h2{margin-bottom:20px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-grid label,.stack label{display:flex;flex-direction:column;gap:8px;font-size:18px;font-weight:800;color:#526f67;min-width:0}.form-grid input,.form-grid select,.form-grid textarea,.filter-bar input,.stack input{width:100%;border:1px solid #e0ebe6;border-radius:16px;background:rgba(255,255,255,.92);padding:14px 15px;color:var(--ink);outline:none;min-height:56px;box-shadow:0 3px 9px rgba(35,78,69,.035)}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.stack input:focus{border-color:#54c5a0;box-shadow:0 0 0 4px rgba(8,155,117,.10)}.form-grid textarea{resize:vertical}.form-grid .full{grid-column:1/-1}.optional{font-weight:500;color:#91a79f;font-size:12px}.calculation-preview{display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(120deg,#d9fae9,#e3f2ff);color:#087e64;padding:17px;border-radius:18px;font-size:19.2px;font-weight:800}.calculation-preview strong{font-size:27px}.form-actions{display:flex;gap:10px;flex-wrap:wrap}.form-actions .btn{flex:1}.table-wrap{width:100%;overflow:auto;border-radius:15px}table{border-collapse:separate;border-spacing:0;width:100%;font-size:16.8px;white-space:nowrap}th{text-align:left;color:#6f8b82;background:#f0f7f4;font-size:15.6px;font-weight:900}th,td{padding:15px 12px;border-bottom:1px solid #edf3f0}td{color:#405f56;background:rgba(255,255,255,.55)}tbody tr:last-child td{border-bottom:0}.num{text-align:right;font-weight:900}.info-box{padding:16px;border-radius:16px;background:linear-gradient(120deg,#eaf8f1,#edf4ff);color:#647f76;font-size:16.8px;line-height:1.8}.warning{padding:14px;background:#fff5df;color:#94651d;border-radius:15px;font-size:16.8px;line-height:1.8}.check-list{font-size:18px;color:#5d766d;line-height:2}.footer{text-align:center;color:#9aaea6;font-size:14.4px;padding:28px 0 10px}.mobile-nav{display:none}.toast{position:fixed;left:50%;bottom:calc(94px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:1000;background:#087f63;color:white;border-radius:16px;padding:13px 20px;font-size:18px;font-weight:900;box-shadow:0 10px 30px #063e2e35;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
/* Authentication: forest-green welcome screen with glass login panel */
.auth-body{min-height:100vh;display:grid;place-items:center;padding:22px;background:radial-gradient(ellipse at 50% 12%,rgba(208,255,225,.55),transparent 38%),linear-gradient(150deg,#0b5a3f 0%,#1b6d4c 36%,#d9f5e9 100%);position:relative;overflow-x:hidden}.auth-body:before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(4,40,26,.12),rgba(3,39,26,.6)),radial-gradient(ellipse at 20% 35%,rgba(207,255,153,.25),transparent 28%),radial-gradient(ellipse at 75% 25%,rgba(252,255,210,.22),transparent 32%),repeating-linear-gradient(78deg,transparent 0 70px,rgba(255,255,255,.035) 72px 78px,transparent 82px 135px);pointer-events:none}.auth-card{position:relative;width:min(100%,440px);background:rgba(255,255,255,.90);border:1px solid rgba(255,255,255,.85);border-radius:32px;padding:30px 25px;box-shadow:0 22px 70px rgba(0,35,20,.22);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.auth-card h1{text-align:center;font-size:37.2px;margin:0 0 7px;color:#087e5d;font-weight:900}.auth-card>p{text-align:center;margin-bottom:22px}.auth-card .brand-mark{width:72px;height:72px;border-radius:24px;font-size:37px}.stack{display:flex;flex-direction:column;gap:16px;margin-top:20px}.stack .btn{width:100%;margin-top:4px;min-height:58px}.alert{border-radius:14px;padding:13px 15px;font-size:16.8px;margin:12px 0}.alert.error{background:#fff0f4;color:#ad3b58}.alert.success{background:#e6f9ee;color:#1d744c}code{background:#f1f4f2;padding:2px 5px;border-radius:4px}
@media(min-width:681px){.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.metric-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.app-shell{grid-template-columns:200px minmax(0,1fr)}.main-content{padding:22px}.sidebar{padding-left:10px;padding-right:10px}.content-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:680px){html{font-size:17px}body{font-size:19.2px;line-height:1.6}.topbar{height:68px;padding:0 15px;gap:10px}.brand-icon-only{min-width:46px}.brand-mark.small{width:45px;height:45px;font-size:28.8px;border-radius:16px}.top-actions{margin-left:auto;font-size:16.8px;gap:8px}.user-chip{display:none}.logout{font-size:16.8px;padding:10px 13px;border-radius:15px;white-space:nowrap}.app-shell{display:block}.sidebar{display:none}.main-content{padding:19px 13px calc(110px + env(safe-area-inset-bottom));}.page-heading{align-items:stretch;flex-direction:column;gap:10px;margin-bottom:17px;text-align:left}.page-heading h1{font-size:34.8px;line-height:1.3;margin:2px 0 6px;text-align:left}.eyebrow{font-size:16.8px;text-align:left}.muted{font-size:16.8px;line-height:1.6;text-align:left}.page-heading>.btn{width:100%;font-size:20.4px;min-height:57px}.filter-bar{padding:14px;gap:10px;border-radius:20px;align-items:stretch}.filter-bar label{font-size:16.8px;gap:7px;min-width:calc(50% - 6px);flex:1}.filter-bar input{min-width:0;width:100%;font-size:18px;padding:11px;min-height:52px;border-radius:13px}.filter-bar .btn{font-size:18px;min-height:52px;flex:1}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}.metric-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric-card{padding:15px 13px;border-radius:20px;min-width:0}.metric-top{font-size:14.4px;line-height:1.45;align-items:center;gap:6px}.metric-icon{width:31px;height:31px;border-radius:11px;font-size:16px}.metric-value{font-size:clamp(26.4px,6.2vw,34.8px);line-height:1.25;margin:11px 0 8px;white-space:normal;overflow-wrap:anywhere}.metric-value small{font-size:14.4px;display:inline-block;margin-left:4px}.metric-foot{font-size:14.4px;line-height:1.5;padding-top:9px}.content-grid,.lower-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:14px}.panel{padding:18px 15px;border-radius:23px;margin-bottom:14px;text-align:left}.panel-heading{align-items:flex-start;justify-content:space-between;gap:10px;text-align:left;margin-bottom:15px}.panel h2,.panel-heading h2{font-size:22.8px;line-height:1.4;text-align:left}.panel-heading .muted{font-size:13px}.pill{font-size:13.2px;padding:7px 9px}.chart-wrap{height:250px}.share-big{padding:17px;border-radius:17px;align-items:flex-start;text-align:left}.share-big span{font-size:14px}.share-big strong{font-size:34.8px;line-height:1.3}.share-row{font-size:16.8px;padding:14px 0;text-align:left}.form-panel h2{font-size:25.2px;text-align:left}.form-grid{grid-template-columns:minmax(0,1fr);gap:16px}.form-grid .full{grid-column:auto}.form-grid label,.stack label{font-size:18px;line-height:1.45;align-items:stretch;text-align:left}.form-grid input,.form-grid select,.form-grid textarea,.stack input{min-height:58px;font-size:20.4px;padding:14px;border-radius:15px;text-align:left}.form-grid select{padding-right:42px}.form-grid textarea{min-height:100px}.optional{font-size:12px}.calculation-preview{font-size:18px;align-items:center;text-align:left;padding:16px}.calculation-preview strong{font-size:28.8px;text-align:right}.form-actions{display:grid;grid-template-columns:1fr}.form-actions .btn,.btn{min-height:56px;font-size:19.2px;border-radius:16px}.btn.tiny{min-height:40px;font-size:13px}.text-link{font-size:16.8px;white-space:nowrap}.recent-item{gap:10px;padding:13px 0;align-items:center}.recent-date{width:46px;height:48px}.recent-date strong{font-size:17px}.recent-date small{font-size:10px}.recent-info strong{font-size:16.8px;white-space:normal;line-height:1.4}.recent-info small{font-size:14.4px;line-height:1.5}.recent-amount{font-size:16.8px;max-width:110px}.empty-state{font-size:18px;padding:30px 12px;text-align:center}.table-wrap{margin:0 -1px;width:calc(100% + 2px)}table{font-size:16.8px;min-width:620px}th{font-size:13px}th,td{padding:14px 11px}.info-box,.warning{font-size:16.8px;line-height:1.75}.footer{font-size:12px}.mobile-nav{position:fixed;z-index:40;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:8px 7px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.88);border-top:1px solid rgba(255,255,255,.95);box-shadow:0 -8px 30px rgba(39,80,79,.09);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.mobile-nav .nav-item{min-width:0;min-height:67px;margin:0;padding:7px 2px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:28.8px;border-radius:17px;color:#8b9c97}.mobile-nav .nav-item.active{background:linear-gradient(145deg,#d9f8eb,#e1efff);color:#078c6c}.mobile-nav .nav-item>span{font-size:28.8px;line-height:1.05;display:block}.mobile-nav .nav-item small{font-size:13.2px;line-height:1.2;font-weight:900;white-space:nowrap}.auth-body{padding:18px;min-height:100svh}.auth-card{width:100%;max-width:440px;padding:28px 21px;border-radius:30px}.auth-card h1{font-size:29px}.auth-card .brand-mark{width:66px;height:66px;border-radius:22px;font-size:34px}.stack{gap:15px}.stack .btn{min-height:58px}.toast{bottom:calc(92px + env(safe-area-inset-bottom));font-size:14px}}
@media(max-width:370px){.main-content{padding-left:10px;padding-right:10px}.metric-card{padding:13px 10px}.metric-top{font-size:11px}.metric-value{font-size:21px}.mobile-nav .nav-item small{font-size:10px}.filter-bar{padding:11px;gap:8px}.mobile-nav .nav-item>span{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.dashboard-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;padding:21px 23px;margin:-2px 0 20px;border-radius:26px;color:#fff;background:linear-gradient(112deg,#0c674c 0%,#0a9d76 48%,#6fcbb0 100%);box-shadow:0 12px 30px rgba(7,128,91,.18);isolation:isolate}.dashboard-banner:before{content:"";position:absolute;z-index:-1;width:230px;height:230px;right:-50px;top:-90px;border-radius:50%;background:rgba(255,255,255,.13)}.dashboard-banner:after{content:"";position:absolute;z-index:-1;width:170px;height:170px;right:70px;bottom:-120px;border-radius:50%;background:rgba(215,255,235,.12)}.banner-leaf{width:57px;height:57px;flex-shrink:0;border-radius:20px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:36px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}.banner-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.banner-copy span{font-size:24px;font-weight:900}.banner-copy strong{font-size:16.8px;font-weight:600;color:rgba(255,255,255,.9)}.banner-copy small{font-size:14.4px;color:rgba(255,255,255,.78);margin-top:3px}.banner-sun{margin-left:auto;font-size:52.8px;color:rgba(255,255,255,.55)}
@media(max-width:680px){.dashboard-banner{padding:18px 16px;border-radius:23px;gap:12px;margin-bottom:15px}.banner-leaf{width:49px;height:49px;border-radius:17px;font-size:26px}.banner-copy span{font-size:18px}.banner-copy strong{font-size:13px}.banner-copy small{font-size:11px}.banner-sun{font-size:34px}}
.dashboard-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;padding:21px 23px;margin:-2px 0 20px;border-radius:26px;color:#fff;background:linear-gradient(112deg,#0c674c 0%,#0a9d76 48%,#6fcbb0 100%);box-shadow:0 12px 30px rgba(7,128,91,.18);isolation:isolate}.dashboard-banner:before{content:"";position:absolute;z-index:-1;width:230px;height:230px;right:-50px;top:-90px;border-radius:50%;background:rgba(255,255,255,.13)}.dashboard-banner:after{content:"";position:absolute;z-index:-1;width:170px;height:170px;right:70px;bottom:-120px;border-radius:50%;background:rgba(215,255,235,.12)}.banner-leaf{width:57px;height:57px;flex-shrink:0;border-radius:20px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:36px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}.banner-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.banner-copy span{font-size:24px;font-weight:900}.banner-copy strong{font-size:16.8px;font-weight:600;color:rgba(255,255,255,.9)}.banner-copy small{font-size:14.4px;color:rgba(255,255,255,.78);margin-top:3px}.banner-sun{margin-left:auto;font-size:52.8px;color:rgba(255,255,255,.55)}
@media(max-width:680px){.dashboard-banner{padding:18px 16px;border-radius:23px;gap:12px;margin-bottom:15px}.banner-leaf{width:49px;height:49px;border-radius:17px;font-size:26px}.banner-copy span{font-size:18px}.banner-copy strong{font-size:13px}.banner-copy small{font-size:11px}.banner-sun{font-size:34px}}

.toast.error{background:#b93457}
/* v11 reference-led mobile redesign */
:root{--ink:#102f50;--muted:#77879a;--green:#08a987;--green2:#087d69;--line:#e7edf5;--shadow:0 12px 34px rgba(31,67,105,.10);--white:rgba(255,255,255,.92)}
body{background:radial-gradient(ellipse at 8% 0%,#d8f7eb 0,transparent 33%),radial-gradient(ellipse at 100% 8%,#e4e9ff 0,transparent 32%),linear-gradient(160deg,#f7fbff 0%,#eef5f8 52%,#f5f5ff 100%);color:#183653}
.topbar{height:70px;padding:0 18px;background:rgba(255,255,255,.78);border-bottom:1px solid rgba(255,255,255,.96);box-shadow:0 6px 25px rgba(27,70,105,.07)}
.brand-mark.small{background:linear-gradient(145deg,#d6ffed,#dbeaff);box-shadow:0 7px 18px #168d6d1c}
.logout{background:linear-gradient(120deg,#e0f9ed,#e4f0ff);color:#087d69}
.sidebar{background:rgba(255,255,255,.56);border-right:1px solid rgba(255,255,255,.9)}
.nav-item{min-height:52px;font-size:18px;border-radius:17px}.nav-item.active{background:linear-gradient(130deg,#d9f9ed,#e2edff);color:#078a72}
.main-content{padding:24px;max-width:1280px;margin:0 auto}
.page-heading{margin-bottom:19px}.page-heading h1{font-size:clamp(32.4px,3vw,40.8px);color:#13395d}.eyebrow{letter-spacing:.02em;color:#0a9276}.muted{color:#718498}
.btn{min-height:52px;border-radius:17px;font-size:18px;letter-spacing:0}.btn.primary{background:linear-gradient(110deg,#08aa91 0%,#1fb66c 100%);box-shadow:0 8px 20px #0ca87d2b}.btn.secondary{background:linear-gradient(120deg,#e1f8ef,#e4efff);color:#087b69}
.dashboard-banner{min-height:145px;padding:25px 24px;border-radius:28px;background:linear-gradient(115deg,rgba(5,74,53,.92),rgba(5,135,98,.88) 52%,rgba(90,190,154,.84)),radial-gradient(circle at 85% 20%,#d6f5a6,transparent 30%);box-shadow:0 16px 34px rgba(5,105,75,.2)}
.dashboard-banner:before{width:280px;height:280px;right:-40px;top:-120px;background:radial-gradient(circle,rgba(255,255,255,.24),rgba(255,255,255,.02) 65%,transparent 70%)}
.banner-leaf{width:62px;height:62px;border-radius:22px;background:rgba(255,255,255,.19);font-size:33px}.banner-copy span{font-size:23px}.banner-copy strong{font-size:15px}.banner-copy small{font-size:13px}
.filter-bar{background:rgba(255,255,255,.84);border:1px solid #fff;border-radius:23px;box-shadow:0 9px 26px rgba(38,70,103,.07)}
.metric-grid{gap:14px}.metric-card{border-radius:25px;padding:21px;background:rgba(255,255,255,.91);border:1px solid rgba(255,255,255,.98);box-shadow:0 10px 27px rgba(39,75,102,.08)}
.metric-card:nth-child(1){background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(221,250,237,.88))}.metric-card:nth-child(2){background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(222,237,255,.91))}.metric-card:nth-child(3){background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,243,215,.91))}.metric-card:nth-child(4){background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,229,255,.91))}
.metric-top{font-size:16.8px;color:#60768a}.metric-icon{width:42px;height:42px;border-radius:15px}.metric-value{font-size:clamp(32.4px,3vw,43.2px);color:#123b50}.metric-value small{font-size:13px}.metric-foot{font-size:15.6px;color:#718498;border-top-color:#ffffffb5}
.panel{background:rgba(255,255,255,.91);border:1px solid rgba(255,255,255,.98);border-radius:27px;padding:23px;box-shadow:0 12px 32px rgba(31,67,105,.08)}.panel h2,.panel-heading h2{font-size:25.2px;color:#163a5b}.panel-heading .muted{font-size:13px}.pill{background:linear-gradient(130deg,#dcf8ed,#e4efff);color:#087c69}
.share-big{background:linear-gradient(120deg,#d9f9e9,#e1f2ff);border-radius:21px;padding:20px}.share-big strong{font-size:38.4px;color:#078b70}.share-row{font-size:18px;color:#415c73}.hint{font-size:13px}
.form-panel{max-width:100%;}.form-panel h2{font-size:22px}.form-grid{gap:18px}.form-grid label,.stack label{font-size:18px;color:#36536c}.form-grid input,.form-grid select,.form-grid textarea,.filter-bar input,.stack input{min-height:59px;border:1px solid #e3eaf2;background:rgba(250,253,255,.96);border-radius:17px;padding:15px 16px;font-size:20.4px;color:#193a56;box-shadow:0 4px 13px rgba(34,67,99,.045)}.form-grid textarea{min-height:105px}.form-grid input[readonly]{background:linear-gradient(120deg,#e0f9ed,#e4f2ff);color:#087c69;font-weight:800}.calculation-preview{background:linear-gradient(120deg,#d9f9e9,#dff0ff);border-radius:21px;padding:19px}.calculation-preview strong{font-size:36px;color:#07866f}
.table-wrap{border:1px solid #edf2f7;border-radius:18px;background:#fff}table{font-size:14px}th{background:#f0f7f7;color:#57758a}th,td{padding:15px 13px}td{background:rgba(255,255,255,.86);color:#35556b}tbody tr:nth-child(even) td{background:#fbfdff}
.recent-item{padding:15px 0}.recent-date{background:linear-gradient(145deg,#dff9ed,#e2edff);border-radius:16px}.recent-amount{color:#078c70;font-size:19.2px;font-weight:900}
.info-box{background:linear-gradient(120deg,#e8f8f1,#eef3ff);border:1px solid #e5f0f1;color:#48677a;border-radius:18px}.warning{border-radius:18px}
.mobile-nav{background:rgba(255,255,255,.91);border-top:1px solid rgba(255,255,255,.98);box-shadow:0 -10px 32px rgba(35,68,100,.11);padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:5px}.mobile-nav .nav-item{min-height:69px;border-radius:18px;color:#8a9ba9}.mobile-nav .nav-item.active{background:linear-gradient(145deg,#d7f9eb,#e1efff);color:#078a72;box-shadow:inset 0 0 0 1px rgba(18,169,130,.06)}.mobile-nav .nav-item>span{font-size:25px}.mobile-nav .nav-item small{font-size:13.2px;letter-spacing:-.01em}
.toast{border-radius:18px;box-shadow:0 12px 35px rgba(15,70,54,.25);padding:14px 21px;font-size:15px}
/* Login page: forest-green welcome screen and floating glass form */
.auth-body{min-height:100svh;padding:22px;background:radial-gradient(ellipse at 50% 8%,rgba(212,255,190,.48),transparent 25%),linear-gradient(115deg,rgba(3,42,26,.82),rgba(5,88,57,.64)),repeating-linear-gradient(90deg,transparent 0 46px,rgba(239,255,221,.09) 47px 50px,transparent 52px 98px),linear-gradient(160deg,#6b9a51 0%,#164f37 43%,#0a3027 100%);}
.auth-body:before{background:radial-gradient(ellipse at 20% 20%,rgba(230,255,177,.24),transparent 22%),radial-gradient(ellipse at 82% 14%,rgba(255,255,218,.18),transparent 24%),linear-gradient(180deg,rgba(4,37,24,.05),rgba(2,25,19,.50));}
.auth-card{width:min(100%,450px);padding:32px 25px 28px;border-radius:31px;background:rgba(255,255,255,.91);border:1px solid rgba(255,255,255,.98);box-shadow:0 24px 70px rgba(0,22,17,.3);}
.auth-card h1{font-size:38.4px;color:#087b62}.auth-card>p{font-size:18px;color:#73869a}.auth-card .brand-mark{background:linear-gradient(145deg,#d7ffe7,#dceaff);box-shadow:0 10px 25px rgba(8,142,104,.12)}
@media(min-width:681px){.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.metric-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){
 html{font-size:17px}body{font-size:19.2px;line-height:1.62}.topbar{height:64px;padding:0 13px}.brand-mark.small{width:43px;height:43px}.logout{font-size:16.8px;padding:10px 13px}.main-content{padding:15px 12px calc(112px + env(safe-area-inset-bottom))}.page-heading{gap:9px;margin-bottom:15px}.page-heading h1{font-size:34.8px;line-height:1.3}.eyebrow{font-size:14px}.muted{font-size:14px}.page-heading>.btn{width:100%;min-height:58px;font-size:17px}.dashboard-banner{padding:18px 15px;min-height:125px;border-radius:24px;gap:11px;margin-bottom:15px}.banner-leaf{width:48px;height:48px;border-radius:16px;font-size:25px}.banner-copy span{font-size:22.8px;line-height:1.35}.banner-copy strong{font-size:13px}.banner-copy small{font-size:12px}.banner-sun{font-size:30px}.filter-bar{padding:13px;gap:9px;border-radius:20px;margin-bottom:15px}.filter-bar label{min-width:calc(50% - 5px);font-size:13px}.filter-bar input{min-width:0;min-height:53px;font-size:18px;padding:11px;border-radius:14px}.filter-bar .btn{min-height:51px;font-size:15px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}.metric-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric-card{padding:15px 12px;border-radius:21px}.metric-top{font-size:14.4px;line-height:1.45;align-items:flex-start}.metric-icon{width:31px;height:31px;border-radius:11px;font-size:16px}.metric-value{font-size:clamp(26.4px,6vw,34.8px);line-height:1.28;margin:10px 0 8px;white-space:normal;overflow-wrap:anywhere}.metric-value small{font-size:14.4px;display:inline-block}.metric-foot{font-size:13.2px;line-height:1.5;padding-top:9px}.content-grid,.lower-grid{grid-template-columns:minmax(0,1fr);gap:13px;margin-bottom:13px}.panel{padding:17px 14px;border-radius:23px;margin-bottom:13px}.panel-heading{align-items:flex-start;margin-bottom:14px}.panel h2,.panel-heading h2{font-size:22.8px;line-height:1.42}.chart-wrap{height:245px}.share-big{padding:17px;border-radius:18px}.share-big strong{font-size:29px}.share-row{font-size:16.8px;padding:14px 0}.form-grid{grid-template-columns:minmax(0,1fr);gap:15px}.form-grid .full{grid-column:auto}.form-grid label,.stack label{font-size:18px;gap:7px}.form-grid input,.form-grid select,.form-grid textarea,.stack input{min-height:59px;font-size:20.4px;padding:14px;border-radius:16px}.form-grid textarea{min-height:100px}.calculation-preview{padding:16px;border-radius:18px;font-size:14px}.calculation-preview strong{font-size:25px}.form-actions{display:grid;grid-template-columns:1fr;gap:10px}.form-actions .btn,.btn{min-height:57px;font-size:19.2px;border-radius:17px}.btn.tiny{min-height:42px;font-size:13px}.panel-heading .btn,.panel-heading form .btn{min-height:44px;font-size:15.6px;padding:10px}.table-wrap{width:100%;overflow-x:auto;border-radius:15px}table{font-size:15.6px;min-width:600px}th{font-size:12px}th,td{padding:13px 10px}.info-box,.warning{font-size:16.8px;line-height:1.75}.recent-item{gap:9px;padding:13px 0}.recent-date{width:43px;height:46px}.recent-info strong{font-size:16.8px;white-space:normal}.recent-info small{font-size:12px}.recent-amount{font-size:15.6px;max-width:105px}.mobile-nav .nav-item{min-height:67px;padding:6px 1px 5px}.mobile-nav .nav-item>span{font-size:23px}.mobile-nav .nav-item small{font-size:10px}.auth-body{padding:18px}.auth-card{padding:28px 20px;border-radius:28px}.auth-card h1{font-size:29px}.stack .btn{min-height:58px}.toast{bottom:calc(92px + env(safe-area-inset-bottom));font-size:14px}}
@media(max-width:370px){.main-content{padding-left:9px;padding-right:9px}.metric-card{padding:13px 10px}.metric-top{font-size:11px}.metric-value{font-size:21px}.mobile-nav .nav-item small{font-size:9px}.mobile-nav .nav-item>span{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Responsive refinement: phone, tablet, iPad, laptop and desktop */
:root{--page-gutter:clamp(14px,2.4vw,30px);--card-radius:24px}
img,canvas,svg,video{max-width:100%}
.app-shell{width:100%;min-width:0}
.main-content{width:100%;min-width:0}
.panel,.metric-card,.content-grid>*{min-width:0}
.page-heading,.panel-heading{min-width:0;flex-wrap:wrap}
.page-heading h1{overflow-wrap:anywhere}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid .full{grid-column:1/-1}
.filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end}
.filter-bar label{flex:1 1 180px;min-width:0}
.filter-bar input{width:100%;min-width:0}
.table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{overflow-wrap:anywhere}
button,.btn,a.nav-item{touch-action:manipulation}
input,select,textarea{max-width:100%;min-width:0}
.mobile-nav{display:none}
@media (min-width:1441px){.app-shell{max-width:1600px}.main-content{max-width:1320px;padding:30px 34px}}
@media (min-width:1025px){.app-shell{grid-template-columns:240px minmax(0,1fr)}.sidebar{display:block}.main-content{padding:clamp(22px,2.4vw,36px)}.content-grid{grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)}.lower-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-nav{display:none}}
@media (min-width:681px) and (max-width:1024px){
  .app-shell{display:block;max-width:100%}.sidebar{display:none}.main-content{max-width:100%;padding:clamp(18px,3vw,30px) clamp(16px,3vw,28px) calc(104px + env(safe-area-inset-bottom))}
  .topbar{height:68px;padding-inline:clamp(16px,3vw,28px)}.mobile-nav{position:fixed;z-index:40;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));width:min(680px,calc(100% - 24px));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:7px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.98);border-radius:22px;box-shadow:0 8px 30px rgba(26,58,70,.16);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
  .mobile-nav .nav-item{min-width:0;min-height:58px;margin:0;padding:5px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:15px;font-size:26.4px;color:#82948f}.mobile-nav .nav-item.active{background:#dcf8ed;color:#08785f}.mobile-nav .nav-item>span{font-size:26.4px;line-height:1.05}.mobile-nav .nav-item small{font-size:13.2px;line-height:1.15;white-space:nowrap}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}.content-grid,.lower-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.panel{padding:clamp(16px,2vw,24px)}.chart-wrap{height:300px}
}
@media (max-width:680px){
  .form-grid{grid-template-columns:minmax(0,1fr)}.form-grid .full{grid-column:auto}
  .mobile-nav{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .main-content{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  .page-heading .muted{max-width:65ch}
  .table-wrap{width:100%;margin:0}
  .panel-heading form{max-width:100%}.panel-heading form .btn{white-space:normal}
}
@media (max-width:380px){
  .mobile-nav{left:6px;right:6px;width:auto;transform:none;gap:2px}.mobile-nav .nav-item small{font-size:9px}.mobile-nav .nav-item{border-radius:12px}
  .metric-grid,.metric-grid.compact{grid-template-columns:minmax(0,1fr)}
  .topbar{padding-inline:10px}.logout{padding:9px 10px}
}
@media (hover:none){.btn:hover,.nav-item:hover{transform:none}}
.btn:disabled{opacity:.72;cursor:wait;filter:saturate(.75)}
[aria-busy="true"]{cursor:progress}
@media (min-width:681px) and (max-width:1024px){.toast{bottom:calc(96px + env(safe-area-inset-bottom))}}
/* ลดข้อความตกแต่งที่ซ้ำซ้อน ให้พื้นที่กับข้อมูลและงานหลัก */
.page-heading .eyebrow{display:none}
.page-heading>div>.muted{display:none}
.dashboard-banner .banner-copy strong,.dashboard-banner .banner-sun{display:none}
.dashboard-banner{min-height:100px;padding:20px 24px}
.banner-copy span{font-size:clamp(19px,2vw,24px)}
@media(max-width:680px){.dashboard-banner{min-height:84px;padding:15px 14px}.banner-copy span{font-size:18px}}

/* Final responsive navigation polish: phone, tablet/iPad, laptop and desktop */
:root{--nav-height:76px;--nav-glass:rgba(255,255,255,.94)}
html{scroll-padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 20px)}
body{overflow-x:hidden}
.topbar{padding-inline:clamp(12px,2.2vw,30px);gap:12px}
.top-actions{min-width:0;gap:clamp(6px,1vw,12px)}
.user-chip{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar{position:sticky;top:76px;height:calc(100svh - 76px);overflow-y:auto;align-self:start}
.nav-item{min-height:48px}
.mobile-nav{display:none}
@media (max-width:680px){
  :root{--nav-height:68px}
  .topbar{height:60px;padding:0 12px;gap:8px}
  .brand-mark.small{width:39px;height:39px;border-radius:14px;font-size:22px}
  .top-actions{gap:6px}
  .user-chip{font-size:14.4px;padding:7px 9px;max-width:38vw}
  .logout{font-size:14.4px;padding:8px 10px;border-radius:12px;white-space:nowrap}
  .app-shell{display:block}
  .sidebar{display:none}
  .main-content{padding:16px 14px calc(var(--nav-height) + 28px + env(safe-area-inset-bottom))}
  .mobile-nav{position:fixed;z-index:100;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;transform:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:5px;background:var(--nav-glass);border:1px solid rgba(220,232,229,.95);border-radius:22px;box-shadow:0 8px 30px rgba(29,65,60,.16);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
  .mobile-nav .nav-item{min-width:0;min-height:56px;height:56px;margin:0;padding:5px 1px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:16px;font-size:24px;line-height:1.05;color:#788b85;overflow:hidden}
  .mobile-nav .nav-item>span{display:flex;align-items:center;justify-content:center;font-size:25.2px;line-height:1;height:23px}
  .mobile-nav .nav-item small{display:block;max-width:100%;font-size:clamp(10.8px,2.5vw,13.2px);font-weight:750;line-height:1.1;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-nav .nav-item.active{background:linear-gradient(145deg,#d9f8eb,#e6f1ff);color:#08785f;box-shadow:inset 0 0 0 1px rgba(12,155,120,.08)}
  .mobile-nav .nav-item:focus-visible{outline:2px solid #0c9b78;outline-offset:1px}
  .toast{bottom:calc(var(--nav-height) + 25px + env(safe-area-inset-bottom));max-width:calc(100vw - 28px)}
}
@media (max-width:360px){
  .mobile-nav{left:6px;right:6px;gap:2px;padding:4px;border-radius:18px}
  .mobile-nav .nav-item{height:53px;min-height:53px;border-radius:13px}
  .mobile-nav .nav-item>span{font-size:19px}
  .mobile-nav .nav-item small{font-size:9px}
  .main-content{padding-left:10px;padding-right:10px}
  .user-chip{max-width:34vw}
}
@media (min-width:681px) and (max-width:1024px){
  :root{--nav-height:70px}
  .app-shell{display:block;width:100%;max-width:100%}
  .sidebar{display:none}
  .topbar{height:66px;padding-inline:clamp(18px,3vw,32px)}
  .main-content{width:100%;max-width:100%;padding:clamp(20px,3vw,34px) clamp(18px,3vw,32px) calc(var(--nav-height) + 30px + env(safe-area-inset-bottom))}
  .mobile-nav{position:fixed;z-index:100;left:50%;right:auto;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(620px,calc(100% - 36px));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:6px;background:var(--nav-glass);border:1px solid rgba(220,232,229,.95);border-radius:23px;box-shadow:0 8px 30px rgba(29,65,60,.15);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
  .mobile-nav .nav-item{min-width:0;height:58px;min-height:58px;margin:0;padding:5px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:16px;font-size:25.2px;color:#788b85}
  .mobile-nav .nav-item>span{font-size:26.4px;line-height:1;height:23px}
  .mobile-nav .nav-item small{font-size:13.2px;line-height:1.1;white-space:nowrap}
  .mobile-nav .nav-item.active{background:linear-gradient(145deg,#d9f8eb,#e6f1ff);color:#08785f}
  .toast{bottom:calc(var(--nav-height) + 28px + env(safe-area-inset-bottom))}
}
@media (min-width:1025px){
  .mobile-nav{display:none!important}
  .app-shell{grid-template-columns:clamp(220px,18vw,260px) minmax(0,1fr)}
  .sidebar{display:block;top:76px;height:calc(100svh - 76px);padding:22px 12px}
  .main-content{padding:clamp(24px,2.5vw,38px);max-width:none}
  .page-heading h1{font-size:clamp(26px,2.2vw,32px)}
}
@media (min-width:681px) and (max-width:820px){
  .content-grid,.lower-grid{grid-template-columns:minmax(0,1fr)}
  .metric-grid,.metric-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:1024px){
  .mobile-nav{bottom:4px;padding:3px 5px;border-radius:16px}
  .mobile-nav .nav-item{height:46px;min-height:46px;gap:2px}
  .mobile-nav .nav-item>span{height:18px;font-size:18px}
  .mobile-nav .nav-item small{font-size:9px}
  .main-content{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-transparency:reduce){.mobile-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}}

/* v14: clean layered hamburger navigation and profit summary cleanup */
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.menu-toggle,.menu-close{display:none}
.sidebar-mobile-head{display:none}
.menu-scrim[hidden]{display:none!important}
.three-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.share-row strong{font-variant-numeric:tabular-nums}
@media (max-width:1024px){
  .topbar-left{gap:10px}
  .menu-toggle{width:42px;height:42px;flex:0 0 42px;border:1px solid #dcece6;border-radius:14px;background:linear-gradient(145deg,#fff,#eaf8f2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;box-shadow:0 3px 12px rgba(24,85,68,.08);padding:0}
  .menu-toggle span{width:19px;height:2.5px;border-radius:9px;background:#087f63;display:block;transition:transform .2s,opacity .2s}
  body.menu-open .menu-toggle span:first-child{transform:translateY(7.5px) rotate(45deg)}
  body.menu-open .menu-toggle span:nth-child(2){opacity:0}
  body.menu-open .menu-toggle span:last-child{transform:translateY(-7.5px) rotate(-45deg)}
  .sidebar{display:block!important;position:fixed!important;z-index:121;left:0;top:0;width:min(310px,84vw);height:100dvh!important;min-height:0!important;padding:18px 14px calc(24px + env(safe-area-inset-bottom))!important;overflow-y:auto;overscroll-behavior:contain;background:rgba(250,255,252,.98)!important;border:0!important;border-right:1px solid #dcece6!important;border-radius:0 26px 26px 0;box-shadow:14px 0 44px rgba(18,59,53,.18);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transform:translateX(-105%);visibility:hidden;transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility .26s}
  body.menu-open .sidebar{transform:translateX(0);visibility:visible}
  .sidebar-mobile-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 18px;color:#123b35;font-size:21.6px;font-weight:900}
  .menu-close{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:13px;background:#e9f7f0;color:#087f63;font-size:32.4px;line-height:1}
  .sidebar-caption{padding:0 12px 10px}
  .sidebar .nav-item{min-height:54px;margin:5px 0;padding:13px 14px;border-radius:17px;font-size:15px}
  .sidebar .nav-item.active{box-shadow:inset 0 0 0 1px rgba(7,130,103,.08)}
  .sidebar-note{margin-top:18px;padding:13px;border-radius:16px;background:#edf7f2;color:#638078;font-size:14.4px;line-height:1.55}
  .menu-scrim{position:fixed;inset:0;z-index:120;background:rgba(12,34,31,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  .mobile-nav{display:none!important}
  .main-content{padding-bottom:clamp(24px,4vw,42px)!important}
  .toast{bottom:20px!important}
}
@media (min-width:681px) and (max-width:1024px){
  .topbar{padding-inline:24px}
  .three-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:680px){
  .topbar{height:64px;padding-inline:12px}
  .brand-mark.small{width:39px;height:39px;border-radius:13px}
  .top-actions{gap:5px}
  .user-chip{max-width:31vw;padding:7px 8px;font-size:11px}
  .logout{padding:8px 9px;font-size:13.2px;border-radius:11px}
  .three-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-grid .metric-card:first-child{grid-column:1/-1}
  .sidebar{width:min(300px,86vw)}
}
@media (max-width:360px){
  .topbar-left{gap:7px}.menu-toggle{width:38px;height:38px;flex-basis:38px}
  .user-chip{display:none}
  .three-metrics{grid-template-columns:minmax(0,1fr)}
  .metric-grid .metric-card:first-child{grid-column:auto}
}
@media (min-width:1025px){
  .menu-toggle,.sidebar-mobile-head,.menu-scrim{display:none!important}
  .sidebar{transform:none;visibility:visible}
}


/* v15: friendlier emoji menu, compact spacing, cleaner drawer */
@media (max-width:1024px){
  .sidebar{width:min(292px,82vw)!important;padding:16px 13px calc(20px + env(safe-area-inset-bottom))!important;border-radius:0 24px 24px 0!important}
  .sidebar-mobile-head{padding:7px 7px 13px!important;font-size:20px!important}
  .sidebar-caption{font-size:13.2px!important;letter-spacing:.02em;padding:0 12px 8px!important;color:#8aa49a!important}
  .sidebar .nav-item{min-height:49px!important;margin:4px 0!important;padding:10px 12px!important;gap:10px!important;border-radius:14px!important;font-size:18px!important;font-weight:800!important;line-height:1.35!important;color:#526e65!important}
  .sidebar .nav-item>span{display:flex;align-items:center;gap:9px;white-space:normal}
  .sidebar .nav-item.active{background:linear-gradient(110deg,#dcf8eb 0%,#e9f2ff 100%)!important;color:#08785f!important;box-shadow:inset 0 0 0 1px rgba(8,132,101,.10)!important}
  .sidebar-note{margin:18px 3px 0!important;padding:12px 13px!important;border-radius:14px!important;font-size:13.2px!important;line-height:1.6!important}
  .menu-close{width:36px!important;height:36px!important;border-radius:12px!important;font-size:23px!important}
  .menu-toggle{border-radius:12px!important;box-shadow:0 2px 8px rgba(24,85,68,.07)!important}
  .menu-scrim{background:rgba(12,34,31,.42)!important;backdrop-filter:blur(2px)!important;-webkit-backdrop-filter:blur(2px)!important}
}
@media (max-width:380px){
  .sidebar{width:min(280px,84vw)!important}
  .sidebar .nav-item{min-height:46px!important;padding:9px 10px!important;font-size:14px!important}
}

/* v16: simpler dashboard, intentional alignment, prominent seller names */
.dashboard-banner{display:none!important}
/* Dates are easier to scan when the label and date control share a centered axis. */
.filter-bar label:has(input[type="date"]){text-align:center;align-items:stretch}
.filter-bar label input[type="date"]{text-align:center;text-align-last:center;font-weight:800;font-variant-numeric:tabular-nums}
.filter-bar label input[type="date"]::-webkit-calendar-picker-indicator{margin-left:8px;opacity:.72}
.recent-date{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-variant-numeric:tabular-nums}
.recent-date strong{font-size:25.2px;font-weight:950;line-height:1.05}
.recent-date small{font-size:13.2px;font-weight:850;line-height:1.25;margin-top:4px}
.recent-info{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;min-width:0}
.recent-info .seller-name{font-size:clamp(20.4px,2vw,25.2px);font-weight:950;line-height:1.25;letter-spacing:-.02em;color:#173f35;white-space:normal}
.recent-info .round-label{font-size:14.4px;font-weight:850;color:#078267;background:#e5f8ef;border-radius:8px;padding:2px 7px;white-space:nowrap}
.recent-info>small{flex-basis:100%;font-size:14.4px;font-weight:650;line-height:1.45;color:#6d877e}
.seller-name-cell{font-size:19.2px;font-weight:900;color:#173f35;white-space:nowrap}
@media(max-width:680px){
  .filter-bar{align-items:stretch}
  .filter-bar label:has(input[type="date"]){min-width:100%;text-align:center}
  .filter-bar label input[type="date"]{min-height:58px;text-align:center;text-align-last:center;font-size:21.6px;font-weight:900;letter-spacing:.01em}
  .filter-bar>.btn,.filter-bar>a.btn{flex:1}
  .recent-info .seller-name{font-size:24px;font-weight:950}
  .recent-info>small{font-size:12px}
  .recent-date{width:52px;min-width:52px;height:54px}
  .recent-date strong{font-size:22px}
  .seller-name-cell{font-size:19.2px;font-weight:950}
}

/* v18: obvious monthly round buttons and truly centered date controls */
.date-center-field{ text-align:center!important; }
.date-center-field input[type="date"]{ text-align:center!important; text-align-last:center!important; font-weight:900!important; font-variant-numeric:tabular-nums; }
.date-center-field input[type="date"]::-webkit-datetime-edit{ text-align:center; padding:0; }
.date-center-field input[type="date"]::-webkit-calendar-picker-indicator{ margin-left:8px; opacity:.72; }
.round-picker{border:0;padding:0;margin:0;min-width:0;}
.round-picker legend{padding:0;margin:0 0 9px;font-size:18px;font-weight:900;color:#36536c;}
.round-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.round-option{position:relative;display:block!important;min-width:0;cursor:pointer;}
.round-option input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;min-height:0!important;padding:0!important;}
.round-option span{display:flex;align-items:center;justify-content:center;min-height:58px;padding:10px 6px;border:1.5px solid #dfeae9;border-radius:17px;background:rgba(250,253,255,.96);color:#567267;font-size:18px;font-weight:900;text-align:center;box-shadow:0 4px 13px rgba(34,67,99,.045);transition:background .15s,border-color .15s,transform .15s;}
.round-option input:checked + span{background:linear-gradient(120deg,#d9f9e9,#dff0ff);border-color:#12a982;color:#087d69;box-shadow:inset 0 0 0 1px rgba(18,169,130,.12),0 5px 14px rgba(8,142,104,.10);}
.round-option input:focus-visible + span{outline:3px solid #55c7b1;outline-offset:3px;}
@media(max-width:680px){.round-picker legend{font-size:16px}.round-buttons{gap:8px}.round-option span{min-height:62px;font-size:19.2px;border-radius:16px}.date-center-field input[type="date"]{min-height:60px;font-size:21.6px!important;padding-left:8px!important;padding-right:8px!important}}


/* v19: center every visible date across all pages and screen sizes */
input[type="date"],
input[type="date"]:not([readonly]) {
  text-align: center !important;
  text-align-last: center !important;
  font-variant-numeric: tabular-nums;
}
input[type="date"]::-webkit-datetime-edit { text-align: center; }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { justify-content: center; }
input[type="date"]::-webkit-calendar-picker-indicator { margin-inline: 6px; }
.date-center-field,
.date-center-field > input[type="date"],
.filter-bar label:has(input[type="date"]) { text-align: center !important; }
/* Date values are the first column in the sales and expense history tables. */
.table-wrap table thead th:first-child,
.table-wrap table tbody td:first-child { text-align: center !important; }
.recent-date, .recent-date strong, .recent-date small { text-align: center !important; }
.footer span { display: inline-block; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 680px) {
  input[type="date"] { min-height: 56px; font-weight: 900 !important; }
  .table-wrap table thead th:first-child,
  .table-wrap table tbody td:first-child { text-align: center !important; }
}


/* v20: force the actual date digits/segments to the visual center on mobile browsers */
input[type="date"],
input[type="date"]:focus,
input[type="date"]:hover {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
  text-align-last: center !important;
  padding-inline: 42px !important;
  font-weight: 950 !important;
  font-variant-numeric: tabular-nums !important;
  position: relative;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  text-align: center !important;
}
input[type="date"]::-webkit-datetime-edit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute !important;
  right: 12px !important;
  margin: 0 !important;
  opacity: .72;
}
/* Keep date field captions and all rendered date text centered on every page. */
label:has(> input[type="date"]),
label:has(input[type="date"]) {
  text-align: center !important;
}
.table-wrap table th:first-child,
.table-wrap table td:first-child {
  text-align: center !important;
  font-variant-numeric: tabular-nums;
}
.recent-date, .recent-date * { text-align: center !important; }


/* v21: distinct, clear two-button seller selector */
.seller-picker{border:0;padding:0;margin:0;min-width:0}
.seller-picker legend{font-size:16.8px;font-weight:850;color:var(--text,#243b35);margin-bottom:10px;padding:0}
.seller-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.seller-option{position:relative;display:block!important;min-width:0;cursor:pointer}
.seller-option input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;min-height:0!important;padding:0!important}
.seller-option span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:66px;padding:12px;border:2px solid #dce5ed;border-radius:18px;background:#f5f9ff;color:#274765;font-size:clamp(20.4px,2.5vw,25.2px);font-weight:950;box-shadow:0 4px 12px rgba(35,55,85,.06);transition:background .15s,border-color .15s,transform .15s}
.seller-one span{background:#fff4e8;border-color:#f3d2aa;color:#8b4d13}
.seller-two span{background:#edf5ff;border-color:#c7dcfb;color:#2457a6}
.seller-one input:checked+span{background:#ffe0b8;border-color:#e58a22;color:#713b00;box-shadow:inset 0 0 0 1px #e58a22,0 5px 14px rgba(229,138,34,.16)}
.seller-two input:checked+span{background:#d8e9ff;border-color:#397be0;color:#174b9d;box-shadow:inset 0 0 0 1px #397be0,0 5px 14px rgba(57,123,224,.16)}
.seller-option input:focus-visible+span{outline:3px solid #55c7b1;outline-offset:3px}
.seller-option span:active{transform:scale(.985)}
@media(max-width:420px){.seller-buttons{gap:8px}.seller-option span{min-height:60px;padding:8px;font-size:20.4px;border-radius:15px}}

/* v22: make monthly round choices distinct colored cards like seller buttons */
.round-option span{min-height:66px;padding:12px;border-width:2px;border-radius:18px;font-size:clamp(19.2px,2.4vw,24px);font-weight:950;box-shadow:0 4px 12px rgba(35,55,85,.06)}
.round-option:nth-child(1) span{background:#fff4e8;border-color:#f3d2aa;color:#8b4d13}
.round-option:nth-child(2) span{background:#edf5ff;border-color:#c7dcfb;color:#2457a6}
.round-option:nth-child(3) span{background:#f1eaff;border-color:#d5c4ff;color:#6540a6}
.round-option:nth-child(1) input:checked+span{background:#ffe0b8;border-color:#e58a22;color:#713b00;box-shadow:inset 0 0 0 1px #e58a22,0 5px 14px rgba(229,138,34,.16)}
.round-option:nth-child(2) input:checked+span{background:#d8e9ff;border-color:#397be0;color:#174b9d;box-shadow:inset 0 0 0 1px #397be0,0 5px 14px rgba(57,123,224,.16)}
.round-option:nth-child(3) input:checked+span{background:#e4d8ff;border-color:#8d69db;color:#4c2e91;box-shadow:inset 0 0 0 1px #8d69db,0 5px 14px rgba(111,75,190,.16)}
.round-option span:active{transform:scale(.985)}
@media(max-width:420px){.round-buttons{gap:8px}.round-option span{min-height:60px;padding:8px 4px;font-size:19.2px;border-radius:15px}}


/* v23: larger typography (+20%), centered date values, no date-picker arrow, and soft distinct date cards */
input[type="date"]::-webkit-calendar-picker-indicator{display:none!important;-webkit-appearance:none!important;width:0!important;height:0!important;margin:0!important;padding:0!important;opacity:0!important}
input[type="date"]::-webkit-inner-spin-button{display:none!important;-webkit-appearance:none!important}
input[type="date"]{appearance:none;-webkit-appearance:none;position:relative!important;text-align:center!important;text-align-last:center!important;font-weight:900!important;font-variant-numeric:tabular-nums;border:1.5px solid #d7e8e4!important;border-radius:15px!important;background:#f1fbf7!important;box-shadow:inset 0 1px 2px rgba(31,83,67,.04)!important;padding:12px 8px!important;min-width:0!important}
input[type="date"]::-webkit-datetime-edit{padding:0!important;text-align:center!important}
input[type="date"][name="sale_date"]{background:#effaf4!important;border-color:#bfe8d4!important;color:#17664d!important}
input[type="date"][name="expense_date"]{background:#f5f0ff!important;border-color:#d8c9fa!important;color:#5f4296!important}
input[type="date"][name="from"]{background:#eef5ff!important;border-color:#c5dafb!important;color:#2457a6!important}
input[type="date"][name="to"]{background:#fff5e9!important;border-color:#f3d5b1!important;color:#8b4d13!important}
input[type="date"]:focus{outline:3px solid rgba(67,151,216,.22)!important;outline-offset:1px!important}
@media(max-width:680px){input[type="date"]{min-height:62px!important;font-size:clamp(18px,4.8vw,22px)!important;padding:10px 5px!important}}