/* Chüi method: sampled surfaces, source art, live content, layered glass. */
:root{--ink:#090f20;--green:#227b22;--radius:20px;--shadow:0 3px 4px rgba(31,47,76,.15),0 9px 23px rgba(31,64,128,.035),inset 0 1px 0 rgba(255,255,255,.95)}
body{background:#f0f3fa}.page-shell{background:radial-gradient(ellipse at 62% 28%,#fcfbff66,transparent 55%),radial-gradient(ellipse at 80% 78%,#fff6e51a,transparent 35%),linear-gradient(#eff2f7,#f0f3fa)}
.sidebar{background:#0b2242 url('./assets/sidebar-art.png') left top/100% 100% no-repeat;border-right:1px solid #ffffffb3}
.glass-card{background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(248,249,255,.60));backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(208,216,231,.24),0 9px 24px rgba(31,64,128,.055),0 2px 3px rgba(31,47,76,.15),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(160,190,230,.18)}
.glass-card:before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,transparent,#fff,transparent) top center/90% 1px no-repeat,linear-gradient(180deg,#ffffff55,transparent) top/100% 40% no-repeat}
.kpi:not(.net){background:linear-gradient(128deg,#ffffff88,#f7f8ff55 32%,#e6eaf444 58%,#fdfdffb0)}
.kpi:before{background:linear-gradient(90deg,transparent,#fff,transparent) top/90% 1px no-repeat,linear-gradient(131deg,transparent 24%,#ffffffc0 38%,#ffffff50 41%,transparent 52%)}
.kpi.flourish:after{width:52px;height:40px;clip-path:none;border-radius:0;background:url('./assets/flourish-1.png') bottom right/100% 100%;filter:none}
.kpi.flourish:nth-child(2):after{width:40px;height:36px;background-image:url('./assets/flourish-2.png')}
.kpi.net{background:#304561 url('./assets/crown-art.png') center/100% 100%;border:1.4px solid #f7fbff;box-shadow:0 3px 6px #1c35532e,inset 0 0 0 1px #72849a,inset 0 0 12px #d6e7ff40}
.net:before{background:none}.net:after{background:url('./assets/crown-corner.png') bottom right/55px 24px no-repeat}
.donut-card{background:linear-gradient(135deg,transparent 48%,#ffffffad 54%,transparent 61%),linear-gradient(180deg,#ffffff77,#f8f9ff99)}
.totals{background:linear-gradient(180deg,#778397,#52647d 48%,#405671);box-shadow:inset 0 1px 2px #e8f1ff80,0 2px 3px #27364c13}
.totals:after{background:url('./assets/totals-corner.png') bottom right/86px 45px no-repeat}
.nav-item.active{background:linear-gradient(112deg,#fefaf0 3%,#f9e5ca 48%,#bba283 92%,#e2d2bb);border:1.3px solid #fff7e5;box-shadow:inset 0 1px 3px white,0 4px 12px #03112866}
.glass-button.gold{background:linear-gradient(116deg,#fff4d6,#f3dfbc 46%,#d5b587 75%,#f2e5ce)}
.status{background:linear-gradient(120deg,#effbed,#d5f1da)}.status.progress{background:linear-gradient(120deg,#f3f8ff,#d5e2f5)}.status.waiting{background:linear-gradient(120deg,#fffdf0,#fbe3c1)}
.table-head{background:linear-gradient(110deg,#e8edf4,#e9eaf4)}
@media(min-width:761px){
.page-shell{width:1150px;max-width:none;min-height:1368px;zoom:var(--page-scale,1)}
main{margin-left:196px;padding:16px 19px 80px 26px;min-height:1368px}.sidebar{width:196px}.sidebar-content{padding:29px 6px 29px 16px}
.brand{margin-bottom:64px}.wordmark{font-size:53px}.brand small{font-size:12.8px}.nav-item{font-size:18px;gap:25px;padding-inline:17px;height:41.5px}.nav-menu{gap:9px}.nav-item.active{height:51px;margin:2.4px 0 4.8px;border-radius:15px}
.hero{margin-top:17.5px}.hero-actions .glass-button{padding:9.5px 19px}.filters{margin-top:17.5px}.filter select{font-size:16.7px}
.kpis{grid-template-columns:175px 164px 163px 164px 182px;gap:16px;margin-top:21px}.kpi{height:171px;padding:18px 23px}.kpi.net{padding:17px 24px}
.kpi-label{font-size:18px}.kpi-value{font-size:28.7px}.kpi-note{font-size:15.8px}.net .kpi-label{font-size:17.6px}.net .kpi-value{font-size:31px}.net .kpi-note{font-size:15px}
.charts{grid-template-columns:506px 387px;gap:16px;margin-top:23px}.chart-card{height:262px;padding:12px 20px 16px}.chart-header h2{font-size:23px}.chart-legend{font-size:14px;gap:10px}.trend-plot{height:194px;margin-top:3px}.axis-layer{font-size:15px}.x-tick{font-size:14px}.y-tick{width:39px}
.donut-card{padding-left:19px;padding-right:14px}.donut-layout{grid-template-columns:171px 1fr;height:200px;gap:8px}.donut-stage{height:190px}.donut-legend{font-size:13.5px;letter-spacing:-.55px;margin:11px 0 0;align-self:start}.donut-legend li{min-height:32px;gap:5px}.donut-legend .dot{width:13px;height:13px;flex-basis:13px}.donut-centre strong{font-size:22px}.donut-centre small{font-size:15px}
.table-card{margin-top:21px;padding:13px 12px 16px}.table-top{min-height:76px;padding:0 7px 12px}.table-top h2{font-size:27px}.table-top p{font-size:16px}.table-head{height:40px;font-size:16px}.project-row{min-height:65px;font-size:17px}.project-name strong{font-size:19.5px}.project-name small{font-size:14px}.project-date time{font-size:17px}.status{font-size:14px;min-height:36px;padding:6px 4px}.table-tools{gap:20px}.search{width:242px}.search input{font-size:16px}
.totals{height:48px;margin-top:18px;font-size:19px}.totals>strong{font-size:21px}.user-chip{bottom:56px}.sample-note{font-size:9px}
}
/* Round 2: optical alignment and sampled pastel status fills. */
@media(min-width:761px){
.brand{margin-bottom:69px}.wordmark{font-size:49px}.brand small{font-size:12px}.sidebar-content{padding-top:33px}.brand{margin-bottom:65px}.user-chip{border-top:0;bottom:64px}
.hero-actions{gap:20px}.hero-actions #profit-button{width:200px}.hero-actions #create-button{width:188px}.filter:first-child{width:200px}.filter:nth-child(2){width:207px}.filter select{font-size:16px;padding-right:20px}.filters{gap:14px}
.kpis{grid-template-columns:175px 163px 162px 163px 182px;gap:16px}.kpi-value{font-family:'Noto Sans Thai',sans-serif;font-weight:700;letter-spacing:-.65px}.net .kpi-value{font-weight:700}.chart-header{margin-left:5px}.donut-centre strong{font-family:'Noto Sans Thai',sans-serif;font-weight:700}
.table-top>div:first-child{position:relative;z-index:1}.table-tools{position:relative;z-index:1}.table-top h2{color:#0a1120}.status.waiting{background:linear-gradient(120deg,#fff2d8,#f8dfb9)}
}
/* Round 3: reflection behind live content, not a veil over text. */
.glass-card>*{position:relative;z-index:1}.glass-card:before{z-index:0}
@media(min-width:761px){.brand{margin-bottom:71px}.trend-plot:after{content:'';position:absolute;left:53px;top:26px;bottom:26px;width:1px;background:#7f8a9f88}.donut-layout{transform:translateX(-3px)}.donut-legend{transform:translateX(1px)}}
@media(max-width:760px){.sidebar{background-size:100% auto;background-position:left top}.sidebar-content{z-index:4}.kpi.flourish:after{width:43px;height:33px}.net:after{background-size:55px 24px}.glass-card{backdrop-filter:blur(18px) saturate(150%)}.donut-stage{min-height:180px}}
/* Corner fix 2026-11-03: raster crops read as torn paper; use clean vector gold sweeps instead. */
.kpi.flourish:after,.kpi.flourish:nth-child(2):after{width:58px;height:46px;background:radial-gradient(120% 120% at 100% 100%,#fff6dc 0,#f1d39a 30%,#d8ad62 46%,rgba(216,173,98,0) 47%) no-repeat;clip-path:none;border-radius:0 0 22px 0;filter:drop-shadow(-1px -1px 1.5px rgba(176,132,54,.25));opacity:.95}
.totals:after{background:linear-gradient(112deg,transparent 80%,rgba(255,248,226,.0) 84%,rgba(255,240,200,.38) 90%,rgba(240,206,140,.18) 95%,transparent 100%);inset:0}
.net:after{background:radial-gradient(90% 90% at 100% 100%,rgba(255,245,210,.55) 0,rgba(232,200,130,.25) 22%,transparent 40%) no-repeat}
@media(max-width:760px){.kpi.flourish:after{width:46px;height:36px;border-radius:0 0 20px 0}}