:root{color-scheme:light;--font:"Google Sans","Google Sans Thai",Arial,"Helvetica Neue",system-ui,-apple-system,"Segoe UI",sans-serif;--navy:#25346f;--pink:#ff5ebc;--gold:#ffd664;--bg:#f4f6fb;--surface:#ffffff;--surface-2:#f8f9fd;--surface-3:#eef1f8;--text:#20263a;--muted:#7a839a;--line:#e2e6ef;--danger:#ef5268;--warning:#e8a228;--success:#1aa675;--purple:#7a62df;--shadow:0 10px 30px rgba(37,52,111,.07);--shadow-lg:0 18px 50px rgba(37,52,111,.12);--radius:20px;--radius-sm:14px}
html[data-theme="dark"]{color-scheme:dark;--bg:#0e1322;--surface:#151b2b;--surface-2:#1a2133;--surface-3:#222b40;--text:#f4f6fb;--muted:#9aa5bc;--line:#2a344a;--shadow:0 14px 34px rgba(0,0,0,.18);--shadow-lg:0 24px 60px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:var(--font);font-size:15px;line-height:1.5;color:var(--text);background:var(--bg);padding-bottom:92px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.topbar{position:sticky;top:0;z-index:50;height:68px;padding:0 clamp(16px,3vw,34px);display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand-link{display:flex;align-items:center;gap:10px;min-width:0}.brand-icon,.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;letter-spacing:-.04em;box-shadow:0 8px 18px rgba(37,52,111,.18)}.brand-link strong,.brand-link small{display:block}.brand-link strong{font-size:16px;line-height:1.15;font-weight:700}.brand-link small{font-size:10px;color:var(--muted);margin-top:3px}.top-actions{display:flex;gap:6px}.top-action,.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--muted);border:1px solid transparent;background:transparent}.top-action:hover,.icon-btn:hover{background:var(--surface-3);color:var(--navy);border-color:var(--line)}.app-main{width:min(100%,1480px);margin:auto;padding:26px clamp(16px,3vw,36px)}.eyebrow{display:block;font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--pink);margin-bottom:6px}.hero-row,.page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.hero-row h1,.page-head h1{margin:0;font-size:clamp(28px,3vw,42px);line-height:1.05;letter-spacing:-.03em;color:var(--navy)}html[data-theme="dark"] .hero-row h1,html[data-theme="dark"] .page-head h1{color:var(--text)}.hero-row p,.page-head p,.section-head p{margin:6px 0 0;color:var(--muted);line-height:1.45}.page-head-modern{justify-content:flex-start}.page-title-with-back{display:flex;align-items:center;gap:14px}.back-home{width:42px;height:42px;border-radius:13px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);flex:0 0 auto}.back-home:hover{color:var(--navy);border-color:color-mix(in srgb,var(--navy) 28%,var(--line))}.btn{border:0;border-radius:13px;padding:11px 16px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px}.btn.primary{background:var(--navy);color:#fff;box-shadow:0 8px 18px rgba(37,52,111,.16)}.btn.primary:hover{background:#1f2c61}.btn.secondary{background:var(--surface-3);color:var(--text);border:1px solid var(--line)}.btn.warning{background:color-mix(in srgb,var(--warning) 14%,var(--surface));color:var(--warning)}.btn.success{background:color-mix(in srgb,var(--success) 14%,var(--surface));color:var(--success)}.wide{width:100%}.text-link{font-size:13px;font-weight:700;color:var(--navy)}.notification-strip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:14px 16px;margin-bottom:14px;border-radius:17px;background:color-mix(in srgb,var(--gold) 28%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 52%,var(--line));color:var(--text)}.notification-strip small{display:block;color:var(--muted);margin-top:2px}.notification-icon{width:32px;height:32px;border-radius:10px;background:var(--gold);color:#604a00;display:grid;place-items:center;font-weight:700}.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat{min-height:122px;padding:18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;overflow:hidden}.stat span,.stat small{color:var(--muted)}.stat span{font-size:12px}.stat strong{font-size:29px;line-height:1;margin-top:auto;letter-spacing:-.03em;color:var(--navy)}html[data-theme="dark"] .stat strong{color:var(--text)}.stat small{font-size:11px;margin-top:4px}.stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--navy)}.stat.danger:before{background:var(--pink)}.stat.warning:before{background:var(--gold)}.stat.promise:before{background:var(--purple)}.stat.money:before{background:var(--success)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:14px;margin:30px 0 12px}.section-head h2{margin:0;font-size:20px;line-height:1.2}.item-list{display:grid;gap:10px}.item-card{background:var(--surface);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr auto;overflow:hidden;transition:.16s ease}.item-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}.item-main{padding:16px 18px;min-width:0}.item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.item-top strong{font-size:16px;line-height:1.25}.job{margin-top:4px;color:var(--muted);font-size:13px;line-height:1.45}.item-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:11px}.item-meta b{font-size:19px;color:var(--navy)}html[data-theme="dark"] .item-meta b{color:var(--text)}.badge{font-size:10px;font-weight:700;border-radius:999px;padding:6px 9px;white-space:nowrap;background:var(--surface-3);color:var(--muted)}.badge.new{background:color-mix(in srgb,var(--pink) 12%,var(--surface));color:#d43b75}.badge.waiting{background:color-mix(in srgb,var(--gold) 23%,var(--surface));color:#9a7200}.badge.promised{background:color-mix(in srgb,var(--purple) 13%,var(--surface));color:var(--purple)}.badge.overdue{background:color-mix(in srgb,var(--danger) 14%,var(--surface));color:var(--danger)}.badge.paid{background:color-mix(in srgb,var(--success) 13%,var(--surface));color:var(--success)}.quick-actions{display:flex;border-left:1px solid var(--line)}.quick-actions button{border:0;border-left:1px solid var(--line);background:var(--surface-2);color:var(--navy);font-weight:700;padding:0 18px}.quick-actions button.success{color:var(--success);background:color-mix(in srgb,var(--success) 6%,var(--surface))}.red{color:var(--danger)!important;font-weight:700}.empty{padding:42px;border:1px dashed var(--line);border-radius:18px;text-align:center;color:var(--muted);background:var(--surface)}.form-page{max-width:840px;margin:auto}.quick-form,.smemove-card,.info-card,.timeline-panel,.theme-card{background:var(--surface);border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow)}.quick-form{padding:22px}.form-block{display:grid;gap:3px}.quick-form label,.smemove-card label,.action-sheet label,.login-card label{display:block;font-size:12px;font-weight:700;margin:12px 0 7px}label em{color:var(--pink);font-style:normal}input,textarea,select{width:100%;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:13px;padding:13px 14px;outline:none;line-height:1.4}input:focus,textarea:focus,select:focus{border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 10%,transparent)}textarea{resize:vertical}.money-panel,.status-choice{margin-top:18px;padding:17px;border-radius:17px;background:var(--surface-2);border:1px solid var(--line)}.money-panel-title{display:flex;align-items:center;justify-content:space-between}.money-panel-title span{font-weight:700}.money-panel-title small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.money-icon{width:34px;height:34px;border-radius:10px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700}.money-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.money-input{position:relative}.money-input>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700}.money-input input{padding-left:34px;font-size:17px;font-weight:700}.balance-preview{display:flex;justify-content:space-between;align-items:center;margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}.balance-preview span{font-size:11px;color:var(--muted)}.balance-preview strong{font-size:24px;color:var(--navy)}html[data-theme="dark"] .balance-preview strong{color:var(--gold)}.check-row{display:flex!important;align-items:center;gap:8px;font-weight:500!important}.check-row input{width:auto}.status-choice>div>small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.toggle-card{display:flex!important;align-items:center;gap:11px;padding:12px;margin-top:12px!important;border-radius:14px;background:var(--surface);border:1px solid var(--line);cursor:pointer}.toggle-card input{display:none}.toggle-ui{width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;flex:0 0 auto}.toggle-ui:after{content:"";width:20px;height:20px;position:absolute;top:3px;left:3px;border-radius:50%;background:#fff;box-shadow:0 2px 7px #0003;transition:.2s}.toggle-card input:checked+.toggle-ui{background:var(--pink)}.toggle-card input:checked+.toggle-ui:after{left:21px}.toggle-card b,.toggle-card small{display:block}.toggle-card small{color:var(--muted);font-size:10px;margin-top:1px}.more-details{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}.more-details summary{font-size:12px;color:var(--navy);font-weight:700;cursor:pointer}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.detail-grid .full{grid-column:1/-1}.sticky-save{margin-top:20px}.suggestions{position:absolute;z-index:20;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-lg);overflow:hidden}.autocomplete{position:relative}.suggestions button{width:100%;border:0;background:var(--surface);color:var(--text);padding:11px 13px;text-align:left}.suggestions button:hover{background:var(--surface-2)}.suggestions b,.suggestions small{display:block}.suggestions small{color:var(--muted);font-size:10px}.filterbar{display:grid;grid-template-columns:1fr 190px auto;gap:10px;margin-bottom:14px}.filterbar button{border:0;border-radius:13px;background:var(--navy);color:#fff;font-weight:700;padding:0 16px}.table-wrap{overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.receivable-table{width:100%;border-collapse:collapse;min-width:760px}.receivable-table th,.receivable-table td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.receivable-table th{font-size:10px;letter-spacing:.08em;color:var(--muted);background:var(--surface-2)}.receivable-table tr{cursor:pointer}.receivable-table tbody tr:hover{background:var(--surface-2)}.receivable-table td small{display:block;color:var(--muted);margin-top:3px}.customer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.customer-card{display:grid;grid-template-columns:1fr auto;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);overflow:hidden}.customer-main{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 18px}.customer-main strong,.customer-main span{display:block}.customer-main span{font-size:11px;color:var(--muted);margin-top:4px}.customer-main b{color:var(--navy);font-size:19px}.customer-card .icon-btn{margin-right:10px}.detail-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:16px}.detail-main{min-width:0}.detail-page-head{justify-content:flex-start;align-items:flex-start}.detail-page-head h1{margin-top:9px}.amount-overview{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;margin-bottom:12px}.amount-primary,.amount-breakdown{background:var(--surface);border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow);padding:18px}.amount-primary small,.amount-primary span,.amount-breakdown span{display:block;color:var(--muted);font-size:11px}.amount-primary strong{display:block;font-size:34px;line-height:1.05;color:var(--navy);margin:7px 0}.amount-breakdown{display:grid;align-content:center;gap:14px}.amount-breakdown div+div{padding-top:13px;border-top:1px solid var(--line)}.amount-breakdown b{display:block;margin-top:4px;font-size:17px}.detail-tools,.action-grid{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}.info-card{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:12px}.info-card>div{padding:15px 16px}.info-card>div+div{border-left:1px solid var(--line)}.info-card span,.info-card b{display:block}.info-card span{font-size:10px;color:var(--muted);margin-bottom:4px}.smemove-card,.timeline-panel{padding:18px}.smemove-card .section-head,.timeline-panel .section-head{margin:0 0 14px}.smemove-shortcuts,.deep-links{display:flex;gap:8px;flex-wrap:wrap}.smemove-shortcuts a,.chip{padding:8px 10px;border-radius:999px;background:var(--surface-3);font-size:11px;font-weight:700;color:var(--navy)}.timeline-panel{height:max-content}.note-form{display:grid;grid-template-columns:1fr 42px;gap:8px}.note-form button{border:0;border-radius:12px;background:var(--pink);color:#fff;font-size:20px}.timeline{margin-top:18px}.timeline-row{display:grid;grid-template-columns:12px 1fr;gap:10px;padding-bottom:16px}.timeline-row i{width:8px;height:8px;border-radius:50%;background:var(--pink);margin-top:6px}.timeline-row strong,.timeline-row small{display:block}.timeline-row small{color:var(--muted);font-size:10px;margin-top:2px}.cancel-form button{border:0;background:transparent;color:var(--danger);font-size:11px;padding:6px 0}.theme-card{padding:18px}.theme-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.theme-card-head b,.theme-card-head span{display:block}.theme-card-head span{font-size:11px;color:var(--muted);margin-top:3px}.theme-preview-dot{width:12px;height:12px!important;border-radius:50%;background:var(--pink)}.theme-segment{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.theme-segment button{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:13px;padding:10px}.theme-segment button.active{border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink)}.theme-segment b,.theme-segment small{display:block}.theme-segment small{color:var(--muted);font-size:9px;margin-top:2px}.bottom-nav{display:none}.action-modal[hidden]{display:none}.action-modal{position:fixed;inset:0;z-index:100}.action-modal-backdrop{position:absolute;inset:0;background:#0008}.action-sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,470px);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow-lg)}.action-sheet-handle{display:none}.action-sheet-head{display:flex;justify-content:space-between;align-items:flex-start}.action-sheet-head small{color:var(--pink);font-weight:700}.action-sheet-head h2{margin:3px 0 0}.modal-close{border:0;background:var(--surface-3);color:var(--muted);width:34px;height:34px;border-radius:10px;font-size:20px}.action-sheet-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.modal-hint{font-size:11px;color:var(--muted);line-height:1.45}.modal-error,.alert.danger{margin-top:12px;padding:11px 13px;border-radius:12px;background:color-mix(in srgb,var(--danger) 10%,var(--surface));color:var(--danger);font-size:12px}.login-body{padding:0;min-height:100vh;display:grid;place-items:center;background:var(--bg)}.login-shell{width:min(100%,460px);padding:24px}.login-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow-lg)}.login-brand{display:flex;align-items:center;gap:11px;padding-bottom:20px;border-bottom:1px solid var(--line)}.login-brand strong,.login-brand span{display:block}.login-brand strong{font-size:16px}.login-brand span{font-size:10px;color:var(--muted);margin-top:3px}.login-copy{padding:24px 0 6px}.login-copy h1{margin:0;color:var(--navy);font-size:31px;letter-spacing:-.03em}.login-copy p{margin:7px 0 0;color:var(--muted)}.login-card form .btn{margin-top:18px}.login-theme-switcher{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
@media (max-width:900px){body{padding-bottom:88px}.topbar{height:62px;padding:0 14px}.brand-link small{display:none}.brand-icon{width:34px;height:34px;border-radius:11px}.top-action{width:36px;height:36px}.app-main{padding:20px 14px 24px}.hero-row,.page-head{align-items:flex-start}.hero-row h1,.page-head h1{font-size:30px}.add-desktop{display:none}.summary-grid{grid-template-columns:1fr 1fr}.stat{min-height:108px;padding:15px}.stat strong{font-size:25px}.item-card{grid-template-columns:1fr}.quick-actions{border-left:0;border-top:1px solid var(--line)}.quick-actions button{flex:1;min-height:46px}.detail-layout{grid-template-columns:1fr}.amount-overview{grid-template-columns:1fr}.info-card{grid-template-columns:1fr 1fr}.info-card>div+div{border-left:0}.info-card>div:nth-child(even){border-left:1px solid var(--line)}.info-card>div:nth-child(n+3){border-top:1px solid var(--line)}.customer-grid{grid-template-columns:1fr}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:70;height:74px;padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;grid-template-columns:repeat(5,1fr);align-items:end;background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(18px);border-top:1px solid var(--line)}.bottom-nav-item{height:55px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:9px;font-weight:700}.bottom-nav-item svg{width:20px;height:20px}.bottom-nav-item.nav-fab{position:relative}.fab-circle{width:52px;height:52px;border-radius:17px;background:var(--pink);color:#fff;display:grid;place-items:center;margin-top:-24px;box-shadow:0 10px 22px rgba(255,94,188,.28);border:4px solid var(--surface)}.fab-circle svg{width:23px;height:23px}.nav-fab>span:last-child{margin-top:-1px}.action-sheet{left:10px;right:10px;top:auto;bottom:10px;transform:none;width:auto;border-radius:22px;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}.action-sheet-handle{display:block;width:40px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 12px}.filterbar{grid-template-columns:1fr 132px}.filterbar button{grid-column:1/-1;min-height:42px}.money-grid,.detail-grid{grid-template-columns:1fr}.detail-grid .full{grid-column:auto}.notification-strip{grid-template-columns:auto 1fr}.notification-strip>span:last-child{display:none}.customer-main{padding:15px}.login-shell{padding:16px}.login-card{padding:22px;border-radius:21px}}
@media (max-width:520px){.app-main{padding-top:16px}.hero-row{margin-bottom:16px}.summary-grid{gap:9px}.stat{border-radius:16px;min-height:104px}.stat span{font-size:10px}.stat strong{font-size:23px}.section-head{margin-top:24px}.item-main{padding:14px}.item-top strong{font-size:15px}.item-meta{margin-top:10px}.quick-form{padding:16px}.money-panel,.status-choice{padding:14px}.page-title-with-back{align-items:flex-start}.page-head{margin-bottom:17px}.page-head h1{font-size:27px}.back-home{width:38px;height:38px}.detail-tools{display:grid;grid-template-columns:1fr 1fr}.detail-tools .btn{font-size:11px;padding:9px 10px}.amount-primary strong{font-size:31px}.theme-segment button{padding:9px 5px}.login-card{padding:20px}.login-copy{padding-top:20px}.login-copy h1{font-size:28px}}
@media (min-width:901px) and (max-width:1250px){.summary-grid{grid-template-columns:repeat(2,1fr)}.detail-layout{grid-template-columns:1fr}.customer-grid{grid-template-columns:1fr 1fr}}
/* V1.5 credit */
.summary-grid-v15{grid-template-columns:repeat(5,minmax(0,1fr))}.stat.credit:before{background:var(--navy)}.stat.danger-soft:before{background:var(--danger)}.badge.credit{background:color-mix(in srgb,var(--navy) 10%,var(--surface));color:var(--navy)}.badge.due_today{background:color-mix(in srgb,var(--gold) 30%,var(--surface));color:#8a6700}.credit-toggle{display:flex!important;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}.credit-toggle input{width:19px;height:19px;accent-color:var(--pink)}.credit-toggle span,.credit-toggle b,.credit-toggle small{display:block}.credit-toggle small{font-size:11px;color:var(--muted);margin-top:2px}@media(max-width:1100px){.summary-grid-v15{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.summary-grid-v15{grid-template-columns:1fr 1fr}.summary-grid-v15 .money{grid-column:1/-1}}