:root{font-family:"Leelawadee UI","Tahoma",system-ui,sans-serif;color:#263b2f;background:#f4f5ef;--bg:#f4f5ef;--panel:#fffef9;--ink:#263b2f;--muted:#6a776c;--line:#dce3d5;--green:#235d40;--soft:#edf2e7;--shadow:0 8px 30px #30442b08;color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d0a449;outline-offset:3px}
h1,h2,h3,p{margin:0}h1{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.4;letter-spacing:-.03em}h2{font-size:1.15rem;margin-bottom:16px}h3{font-size:1.04rem}p{line-height:1.7}small{display:block;color:var(--muted);margin-top:5px;line-height:1.6}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}.muted,.hint{color:var(--muted)}.hint{font-size:.85rem}.eyebrow{font-size:.73rem;letter-spacing:.13em;color:var(--muted);margin-bottom:8px}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.btn{background:var(--green);color:#fff;border:1px solid transparent;border-radius:9px;min-height:42px;padding:9px 16px;font-weight:600;line-height:1.45;white-space:normal}.btn:hover{filter:brightness(1.08)}.btn.secondary{background:var(--soft);color:var(--ink);border-color:var(--line);font-weight:400}.wide{width:100%}.brand{font-weight:700;line-height:1.4;font-size:1.2rem}.brand span{font-size:1.65rem;margin-right:7px}.brand small{letter-spacing:.2em;font-size:.65rem;margin-left:42px}.connection{font-size:.84rem}.good{color:#2d7048}.warning{color:#966218}.danger{color:#b03d33}.neutral{color:#778076}.badge{display:inline-block;padding:4px 9px;background:var(--soft);color:var(--ink);font-size:.76rem;border-radius:5px}.badge.warning{background:#fbefd3;color:#875a13}.badge.danger{background:#fbe3dd;color:#a02e27}.badge.good{background:#e3efdf;color:#286340}.badge.neutral{background:#eceee8;color:#69716a}
.app-layout{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--panel);border-right:1px solid var(--line);padding:28px 19px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.sidebar nav{display:grid;gap:7px;margin-top:40px}.sidebar nav a{display:flex;align-items:center;gap:12px;border-radius:8px;padding:12px;color:var(--muted);font-size:.94rem}.sidebar nav a span{width:21px;text-align:center;font-size:1.2rem}.sidebar nav a[aria-current]{background:var(--green);color:white;text-decoration:none}.sidebar-bottom{margin-top:auto;display:grid;gap:10px;font-size:.8rem;overflow-wrap:anywhere}.workspace{min-width:0}.toolbar{height:68px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 32px}main{max-width:1260px;margin:auto;padding:32px}.page-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:27px}.page-head .muted{font-size:.9rem;margin-top:8px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}.metric{padding:23px 20px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.metric span{color:var(--muted);font-size:.85rem}.metric strong{display:block;margin-top:12px;font-size:clamp(1.15rem,2vw,1.8rem);letter-spacing:-.02em;overflow-wrap:anywhere}.metric.green{background:var(--green);color:white;border-color:var(--green)}.metric.green span{color:#dce8d7}.panel{background:var(--panel);padding:24px;border:1px solid var(--line);border-radius:12px;margin-bottom:22px;box-shadow:var(--shadow);min-width:0}.row,.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.section-head{margin:12px 0 20px}.section-head h2{margin:0}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:18px}.project-card{margin:0 0 20px}.project-card h3{margin:20px 0 6px}.budget-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:21px 0 10px;font-size:.8rem}.progress{height:8px;background:var(--line);border-radius:8px;overflow:hidden;margin:10px 0}.progress i{display:block;height:100%;background:#528364}.progress.warning i{background:#c39135}.progress.danger i{background:#b54d42}.progress.neutral i{background:#949e94}.project-card .muted,.plot .muted{font-size:.82rem}.text-link{display:inline-block;margin-top:18px;font-size:.85rem;font-weight:600}.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:22px}.plot{border:1px solid var(--line);border-radius:9px;padding:18px}.plot p{margin-top:8px}.category-row{border-bottom:1px solid var(--line);padding:14px 0}.empty{text-align:center;padding:45px 22px;width:100%;grid-column:1/-1}.empty h3{margin:14px 0 8px}.empty p{color:var(--muted);margin-bottom:20px}.empty-icon{font-size:2.3rem}.empty .btn{margin:5px}.notice{padding:18px 22px;border-radius:9px;margin-bottom:20px;background:#faf0d9;border:1px solid #ead6a9;font-size:.9rem}.notice p{margin-top:8px}.bar-chart{display:grid;gap:20px;margin-top:20px;margin-bottom:25px;font-size:.83rem}.donut{width:160px;height:160px;border-radius:50%;display:grid;place-items:center;margin:10px auto 28px}.donut span{background:var(--panel);border-radius:50%;width:118px;height:118px;display:grid;place-items:center;font-weight:bold;font-size:.9rem}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:.87rem}th{font-size:.78rem;color:var(--muted);font-weight:500;text-align:left;background:var(--soft);white-space:nowrap}th,td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}td .btn{padding:7px 9px;min-height:36px;font-size:.8rem}.numeric{text-align:right;white-space:nowrap}
.auth-layout{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--panel)}.auth-story{padding:clamp(30px,7vw,105px);background:#234f38;color:#f4f5e9;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.auth-story .eyebrow{color:#bdd1aa;letter-spacing:.2em}.field-mark{font-size:3.2rem;margin:30px 0 24px}.auth-story h1{font-size:clamp(2.5rem,4.5vw,4rem);line-height:1.45}.auth-story p:not(.eyebrow){color:#d2dfc8;margin-top:25px;max-width:420px}.story-steps{display:flex;gap:20px;margin-top:50px;font-size:.8rem;color:#c8dabf}.field-lines{position:absolute;width:600px;height:400px;bottom:-285px;left:-80px;transform:rotate(-20deg);background:repeating-linear-gradient(0deg,transparent 0 24px,#95b97544 25px 27px);border-radius:50%}.auth-panel{width:min(100%,520px);margin:auto;padding:45px}.auth-panel .brand{color:var(--green);margin-bottom:38px}.auth-panel h2{font-size:1.6rem;margin-bottom:9px}.auth-panel .connection{margin:20px 0}.auth-panel .hint{margin-top:25px}.auth-panel>p{margin:15px 0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid.single{grid-template-columns:1fr}.form-grid label{display:flex;flex-direction:column;gap:8px;font-size:.87rem;font-weight:600}.form-grid label>span{display:inline}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #bdc9b6;border-radius:7px;min-height:44px;background:var(--panel);color:var(--ink)}input[type=color]{padding:5px}input[type=file]{font-size:.8rem}.form-grid .checkbox{display:flex;flex-direction:row;align-items:flex-start;line-height:1.7}.checkbox input{width:20px;min-height:20px;flex-shrink:0}.span-all{grid-column:1/-1}.form-error{color:#b03d33;white-space:pre-wrap;font-size:.87rem}.total-preview{background:var(--soft);padding:13px;font-size:1.1rem;font-weight:700}.message{position:fixed;z-index:30;top:12px;left:50%;transform:translateX(-50%);padding:12px 16px;border:1px solid var(--line);background:var(--panel);color:var(--ink);box-shadow:0 6px 35px #0002;border-radius:9px;width:min(90vw,700px);font-size:.9rem;display:flex;gap:15px;align-items:center;justify-content:space-between}.message .btn{font-size:.75rem;min-height:32px;padding:5px 10px}dialog{width:min(760px,94vw);max-height:90dvh;overflow:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 20px 80px #0004}dialog::backdrop{background:#12261ac0}dialog h2{margin-bottom:20px}dialog>p{margin-bottom:17px}.receipt-image{max-width:100%;display:block;margin-bottom:20px}.connection-cover{position:fixed;inset:0;background:#16291cdf;z-index:20;display:grid;place-items:center;padding:20px}.connection-cover .panel{width:min(500px,100%);text-align:center}.connection-cover .btn{margin-top:20px}details{margin-top:12px;overflow-wrap:anywhere}summary{cursor:pointer}.print-only{display:none}.workspace-picker{display:flex;align-items:center;gap:9px;font-size:.78rem;font-weight:600;min-width:min(50vw,360px)}.workspace-picker select{min-height:38px;padding:7px 10px}.member-row{padding:13px 0;border-bottom:1px solid var(--line)}.member-row span:first-child{display:grid;gap:3px}.member-row small{color:var(--muted);font-weight:400}.member-form{margin-top:22px;grid-template-columns:minmax(220px,1fr) auto;align-items:end}.member-form .btn{height:44px}
:root[data-theme=dark]{--bg:#17251e;--panel:#213028;--ink:#e6eddf;--muted:#afbdab;--line:#3a4e3d;--soft:#2e4434;--green:#609a6e;color:var(--ink);background:var(--bg);color-scheme:dark}
@media(max-width:1050px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.app-layout{grid-template-columns:185px minmax(0,1fr)}.sidebar{padding:24px 12px}main{padding:24px}.page-head{align-items:flex-start;flex-direction:column}.two-columns{grid-template-columns:1fr}}
@media(max-width:720px){.app-layout{display:block}.sidebar{position:static;height:auto;padding:16px;border-right:0;border-bottom:1px solid var(--line)}.sidebar>.brand{font-size:1rem}.sidebar nav{display:flex;gap:5px;overflow-x:auto;margin-top:16px;padding-bottom:4px}.sidebar nav a{white-space:nowrap;font-size:.82rem;padding:9px 12px}.sidebar nav a span{display:none}.sidebar-bottom{display:flex;align-items:center;margin-top:12px;gap:8px}.sidebar-bottom p{margin-right:auto}.sidebar-bottom .btn{font-size:.75rem;padding:7px;min-height:34px}.toolbar{height:auto;min-height:62px;padding:9px 16px;gap:8px;flex-wrap:wrap}.workspace-picker{min-width:100%;order:3}.connection{font-size:.78rem}main{padding:20px 15px}.panel{padding:18px}.metrics{gap:10px}.metric{padding:17px 13px}.metric strong{font-size:1.3rem}.section-head{align-items:flex-start}.form-grid,.member-form{grid-template-columns:1fr}.auth-layout{display:block}.auth-story{min-height:auto;padding:30px 25px}.auth-story h1{font-size:2rem}.auth-story .field-mark,.story-steps,.field-lines{display:none}.auth-story p:not(.eyebrow){font-size:.85rem;margin-top:12px}.auth-panel{padding:30px 24px}.auth-panel .brand{display:none}dialog{padding:22px}.message{font-size:.82rem}.row{align-items:flex-start}h2{font-size:1.07rem}}
@media print{body{background:white;color:black}.sidebar,.toolbar,.page-head .actions,.no-print,.btn,.message,.connection-cover,#modal-host{display:none!important}.app-layout,.workspace,main{display:block;width:100%;max-width:none;padding:0}.panel,.metric{box-shadow:none;border:1px solid #ccc;background:white;color:black;break-inside:avoid}.table-wrap{overflow:visible}table{font-size:9pt}.two-columns{display:block}.print-only{display:block}.page-head{margin-top:0}.panel{margin-bottom:12px;padding:12px}a{color:inherit}.muted,small{color:#555}@page{size:A4;margin:12mm}}

/* Mobile-first UX refresh: keep the existing data model and visual language, but make the UI calmer, clearer and easier to tap. */
:root{--touch-target-min:44px;--focus:#d0a449;--radius-card:14px;--radius-button:10px}
body{background:var(--bg);-webkit-font-smoothing:antialiased}
button,a,input,select,textarea{min-height:var(--touch-target-min)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;border-radius:var(--radius-button);box-shadow:0 2px 0 #173c2812;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #173c2820}
.btn:active{transform:translateY(0);box-shadow:none}
.button-icon{font-size:1.08em;line-height:1;flex:0 0 auto}
.actions{gap:9px}
.actions .btn[data-action=edit],.actions .btn[data-action=delete],.actions .btn[data-action=receipt]{padding-inline:11px}
.metric,.panel{border-radius:var(--radius-card);box-shadow:0 8px 24px #30442b0d}
.metric{min-height:118px;display:flex;flex-direction:column;justify-content:center}
.page-head{margin-bottom:22px}
.page-head h1{max-width:26ch}
.toolbar{background:#fffef9cc;backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}
.workspace-picker select{font-weight:600;border-radius:10px}
.sidebar nav a{min-height:46px}
th{font-weight:700}
td .btn{min-height:40px}
dialog{border-radius:18px}

@media(max-width:720px){
  body{font-size:15px}
  .sidebar{padding:14px 12px 12px;position:sticky;top:0;z-index:11;background:#fffef9f2;backdrop-filter:blur(14px)}
  .sidebar nav{margin-inline:-4px;padding-inline:4px;scrollbar-width:none}
  .sidebar nav::-webkit-scrollbar{display:none}
  .sidebar nav a{min-height:44px;border:1px solid transparent;gap:6px}
  .sidebar nav a[aria-current]{box-shadow:0 3px 10px #235d4030}
  .sidebar nav a span{display:inline;width:auto;font-size:1.15rem}
  .sidebar nav a{font-size:.8rem;padding:8px 11px}
  .toolbar{padding:10px 14px;min-height:66px}
  .toolbar .connection{order:1;padding:6px 9px;border-radius:999px;background:var(--soft)}
  .toolbar .btn{order:2;min-width:46px;padding-inline:10px}
  .toolbar .btn .button-label{font-size:0}
  .toolbar .btn .button-icon{font-size:1.3rem}
  .workspace-picker{order:3!important}
  .workspace-picker select{min-height:46px}
  main{padding:18px 13px 32px}
  .page-head{gap:14px;margin-bottom:18px}
  .page-head .actions{width:100%}
  .page-head .actions>.btn:not(.secondary){flex:1}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:16px}
  .metric{min-height:104px;padding:15px 13px}
  .metric strong{font-size:1.15rem;margin-top:8px}
  .panel{padding:16px;margin-bottom:15px}
  .section-head{gap:10px;margin:4px 0 16px}
  .section-head .actions{width:100%}
  .section-head .actions>.btn:not(.secondary){flex:1}
  .cards{gap:11px}
  .plot{padding:14px;border-radius:11px}
  .table-wrap{margin-inline:-4px;padding-inline:4px}
  table{font-size:.82rem}
  th,td{padding:12px 9px}
  td .actions{gap:5px;flex-wrap:nowrap}
  .actions .btn[data-action=edit] .button-label,.actions .btn[data-action=delete] .button-label,.actions .btn[data-action=receipt] .button-label{display:none}
  .actions .btn[data-action=edit],.actions .btn[data-action=delete],.actions .btn[data-action=receipt]{width:42px;min-width:42px;min-height:42px;padding:0}
  .empty{padding:32px 15px}
  .form-grid{gap:14px}
  input,select,textarea{min-height:48px;border-radius:10px}
  .form-grid .btn{min-height:48px}
  dialog{width:min(94vw,520px);padding:18px;max-height:86dvh}
  .message{top:8px;padding:11px 12px}
}