/* MicroSaaS Suite — design tokens + shared styles. Mobile-first, 360px baseline. */
:root{
  --primary:#1565c0; --primary-dark:#0d47a1; --accent:#00897b;
  --danger:#d32f2f; --warn:#f9a825; --ok:#2e7d32;
  --bg:#eef1f5; --card:#fff; --text:#1b1b1b; --muted:#6b7280; --line:#e2e5ea;
  --radius:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  font-size:15px; line-height:1.45;
}
/* App frame */
.frame{
  max-width:430px; margin:0 auto; min-height:100dvh; background:#fff;
  position:relative; display:flex; flex-direction:column;
}
/* UI.screen nests .frame inside #app.frame: the inner frame must never exceed its parent */
.frame>.frame{max-width:100%}
@media (min-width:480px){
  .frame{box-shadow:0 0 24px rgba(0,0,0,.12)}
  body{padding:0}
}
/* Header */
.hdr{
  position:sticky; top:0; z-index:30; min-height:56px;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; gap:4px; padding:0 8px;
}
.hdr-back{
  min-width:44px; min-height:44px; border:0; background:transparent; color:#fff;
  font-size:22px; cursor:pointer; border-radius:8px; display:flex; align-items:center; justify-content:center;
}
.hdr-back:active{background:rgba(255,255,255,.15)}
.hdr-title{flex:1; font-size:17px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:6px 4px}
.hdr-actions{display:flex; gap:2px; align-items:center}
.iconbtn{
  min-width:44px; min-height:44px; border:0; background:transparent; color:#fff;
  font-size:20px; cursor:pointer; border-radius:8px;
}
.iconbtn:active{background:rgba(255,255,255,.15)}
/* Content */
.content{padding:16px; padding-bottom:88px; flex:1}
/* Tab bar */
.tabbar{
  position:sticky; bottom:0; z-index:30; background:#fff; border-top:1px solid var(--line);
  display:flex; margin-top:auto;
}
.tab{
  flex:1; border:0; background:#fff; color:var(--muted); cursor:pointer;
  min-height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:11px; position:relative;
}
.tab .tab-ic{font-size:21px; line-height:1}
.tab.active{color:var(--primary); font-weight:600}
.tab-badge{
  position:absolute; top:6px; right:calc(50% - 26px);
  background:var(--danger); color:#fff; font-size:10px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px;
}
/* Cards & rows */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 1px 3px rgba(0,0,0,.06); padding:14px; margin-bottom:12px}
.card-t{font-size:15px; font-weight:600; margin:0 0 8px}
.row{
  display:flex; align-items:center; gap:12px; padding:12px 4px; min-height:56px;
  border-bottom:1px solid var(--line); cursor:pointer; background:#fff; width:100%;
  border-left:0; border-right:0; border-top:0; text-align:left; font:inherit; color:inherit;
}
.row:last-child{border-bottom:0}
.row-main{flex:1; min-width:0}
.row-title{font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
.row-sub{color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
.row-meta{color:var(--muted); font-size:12px; margin-top:2px; display:block}
.chev{color:var(--muted); font-size:18px; flex-shrink:0}
/* Badges */
.badge{display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--line); color:var(--text)}
.b-green{background:#e6f4ea; color:var(--ok)}
.b-amber{background:#fef3d6; color:#8a6d00}
.b-red{background:#fdecea; color:var(--danger)}
.b-blue{background:#e3f0fd; color:var(--primary-dark)}
.b-grey{background:var(--line); color:var(--muted)}
/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 18px; border-radius:10px; border:1px solid transparent;
  font-size:15px; font-weight:600; cursor:pointer; background:#f2f4f7; color:var(--text);
}
.btn:active{opacity:.85}
.btn-primary{background:var(--primary); color:#fff}
.btn-danger{background:var(--danger); color:#fff}
.btn-ghost{background:transparent; border-color:var(--line)}
.btn-block{width:100%}
.btn-row{display:flex; gap:10px; margin-top:12px}
.btn-row .btn{flex:1}
.btn-sm{min-height:36px; padding:6px 12px; font-size:13px; border-radius:8px}
.btn[disabled]{opacity:.5; cursor:default}
/* Toasts */
.toast-wrap{position:fixed; top:12px; left:0; right:0; z-index:200; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 16px}
.toast{
  pointer-events:auto; max-width:420px; width:100%; background:#212121; color:#fff;
  padding:12px 16px; border-radius:10px; font-size:14px; box-shadow:0 4px 16px rgba(0,0,0,.25);
  animation:tin .25s ease-out;
}
.t-ok{background:var(--ok)} .t-err{background:var(--danger)} .t-info{background:var(--primary)}
@keyframes tin{from{transform:translateY(-8px); opacity:0}to{transform:none; opacity:1}}
/* Bottom sheet */
.sheet-bg{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:150; display:flex; align-items:flex-end; justify-content:center}
.sheet{background:#fff; width:100%; max-width:430px; border-radius:16px 16px 0 0; max-height:85dvh; overflow:auto; padding:8px 16px 24px; animation:sup .25s ease-out}
.sheet-handle{width:44px; height:5px; border-radius:3px; background:var(--line); margin:8px auto 12px}
.sheet-t{font-size:16px; font-weight:700; margin:0 0 12px}
@keyframes sup{from{transform:translateY(24px); opacity:0}to{transform:none; opacity:1}}
/* Modal */
.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:160; display:flex; align-items:center; justify-content:center; padding:20px}
.modal{background:#fff; border-radius:var(--radius); width:100%; max-width:380px; padding:20px; animation:tin .2s ease-out}
.modal-t{font-size:17px; font-weight:700; margin:0 0 8px}
.modal-b{font-size:14px; color:var(--text); margin-bottom:16px}
.pbar{height:8px; background:var(--line); border-radius:4px; overflow:hidden; margin:12px 0}
.pbar>i{display:block; height:100%; background:var(--primary); width:0; transition:width .2s}
/* Form fields */
.fld{margin-bottom:14px}
.fld>label{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
.fld input,.fld select,.fld textarea{
  width:100%; min-height:44px; padding:10px 12px; font-size:15px; font-family:inherit;
  border:1px solid #c9ced6; border-radius:8px; background:#fff; color:var(--text);
}
.fld textarea{min-height:88px; resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--primary); outline-offset:0; border-color:var(--primary)}
.fld-err{color:var(--danger); font-size:12px; margin-top:4px}
.fld-hint{color:var(--muted); font-size:12px; margin-top:4px}
/* Empty state */
.empty{text-align:center; padding:48px 24px}
.empty-icon{font-size:48px; margin-bottom:12px}
.empty .card-t{font-size:17px}
/* Search */
.searchbar{position:sticky; top:56px; z-index:20; background:#fff; padding:8px 0; margin:-8px 0 8px}
.searchbar input{width:100%; min-height:44px; padding:10px 14px; border:1px solid #c9ced6; border-radius:999px; font-size:15px; background:#f6f8fa}
/* Chips */
.chips{display:flex; gap:8px; overflow-x:auto; padding:4px 0 8px; -webkit-overflow-scrolling:touch}
.chip{
  flex-shrink:0; min-height:36px; padding:6px 14px; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-size:13px; cursor:pointer;
}
.chip.on{background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600}
/* AI banner + low confidence */
.ai-banner{background:#fff8e1; border:1px solid #ffe082; border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:12px; color:#5d4a00}
.lowconf{background:#fff3b0 !important; box-shadow:0 0 0 2px #ffd54f inset}
/* Offline bar */
.offline-bar{position:fixed; top:0; left:0; right:0; z-index:100; background:#212121; color:#fff; text-align:center; font-size:13px; padding:8px}
/* Stats */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px; text-align:center}
.stat-v{font-size:22px; font-weight:700; color:var(--primary)}
.stat-l{font-size:12px; color:var(--muted); margin-top:2px}
/* Tables & key-value */
.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th,.tbl td{padding:8px 6px; border-bottom:1px solid var(--line); text-align:left}
.tbl th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase}
.kv{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px}
.kv:last-child{border-bottom:0}
.kv>span:first-child{color:var(--muted)}
.kv>span:last-child{text-align:right; font-weight:500}
/* FAB */
.fab{
  position:fixed; right:calc(50% - 215px + 16px); bottom:80px; z-index:40;
  width:56px; height:56px; border-radius:50%; border:0; background:var(--primary); color:#fff;
  font-size:26px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:480px){ .fab{right:16px} }
/* Segmented control */
.seg{display:flex; background:var(--bg); border-radius:10px; padding:4px; gap:4px; margin-bottom:12px}
.seg button{flex:1; border:0; background:transparent; min-height:40px; border-radius:8px; font-size:14px; cursor:pointer; color:var(--muted)}
.seg button.on{background:#fff; color:var(--primary); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* Text helpers */
.link{color:var(--primary); text-decoration:none; font-weight:600; cursor:pointer; background:none; border:0; padding:0; font-size:inherit}
.muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center}
.mt{margin-top:12px} .mb{margin-bottom:12px}
/* Splash */
.splash{
  min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--primary); color:#fff; text-align:center; padding:32px; gap:12px;
}
.splash .logo{font-size:56px}
.splash h1{margin:0; font-size:26px}
.splash p{margin:0; opacity:.9; font-size:15px}
.spinner{width:36px; height:36px; border:4px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; margin-top:16px}
@keyframes spin{to{transform:rotate(360deg)}}
/* OTP */
.otp{font-size:24px; letter-spacing:10px; text-align:center; font-weight:700}
/* Home app grid */
.app-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.app-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 12px;
  cursor:pointer; text-align:left; font:inherit; color:inherit; min-height:132px;
  display:flex; flex-direction:column; gap:4px; box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.app-card:active{transform:scale(.98)}
.app-card .app-ic{font-size:28px}
.app-card .app-nm{font-weight:700; font-size:14px}
.app-card .app-ds{font-size:12px; color:var(--muted); flex:1}
.app-card .app-ct{font-size:12px; font-weight:600; color:var(--primary)}
.greet{font-size:20px; font-weight:700; margin:4px 0 2px}
/* FAQ accordion */
.acc{border:1px solid var(--line); border-radius:var(--radius); margin-bottom:8px; overflow:hidden; background:#fff}
.acc-h{width:100%; background:#fff; border:0; padding:14px; font-size:15px; font-weight:600; text-align:left; cursor:pointer; display:flex; justify-content:space-between; gap:8px; min-height:52px; align-items:center; font-family:inherit; color:inherit}
.acc-b{display:none; padding:0 14px 14px; font-size:14px; color:var(--text)}
.acc.open .acc-b{display:block}
.acc.open .acc-h .acc-ar{transform:rotate(180deg)}
.acc-ar{color:var(--muted)}
/* Print */
@media print{
  .hdr,.tabbar,.fab,.noprint,.offline-bar,.toast-wrap,.sheet-bg,.modal-bg{display:none !important}
  .frame{max-width:none; box-shadow:none}
  body{background:#fff}
  .content{padding:0}
}
/* ---- App-compat classes (used by app modules; mapped to shared tokens) ---- */
.sec-t,.section-title,.card-title{font-size:15px; font-weight:700; margin:2px 0 10px}
.list{margin:0; padding:0; list-style:none}
.list-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin-bottom:8px}
.list-title{font-weight:700; font-size:15px}
.list-sub{font-size:13px; color:var(--muted); margin-top:2px}
.card-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.card-btn{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px; text-align:left; font:inherit; color:inherit; cursor:pointer; min-height:44px}
.card-icon{font-size:28px}
.alert-card{background:#fff8e1; border:1px solid #ffe082; border-radius:var(--radius); padding:12px; margin-bottom:12px}
.demo-note{background:#e3f2fd; border:1px solid #90caf9; border-radius:var(--radius); padding:10px 12px; font-size:13px; margin-bottom:12px}
.form-err{color:var(--danger); font-size:12px; margin-top:4px}
.fld-req{color:var(--danger)}
.fld-row{display:flex; gap:8px}
.fld-row .fld{flex:1}
.check-row,.ai-row,.ss-row,.order-row,.rc-line,.row-static,.badge-row{display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line)}
.bar-row{display:flex; align-items:center; gap:8px; margin:6px 0}
.bar-l{width:34px; font-size:13px; color:var(--muted)}
.bar-t{flex:1; background:#eef1f5; border-radius:6px; height:10px; overflow:hidden}
.bar-f{display:block; height:100%; background:var(--primary); border-radius:6px}
.bar-v{width:40px; text-align:right; font-size:13px}
.stars{color:#f9a825; font-size:18px; letter-spacing:2px}
.stat-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px; text-align:center}
.stat-i{font-size:22px}
.stat-label{font-size:12px; color:var(--muted)}
.stat-value{font-size:20px; font-weight:700}
.table,.pe-table{width:100%; border-collapse:collapse; font-size:13px}
.table th,.table td,.pe-table th,.pe-table td{border:1px solid var(--line); padding:8px; text-align:left}
.table th,.pe-table th{background:#f5f7fa; font-size:12px}
.table-wrap{overflow-x:auto; margin:8px 0}
.toolbar{display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap}
.msg-preview,.preview-bubble{background:#f5f7fa; border:1px dashed var(--line); border-radius:var(--radius); padding:12px; font-size:14px; margin:10px 0; white-space:pre-wrap}
.risk-card{background:#fff; border:1px solid var(--line); border-left:4px solid var(--warn); border-radius:var(--radius); padding:12px; margin-bottom:12px}
.risk-head{font-weight:700; margin-bottom:6px}
.risk-inline{display:inline-block; margin-left:8px}
.risk-live{font-size:13px; color:var(--muted)}
.reason-list{margin:6px 0 6px 18px; font-size:13px}
.red{color:var(--danger)}
.wrap{flex-wrap:wrap}
.btn-small{min-height:36px; padding:6px 12px; font-size:13px}
.btn-danger-outline{background:#fff; color:var(--danger); border:1px solid var(--danger)}
.input{width:100%; min-height:44px; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:15px; font-family:inherit}
.order-head{font-weight:700; font-size:15px; margin-bottom:4px}
/* Print/quotation document blocks */
.vq-doc,.pe-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.vq-doc-head,.vq-doc-title{font-size:18px; font-weight:700; margin-bottom:4px}
.vq-meta{font-size:13px; color:var(--muted); margin-bottom:10px}
.vq-totals{margin-top:10px; font-size:14px}
.vq-grand{font-size:18px; font-weight:700}
.vq-li{border-bottom:1px solid var(--line); padding:8px 0}
.vq-li-r,.vq-li-amt{text-align:right}
.vq-row,.vq-3col{display:flex; gap:8px}
.vq-row-top{display:flex; justify-content:space-between; gap:8px; align-items:center}
.vq-row-n{font-weight:700}
.vq-amt{text-align:right; font-weight:700}
.vq-flag{margin:8px 0}
.vq-hist{margin-top:12px}
.vq-sheet{padding:4px 0}
.vq-sign{margin-top:24px; font-size:13px; color:var(--muted)}
.phead{font-size:18px; font-weight:700; margin-bottom:8px}
.pbody{font-size:14px}
.pfoot{margin-top:12px; font-size:12px; color:var(--muted)}
.pe-warn{background:#fff8e1; border:1px solid #ffe082; border-radius:8px; padding:8px 10px; font-size:13px; margin:8px 0}
.pe-total{font-weight:700; font-size:16px; text-align:right}
.pe-in{width:100%; min-height:40px; border:1px solid var(--line); border-radius:8px; padding:8px; font-size:14px; font-family:inherit}
.pe-imgwrap{text-align:center; margin:8px 0}
.pe-imgwrap img{max-width:100%; border-radius:8px}
.pe-row{display:flex; gap:6px; align-items:center; margin-bottom:6px}
.pe-rowhead{font-weight:700; font-size:13px}
.pe-nums{font-variant-numeric:tabular-nums}
.pe-num{text-align:right}
.pe-fix{white-space:nowrap}
.pe-pre{background:#f5f7fa; border-radius:8px; padding:10px; font-size:13px; white-space:pre-wrap}
.pe-kv{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:14px}