:root{--bg:#f3f6fb;--surface:#fff;--ink:#172641;--muted:#7b8798;--border:#e7edf4;--blue:#5975d5;--navy:#132341;--teal:#36b4a3;--orange:#efa75b;--shadow:0 12px 34px rgba(26,46,79,.035)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:"Noto Sans Thai","Sarabun","Leelawadee UI",Tahoma,Arial,sans-serif;background:var(--bg);font-size:14px;line-height:1.65;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #8dadec;outline-offset:3px}::selection{background:#b7e1ed;color:#152c44}.container{width:min(1200px,calc(100% - 76px));margin:auto}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;left:-9999px;top:10px;z-index:99;background:#fff;padding:10px 15px}.skip-link:focus{left:10px}.ambient{position:absolute;border-radius:50%;pointer-events:none;filter:blur(54px);z-index:-1;opacity:.55}.ambient-one{top:440px;right:3%;width:170px;height:170px;background:#dae9ff}.ambient-two{top:1300px;left:2%;width:170px;height:170px;background:#e0f7ee}
.site-header{height:97px;display:flex;align-items:center;justify-content:space-between;gap:25px}.identity{display:flex;align-items:center;gap:12px}.brand-symbol{height:42px;width:42px;display:grid;place-items:center;background:#132341;border-radius:13px;transform:rotate(-8deg)}.brand-symbol:before{content:"";width:19px;height:19px;border:2px solid #f1ca83;border-radius:6px;position:absolute;transform:rotate(32deg)}.brand-symbol span{width:8px;height:8px;border-radius:50%;background:#f5c77b;position:relative;z-index:1}.identity-text{display:flex;flex-direction:column;line-height:1.18;gap:4px}.identity-text strong{font-size:19px;font-weight:800;letter-spacing:-.3px}.identity-text small{font-size:9px;color:#8c9cae;font-weight:800;letter-spacing:2.2px}.top-nav{display:flex;gap:36px;margin-left:60px;color:#708097;font-size:13px;font-weight:650}.top-nav a:hover{color:#182b4c}.header-status{display:flex;align-items:center;gap:9px;background:#e9f4f0;color:#368778;padding:9px 14px;border:1px solid #d6ebe3;border-radius:40px;font-size:11px;font-weight:700;white-space:nowrap}.status-dot{width:7px;height:7px;background:#40b99f;border-radius:50%;box-shadow:0 0 0 4px #d7eee6}
.hero{position:relative;overflow:hidden;min-height:405px;border-radius:22px;background:radial-gradient(ellipse at 78% 10%,#213d68 0,transparent 50%),linear-gradient(119deg,#142340,#192e51 65%,#162944);box-shadow:0 22px 52px #1a2e4c1c;display:flex;justify-content:space-between;color:#fff}.hero-grid{position:absolute;inset:0;opacity:.09;background-image:linear-gradient(90deg,#fff 1px,transparent 1px),linear-gradient(#fff 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to right,transparent 35%,#000 95%)}.hero-content{position:relative;z-index:2;padding:44px 57px 42px;max-width:760px}.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:3.5px;color:#95d0c5}.eyebrow-line{height:1px;width:25px;background:#7cbaa9}.hero h1{font-size:clamp(26px,3vw,38px);line-height:1.26;letter-spacing:-1px;margin:17px 0 10px;font-weight:730}.hero h1 span{color:#f6d59b}.hero-desc{color:#b0bfd5;max-width:560px;font-size:12px;margin:0 0 22px}.total-wrap{padding-top:14px;border-top:1px solid #ffffff24;max-width:590px}.total-label{font-size:12px;color:#a9b9cf}.total-display{display:flex;align-items:baseline;gap:15px;line-height:1.23;margin:6px 0 3px}.total-display #heroTotal{font-size:clamp(52px,6.2vw,79px);letter-spacing:-4px;font-family:Arial,"Noto Sans Thai",sans-serif;font-weight:750}.total-unit{font-size:19px;color:#f5d79e;font-weight:750;white-space:nowrap}.total-exact{font-size:13px;color:#c2d2e5;letter-spacing:.2px}.sparkle{color:#f4c66f;margin-right:7px;font-size:12px}.hero-actions{display:flex;gap:12px;margin-top:27px;flex-wrap:wrap}.btn{border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:15px;font-weight:740;font-size:12px;padding:10px 16px;min-height:42px;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn-white{background:#fff;color:#233a57}.btn-outline-light{border:1px solid #71809c;color:#e9f4ff}.btn-outline-light:hover{background:#ffffff16}.hero-orbit{position:absolute;right:110px;top:52px;height:265px;width:265px;border:1px solid #ffffff12;border-radius:50%;display:grid;place-items:center}.orbit-center{height:142px;width:142px;border-radius:50%;border:1px solid #d5b98177;display:grid;place-items:center;background:radial-gradient(circle at 40% 40%,#335271,#1b3453);box-shadow:0 0 70px #b5a27512;z-index:1;font-size:79px;font-weight:300;color:#f3cb87;font-family:Arial,sans-serif}.orbit-ring{position:absolute;height:230px;width:230px;border:1px dashed #ffffff3a;border-radius:50%;transform:rotate(-17deg)}.orbit-ring:after{content:"";position:absolute;top:32px;right:28px;width:8px;height:8px;background:#f1c786;border-radius:50%;box-shadow:0 0 0 7px #eec88218}.orbit-ring.outer{height:316px;width:316px;opacity:.4}.hero-side{position:absolute;right:50px;bottom:38px;z-index:2;display:flex;align-items:center;gap:20px}.side-figure{display:flex;align-items:baseline;gap:4px;flex-direction:column}.side-figure-small{font-size:10px;color:#93afc6}.side-figure strong{font-family:Arial,sans-serif;font-size:45px;line-height:1;color:#e6cca1}.side-figure>span:last-child{color:#bdd1e4;font-size:11px}.hero-side-divider{height:52px;width:1px;background:#ffffff42}.side-note{color:#8fa7bd;font:italic 12px/1.55 Georgia,serif;letter-spacing:1px}
.overview-section,.insights-section,.accounts-section{scroll-margin-top:18px}.overview-section{margin-top:61px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 24px}.section-heading h2{font-size:25px;letter-spacing:-.6px;line-height:1.4;margin:5px 0 3px}.section-heading p{font-size:12px;color:var(--muted);margin:0}.section-kicker{font:700 10px/1 Arial,sans-serif;letter-spacing:2px;color:var(--blue)}.section-deco{display:flex;align-items:end;gap:6px;padding-bottom:6px}.section-deco span{height:13px;width:5px;background:#d2ddea;border-radius:4px}.section-deco span:nth-child(2){height:21px;background:#91afdb}.section-deco span:nth-child(3){height:30px;background:#5776d8}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.metric-card{background:#fff;box-shadow:var(--shadow);border:1px solid var(--border);border-radius:14px;min-height:159px;padding:20px 22px}.metric-icon{width:33px;height:33px;border-radius:9px;display:grid;place-items:center;font-size:19px;font-weight:700;margin-bottom:12px}.metric-icon.indigo{background:#eaf0fe;color:#5276d1}.metric-icon.mint{background:#e8f7f2;color:#49ac94}.metric-icon.amber{background:#fff3e3;color:#e9a95b}.metric-icon.rose{background:#faedf0;color:#dc8098}.metric-title{display:block;font-size:12px;color:#728097}.metric-number{display:flex;align-items:baseline;gap:9px;margin-top:4px}.metric-number strong{font:750 33px/1.2 Arial,sans-serif;letter-spacing:-1px;color:#1d304b}.metric-number span{font-size:12px;color:#8494a5}.metric-sub{font-size:10px;color:#a0abbb;margin-top:7px}.category-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:15px;margin-top:17px}.category-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:14px;min-height:151px;text-align:left;padding:21px 23px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,background .2s;width:100%}.category-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px #18365713}.category-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}.category-top{display:flex;align-items:center;justify-content:space-between}.category-name{font-size:12px;font-weight:700;color:#40526e}.category-arrow{font-family:Arial,sans-serif;font-size:20px;color:var(--accent)}.category-amount{font:750 28px/1.3 Arial,sans-serif;color:#203250;letter-spacing:-1px;display:block;margin:13px 0 3px}.category-amount small{font:600 12px "Noto Sans Thai",Tahoma,sans-serif;letter-spacing:0;color:#7890a2}.category-bottom{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:13px;font-size:10px;color:#8796a6}.mini-track{height:5px;border-radius:4px;background:#ebf0f5;flex:1;max-width:130px;overflow:hidden}.mini-track i{display:block;height:100%;background:var(--accent);border-radius:4px}.category-share{font:700 11px Arial,sans-serif;color:#607489}
.insights-section{margin-top:67px}.insights-tag{border:1px solid #dbe4f1;padding:7px 12px;border-radius:30px;font:700 10px Arial,sans-serif;letter-spacing:1.6px;color:#8e9aad;white-space:nowrap}.insight-grid{display:grid;grid-template-columns:.98fr 1.02fr;gap:18px}.panel{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:25px 28px}.panel-header{display:flex;justify-content:space-between;gap:13px;align-items:start}.panel-overline{font:700 10px Arial,sans-serif;letter-spacing:2px;color:#95a4b7}.panel-header h3{font-size:17px;letter-spacing:-.25px;font-weight:750;margin:4px 0 0}.circle-icon{font-size:20px;color:#b3bfd0}.donut-layout{display:flex;align-items:center;justify-content:space-around;gap:21px;margin:20px auto 17px;min-height:260px}.donut{width:240px;height:240px;flex:0 0 240px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) 0 56%,var(--orange) 56% 82%,var(--teal) 82% 100%);transform:rotate(-90deg);position:relative;box-shadow:inset 0 0 0 1px #ffffff66}.donut:after{content:"";position:absolute;inset:50px;border-radius:50%;background:#fff}.donut-hole{position:relative;z-index:1;transform:rotate(90deg);display:flex;flex-direction:column;align-items:center;line-height:1.4}.donut-hole span{font-size:12px;color:#94a0ae}.donut-hole strong{font:750 29px Arial,sans-serif;letter-spacing:-1px;color:#1d3150;margin:7px 0 2px}.donut-hole small{font-size:11px;color:#8b9cae}.legend{flex:1;display:flex;flex-direction:column;gap:14px}.legend-item{display:block;background:transparent;border:0;text-align:left;padding:1px 0;width:100%;border-radius:5px}.legend-row{display:flex;gap:10px;align-items:center}.legend-dot{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--accent)}.legend-label{font-size:11px;color:#53657b;font-weight:680}.legend-amount{padding-left:21px;display:flex;align-items:baseline;gap:7px;margin-top:2px}.legend-amount strong{font-size:15px;font-weight:770;font-family:Arial,sans-serif;color:#172a46}.legend-percent{font:700 10px Arial,sans-serif;color:#98a7b7}.legend-item:hover .legend-label{text-decoration:underline}.panel-note{margin:18px 0 0;padding-top:13px;border-top:1px solid #eef1f6;font-size:10px;color:#9ba9ba}.small-pill{font-size:9px;color:#7893ad;background:#eff5fb;padding:5px 9px;border-radius:20px;white-space:nowrap}.subgroup-list{display:flex;flex-direction:column;gap:16px;margin-top:24px}.subgroup-row{display:grid;grid-template-columns:1fr auto;gap:7px 12px}.subgroup-name{max-width:330px;font-size:11px;color:#53637c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subgroup-value{font:700 11px Arial,sans-serif;color:#263b57}.subgroup-track{grid-column:1/-1;border-radius:5px;height:7px;background:#f1f4f8;overflow:hidden}.subgroup-fill{background:linear-gradient(90deg,#6289e1,#afc2f0);height:100%;display:block;border-radius:5px;min-width:2px}.top-panel{margin-top:18px}.top-header{align-items:center}.panel-intro{font-size:11px;color:#9ba7b7;margin:4px 0 0}.top-count{font:800 11px Arial,sans-serif;letter-spacing:1px;color:#7996c6;border:1px solid #d5e3f5;border-radius:40px;padding:7px 10px}.top-account-list{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:17px 35px}.top-account-row{display:flex;align-items:start;gap:12px}.top-rank{flex:0 0 27px;width:27px;height:27px;border:1px solid #dce5f0;border-radius:8px;display:grid;place-items:center;color:#7186a3;font:750 11px Arial,sans-serif}.top-info{flex:1;min-width:0}.top-title-row{display:flex;align-items:start;justify-content:space-between;gap:20px}.top-name{font-size:11px;color:#4f6178;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.65}.top-value{font:750 12px Arial,sans-serif;color:#223a5c;white-space:nowrap;margin-top:2px}.top-track{height:5px;border-radius:7px;background:#eef2f7;overflow:hidden;margin-top:9px}.top-track i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#5681d6,#49b4ac)}
.accounts-section{margin-top:70px}.export-btn{display:inline-flex;align-items:center;gap:10px;background:#192e4d;color:#fff;border:1px solid #192e4d;padding:11px 17px;border-radius:10px;font-size:12px;font-weight:720;transition:transform .2s}.export-btn:hover{transform:translateY(-2px);background:#29466b}.export-btn span{font-family:Arial,sans-serif;font-size:17px}.table-shell{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}.tools-bar{padding:22px 25px;display:flex;flex-direction:column;gap:18px;border-bottom:1px solid #edf1f7}.filter-pills{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.pill{border-radius:40px;padding:7px 14px;font-size:11px;border:1px solid #e2eaf2;color:#77869a;background:#f9fbfd;transition:background .2s,color .2s}.pill.active{background:#1d3658;border-color:#1d3658;color:#fff}.pill:hover:not(.active){background:#edf3fa}.search-tools{display:flex;align-items:center;gap:10px;justify-content:space-between}.search-input{display:flex;align-items:center;gap:9px;border:1px solid #e0e7ef;background:#fafbfd;border-radius:9px;padding:0 12px;color:#a5b0c1;flex:1;max-width:430px}.search-input:focus-within{border-color:#95b1da}.search-input input{background:transparent;border:0;outline:0;width:100%;padding:10px 0;color:#293c5a;font-size:12px;min-width:0}.search-input input::placeholder{color:#9aaabe}.sort-wrap{position:relative}.sort-wrap select{appearance:none;background:#fafbfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23808fa5' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid #e0e7ef;border-radius:9px;color:#60718b;font-size:11px;padding:11px 35px 11px 13px;min-width:195px}.table-info{display:flex;justify-content:space-between;gap:12px;padding:13px 26px;background:#fcfdff;color:#8594a8;font-size:11px}.table-hint{display:flex;align-items:center;gap:7px}.legend-small{height:5px;width:5px;background:#8fb9ac;border-radius:50%}.table-scroller{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse}thead th{background:#f6f9fd;color:#7285a0;text-align:left;padding:13px 26px;font-size:11px;font-weight:720;border-top:1px solid #edf1f7;border-bottom:1px solid #edf1f7;white-space:nowrap}.amount-head{text-align:right}tbody tr{border-bottom:1px solid #eff2f7;transition:background .15s}tbody tr:hover{background:#f8fbff}tbody td{padding:15px 26px;vertical-align:middle}td.account-cell{width:75%;min-width:300px}.account-main{font-size:12px;color:#354966;line-height:1.65}.account-sub{font-size:10px;color:#98a7b9;margin-top:3px;display:flex;align-items:center;gap:7px}.sub-indicator{width:6px;height:6px;background:var(--accent);border-radius:50%}.amount-cell{text-align:right;font:750 13px Arial,sans-serif;white-space:nowrap;color:#213855}.amount-missing{font:600 11px "Noto Sans Thai",Tahoma,sans-serif;color:#a8b3c1}.empty-state{text-align:center;padding:50px 24px;color:#8a99ae}.table-bottom{display:flex;align-items:center;justify-content:space-between;padding:15px 25px;color:#8c9bb0;font-size:11px}.pagination{display:flex;gap:7px}.pagination button{border:1px solid #e0e8f1;background:white;padding:7px 12px;border-radius:8px;color:#526783;font-size:11px}.pagination button:disabled{opacity:.35;cursor:not-allowed}.pagination button:not(:disabled):hover{background:#eef4fa}.footer{border-top:1px solid #dbe3ef;margin:56px 0 30px;padding-top:25px;display:flex;flex-direction:column;gap:7px;text-align:center;align-items:center}.footer-mark{font-size:12px;font-weight:800;color:#4a617d;letter-spacing:1px}.footer-mark span{color:#b5c2d1;margin:0 8px}.footer p{font-size:10px;color:#99a7b8;max-width:800px;margin:0}.footer-end{font:700 9px Arial,sans-serif;letter-spacing:1.9px;color:#b2bdc9}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,12px);background:#1a3152;color:white;border-radius:10px;box-shadow:0 14px 30px #101b2f44;padding:10px 16px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:20;font-size:12px;max-width:calc(100% - 40px)}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1250px){.hero-orbit{right:140px}}
@media(max-width:1100px){.donut-layout{gap:12px}.donut{width:194px;height:194px;flex-basis:194px}.donut:after{inset:40px}.donut-hole strong{font-size:23px}.hero-orbit{right:50px;top:68px}.hero-side{display:none}.top-nav{margin-left:0}}@media(max-width:850px){.container{width:min(100% - 42px,1200px)}.top-nav{gap:18px}.header-status{display:none}.hero{min-height:390px}.hero-content{padding:40px}.hero-orbit{right:-15px;opacity:.35}.metrics-grid{grid-template-columns:repeat(2,1fr)}.category-grid{grid-template-columns:repeat(3,1fr)}.category-card{padding:17px 16px}.category-amount{font-size:23px}.insight-grid{grid-template-columns:1fr}.donut-layout{justify-content:center;gap:60px}.donut{width:235px;height:235px;flex-basis:235px}.donut:after{inset:46px}.top-account-list{grid-template-columns:1fr 1fr;gap:14px}.top-title-row{flex-direction:column;gap:1px}.search-tools{align-items:stretch}}
@media(max-width:600px){.container{width:calc(100% - 28px)}.site-header{height:76px}.identity-text strong{font-size:17px}.top-nav{gap:11px;font-size:10px}.top-nav a:nth-child(2){display:none}.hero{border-radius:16px;min-height:auto}.hero-content{padding:35px 23px 32px}.hero-orbit{right:-142px;top:55px;opacity:.17}.hero h1{font-size:29px}.hero-desc{font-size:11px;max-width:330px}.total-display{flex-wrap:wrap;column-gap:8px}.total-display #heroTotal{font-size:57px;letter-spacing:-2px}.total-unit{font-size:16px}.hero-actions{gap:9px}.btn{padding:10px 12px;font-size:11px}.overview-section,.insights-section,.accounts-section{margin-top:44px}.section-heading{align-items:start}.section-heading h2{font-size:22px}.section-deco,.insights-tag{display:none}.metrics-grid{gap:10px}.metric-card{min-height:147px;padding:17px 15px}.metric-number strong{font-size:29px}.metric-title{font-size:11px}.metric-sub{font-size:9px}.category-grid{grid-template-columns:1fr;gap:9px;margin-top:10px}.category-card{min-height:106px;padding:16px 19px}.category-amount{margin:6px 0 0}.category-bottom{margin-top:5px}.donut-layout{flex-direction:column;gap:18px;margin-bottom:0}.donut{width:225px;height:225px;flex-basis:225px}.donut:after{inset:44px}.legend{width:100%;display:grid;grid-template-columns:1fr;gap:11px}.legend-item{display:flex;align-items:center;justify-content:space-between}.legend-amount{padding-left:0;margin-top:0}.legend-label{font-size:11px}.legend-amount strong{font-size:13px}.panel{padding:21px 19px}.panel-header h3{font-size:15px}.top-account-list{grid-template-columns:1fr;gap:15px}.top-title-row{flex-direction:row;gap:15px}.top-name{font-size:10px}.top-value{font-size:11px}.accounts-section .section-heading{gap:5px}.export-btn{font-size:10px;padding:8px 10px;white-space:nowrap;margin-top:9px}.tools-bar{padding:15px;gap:14px}.filter-pills{gap:6px}.pill{padding:6px 10px;font-size:10px}.search-tools{flex-direction:column}.search-input{max-width:none}.sort-wrap select{width:100%}.table-info{padding:12px 16px}.table-hint{display:none}thead th{padding:12px 16px}tbody td{padding:13px 16px}.table-bottom{padding:13px 16px}.footer{margin-top:45px}.footer p{line-height:1.8}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
@media print{body{background:#fff}.site-header .top-nav,.hero-actions,.export-btn,.tools-bar,.table-bottom,.toast,.ambient{display:none!important}.hero{background:#192d49!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}.container{width:100%}.hero-content{padding:32px}.metric-card,.category-card,.panel{break-inside:avoid}.insights-section,.accounts-section{margin-top:25px}.table-scroller{overflow:visible}tbody tr{break-inside:avoid}}