:root{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --color-bg:#f2efe8;
  --color-surface:#fbfaf6;
  --color-surface-2:#ffffff;
  --color-offset:#e9e5dc;
  --color-border:#d8d3c8;
  --color-divider:#e3dfd5;
  --color-text:#1f1d18;
  --color-muted:#6c685f;
  --color-faint:#a9a59c;
  --color-primary:#2c5a45;
  --color-primary-hover:#214635;
  --color-primary-soft:#dbe6df;
  --color-warn:#9a4a1c;
  --color-warn-soft:#f1e2d6;
  --color-danger:#a2312b;
  --radius:10px;--radius-sm:6px;
  --shadow:0 1px 2px rgba(31,29,24,.06),0 4px 16px rgba(31,29,24,.05);
  --font-body:'General Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-base);line-height:1.5}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance}
h1{font-size:var(--text-xl);font-weight:600;letter-spacing:-.01em}
.h2{font-size:var(--text-lg);font-weight:600}
p{margin:0}
a{color:var(--color-primary)}
.muted{color:var(--color-muted)}
.small{font-size:var(--text-xs)}
.mono{font-family:var(--font-mono)}
button,input,select,textarea{font:inherit;color:inherit}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--space-6);padding:var(--space-3) var(--space-6);background:color-mix(in srgb,var(--color-bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-divider)}
.brand{display:flex;align-items:center;gap:var(--space-2);font-weight:600}
.brand-mark{width:18px;height:22px;background:var(--color-text);clip-path:polygon(0 0,100% 0,100% 88%,83% 100%,67% 88%,50% 100%,33% 88%,17% 100%,0 88%)}
.brand-name{font-size:var(--text-sm);letter-spacing:.02em}
.tabs{display:flex;gap:var(--space-1);overflow-x:auto;scrollbar-width:none;flex:1}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--color-muted);cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--color-text);background:var(--color-offset)}
.tabs button[aria-selected=true]{color:var(--color-text);background:var(--color-surface-2);box-shadow:var(--shadow)}
.top-actions{display:flex;gap:var(--space-2)}

main{max-width:1200px;margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-16)}
.view{display:none}
.view.active{display:block}
.view-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}
.view-head p{margin-top:var(--space-2);max-width:62ch}
.head-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid transparent;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;min-height:40px}
.btn.sm{padding:var(--space-1) var(--space-3);min-height:34px}
.btn.primary{background:var(--color-primary);color:#fff}
.btn.primary:hover{background:var(--color-primary-hover)}
.btn.ghost{background:var(--color-surface-2);border-color:var(--color-border)}
.btn.ghost:hover{border-color:var(--color-muted)}
.btn.danger{color:var(--color-danger)}
.btn:focus-visible,.tabs button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.icon-btn{border:0;background:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--color-muted);padding:var(--space-1) var(--space-2)}
.row{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.row.center{justify-content:center}

/* forms */
label{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-xs);color:var(--color-muted);font-weight:500}
input,select,textarea{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--color-text);min-height:40px;width:100%}
textarea{resize:vertical}
label.check{flex-direction:row;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text);margin:var(--space-4) 0}
label.check input{width:auto;min-height:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-3)}
.field-row.three{grid-template-columns:2fr 1fr 1fr}
.field-row.four{grid-template-columns:repeat(4,1fr)}

.panel{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius);padding:var(--space-6);box-shadow:var(--shadow)}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-bottom:var(--space-6)}
.kpi{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius);padding:var(--space-4) var(--space-5)}
.kpi .k{font-size:var(--text-xs);color:var(--color-muted)}
.kpi .v{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:600;margin-top:var(--space-1);font-variant-numeric:tabular-nums}
.kpi .bar{height:4px;background:var(--color-offset);border-radius:2px;margin-top:var(--space-2);overflow:hidden}
.kpi .bar span{display:block;height:100%;background:var(--color-primary)}

.filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-2);margin-bottom:var(--space-4)}

/* register table */
.tx-table{width:100%;border-collapse:collapse;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius);overflow:hidden;font-size:var(--text-sm)}
.tx-table th{text-align:left;font-size:var(--text-xs);font-weight:500;color:var(--color-muted);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}
.tx-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-divider);vertical-align:middle}
.tx-table tr:last-child td{border-bottom:0}
.tx-table tbody tr{cursor:pointer;transition:background .12s}
.tx-table tbody tr:hover{background:var(--color-surface-2)}
.tx-table .num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tx-table .date{font-family:var(--font-mono);white-space:nowrap;color:var(--color-muted)}
.merchant{font-weight:500}
.desc{font-size:var(--text-xs);color:var(--color-faint);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:36ch}
.badge{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);padding:2px var(--space-2);border-radius:999px;white-space:nowrap}
.badge.ok{background:var(--color-primary-soft);color:var(--color-primary)}
.badge.miss{background:var(--color-warn-soft);color:var(--color-warn)}
.badge.cat{background:var(--color-offset);color:var(--color-muted)}

.empty{text-align:center;padding:var(--space-16) var(--space-6);background:var(--color-surface);border:1px dashed var(--color-border);border-radius:var(--radius)}
.empty h2{margin-bottom:var(--space-2)}
.empty p{color:var(--color-muted);max-width:48ch;margin:0 auto var(--space-4)}

/* scan */
.scan-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-4);align-items:start}
.camera{position:relative;aspect-ratio:3/4;max-height:70vh;background:#1f1d18;border-radius:var(--radius-sm);overflow:hidden;display:flex;align-items:center;justify-content:center}
.camera video{width:100%;height:100%;object-fit:cover;display:none}
.camera.live video{display:block}
.camera-empty{text-align:center;color:#e9e5dc;padding:var(--space-6)}
.camera-empty p{margin-bottom:var(--space-4)}
.camera.live .camera-empty{display:none}
.camera-controls{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:var(--space-4);background:linear-gradient(transparent,rgba(0,0,0,.55))}
.shutter{width:64px;height:64px;border-radius:50%;border:4px solid #fff;background:rgba(255,255,255,.25);cursor:pointer}
.shutter:active{background:#fff}
.pages{display:flex;gap:var(--space-2);overflow-x:auto;margin-top:var(--space-3);min-height:8px}
.pages button{flex:0 0 auto;width:64px;height:84px;border:2px solid transparent;border-radius:var(--radius-sm);padding:0;overflow:hidden;cursor:pointer;background:var(--color-offset);position:relative}
.pages button.sel{border-color:var(--color-primary)}
.pages img{width:100%;height:100%;object-fit:cover;display:block}
.pages .pn{position:absolute;bottom:2px;right:4px;font-size:var(--text-xs);font-family:var(--font-mono);background:rgba(255,255,255,.85);padding:0 4px;border-radius:3px}
.editor-empty{display:flex;align-items:center;justify-content:center;min-height:300px;text-align:center}
.canvas-wrap{position:relative;background:var(--color-offset);border-radius:var(--radius-sm);display:flex;justify-content:center;padding:var(--space-3);touch-action:none}
.canvas-wrap canvas{max-width:100%;max-height:52vh;display:block;box-shadow:var(--shadow);background:#fff}
.crop-box{position:absolute;border:2px solid var(--color-primary);background:rgba(44,90,69,.12);box-shadow:0 0 0 9999px rgba(0,0,0,.35);pointer-events:none}
.toolbar{display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-4) 0}
.seg{display:inline-flex;background:var(--color-offset);border-radius:var(--radius-sm);padding:3px}
.seg button{border:0;background:none;padding:var(--space-1) var(--space-3);border-radius:4px;font-size:var(--text-xs);cursor:pointer;color:var(--color-muted);min-height:30px}
.seg button.on{background:var(--color-surface-2);color:var(--color-text);box-shadow:var(--shadow)}
.save-form{border-top:1px solid var(--color-divider);padding-top:var(--space-4)}
.suggest{background:var(--color-primary-soft);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3);font-size:var(--text-sm)}
.suggest label{flex-direction:row;align-items:center;gap:var(--space-2);color:var(--color-text);font-size:var(--text-sm);margin-top:var(--space-2)}
.suggest input{width:auto;min-height:0}

/* docs */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4)}
.doc{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.doc .thumb{aspect-ratio:3/4;background:var(--color-offset);overflow:hidden}
.doc .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.doc .meta{padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);flex:1}
.doc .meta strong{font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc .meta span{font-size:var(--text-xs);color:var(--color-muted)}
.doc .acts{display:flex;gap:var(--space-1);padding:0 var(--space-3) var(--space-3);flex-wrap:wrap}
.doc .acts .btn{flex:1;padding:var(--space-1) var(--space-2);min-height:32px;font-size:var(--text-xs)}

/* import */
.drop{text-align:center;padding:var(--space-12) var(--space-6);border-style:dashed;border-width:2px;border-color:var(--color-border);display:flex;flex-direction:column;gap:var(--space-3)}
.drop.over{border-color:var(--color-primary);background:var(--color-primary-soft)}
#mapper{margin-top:var(--space-6)}
#mapper .h2{margin-bottom:var(--space-1)}
#mapper .field-row:first-of-type{margin-top:var(--space-4)}
.preview-table{overflow:auto;max-height:340px;border:1px solid var(--color-divider);border-radius:var(--radius-sm);margin-bottom:var(--space-4)}
.preview-table table{width:100%;border-collapse:collapse;font-size:var(--text-xs);font-family:var(--font-mono)}
.preview-table th,.preview-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-divider);text-align:left;white-space:nowrap}
.preview-table th{position:sticky;top:0;background:var(--color-surface-2);font-family:var(--font-body);font-weight:500;color:var(--color-muted)}
.preview-table tr.skip td{color:var(--color-faint);text-decoration:line-through}
.preview-table td.num{text-align:right}

/* guide */
.guide{display:grid;gap:var(--space-4);max-width:820px}
.step{position:relative;padding-left:calc(var(--space-6) + 40px)}
.step-n{position:absolute;left:var(--space-6);top:var(--space-6);width:28px;height:28px;border-radius:50%;background:var(--color-text);color:var(--color-bg);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--text-xs)}
.step p,.step ul{margin-top:var(--space-3);max-width:68ch;font-size:var(--text-sm)}
.step ul{padding-left:var(--space-5)}
.step li{margin-bottom:var(--space-2)}

/* modal */
.modal{border:0;padding:0;border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);width:min(960px,calc(100vw - 2rem));max-height:calc(100vh - 2rem);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal.narrow{width:min(560px,calc(100vw - 2rem))}
.modal::backdrop{background:rgba(31,29,24,.45)}
.modal-inner{padding:var(--space-6)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}
.tx-layout{display:grid;grid-template-columns:1fr 340px;gap:var(--space-6);align-items:start}
.tx-form{display:flex;flex-direction:column;gap:var(--space-3)}
.slip-attach{border:1px dashed var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:var(--text-sm)}
.slip-attach img{width:56px;height:72px;object-fit:cover;border-radius:4px;border:1px solid var(--color-divider)}
.slip-attach .row{justify-content:space-between}
.link-list{display:flex;flex-direction:column;gap:var(--space-2);max-height:60vh;overflow:auto}
.link-item{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--color-divider);border-radius:var(--radius-sm);background:var(--color-surface-2);cursor:pointer;text-align:left;width:100%;font-size:var(--text-sm)}
.link-item:hover{border-color:var(--color-primary)}
.link-item .num{font-family:var(--font-mono)}

/* the slip (record preview) */
.slip{background:#fff;color:#111;font-family:var(--font-mono);font-size:12px;line-height:1.55;padding:22px 20px 28px;box-shadow:var(--shadow);position:relative;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x}
.slip .c{text-align:center}
.slip .t{font-weight:600;font-size:13px;letter-spacing:.06em}
.slip .hr{border-top:1px dashed #999;margin:10px 0}
.slip .l{display:flex;justify-content:space-between;gap:12px}
.slip .l span:last-child{text-align:right;word-break:break-word}
.slip .big{font-size:16px;font-weight:600}
.slip .note{font-size:10.5px;color:#555}
.slip .stamp{display:inline-block;border:1.5px solid currentColor;padding:1px 8px;border-radius:3px;font-size:10.5px;letter-spacing:.08em;margin-top:6px}
.slip .stamp.ok{color:#2c5a45}
.slip .stamp.miss{color:#9a4a1c}

.toast{position:fixed;bottom:var(--space-6);left:50%;transform:translateX(-50%) translateY(20px);background:var(--color-text);color:var(--color-bg);padding:var(--space-3) var(--space-5);border-radius:var(--radius-sm);font-size:var(--text-sm);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:calc(100vw - 2rem)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* mobile cards for register */
.tx-cards{display:none}
@media (max-width:860px){
  .topbar{flex-wrap:wrap;gap:var(--space-2);padding:var(--space-3) var(--space-4)}
  .tabs{order:3;flex-basis:100%}
  .top-actions{margin-left:auto}
  main{padding:var(--space-6) var(--space-4) var(--space-16)}
  .kpis{grid-template-columns:1fr 1fr}
  .filters{grid-template-columns:1fr 1fr}
  .filters input{grid-column:1/-1}
  .scan-grid{grid-template-columns:1fr}
  .camera{aspect-ratio:4/5}
  .tx-layout{grid-template-columns:1fr}
  .field-row.four{grid-template-columns:1fr 1fr}
  .field-row.three{grid-template-columns:1fr 1fr}
  .field-row.three label:first-child{grid-column:1/-1}
  .tx-table{display:none}
  .tx-cards{display:flex;flex-direction:column;gap:var(--space-2)}
  .tx-card{display:grid;grid-template-columns:1fr auto;gap:var(--space-1) var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-sm);cursor:pointer;text-align:left;width:100%}
  .tx-card .num{font-family:var(--font-mono);font-weight:600;text-align:right}
  .tx-card .sub{font-size:var(--text-xs);color:var(--color-muted);font-family:var(--font-mono)}
  .step{padding-left:var(--space-6);padding-top:calc(var(--space-6) + 36px)}
  .modal-inner{padding:var(--space-4)}
}
@media (min-width:861px){.foot .btn{display:none}}
.foot{max-width:1200px;margin:0 auto;padding:0 var(--space-6) var(--space-10);display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;color:var(--color-muted);font-size:var(--text-xs)}
@media (max-width:860px){.top-actions .ghost{display:none}.foot{padding:0 var(--space-4) var(--space-10)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== Commed v2 additions ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.spacer{flex:1}
.sp{margin-top:var(--space-3)}
.ws{flex-direction:row;align-items:center}
.ws select{min-height:34px;padding:var(--space-1) var(--space-2);font-size:var(--text-xs);max-width:220px}
.ws-client{font-size:var(--text-xs);font-weight:600;background:var(--color-primary-soft);color:var(--color-primary);padding:2px var(--space-3);border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.count{display:inline-flex;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--color-warn);color:#fff;font-size:11px;align-items:center;justify-content:center;font-family:var(--font-mono);margin-left:2px}
/* home, CamScanner-style */
.hero{text-align:center;padding:var(--space-8) var(--space-6);border:2px dashed var(--color-border);background:var(--color-surface);margin-bottom:var(--space-6)}
.hero.over{border-color:var(--color-primary);background:var(--color-primary-soft)}
.hero-t{font-size:var(--text-lg);color:var(--color-muted);margin-bottom:var(--space-5)}
.hero-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);max-width:880px;margin:0 auto var(--space-3)}
.big-act{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--space-3);background:var(--color-surface-2);border:1px solid var(--color-divider);border-radius:var(--radius);padding:var(--space-5) var(--space-4);font-size:var(--text-base);font-weight:500;color:var(--color-text);cursor:pointer;box-shadow:var(--shadow);transition:border-color .15s,transform .1s}
.big-act:hover{border-color:var(--color-primary)}
.big-act:active{transform:scale(.98)}
.ic{width:28px;height:28px;border-radius:7px;display:inline-block;flex:0 0 auto;background:var(--color-primary) center/18px no-repeat}
.ic-cam{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M4 7h3l2-2h6l2 2h3v12H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E")}
.ic-img{background-color:#2f6db3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M4 16l5-5 4 4 3-3 4 4'/%3E%3C/svg%3E")}
.ic-file{background-color:#3557c4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M14 3v4h4M10 12h5M10 16h5'/%3E%3C/svg%3E")}
.tools{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;padding-bottom:var(--space-6);border-bottom:1px solid var(--color-divider);margin-bottom:var(--space-5)}
.tool{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);border:0;background:none;cursor:pointer;font-size:var(--text-sm);color:var(--color-text);min-width:84px}
.tool .ti{width:52px;height:52px;border-radius:14px;background:var(--color-primary-soft);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-mono);font-size:1.1rem;transition:transform .1s}
.tool:hover .ti{transform:translateY(-2px)}
.recent-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
.recent-head .row input,.recent-head .row select{min-height:34px;width:auto}
.doc{cursor:pointer;transition:border-color .15s}
.doc:hover{border-color:var(--color-primary)}
.doc .badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.filetype{display:flex;align-items:center;justify-content:center;height:100%;font-family:var(--font-mono);font-weight:600;color:var(--color-muted);font-size:1.2rem}
.doc-list{display:flex;flex-direction:column;gap:var(--space-2)}
.doc-list .doc{flex-direction:row;align-items:center}
.doc-list .doc .thumb{width:56px;aspect-ratio:3/4;flex:0 0 auto;margin:var(--space-2)}
.doc-list .doc .acts{padding:0 var(--space-3)}
.doc-list .doc .acts .btn{flex:none}
/* scanner */
.live-quad{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.camera.live .live-quad.on{display:block}
.live-quad polygon{fill:rgba(46,204,113,.18);stroke:#2ecc71;stroke-width:3;stroke-linejoin:round;transition:all .12s linear}
.live-quad.ready polygon{fill:rgba(46,204,113,.3);stroke:#7dffb0;stroke-width:4}
.cam-hint{position:absolute;top:56px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;font-size:var(--text-xs);padding:4px 12px;border-radius:999px;white-space:nowrap;pointer-events:none}
.camera:not(.live) .cam-hint{display:none}
.camera-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:var(--space-3);background:linear-gradient(rgba(0,0,0,.5),transparent)}
.pill{flex-direction:row;align-items:center;gap:6px;background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:4px 12px;font-size:var(--text-xs);cursor:pointer}
.pill input{width:auto;min-height:0;accent-color:#2ecc71}
.pill.on{background:#f5c542;color:#111}
.camera.flash::after{content:"";position:absolute;inset:0;background:#fff;opacity:.7;pointer-events:none}
.canvas-wrap{position:relative}
.qsvg{position:absolute;left:0;top:0;pointer-events:none}
.qsvg polygon{fill:rgba(44,90,69,.15);stroke:#2ecc71;stroke-width:2}
.qh{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:3px solid #2ecc71;background:rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:grab;touch-action:none;padding:0}
.qh.drag{cursor:grabbing;transform:scale(1.25)}
.qh:focus-visible{outline:3px solid var(--color-primary)}
.inp-btn{display:flex;gap:4px}
.inp-btn .btn{min-height:40px;padding:0 var(--space-2)}
.vcheck{border:1px solid var(--color-divider);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin:0 0 var(--space-3)}
.vcheck legend{font-size:var(--text-xs);color:var(--color-muted);padding:0 4px}
.vcheck label.check{margin:var(--space-1) 0;font-size:var(--text-xs)}
.vc-out{margin-top:var(--space-2);display:flex;gap:var(--space-2);align-items:baseline;flex-wrap:wrap}
.save-form{display:flex;flex-direction:column}
.save-form>label{margin-bottom:var(--space-3)}
/* share sheet */
.share-file{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3);background:var(--color-surface-2);border:1px solid var(--color-divider);border-radius:var(--radius-sm);margin-bottom:var(--space-4);word-break:break-all}
.share-acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-bottom:var(--space-3)}
.share-acts .btn.primary{grid-column:1/-1;min-height:48px;font-size:var(--text-base)}
.doc-preview{display:flex;flex-direction:column;gap:var(--space-2);max-height:70vh;overflow:auto}
.doc-preview img{width:100%;border:1px solid var(--color-divider);border-radius:4px;background:#fff}
.filebox{padding:var(--space-10);text-align:center;background:var(--color-offset);border-radius:var(--radius-sm);font-family:var(--font-mono);font-weight:600}
.results{margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}
.res{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-3);align-items:center;padding:var(--space-2) var(--space-3);border-left:3px solid var(--color-primary);background:var(--color-surface-2);border-radius:4px}
.res span{grid-column:1;font-size:var(--text-sm);color:var(--color-muted)}
.res .btn{grid-row:1/3;grid-column:2}
.res.warn{border-color:var(--color-warn)}
.res.bad{border-color:var(--color-danger)}
.cloud-card{margin-bottom:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.cloud-card .row{align-items:flex-end}
.mini{width:36px;height:46px;object-fit:cover;border-radius:4px;border:1px solid var(--color-divider)}
.link-item .row{flex-wrap:nowrap}
#pickBody textarea{font-family:var(--font-mono);font-size:var(--text-xs)}
.step code{font-family:var(--font-mono);font-size:.9em;background:var(--color-offset);padding:0 4px;border-radius:3px}
.slip-attach .row{gap:var(--space-2)}
body.client-mode .tabs button[data-view="import"]::after{content:""}
@media (max-width:860px){
  .hero{padding:var(--space-5) var(--space-3)}
  .hero-t{font-size:var(--text-sm);margin-bottom:var(--space-3)}
  .hero-acts{gap:var(--space-2)}
  .big-act{flex-direction:column;padding:var(--space-3) var(--space-2);font-size:var(--text-xs);gap:var(--space-2)}
  .tools{gap:var(--space-2)}
  .tool{min-width:62px;font-size:var(--text-xs)}
  .tool .ti{width:44px;height:44px}
  .ws{order:2;margin-left:auto}
  .ws select{max-width:46vw}
  .recent-head .row{width:100%}
  .recent-head .row input{flex:1}
  .share-acts{grid-template-columns:1fr}
  .doc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.head-actions select,.head-actions input{width:auto}

.pool-top{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-3);flex-wrap:wrap}
.pool-top input[type=search]{flex:1;min-width:180px}
.pool-top label.check{margin:0}
.link-list.pool{max-height:52vh}
.link-item[hidden]{display:none}
.link-list.pool label.link-item{flex-direction:row;align-items:center;justify-content:space-between;color:var(--color-text);font-size:var(--text-sm);font-weight:400}
.link-list.pool label.link-item strong{font-weight:600}