:root{--ink:#172e31;--ink2:#2d4447;--muted:#839092;--secondary:#667477;--green:#1c7066;--light-green:#ebf5f0;--gold:#cd9871;--gold-2:#a8734f;--background:#f6f7f6;--panel:#fff;--border:#e8ecea;--shadow:0 4px 18px rgba(23,46,49,.025);--radius:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--background);color:var(--ink);font:14px/1.55 'DM Sans','IBM Plex Sans Thai','Noto Sans Thai',Tahoma,Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{text-decoration:none;color:inherit}svg{display:block}#app{min-height:100vh}.boot{display:flex;justify-content:center;align-items:center;min-height:100vh;gap:20px;color:var(--secondary)}.boot-mark{font-size:50px;font-weight:800}.boot-mark span,.brand-word span{color:var(--gold)}
.shell{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:254px;background:#172d2f;color:#fff;display:flex;flex-direction:column;z-index:20;box-shadow:4px 0 25px rgba(0,0,0,.025)}.logo-area{padding:31px 27px 28px;border-bottom:1px solid rgba(255,255,255,.08)}.brand-line{display:flex;align-items:center;gap:13px}.mark{width:35px;height:35px;border:1.6px solid var(--gold);border-radius:9px;display:flex;align-items:center;justify-content:center;color:#e6c29d;font-size:24px;font-weight:800;line-height:1}.brand-word{font:700 19px/1 'DM Sans',sans-serif;letter-spacing:1.9px}.brand-sub{margin:8px 0 0 48px;color:#96aaa9;font-size:10px;letter-spacing:2.4px;font-family:'DM Sans',sans-serif}.nav-label{margin:31px 26px 13px;color:#78918d;letter-spacing:1.6px;font:600 10px 'DM Sans',sans-serif}.nav-items{padding:0 11px;display:flex;flex-direction:column;gap:5px}.nav-btn{width:100%;display:flex;align-items:center;gap:13px;padding:13px 16px;color:#9fbbba;border:0;background:transparent;border-radius:9px;text-align:left;font-weight:500}.nav-btn svg{width:19px;height:19px;stroke-width:1.9}.nav-btn:hover{background:rgba(255,255,255,.05);color:#fff}.nav-btn.active{background:#2c4c4c;color:#fff}.nav-btn.active:before{content:"";background:#d8a177;width:3px;height:19px;border-radius:4px;margin-left:-16px;margin-right:0}.nav-btn.active svg{color:#f1bf98}.side-bottom{margin-top:auto;padding:20px 15px 24px}.sidebar-note{padding:16px;background:#254044;border:1px solid rgba(255,255,255,.05);border-radius:11px;display:flex;gap:12px;align-items:flex-start;color:#a7c2bf;font-size:12px}.sidebar-note svg{width:20px;flex-shrink:0;color:#c9aa87}.sidebar-note strong{color:#ecf3ef;font-size:13px;display:block;margin-bottom:2px}.side-foot{display:flex;align-items:center;gap:11px;margin:23px 7px 0}.avatar{width:34px;height:34px;border-radius:50%;background:#496761;display:grid;place-items:center;color:#f1ead8;font-weight:700}.foot-name{font-size:12px;color:#e8eeeb;line-height:1.45}.foot-name small{display:block;font-size:11px;color:#8da7a4}.mobile-header{display:none}.content{margin-left:254px;flex:1;min-width:0}.topbar{height:82px;background:var(--panel);display:flex;align-items:center;justify-content:space-between;padding:0 43px;border-bottom:1px solid var(--border)}.bread{color:#9aa5a5;font-size:12px}.bread strong{color:var(--ink2);font-weight:600}.top-actions{display:flex;align-items:center;gap:14px}.top-date{color:#899697;font-size:12px}.top-icon{border:1px solid var(--border);width:34px;height:34px;border-radius:9px;background:white;display:grid;place-items:center;color:var(--ink2)}.top-icon svg{width:17px}.mode-badge{font:700 10px 'DM Sans',sans-serif;letter-spacing:.6px;color:#916c4c;background:#f8ecde;padding:6px 9px;border-radius:50px}.mode-badge.live{background:#e4f3ee;color:#18725b}.page{max-width:1500px;margin:auto;padding:34px 42px 60px}.heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:28px}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:10px;font-weight:700;color:#b18663;margin:0 0 7px;font-family:'DM Sans',sans-serif}.title{font-size:29px;letter-spacing:-.7px;line-height:1.25;margin:0;font-weight:700;color:#1e3638}.subtitle{color:#859191;margin:9px 0 0;font-size:13px}.heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.btn{border:1px solid #dce3e0;background:#fff;border-radius:9px;color:#344c4d;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;font-weight:600;min-height:41px}.btn svg{width:16px;height:16px}.btn:hover{border-color:#91b2a7;background:#fcfffe}.btn-primary{background:#1d655c;color:#fff;border-color:#1d655c}.btn-primary:hover{background:#24534e;color:#fff;border-color:#24534e}.btn-soft{background:#f1f5f3}.btn-sm{font-size:12px;padding:7px 10px;min-height:34px}.btn-danger{color:#ad5349;border-color:#edd9d2}.btn-danger:hover{background:#fff5f3;border-color:#ad5349}.demo-banner{background:#fff9ed;border:1px solid #efdfc2;color:#927044;border-radius:11px;padding:10px 15px;display:flex;gap:10px;align-items:center;font-size:12px;margin:-5px 0 23px}.demo-banner svg{width:17px;flex-shrink:0}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:21px}.stat{background:var(--panel);border:1px solid var(--border);border-radius:13px;padding:20px 20px 21px;box-shadow:var(--shadow);min-width:0}.stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;gap:6px;color:#82908e;font-size:12px}.stat-icon{width:33px;height:33px;display:grid;place-items:center;border-radius:10px;background:#eff4f1;color:#39776a;flex-shrink:0}.stat-icon svg{height:17px;width:17px}.stat:nth-child(2) .stat-icon{background:#e7f5ed;color:#278166}.stat:nth-child(3) .stat-icon{background:#fff3e7;color:#b27d4c}.stat:nth-child(4) .stat-icon{background:#f0f1f7;color:#667899}.stat-number{font-size:27px;font-weight:700;letter-spacing:-1.1px;white-space:nowrap;line-height:1.2}.stat-extra{margin-top:12px;color:#a1abaa;font-size:11px}.kpi-symbol{font-size:15px;font-weight:500;margin-right:3px;color:#657d7b}.section-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:19px;margin-bottom:23px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:13px;padding:21px 24px;box-shadow:var(--shadow);min-width:0}.panel-header{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:17px}.panel-title{font-size:15px;font-weight:700;color:#284245;margin:0}.panel-subtitle{font-size:11px;color:#9caaa8;margin-top:3px}.year-select{background:#fafcfb;border:1px solid #e9eeeb;padding:8px 11px;border-radius:8px;color:#526766;font-size:12px}.chart-wrap{width:100%;overflow:hidden}.bars{display:flex;align-items:end;justify-content:space-around;gap:6px;height:214px;position:relative;border-bottom:1px solid #e9edeb;padding:10px 8px 0;background:linear-gradient(to bottom,transparent 24%,#f1f3f2 25%,transparent 25.5%,transparent 49%,#f1f3f2 50%,transparent 50.5%,transparent 74%,#f1f3f2 75%,transparent 75.5%)}.bar-col{height:100%;display:flex;align-items:center;justify-content:end;flex-direction:column;gap:9px;flex:1;min-width:0;position:relative}.bar-outer{height:100%;display:flex;align-items:end;width:min(27px,85%)}.bar-inner{width:100%;background:#bbd4c9;border-radius:5px 5px 0 0;min-height:3px;transition:height .25s}.bar-col.current .bar-inner{background:#2d796c}.bar-col:hover .bar-inner{background:#cda477}.bar-month{font-size:10px;color:#8d9c98;position:absolute;top:calc(100% + 9px)}.chart-foot{margin-top:34px;display:flex;justify-content:space-between;color:#97a3a1;font-size:11px}.legend{display:flex;align-items:center;gap:7px}.legend-dot{width:8px;height:8px;background:#2d796c;border-radius:2px}.year-total{font-weight:700;color:#35534b;font-size:12px}.activity-list{display:flex;flex-direction:column;gap:0}.activity{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid #f0f2f1}.activity:last-child{border-bottom:0}.activity-icon{width:31px;height:31px;border-radius:50%;background:#e9f5ee;display:grid;place-items:center;color:#39836d;flex-shrink:0}.activity-icon svg{height:15px;width:15px}.activity-info{min-width:0;flex:1}.activity-info strong{font-size:12px;display:block;color:#344b4b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-info span{font-size:11px;color:#9aa7a4}.activity-money{font-weight:700;font-size:12px;white-space:nowrap;color:#24725e}.table-headrow{display:flex;justify-content:space-between;align-items:center;margin:0 0 15px}.data-wrap{overflow-x:auto;border:1px solid #e9edeb;border-radius:10px}table{width:100%;border-collapse:collapse;min-width:660px}th{background:#f9fbfa;color:#8d9998;font-size:11px;font-weight:600;text-align:left;white-space:nowrap;padding:13px 15px;border-bottom:1px solid #e9eeeb}td{padding:15px;border-bottom:1px solid #eef1ef;font-size:12px;color:#5b6c6b;vertical-align:middle}tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfdfa}.name-cell strong{display:block;font-size:12px;color:#273f40}.name-cell span{display:block;margin-top:4px;font-size:11px;color:#a6afae}.amount{font-weight:650;color:#2a4341;white-space:nowrap;font-variant-numeric:tabular-nums}.right{text-align:right}.pill{font-size:10px;line-height:1.3;padding:5px 9px;border-radius:20px;display:inline-block;white-space:nowrap;font-weight:600}.pill.active,.pill.paid{background:#e6f4ee;color:#298267}.pill.invoiced{background:#fff3e5;color:#ad7b49}.pill.partial{background:#eaf0fc;color:#637da5}.pill.unbilled{background:#f0f3f2;color:#7c8d8b}.pill.completed{background:#e4eee9;color:#526e60}.pill.on_hold{background:#fae9e6;color:#a66a61}.progress-label{display:flex;justify-content:space-between;gap:10px;color:#718583;font-size:10px;margin-bottom:5px;white-space:nowrap}.track{width:100%;background:#e8eeeb;border-radius:10px;height:6px;overflow:hidden}.track>div{height:100%;border-radius:10px;background:#3a8977}.action-link{background:transparent;border:0;color:#247365;font-size:11px;font-weight:700;padding:4px 0}.action-link:hover{text-decoration:underline}.search-row{display:flex;gap:10px;margin-bottom:19px;align-items:center;justify-content:space-between}.searchbox{min-width:240px;width:330px;position:relative}.searchbox svg{position:absolute;width:16px;height:16px;left:13px;top:13px;color:#879995}.searchbox input{padding-left:39px;width:100%}.field,input[type=text],input[type=date],input[type=email],input[type=password],input[type=number],select,textarea{border:1px solid #dfe7e3;min-height:42px;background:#fff;border-radius:9px;padding:10px 11px;width:100%;outline:0;color:#274344}.field:focus,input:focus,select:focus,textarea:focus{border-color:#2c8876;box-shadow:0 0 0 3px rgba(43,132,113,.10)}textarea{resize:vertical;min-height:86px}.select-filter{width:auto;min-width:145px}.spaced{margin-top:20px}.detail-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}.crumb-link{color:#658f85;cursor:pointer;font-size:12px}.detail-title{margin:11px 0 5px}.detail-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:#8c9997}.detail-meta span{display:flex;align-items:center;gap:5px}.detail-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.detail-kpi{border:1px solid #e7ece9;background:#fafbfa;border-radius:10px;padding:16px}.detail-kpi span{display:block;color:#94a19f;font-size:11px;margin-bottom:8px}.detail-kpi strong{font-size:20px;letter-spacing:-.5px}.detail-note{padding:13px 16px;background:#f6f8f7;color:#6b8380;border:1px solid #e9efed;font-size:12px;border-radius:9px;margin-bottom:18px}.install-list{display:grid;grid-template-columns:1fr;gap:10px}.install-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(100px,.7fr) minmax(150px,.7fr) minmax(140px,.7fr);align-items:center;gap:14px;padding:15px 17px;border:1px solid #e7ecea;border-radius:10px;background:#fff}.install-title{font-size:13px;font-weight:700;color:#274342}.install-title small{display:block;margin-top:4px;color:#a2adaa;font-weight:400;font-size:11px}.install-amount{font-size:15px;font-weight:700;color:#263e3d}.install-amount small{display:block;font-size:10px;color:#9da9a6;font-weight:400;margin-top:2px}.install-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.empty{padding:52px 20px;text-align:center;color:#94a09f}.empty svg{width:36px;height:36px;margin:0 auto 13px;color:#b2bfbb}.empty h3{margin:0 0 7px;font-size:15px;color:#445d5b}.empty p{margin:0 0 15px;font-size:12px}.metric-line{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0ee;padding:13px 0;font-size:12px}.metric-line:last-child{border:0}.metric-line strong{font-size:13px}.report-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:20px}.report-amount{font-size:37px;font-weight:750;letter-spacing:-1.4px;margin-top:9px}.mini-list{display:flex;flex-direction:column;gap:13px}.mini-line{display:flex;justify-content:space-between;color:#71807e;font-size:12px;gap:10px}.mini-line strong{color:#2b4542}.helper{font-size:11px;color:#92a19d;line-height:1.6}.toast-holder{position:fixed;right:24px;bottom:23px;z-index:80}.toast{max-width:360px;background:#213e3a;color:#fff;box-shadow:0 14px 38px #112d2d2b;border-radius:12px;padding:13px 18px;font-size:12px}.toast.error{background:#9e4c40}.modal-layer{position:fixed;inset:0;background:rgba(15,33,34,.52);z-index:60;display:grid;place-items:center;padding:20px;overflow-y:auto;backdrop-filter:blur(3px)}.modal{background:#fff;border-radius:17px;width:min(100%,540px);padding:26px;box-shadow:0 22px 75px #0b1b1d38;max-height:min(90vh,850px);overflow:auto}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:21px}.modal-header h2{font-size:20px;margin:4px 0 5px}.modal-header p{margin:0;color:#92a09c;font-size:12px}.x-btn{border:1px solid var(--border);background:#fff;border-radius:9px;width:34px;height:34px;display:grid;place-items:center}.x-btn svg{width:16px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-group{min-width:0}.form-group.full{grid-column:1/-1}.form-group label{display:block;color:#657a76;font-weight:600;font-size:12px;margin-bottom:6px}.required{color:#c57b62}.form-hint{font-size:11px;color:#9ba9a5;margin-top:5px}.modal-footer{border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:9px;padding-top:20px;margin-top:24px}.error-inline{background:#fff1ed;border:1px solid #efc8c0;border-radius:9px;color:#a44f43;padding:10px 12px;font-size:12px;margin-top:13px}.login-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-hero{background:#193336;color:#fff;padding:9vw 7vw;display:flex;flex-direction:column;justify-content:space-between}.login-brand{font:800 23px 'DM Sans',sans-serif;letter-spacing:3px}.login-brand span{color:#d2a480}.login-art{font-size:clamp(32px,4vw,60px);font-weight:700;line-height:1.25;max-width:500px;letter-spacing:-1px}.login-art span{color:#ddb58e}.login-small{font-size:12px;color:#87a8a1;letter-spacing:1px}.login-right{display:flex;align-items:center;justify-content:center;padding:32px}.login-panel{max-width:390px;width:100%}.login-panel h1{font-size:28px;margin:0 0 9px}.login-panel>p{color:#93a09d;font-size:13px;margin-bottom:30px}.login-panel .form-group{margin-bottom:17px}.login-panel button{width:100%;margin-top:5px}.footer-info{font-size:11px;color:#9baba5;margin-top:26px}.settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #eff2f0;gap:12px}.settings-row:last-child{border:0}.settings-row strong{font-size:12px}.settings-row p{margin:3px 0 0;color:#9ca9a5;font-size:11px}.line-up{display:flex;align-items:center;gap:8px}.icon-inline{width:16px;height:16px}.table-stat{font-size:11px;color:#8b9b96;margin-bottom:10px}.print-only{display:none}
@media(max-width:1280px){.sidebar{width:224px}.content{margin-left:224px}.page{padding:30px 28px 45px}.topbar{padding:0 29px}.stat{padding:17px}.stat-number{font-size:23px}.section-grid{grid-template-columns:1.45fr 1fr}}
@media(max-width:1030px){.sidebar{width:208px}.content{margin-left:208px}.page{padding:27px 22px}.stats{grid-template-columns:repeat(2,1fr)}.section-grid,.report-grid{grid-template-columns:1fr}.stat-number{font-size:26px}.install-card{grid-template-columns:1.3fr 1fr 1fr}.install-actions{grid-column:1/-1;justify-content:start;border-top:1px solid #f0f2ef;padding-top:10px}}
@media(max-width:760px){.sidebar{display:none}.content{margin-left:0}.mobile-header{height:62px;background:#172d2f;display:flex;justify-content:space-between;align-items:center;padding:0 19px;color:#fff;position:sticky;top:0;z-index:25}.mobile-brand{font:800 17px 'DM Sans',sans-serif;letter-spacing:1.7px}.mobile-brand span{color:#d5a27c}.mobile-menu-button{border:1px solid #496764;border-radius:9px;background:none;color:white;padding:8px;display:grid;place-items:center}.mobile-menu-button svg{width:19px}.mobile-nav{position:sticky;top:62px;display:flex;background:#233d3e;overflow-x:auto;padding:7px 11px;z-index:24;gap:5px}.mobile-nav button{background:transparent;border:0;color:#a5c0bb;padding:8px 12px;white-space:nowrap;font-size:11px;border-radius:7px}.mobile-nav button.active{background:#41645f;color:#fff}.topbar{height:53px;padding:0 18px}.top-date{display:none}.page{padding:23px 15px 45px}.heading{align-items:flex-start;flex-direction:column;margin-bottom:22px}.heading-actions{width:100%}.title{font-size:25px}.stats{gap:10px}.stat{padding:14px 13px}.stat-top{font-size:10px;margin-bottom:13px}.stat-icon{width:28px;height:28px}.stat-number{font-size:21px;letter-spacing:-.6px}.stat-extra{font-size:10px}.panel{padding:17px 15px}.bar-outer{width:min(23px,80%)}.search-row{align-items:stretch;flex-direction:column}.searchbox{width:100%;min-width:0}.select-filter{width:100%}.detail-kpis{grid-template-columns:1fr 1fr}.detail-kpi:last-child{grid-column:1/-1}.detail-kpi strong{font-size:18px}.install-card{grid-template-columns:1fr 1fr;gap:12px}.install-actions{grid-column:1/-1}.form-grid{grid-template-columns:1fr}.modal{padding:21px}.login-shell{grid-template-columns:1fr}.login-hero{min-height:200px;padding:29px}.login-art{font-size:29px}.login-small{display:none}.login-right{padding:45px 25px}}
@media print{.sidebar,.topbar,.mobile-header,.mobile-nav,.heading-actions,.btn,.action-link,.demo-banner,.toast-holder{display:none!important}.content{margin:0}.page{padding:10px}.stats{grid-template-columns:repeat(4,1fr)}.panel,.stat{break-inside:avoid}.print-only{display:block}}
.mobile-nav[hidden]{display:none!important}.action-link{display:inline-flex;align-items:center;gap:2px}.detail-note{display:flex;align-items:center;gap:7px}.footer-info{display:flex;gap:7px;align-items:center}

/* Contract schedule editor · V1.2 */
.modal:has(.contract-plan){width:min(96vw,920px);max-height:94dvh;padding:28px 32px}
.modal:has(.contract-plan) .form-grid{gap:18px 20px}
.contract-plan{background:#f8fbf9;border:1px solid #e2eae6;border-radius:14px;padding:18px;margin-top:6px}
.plan-title-row{display:flex;justify-content:space-between;gap:15px;align-items:center}
.plan-title-row h3{font-size:17px;margin:0;color:#23443e}
.plan-title-row p{font-size:12px;color:#7d8e88;margin:4px 0 0}
.plan-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:17px 0 14px}
.plan-toolbar>span{font-size:12px;color:#678079;margin-right:8px}
.plan-preset{border:1px solid #ccdcd4;border-radius:30px;background:white;color:#295e55;padding:6px 14px;font-size:12px;font-weight:600}
.plan-preset:hover{border-color:#258472;background:#e8f4ec}
#plan-rows{display:flex;flex-direction:column;gap:10px}
.plan-row{background:white;border:1px solid #e1e9e4;border-radius:11px;padding:13px 14px 14px}
.plan-row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px}
.plan-row-head strong{font-size:13px;color:#26594e}
.plan-remove{border:0;color:#a4584c;background:transparent;font-size:11px;font-weight:600;padding:3px 7px}
.plan-remove:hover{background:#fff1ef;border-radius:5px}
.plan-row-fields{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(100px,.8fr) minmax(135px,1.1fr) minmax(140px,1.1fr);gap:10px}
.plan-row-fields label{display:block;font-size:11px;font-weight:600;color:#6d827b;margin-bottom:5px}
.plan-row-fields input{width:100%;min-width:0;border:1px solid #dfe6e2;border-radius:8px;padding:9px 10px;font-size:13px;min-height:42px;background:#fff}
.plan-row-fields input:focus{border-color:#24816f;outline:2px solid #d7eee5;outline-offset:0}
.plan-add{margin:14px 0;min-height:37px}
.plan-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid;border-radius:10px;padding:13px 14px;font-size:12px}
.plan-summary strong{display:block;font-size:15px}.plan-summary span{display:block;margin-top:3px}
.plan-good{background:#eaf5ee;border-color:#a9d5ba;color:#21644f}
.plan-attention{background:#fff7e9;border-color:#efcf98;color:#8a6332}
.plan-balance{text-align:right;font-weight:650}
.plan-tip{color:#82918b;font-size:11px;margin:9px 0 0}
.plan-existing-note{padding:12px;border-radius:8px;background:#f4f8f5;color:#60756c;font-size:12px}
.install-actions{display:flex;flex-wrap:wrap;justify-content:end;gap:6px}
@media(max-width:820px){.modal:has(.contract-plan){padding:19px;width:min(96vw,700px)}.plan-row-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-row-fields .plan-name{grid-column:1/-1}}
@media(max-width:480px){.modal:has(.contract-plan){max-height:96dvh;padding:16px}.contract-plan{padding:12px}.plan-row-fields{grid-template-columns:1fr 1fr;gap:8px}.plan-summary{flex-direction:column;align-items:flex-start}.plan-balance{text-align:left}}
/* V1.3 | User-selectable monochrome themes. Colors are applied consistently to all app surfaces. */
[hidden]{display:none!important}
:root,html[data-theme="white"]{
 --background:#f7f7f6;--panel:#fff;--border:#e1e3e1;--ink:#1a1b1c;--ink2:#333537;--secondary:#6d7071;--muted:#87898b;--green:#292b2c;--light-green:#f1f2f2;--gold:#777a7c;--gold-2:#53575a;--shadow:0 3px 16px rgba(0,0,0,.035);
 --theme-side:#fff;--theme-side-text:#474b4e;--theme-side-muted:#777c7f;--theme-side-active:#e9eaeb;--theme-side-card:#f2f3f3;--theme-soft:#f3f4f4;--theme-input:#fff;--theme-strong:#202223;--theme-subtle:#85898c;--theme-accent:#343638;--theme-accent-on:#fff;--theme-canvas:#f7f7f6;
}
html[data-theme="gray"]{
 --background:#d9dbdc;--panel:#eff0f0;--border:#c4c7c9;--ink:#242729;--ink2:#3e4144;--secondary:#60666b;--muted:#72787c;--green:#3d4348;--light-green:#dfe1e3;--gold:#747a7e;--gold-2:#50565a;--shadow:0 4px 15px rgba(0,0,0,.05);
 --theme-side:#474b4e;--theme-side-text:#e8eaeb;--theme-side-muted:#bac0c2;--theme-side-active:#666b6f;--theme-side-card:#555a5d;--theme-soft:#e4e6e7;--theme-input:#f7f8f8;--theme-strong:#292d30;--theme-subtle:#696e73;--theme-accent:#4d5357;--theme-accent-on:#fff;--theme-canvas:#d9dbdc;
}
html[data-theme="dark"]{
 --background:#101213;--panel:#1b1e20;--border:#353a3d;--ink:#f1f2f2;--ink2:#d3d6d7;--secondary:#a6acae;--muted:#a2aaac;--green:#d5d8da;--light-green:#303538;--gold:#b5b8ba;--gold-2:#9ba0a3;--shadow:0 6px 24px rgba(0,0,0,.20);
 --theme-side:#0a0c0d;--theme-side-text:#d7dadd;--theme-side-muted:#a4aaae;--theme-side-active:#30363a;--theme-side-card:#1d2123;--theme-soft:#282d30;--theme-input:#25292c;--theme-strong:#f4f5f5;--theme-subtle:#acb2b4;--theme-accent:#e3e5e6;--theme-accent-on:#16191b;--theme-canvas:#101213;
 color-scheme:dark;
}
html[data-theme="white"],html[data-theme="gray"]{color-scheme:light}
body{background:var(--background);color:var(--ink)}
/* Global monochrome UI (neutralize all original emerald/gold tinting) */
.sidebar{background:var(--theme-side);color:var(--theme-side-text);border-right:1px solid var(--border)}
.logo-area{border-bottom:1px solid var(--border)}
.mark{border-color:var(--theme-subtle);color:var(--theme-strong)}
.brand-word span,.boot-mark span,.login-brand span{color:var(--theme-subtle)}
.brand-sub,.nav-label,.nav-btn{color:var(--theme-side-muted)}
.nav-btn:hover{background:var(--theme-side-card);color:var(--theme-side-text)}
.nav-btn.active{background:var(--theme-side-active);color:var(--theme-side-text)}
.nav-btn.active:before{background:var(--theme-subtle)}
.nav-btn.active svg,.sidebar-note svg{color:var(--theme-side-text)}
.sidebar-note{background:var(--theme-side-card);color:var(--theme-side-muted);border-color:var(--border)}
.sidebar-note strong,.foot-name{color:var(--theme-side-text)}
.foot-name small{color:var(--theme-side-muted)}
.avatar{background:var(--theme-side-active);color:var(--theme-side-text)}
.topbar,.panel,.stat,.modal{background:var(--panel);border-color:var(--border);color:var(--ink)}
.topbar{color:var(--ink)}.bread,.top-date{color:var(--secondary)}.bread strong{color:var(--ink2)}
.title,.panel-title,.detail-title,.stat-number,.name-cell strong,.amount,.activity-info strong,.settings-row strong{color:var(--ink)}
.eyebrow,.subtitle,.stat-top,.stat-extra,.panel-subtitle,.helper,.activity-info span,.chart-foot,.year-total,.progress-label,.form-hint{color:var(--secondary)}
.btn,.top-icon,.x-btn,.year-select,.select-filter{background:var(--theme-input);color:var(--ink);border-color:var(--border)}
.btn:hover,.top-icon:hover,.x-btn:hover{background:var(--theme-soft);border-color:var(--theme-subtle)}
.btn-primary,.btn-primary:hover{background:var(--theme-accent);color:var(--theme-accent-on);border-color:var(--theme-accent)}
.btn-soft{background:var(--theme-soft)}
.stat-icon,.stat:nth-child(2) .stat-icon,.stat:nth-child(3) .stat-icon,.stat:nth-child(4) .stat-icon,.activity-icon{background:var(--theme-soft);color:var(--ink2)}
.activity-money,.action-link,.detail-kpi strong,.install-amount,.report-amount,.year-total{color:var(--ink)}
.bars{background:linear-gradient(to bottom, transparent 24%,var(--border) 25%,transparent 25.5%, transparent 49%,var(--border) 50%,transparent 50.5%, transparent 74%,var(--border) 75%,transparent 75.5%);border-color:var(--border)}
.bar-inner,.bar-col.current .bar-inner,.bar-col:hover .bar-inner,.legend-dot,.track>div{background:var(--theme-accent)}
.data-wrap,.activity,.table-headrow,.settings-row,.modal-footer{border-color:var(--border)}
.data-wrap thead th,th{background:var(--theme-soft);color:var(--secondary);border-color:var(--border)}
tr td,td{border-color:var(--border);color:var(--secondary)}tbody tr:hover{background:var(--theme-soft)}
.pill,.pill.active,.pill.paid,.pill.invoiced,.pill.partial,.pill.unbilled,.pill.completed,.pill.on_hold,.pill.negotiating,.mode-badge,.mode-badge.live{background:var(--theme-soft);color:var(--ink2);border:1px solid var(--border)}
.progress-label,.bar-month{color:var(--secondary)}.track{background:var(--border)}
.demo-banner,.private-banner,.detail-note,.plan-existing-note{background:var(--theme-soft);color:var(--ink2);border-color:var(--border)}
input,select,textarea,.searchbox input,.form-group input,.form-group select,.form-group textarea,.plan-row-fields input{background:var(--theme-input);color:var(--ink);border-color:var(--border)}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus,.plan-row-fields input:focus{border-color:var(--theme-subtle);outline-color:var(--border);box-shadow:none}
.plan-row,.contract-plan,.plan-summary,.plan-good,.plan-attention{background:var(--panel);color:var(--ink);border-color:var(--border)}
.plan-row-fields label,.plan-toolbar,.plan-tip,.plan-summary span,.plan-balance{color:var(--secondary)}
.modal-header,.modal-layer .modal-header,.plan-row-head{border-color:var(--border)}
.error-inline{color:var(--ink)}
html[data-theme="dark"] .modal-layer{background:rgba(0,0,0,.76)}
html[data-theme="dark"] .install-amount[style],html[data-theme="dark"] .detail-kpi strong[style]{color:var(--ink)!important}
html[data-theme="dark"] .login-shell,.login-right{background:var(--background)}
html[data-theme="dark"] .login-panel{background:var(--panel);color:var(--ink)}
html[data-theme="dark"] .login-panel h1,html[data-theme="dark"] .login-brand{color:var(--ink)}
/* Theme choice buttons: topbar and Settings */
.theme-quick,.theme-picker{display:flex;align-items:center;gap:5px;padding:4px;background:var(--theme-soft);border:1px solid var(--border);border-radius:11px}
.theme-picker{padding:8px;gap:12px;width:fit-content;max-width:100%;flex-wrap:wrap}
.theme-choice{background:transparent;border:1px solid transparent;color:var(--secondary);border-radius:8px;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:650;font-size:13px}
.theme-choice.compact{padding:5px 7px;font-size:11px;gap:5px}
.theme-choice.selected{background:var(--panel);border-color:var(--border);color:var(--ink);box-shadow:0 1px 5px rgba(0,0,0,.07)}
.swatch{display:inline-block;width:15px;height:15px;border-radius:50%;border:1px solid #9da1a4;flex-shrink:0}.swatch-white{background:#fff}.swatch-dark{background:#151719}.swatch-gray{background:#81878b}
.appearance-panel{margin-bottom:20px}.appearance-panel .panel-header{margin-bottom:10px}
.pill.negotiating{font-weight:700}.proposal-panel{max-width:850px}.proposal-panel .section-space{margin-top:18px}
.private-banner{border:1px solid var(--border);display:flex;align-items:flex-start;gap:14px;border-radius:12px;padding:16px 18px;margin-bottom:20px;font-size:12px}
.private-banner>svg{flex-shrink:0}.private-banner strong{display:block;font-size:13px;margin-bottom:4px}.private-banner span{color:var(--secondary)}
.education-stats{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:17px;margin-bottom:22px}.edu-total .stat-number{font-size:32px}
.edu-positive,.edu-negative{font-weight:700}.edu-table{min-width:570px}
@media(max-width:1180px){.theme-quick{gap:2px}.theme-choice.compact{font-size:0;padding:8px}.theme-choice.compact .swatch{width:17px;height:17px}}
@media(max-width:820px){.education-stats{grid-template-columns:1fr 1fr}.education-stats .edu-total{grid-column:1/-1}.top-actions .theme-quick{gap:0}}
@media(max-width:550px){.education-stats{grid-template-columns:1fr}.education-stats .edu-total{grid-column:auto}.theme-quick{padding:2px}.theme-choice.compact{padding:6px}.theme-picker{width:100%}.theme-picker .theme-choice{flex:1}}
/* Mobile theme support & backup controls */
.mobile-header{background:var(--theme-side);color:var(--theme-side-text);border-bottom:1px solid var(--border)}
.mobile-brand span{color:var(--theme-subtle)}
.mobile-menu-button{border-color:var(--border);color:var(--theme-side-text)}
.mobile-nav{background:var(--theme-side);border-bottom:1px solid var(--border)}
.mobile-nav button{color:var(--theme-side-muted)}
.mobile-nav button.active{background:var(--theme-side-active);color:var(--theme-side-text)}
.login-hero{background:var(--theme-side);color:var(--theme-side-text)}
.login-art span,.login-small{color:var(--theme-side-muted)}
.backup-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){.mobile-header{display:flex}}
/* Important mobile layout: mobile header/nav are block rows, not flex columns beside content */
@media(max-width:760px){
 .shell{display:block!important;min-width:0}
 .mobile-header,.mobile-nav{width:100%}
 .sidebar{display:none!important}
 .content{margin-left:0!important;width:100%;min-width:0}
 .topbar{width:100%;min-width:0}
 .top-actions{gap:6px}
 .bread{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 .page{width:100%;max-width:100%;min-width:0}
 .heading-actions{display:flex;flex-wrap:wrap}
 .heading-actions .btn{flex:0 1 auto}
}

/* ------------------------------------------------------------
   V1.4 | Architectural accents + iPad-safe Project search layout
   Primary and secondary accents are intentionally restrained.
   ------------------------------------------------------------ */
:root,html[data-theme="white"]{
  --ui-accent:#14695e;--ui-accent-hover:#10574f;--ui-accent-on:#fff;
  --ui-accent-soft:#e6f2ee;--ui-accent-text:#115c52;--ui-accent-border:#bdd9d0;
  --ui-secondary:#b77b54;--ui-secondary-soft:#f8efe7;--ui-secondary-text:#925c3b;--ui-secondary-border:#ebd2bd;
  --ui-bar-muted:#bfd7cf;--ui-focus:rgba(20,105,94,.17);--ui-nav-accent:#14695e;
  --theme-accent:#14695e;--theme-accent-on:#fff;--theme-subtle:#647d78;
}
html[data-theme="gray"]{
  --ui-accent:#385e75;--ui-accent-hover:#294c60;--ui-accent-on:#fff;
  --ui-accent-soft:#dceaf0;--ui-accent-text:#2a566c;--ui-accent-border:#aecbd7;
  --ui-secondary:#aa6552;--ui-secondary-soft:#f4e5df;--ui-secondary-text:#8b4a37;--ui-secondary-border:#ddbbac;
  --ui-bar-muted:#a6bfc9;--ui-focus:rgba(56,94,117,.19);--ui-nav-accent:#f0b998;
  --theme-accent:#385e75;--theme-accent-on:#fff;--theme-subtle:#626f78;
}
html[data-theme="dark"]{
  --ui-accent:#d7ae76;--ui-accent-hover:#e7bf88;--ui-accent-on:#191b1c;
  --ui-accent-soft:#3d3327;--ui-accent-text:#ecd0a5;--ui-accent-border:#755a3b;
  --ui-secondary:#72b9ad;--ui-secondary-soft:#213a36;--ui-secondary-text:#a0ddd3;--ui-secondary-border:#355f58;
  --ui-bar-muted:#64553f;--ui-focus:rgba(215,174,118,.25);--ui-nav-accent:#d7ae76;
  --theme-accent:#d7ae76;--theme-accent-on:#191b1c;--theme-subtle:#b4a38a;
}
/* Branding and selected navigation */
.brand-word span,.boot-mark span,.login-brand span,.mobile-brand span{color:var(--ui-secondary)}
.mark{border-color:var(--ui-secondary);color:var(--ui-secondary)}
.nav-btn.active:before{background:var(--ui-secondary)}
.nav-btn.active svg{color:var(--ui-nav-accent)}
html[data-theme="white"] .nav-btn.active{background:var(--ui-accent-soft);color:var(--ui-accent-text)}
html[data-theme="gray"] .nav-btn.active{background:#5a6268;color:#fff}
html[data-theme="dark"] .nav-btn.active{background:#282721;color:#f6e8d2}
.eyebrow{color:var(--ui-secondary)}
/* Important actions, finance KPIs and chart meaning */
.btn-primary,.btn-primary:hover{background:var(--ui-accent);color:var(--ui-accent-on);border-color:var(--ui-accent)}
.btn-primary:hover{background:var(--ui-accent-hover);border-color:var(--ui-accent-hover)}
.action-link,.activity-money,.edu-total .stat-number{color:var(--ui-accent-text)}
.stat:nth-child(2) .stat-number{color:var(--ui-accent-text)}
.stat:nth-child(3) .stat-number{color:var(--ui-secondary-text)}
.stat:nth-child(2) .stat-icon,.activity-icon{background:var(--ui-accent-soft);color:var(--ui-accent-text)}
.stat:nth-child(3) .stat-icon{background:var(--ui-secondary-soft);color:var(--ui-secondary-text)}
.bar-inner{background:var(--ui-bar-muted)}
.bar-col.current .bar-inner,.legend-dot,.track>div{background:var(--ui-accent)}
.bar-col:hover .bar-inner{background:var(--ui-secondary)}
.pill.active,.pill.paid,.mode-badge.live{background:var(--ui-accent-soft);color:var(--ui-accent-text);border-color:var(--ui-accent-border)}
.pill.invoiced,.pill.negotiating{background:var(--ui-secondary-soft);color:var(--ui-secondary-text);border-color:var(--ui-secondary-border)}
input:focus,select:focus,textarea:focus,.plan-row-fields input:focus{
 border-color:var(--ui-accent);outline-color:var(--ui-accent-border);box-shadow:0 0 0 3px var(--ui-focus)
}
.theme-choice.selected{border-color:var(--ui-accent-border);box-shadow:0 0 0 1px var(--ui-accent-border)}
.theme-choice:hover{background:var(--ui-accent-soft);color:var(--ui-accent-text)}
.theme-choice-label{display:inline-block}
.swatch{width:17px;height:17px;border:1px solid rgba(0,0,0,.12);box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.swatch-white{background:linear-gradient(135deg,#14695e 0 49.9%,#b77b54 50%)}
.swatch-gray{background:linear-gradient(135deg,#385e75 0 49.9%,#aa6552 50%)}
.swatch-dark{background:linear-gradient(135deg,#d7ae76 0 49.9%,#72b9ad 50%)}
.theme-palette-note{display:flex;align-items:center;gap:12px;margin-top:14px;padding:13px 14px;background:var(--theme-soft);border:1px solid var(--border);border-radius:10px}
.theme-palette-note strong,.theme-palette-note small{display:block}
.theme-palette-note strong{font-size:12px;color:var(--ink)}
.theme-palette-note small{margin-top:3px;font-size:11px;color:var(--secondary)}
.tone-pair{display:flex;gap:4px;flex:none;align-items:center}
.tone-pair span{width:22px;height:28px;border-radius:5px;border:1px solid rgba(128,128,128,.15)}
.tone-primary{background:var(--ui-accent)}.tone-secondary{background:var(--ui-secondary)}
/* FIX: v1.3's broad input[type=text] rule erased searchbox left padding,
   putting Thai placeholder text beneath the magnifying glass icon. */
.panel .search-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(162px,195px);gap:12px;align-items:stretch;justify-content:initial}
.panel .searchbox{min-width:0;max-width:none;width:100%}
.searchbox svg{left:15px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:1;color:var(--ui-accent)}
.searchbox input,.searchbox input[type="text"],.searchbox input:not([type]){
 width:100%;min-width:0;max-width:100%;padding:10px 12px 10px 44px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;min-height:45px
}
.panel .select-filter{min-width:0;max-width:100%;width:100%;min-height:45px}
/* A sidebar still occupies space on iPads. Stack search controls before
   the available panel width becomes too small for Thai text and dropdown. */
@media(max-width:960px){.panel .search-row{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.theme-choice.compact .theme-choice-label{display:none}}
@media(max-width:550px){.theme-palette-note{align-items:flex-start}.theme-palette-note small{line-height:1.6}}
@media print{.searchbox svg{display:none}}