:root{
  color-scheme:light;
  --ink:#252525;--muted:#64615a;--gold:#bc963c;--gold-light:#fbf5e6;
  --line:#e8e5de;--surface:#fff;--canvas:#f8f8f6;--danger:#aa3030;
  font-family:system-ui,-apple-system,"Myanmar Text","Myanmar Sangam MN",sans-serif;
  color:var(--ink);background:var(--canvas);font-synthesis:none;line-height:1.7;
}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}
button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.5}
[hidden]{display:none!important}
button:focus-visible,summary:focus-visible{outline:3px solid #8c6817;outline-offset:3px}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px max(24px,calc((100vw - 1040px)/2));background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center;color:#896619;font-size:22px;font-weight:800;line-height:1.2}
.brand small{display:block;margin-top:6px;color:var(--muted);font-size:9px;font-weight:600;letter-spacing:1.6px}
.badge{display:inline-flex;align-items:center;white-space:nowrap;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:#f9f9f7;color:#535149;font-size:11px;font-weight:650}
.home{max-width:560px;margin:clamp(24px,5dvh,64px) auto;padding:0 24px 28px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;color:#806018}
h1{font-size:clamp(23px,5vw,30px);line-height:1.7;letter-spacing:-.4px;margin:8px 0}
.home>p{font-size:14px;color:var(--muted);margin:0 0 24px}
.action-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(106px,auto);align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;margin:12px 0}
.action-open{width:100%;min-width:0;min-height:84px;text-align:left;padding:14px 16px;border:0;border-radius:10px}
.action-open strong{display:block;font-size:17px;font-weight:700;line-height:1.7}
.action-open small{display:block;margin-top:3px;font-size:12px;font-weight:500;line-height:1.4}
.action-open[data-mode=in]{background:#176d44;color:#fff}
.action-open[data-mode=out]{background:#af3333;color:#fff}
.action-open[data-mode=transfer]{background:#f0cd56;color:#302600}
.action-open[data-mode=in] small,.action-open[data-mode=out] small{color:#fff}
.action-open[data-mode=transfer] small{color:#493900}
.draft-meta{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;font-size:11px;color:var(--muted);text-align:right}
.draft-meta>span{padding:5px 7px}.draft-meta .has-data{background:var(--gold-light);border-radius:6px;color:#73530e;font-weight:650}
.draft-clear{border:0;background:transparent;color:var(--danger);font-size:12px;min-height:44px;padding:6px 8px;border-radius:8px}
.draft-clear:hover{background:#fff1ef}
.home #draftWarning{font-size:12px;margin:16px 0 20px;color:var(--muted)}
aside{border-left:3px solid var(--gold);padding:10px 12px;background:var(--surface);font-size:12px;color:#5d5543;margin:18px 0 12px}
.help{font-size:12px;color:var(--muted);margin:14px 0}.help summary{cursor:pointer;padding:6px 0;min-height:40px}.help p{margin:8px 0}
.modal-open{overflow:hidden}
dialog{padding:0;width:min(580px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);border:1px solid var(--line);border-radius:18px;color:var(--ink);background:var(--surface);box-shadow:0 24px 90px #3f341c30;overflow:hidden}
dialog::backdrop{background:#1d1b176b}
.modal-top{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);padding:12px 20px;border-bottom:1px solid var(--line)}
.modal-top h2{margin:0;font-size:16px;font-weight:700}
#closeMovement{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fafaf8;color:#555149;font-size:26px;line-height:1}
dialog main{display:flex;flex-direction:column;height:min(680px,calc(100dvh - 118px));min-height:0;padding:0 20px;overflow:hidden}
.wizard-progress{display:flex;flex-shrink:0;align-items:center;gap:12px;padding:16px 0;color:var(--muted);font-size:13px}
.wizard-progress b{padding:4px 10px;border:1px solid #e9d9af;border-radius:8px;background:var(--gold-light);color:#755312;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.layout{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-padding:12px;scrollbar-gutter:stable}
.card{margin:0;padding:4px 2px 16px;background:var(--surface)}
h2{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;line-height:1.7;margin:0 0 18px}
/* The progress strip already carries the step number. */
.card h2>span{display:none}
.sectionhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.sectionhead h2{margin:0}
label,legend{display:block;font-size:13px;font-weight:650;line-height:1.7;margin-bottom:7px}
small{font-weight:400}input,select,textarea{width:100%;min-width:0;min-height:48px;padding:11px 12px;border:1px solid #b7b3aa;border-radius:10px;background:#fff;color:var(--ink);font-size:16px;line-height:1.5}
input::placeholder,textarea::placeholder{color:#747068;opacity:1}
input:focus,select:focus,textarea:focus{outline:2px solid #96721d;outline-offset:2px;border-color:#96721d}
select{margin-bottom:18px}input[type=date]{min-width:0;max-width:100%}
.hint,.footnote{font-size:12px;color:var(--muted);line-height:1.7;margin:0 0 16px}
.product-columns,.product{display:grid;grid-template-columns:minmax(0,1fr) 84px 44px;align-items:center;gap:8px}
.product-columns{padding:5px 0 8px;font-size:12px;color:var(--muted);font-weight:650}
.product{padding:0;margin-bottom:10px}.product>div{min-width:0}.product input{margin:0;padding:11px 10px}
.product .qty{text-align:center;font-variant-numeric:tabular-nums}
.remove{border:1px solid #f0deda;border-radius:10px;background:#fff6f3;color:var(--danger);min-width:44px;min-height:48px;padding:0;font-size:23px;line-height:1}
.primary,.secondary{width:100%;min-height:50px;padding:11px 14px;border-radius:10px;font-size:15px;font-weight:700;line-height:1.7}
.primary{border:1px solid var(--gold);background:var(--gold);color:#231b08}.primary:hover{background:#b28a30;border-color:#b28a30}
.secondary{border:1px solid #c5b68f;background:#fffdf7;color:#735315}.secondary:hover{background:var(--gold-light)}
#add{margin-top:2px;border-style:dashed;font-size:13px;background:#fffdf8}
.total{display:flex;justify-content:flex-end;padding:14px 0 4px;color:#554216;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
#otherWrap{margin-bottom:18px}label[for=notes]{margin-top:4px}#notes{height:100px;resize:vertical;max-height:220px}
.preview{position:static}.dot{display:none}
#message{height:clamp(180px,34dvh,340px);min-height:150px;resize:none;border:1px solid #ded7c4;background:#fffdf7;font-size:14px;line-height:1.5;padding:14px}
#feedback{font-size:13px;color:#5d4815;line-height:1.7;margin:10px 0}#feedback:empty{margin:0}#copy{margin-top:12px}
.footnote{font-size:11px;text-align:center;margin:12px 0 0}
.wizard-nav{display:flex;flex-shrink:0;flex-wrap:wrap;gap:10px;padding:12px 0 max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface)}
.wizard-nav #back,.wizard-nav #next{flex:1 1 0}
.textbutton{border:0;background:none;color:#755719;font-size:13px;min-height:44px;border-radius:10px;padding:8px}
.wizard-nav #reset{flex:0 0 100%;order:2;min-height:44px;padding:6px;color:#6b6250}
footer{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){
 header{padding:14px 18px}.brand{font-size:20px}.brand small{font-size:8px;letter-spacing:1.3px}
 .home{margin:26px auto;padding:0 18px 24px}.home>p{margin-bottom:18px}
 .action-card{gap:10px;padding:10px;grid-template-columns:minmax(0,1fr) 110px}.action-open{padding:12px;min-height:80px}.action-open strong{font-size:16px}
 dialog{width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
 .modal-top{padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px}
 dialog main{max-width:none;height:calc(100dvh - 65px - env(safe-area-inset-top,0px));padding:0 16px}
 .wizard-progress{padding:12px 0}.card{padding-bottom:16px}#message{height:clamp(160px,30dvh,280px)}
}
@media(max-width:360px){
 .home{padding-left:12px;padding-right:12px}.action-card{gap:8px;grid-template-columns:minmax(0,1fr) 100px}.action-open{padding:10px}.action-open strong{font-size:14px}.draft-meta{font-size:10px}
 .product-columns,.product{grid-template-columns:minmax(0,1fr) 64px 44px;gap:6px}.product input{padding:11px 6px}
}
@media(max-height:640px){.wizard-progress{padding:8px 0}.wizard-nav{padding-top:8px;gap:6px}.card h2{margin-bottom:12px}.hint{margin-bottom:10px}}
@media(hover:hover){.action-card:hover{border-color:#ccb777}.action-open:hover{filter:brightness(.96)}#closeMovement:hover{background:#f1efe8}.remove:hover{background:#fbe8e3}}
@media(prefers-reduced-motion:no-preference){button{transition:background-color .14s,border-color .14s,transform .14s}button:active{transform:scale(.985)}}


/* Phone-first action launcher: coloured controls on quiet white surfaces. */
.home{max-width:520px;margin:24px auto;padding:0 20px 24px}
.home .eyebrow{display:none}
.home h1{font-size:24px;margin:0 0 6px;font-weight:750;letter-spacing:-.3px}
.home>p{font-size:13px;margin-bottom:18px;line-height:1.8}
.action-card{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:10px 12px 4px;border:1px solid #e6e4de;background:#fff;border-radius:14px;margin:10px 0;box-shadow:0 2px 5px #3f341c04}
.action-card .action-open[data-mode]{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:10px 12px;text-align:center;border-radius:9px}
.action-card .action-open[data-mode=in]{background:#176d44;color:white}
.action-card .action-open[data-mode=out]{background:#af3333;color:white}
.action-card .action-open[data-mode=transfer]{background:#f0cd56;color:#302600}
.action-open strong{font-size:16px;line-height:1.8;word-break:normal;overflow-wrap:break-word}
.action-open small{margin:0;font-size:11px;line-height:1.4;font-weight:500}
.action-card .draft-meta{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px;max-width:none;min-width:0;min-height:40px;padding:0 2px;color:#6b675f;text-align:left}
.action-card .draft-meta>span{white-space:nowrap;padding:4px 0;font-size:11px}
.action-card .draft-meta .has-data{background:none;color:#715317;border:0;border-radius:0;font-weight:650}
.action-card .draft-clear{color:#9e3333;border:0;border-radius:6px;background:transparent;min-width:64px;min-height:44px;padding:4px 6px;font-size:12px}
.action-card .draft-clear:hover{background:#fff1ed}
.home #draftWarning{font-size:11px;color:#736e63;margin:14px 2px;line-height:1.8}
.home aside{font-size:11px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;padding:9px 10px;margin:12px 0}
.home .help{font-size:12px;margin:8px 2px}
.action-open:focus-visible,.draft-clear:focus-visible{outline:3px solid #856214;outline-offset:3px}
header{padding:14px max(20px,calc((100vw - 1040px)/2))}.brand{font-size:20px}
.modal-top{background:#fff}.modal-top h2{font-size:15px}
.wizard-progress{font-size:12px}.card h2{font-size:16px}
.wizard-nav{gap:8px}.wizard-nav #reset{font-size:12px;color:#746c5b}
@media(max-width:600px){header{padding:12px 18px}.home{margin:20px auto;padding:0 18px 20px}.home h1{font-size:23px}.action-card{grid-template-columns:minmax(0,1fr);gap:0;padding:10px 12px 4px}.action-open strong{font-size:16px}}
@media(max-width:360px){.home{padding:0 14px 18px}.home h1{font-size:21px}.action-card{grid-template-columns:minmax(0,1fr)}.action-card .action-open[data-mode]{gap:8px;padding:10px 8px}.action-open strong{font-size:15px}.action-open small{font-size:10px}}

#installDialog{width:min(400px,calc(100vw - 32px));height:auto;max-height:calc(100dvh - 48px);margin:auto;border:1px solid var(--line);border-radius:18px;overflow-y:auto} .install-content{padding:24px}.install-content h2{margin-bottom:12px;font-size:19px}.install-content p{font-size:14px;color:var(--muted);line-height:1.9}.install-content #installInstructions{padding:12px;background:var(--gold-light);border-radius:10px;color:#59451b}.install-content .textbutton{width:100%;margin-top:8px}

.brand-logo{display:block;width:48px;height:55px;object-fit:contain;flex-shrink:0}.brand{gap:10px}

/* Connection colour supplements the readable status text. */
#connection{gap:7px}#connection::after{content:"";display:block;width:8px;height:8px;border-radius:50%;flex-shrink:0}#connection[data-state=online]::after{background:#167346}#connection[data-state=offline]::after{background:#c43232}
/* Native date picker with a consistent day-month-year display. */
.date-control{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:11px 12px;border:1px solid #b7b3aa;border-radius:10px;background:#fff;font-size:16px;line-height:1.5;font-variant-numeric:tabular-nums}
.date-control input[type=date]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;z-index:1}.date-control:focus-within{outline:2px solid #96721d;outline-offset:2px;border-color:#96721d}.date-picker-label{font-size:12px;color:#735315}

.people-group{border:0;margin:0 0 20px;padding:0;min-width:0}.people-group legend{padding:0}.people-list{display:grid;grid-template-columns:1fr;gap:8px}.person-choice{display:flex;align-items:center;gap:12px;min-height:52px;margin:0;padding:10px 12px;border:1px solid #b7b3aa;border-radius:10px;font-size:15px;font-weight:500;cursor:pointer}.person-choice input{width:20px;height:20px;min-height:20px;margin:0;padding:0;accent-color:#896619;flex-shrink:0}.person-choice:has(input:checked){border-color:#96721d;background:#fbf5e6}.person-choice:focus-within{outline:2px solid #96721d;outline-offset:2px}

.update-notice{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:12px 0;padding:12px;border:1px solid #d5bc80;border-radius:10px;background:#fff8e5;flex-shrink:0}.update-notice>div{flex:1;min-width:150px}.update-notice strong{font-size:14px}.update-notice p{font-size:12px;margin:3px 0 0;color:#59451b}.update-notice .primary{width:auto;font-size:13px;min-height:44px}.update-notice #updateError{flex-basis:100%;color:#a12d2d}