/* Maharaja Pawn Broking styles.
   Simple, in the Apple way: white page, a light grey list of buttons on the right, thin grey lines between things,
   one accent colour (Settings → Look), no big rounded boxes and no gradients. Prints keep the shop's bill format. */
/* Inter, served from this server (no Google Fonts). Licence: /fonts/Inter-LICENSE.txt (SIL Open Font License). */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --accent:#9B1B30; --gold:#B8860B;
  --accent-soft:color-mix(in srgb,var(--accent) 9%,#fff); --ring:color-mix(in srgb,var(--accent) 24%,transparent);
  --page:#FFFFFF; --side:#F5F5F7; --fill:#F2F2F5; --ink:#1D1D1F; --muted:#6E6E73; --faint:#AEAEB2;
  --line:#D2D2D7; --hair:#E8E8ED;
  --ok:#1E8E3E; --ok-bg:#E9F6EC; --bad:#D70015; --bad-bg:#FDEDEE; --warn:#B25000; --warn-bg:#FFF4E5;
  /* charts: c1/c2 = two series, r1…r5 = light → dark scale of the accent */
  --c1:var(--accent); --c2:var(--gold);
  --r1:color-mix(in srgb,var(--accent) 30%,#fff); --r2:color-mix(in srgb,var(--accent) 60%,#fff); --r3:var(--accent); --r4:color-mix(in srgb,var(--accent) 78%,#000); --r5:color-mix(in srgb,var(--accent) 58%,#000);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --mono:var(--font);
  color-scheme:light;
}
:root[data-theme="olive"]{--accent:#5A6B2A}
:root[data-theme="peacock"]{--accent:#0E6A78}
:root[data-theme="kanchi"]{--accent:#86175E}
:root[data-theme="sandal"]{--accent:#87603C}
:root[data-theme="apple"]{--accent:#007AFF;--gold:#FF9500}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%}
body{margin:0;min-height:100%;background:var(--page);color:var(--ink);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;letter-spacing:-.003em}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{line-height:1.2}
h3{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 8px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.note{font-size:13px;color:var(--muted);margin:6px 0}
.spacer,.grow{flex:1}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::placeholder{color:var(--faint)}
kbd{font-size:11px;opacity:.6}
b.warn{color:var(--bad)}

/* ---------- controls ---------- */
input,select,textarea{height:32px;width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 10px}
textarea{height:auto;padding:8px 10px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);background:var(--focusfill,#FFFCEB)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 5px var(--ring)}
input[readonly],input:disabled,select:disabled,textarea:disabled{background:var(--fill);border-color:transparent;color:var(--ink);box-shadow:none}
input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--accent)}
input.big{height:44px;font-size:22px;font-weight:600}
input.sm{width:72px!important;flex:none}input.md{width:120px!important;flex:none}
input.search{max-width:560px}
.btn{height:32px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--side)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08);background:var(--accent)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,#fff)}
.btn.danger:hover{background:var(--bad-bg)}
.btn.small{height:28px;padding:0 10px;font-size:13px}
.btn.wide{width:100%;height:40px;font-size:15px;margin-top:12px}
.btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:.4;cursor:default;filter:none}
.lnk,.linkbtn{background:none;border:0;padding:2px 4px;color:var(--accent);font-size:13px;cursor:pointer;white-space:nowrap}
.lnk:hover,.linkbtn:hover{text-decoration:underline}.lnk.bad{color:var(--bad)}
.x{background:none;border:0;color:var(--faint);cursor:pointer;font-size:13px;padding:2px 6px}.x:hover{color:var(--bad)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.row.end{justify-content:flex-end}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.bar>label{font-size:13px;color:var(--muted)}
.inl{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}.inl input{width:auto}
.chk{display:inline-flex!important;flex-direction:row!important;gap:6px;align-items:center;font-size:13px;color:var(--ink)!important;white-space:nowrap}
.bar select,.bar input:not(.search):not([type=checkbox]){width:auto}
/* segmented control */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:2px;background:#EBEBF0;border-radius:9px}
.seg button{border:0;background:none;height:28px;padding:0 14px;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--accent)}
.seg button[aria-pressed=true]{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.14)}
/* switches */
.tgls{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 32px;max-width:920px}
.tgl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid var(--hair);cursor:pointer;font-weight:500}
.tgl select{width:auto;height:28px}
.tgl.off{cursor:default;color:var(--muted)}.tgl.off b{font-size:12.5px;font-weight:500}
.tgl input{appearance:none;-webkit-appearance:none;position:absolute;opacity:0;width:1px;height:1px}
.tgl i{flex:none;width:42px;height:25px;border-radius:13px;background:#E3E3E8;position:relative;transition:background .15s}
.tgl i::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .15s}
.tgl input:checked+i{background:#34C759}.tgl input:checked+i::after{transform:translateX(17px)}
.tgl input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- forms: label on the left, box on the right ---------- */
.frm,.fg{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px 12px;align-items:center}
.frm.wide,.fg{grid-template-columns:150px minmax(0,1fr);max-width:660px}
.frm>label,.frm>.lab,.fg>label,.fg>.lab{font-size:13px;color:var(--muted)}
.frm>*,.fg>*{min-width:0}
.frm .r,.fg .r2{display:flex;gap:8px;align-items:center;min-width:0}
.frm .r>*{min-width:0}
.frm .r .lab{flex:none;font-size:13px;color:var(--muted);padding-left:6px}
.frm .r.two>:first-child{flex:1}.frm .r.two>output:last-child{flex:1}
.frm .r.door>input{width:80px;flex:none}.frm .r.door>.sw{flex:1}
.frm .r.pin>.sw:first-child{flex:1}.frm .r.pin>.sw:last-child{width:110px;flex:none}
.frm .r.unit>input{width:96px;flex:none}.frm .r.unit>span{color:var(--muted);font-size:13px}
.frm select.rel{width:100%}
.fg .two{display:grid;grid-template-columns:118px 1fr;gap:6px}
.fg .r2 input{width:80px}
output.fix{display:flex;align-items:center;min-height:32px;padding:5px 10px;border-radius:8px;background:var(--fill);color:var(--ink);overflow-wrap:anywhere}
output.fix:empty::before{content:"\00a0"}
.pno{display:flex;align-items:center;min-height:32px;padding:0 12px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:15px;letter-spacing:.01em}
.lookup{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.lookup label{font-weight:600}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:21px;font-weight:600;letter-spacing:.06em;background:var(--fill);padding:14px;border-radius:10px;text-align:center;word-break:break-all;user-select:all;max-width:620px}
.codein{text-align:center;letter-spacing:.08em;text-transform:uppercase}
.codein::placeholder{text-transform:none;letter-spacing:.04em}
.check{display:flex;gap:10px;align-items:center;margin-top:12px;font-weight:500}
.pwc{list-style:none;padding:0;margin:8px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:3px 14px;font-size:13px;max-width:660px}
.pwc li{color:var(--muted)}.pwc li::before{content:"○  "}
.pwc li.ok{color:var(--ok)}.pwc li.ok::before{content:"●  "}
.pwbox{display:flex;gap:6px}
.pinbox{font-size:26px;letter-spacing:.5em;text-align:center;height:52px!important;max-width:240px;display:block;margin:6px auto}
.msg{padding:9px 12px;border-radius:8px;margin:10px 0;font-size:13.5px}
.msg.err{background:var(--bad-bg);color:var(--bad)}.msg.ok{background:var(--ok-bg);color:var(--ok)}
.banner{background:var(--bad-bg);color:var(--bad);padding:7px 24px;font-weight:600;font-size:13px}

/* suggestions under a box */
.sw{position:relative;min-width:0}
.sugg{position:absolute;left:0;top:calc(100% + 2px);z-index:40;min-width:100%;width:max-content;max-width:min(520px,92vw);max-height:300px;overflow:hidden auto;scrollbar-width:thin;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 26px rgba(0,0,0,.14);text-align:left}
.sugg,.sugg .sg{color:var(--ink)}
/* compact: one line each (09/10/2026) */
.sg{padding:3px 9px;cursor:pointer;border-bottom:1px solid var(--hair);font-size:13px;line-height:1.35}
.sg:last-child{border-bottom:0}
.sg small{display:inline;margin-left:8px;color:var(--muted);font-size:11.5px}
.sg.on,.sg:hover{background:var(--accent-soft)}
.sg .src{float:right;margin-left:10px;font-size:10.5px;font-weight:600;padding:0 6px;border-radius:6px;background:var(--fill);color:var(--muted)}
.sg .src.ip{background:var(--warn-bg);color:var(--warn)}
.sg mark{background:color-mix(in srgb,var(--gold) 30%,#fff);color:inherit;border-radius:2px}
.sugg:has(.sg-n){max-width:min(720px,94vw)}
.sg:has(.sg-n){display:grid;grid-template-columns:150px 140px 92px 120px 22px;gap:8px;align-items:center;padding:2px 18px 2px 9px;font-size:12.5px;white-space:nowrap}
.sg:has(.sg-n)>span{overflow:hidden;text-overflow:ellipsis}
.sg-n{font-weight:600}.sg-r,.sg-a{color:var(--muted)}.sg-c{text-align:right;color:var(--muted);font-size:11px}

/* ---------- frame ---------- */
.desk{display:grid;grid-template-columns:minmax(0,1fr) 168px;grid-template-rows:46px minmax(0,1fr);height:100vh;height:100dvh}
.tbar{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--hair);font-size:13px;color:var(--muted);z-index:5}
.tbar .nm{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--ink)}
.tbar .tlogo{height:34px;width:auto;display:block}
.tbar .nm-t{font-weight:600}
.clk-l{opacity:.7}
.lg-l{display:none!important}
.tbar .tm{text-align:right}
.desk-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.vbar{margin:0;padding:18px 28px 6px;font-size:24px;font-weight:700;letter-spacing:-.022em}
.vbar:empty{display:none}
#main{flex:1;min-height:0;overflow:auto;padding:10px 28px 24px}
.sbar{display:flex;justify-content:space-between;gap:12px;padding:5px 28px;font-size:12px;color:var(--muted);border-top:1px solid var(--hair);min-height:26px}
.rail2{display:flex;flex-direction:column;gap:2px;padding:14px 10px;background:var(--side);border-left:1px solid var(--hair);overflow:auto}
.rail2 button{flex:none;height:34px;width:100%;border:0;border-radius:8px;background:none;text-align:left;padding:0 12px;font-size:14px;font-weight:500;cursor:pointer}
.rail2 button:hover{background:#E8E8ED}
.rail2 button[aria-current=page]{background:var(--accent);color:#fff}
#ownerBtn.on{background:var(--accent-soft);color:var(--accent)}
#lockBtn{color:var(--muted)}
/* home and log in: the logo and the name of the software */
.home{height:100%;display:grid;place-items:center}
.brand{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.brand .lg{width:min(620px,80vw);height:auto;display:block}
.brand-sub{font-family:Georgia,"Times New Roman",serif;font-size:clamp(13px,1.5vw,17px);letter-spacing:.5em;text-transform:uppercase;color:var(--muted);padding-left:.5em}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}
body:has(.auth){background:var(--side)}
.hero{display:flex;justify-content:center}
.land{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:72px;max-width:1040px;margin:0 auto;align-content:center}
.card{width:min(580px,100%);background:var(--page);border:1px solid var(--hair);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.card>h1{margin:0;padding:26px 26px 0;font-size:24px;font-weight:700;letter-spacing:-.02em}
.card .pb{padding:22px 26px 26px}
.ct{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.auth .fg{grid-template-columns:1fr;gap:4px;max-width:none}.auth .fg>label{margin-top:10px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:20px 0 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--hair)}
.or:empty{gap:0}
.steps{display:flex;gap:18px;margin:12px 0 0;padding:0 26px;list-style:none;counter-reset:s;border-bottom:1px solid var(--hair)}
.steps li{counter-increment:s;color:var(--muted);padding:8px 0;font-size:13px;border-bottom:2px solid transparent}
.steps li::before{content:counter(s) ". "}
.steps li.on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}.steps li.done{color:var(--ok)}
.srow{display:grid;grid-template-columns:1.6fr 70px 120px auto auto;gap:8px;align-items:end;margin-bottom:10px}
.srow label{font-size:12px;color:var(--muted);display:block;margin-bottom:2px}
.srow .prev{font-size:12px;color:var(--muted);padding-bottom:8px}
@media (max-width:860px){.land{grid-template-columns:1fr;gap:28px}}

/* ---------- sections and tables ---------- */
.panel{background:none;border:0;margin:0 0 18px;min-width:0}
.panel>h2,.sec>h3{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px;display:flex;gap:10px;align-items:center}
.panel>h2 .spacer{flex:1}
.pb{padding:0}
.tw{overflow:auto}
table.grid{width:100%;border-collapse:collapse;font-size:13.5px}
.grid th{text-align:left;font-weight:600;font-size:12px;color:var(--muted);padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--page);position:sticky;top:0;z-index:1}
.grid th.num{text-align:right}
.grid td{padding:7px 10px;border-bottom:1px solid var(--hair);vertical-align:middle}
.grid td input,.grid td select{height:30px}
.grid tfoot td{font-weight:600;border-top:1px solid var(--line);border-bottom:0;background:var(--page);position:sticky;bottom:0}
.rows tbody tr{cursor:pointer}.rows tbody tr:hover td{background:var(--side)}
.grid th button{background:none;border:0;font-weight:600;cursor:pointer;padding:0;color:inherit}
tr.grp td{font-weight:600;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding-top:14px;background:none}
tr.ob td{background:var(--side)}
tr.gone td{color:var(--faint)}
tr.old td{background:#FFFBF0}tr.neg td{background:var(--bad-bg)}
td.acts{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
td.det{max-width:520px;white-space:normal;overflow-wrap:anywhere;font-size:13px}
.act{font-weight:600}
.st,.pill,.tag{display:inline-block;padding:1px 8px;border-radius:6px;font-size:12px;font-weight:600;background:var(--fill);color:var(--muted);white-space:nowrap}
.st-OPEN{background:color-mix(in srgb,var(--gold) 16%,#fff);color:color-mix(in srgb,var(--gold) 70%,#000)}
.st-REDEEMED,.pill.ok{background:var(--ok-bg);color:var(--ok)}
.st-AUCTIONED,.pill.bad{background:var(--bad-bg);color:var(--bad)}
.tag.assumed{background:var(--warn-bg);color:var(--warn)}
table.kv{border-collapse:collapse;width:100%;font-size:13.5px}
table.kv th{text-align:left;color:var(--muted);font-weight:400;padding:5px 14px 5px 0;white-space:nowrap;vertical-align:top;border-bottom:1px solid var(--hair)}
table.kv td{padding:5px 0;border-bottom:1px solid var(--hair)}
.mini{display:inline-block;height:8px;border-radius:0 3px 3px 0;background:var(--c1);vertical-align:middle;min-width:1px}

/* ---------- pledge ---------- */
.pl{display:grid;grid-template-columns:minmax(360px,1fr) minmax(360px,1fr);gap:36px;max-width:1240px}
.pl-cust,.pl-jewel{min-width:0}
.pl-jewel>h3:first-child,.card-h{margin-top:0}
.pl-pics{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.pslot{width:92px;position:relative;display:flex;flex-direction:column;gap:4px}
.pslot .ph-img{width:92px;height:92px;border-radius:10px;border:1px solid var(--hair);background:var(--fill);display:grid;place-items:center;overflow:hidden;font-size:0}
.pslot .ph-img img{width:100%;height:100%;object-fit:cover}
.pslot .ph-img:not(:has(img))::before{content:"";width:28px;height:22px;background:var(--faint);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 18%27%3E%3Cpath d=%27M8 0 6.5 2.5H2A2 2 0 0 0 0 4.5v11.5a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V4.5a2 2 0 0 0-2-2h-4.5L16 0zm4 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6z%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 18%27%3E%3Cpath d=%27M8 0 6.5 2.5H2A2 2 0 0 0 0 4.5v11.5a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V4.5a2 2 0 0 0-2-2h-4.5L16 0zm4 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6z%27/%3E%3C/svg%3E") center/contain no-repeat}
.pslot .ph-btns{display:block}
.pslot .cap-btn{width:100%;border:0;background:none;color:var(--accent);font-size:12px;font-weight:500;padding:0;cursor:pointer;text-align:center}
.pslot [data-act=rm]{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:11px;line-height:20px;padding:0;cursor:pointer}
.pslot .ph-prev{position:absolute;left:0;right:0;top:0;height:92px;margin:0;padding:4px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;background:linear-gradient(transparent 40%,rgba(255,255,255,.95));border-radius:10px;font-size:11px}
.pslot .ph-prev img{display:none}
.pslot .ph-prev .btn{height:22px;font-size:11px;padding:0 6px;border-radius:6px}
.pl-items{max-height:44vh;overflow:auto;border-bottom:1px solid var(--line)}
.pl-items table,.rd-items{width:100%;border-collapse:collapse}
.pl-items th{text-align:left;font-weight:600;font-size:12px;color:var(--muted);padding:6px 6px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--page);z-index:1}
.pl-items th.num,.pl-items td.num{text-align:right}
.pl-items td{padding:2px 4px;border-bottom:1px solid var(--hair)}
.pl-items td:first-child{color:var(--muted);width:36px;padding-right:8px}
.pl-items td input{height:30px;border-color:transparent;background:transparent;border-radius:6px}
.pl-items td input:hover{background:var(--side)}
.pl-items td input:focus{background:#fff;border-color:var(--accent)}
.pl-items td:nth-child(3){width:130px}.pl-items td:nth-child(4){width:90px}
.pl-tot{display:flex;gap:12px;align-items:baseline;justify-content:space-between;padding:8px 6px;font-weight:600}
.pl-tot span{color:var(--muted);font-weight:500;font-size:13px}.pl-tot #totC{flex:1;color:var(--muted);font-weight:500;font-size:13px}
.pl-loan{margin-top:16px}
output.paid{font-size:26px;font-weight:700;letter-spacing:-.02em;min-height:36px;display:flex;align-items:center}
.savebtn{min-width:140px;height:36px;font-size:15px}
@media (max-width:1060px){.pl{grid-template-columns:1fr;gap:20px}}

/* ---------- redemption ---------- */
.rd{display:grid;grid-template-columns:minmax(380px,1.15fr) minmax(320px,.85fr);gap:36px;max-width:1240px;align-items:start}
.rd-left,.rd-right{min-width:0}
.rd-items{margin-top:4px;font-size:13px}
.rd-items th{padding:5px 8px}.rd-items td{padding:5px 8px}
.rd-pics{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.rd-pics figure{margin:0;width:88px;display:flex;flex-direction:column;gap:4px}
.rd-pics .ph-img{width:88px;height:88px;border-radius:10px;border:1px solid var(--hair);background:var(--fill);display:grid;place-items:center;overflow:hidden;padding:0}
.rd-pics img{width:100%;height:100%;object-fit:cover}
.rd-pics figcaption{font-size:12px;color:var(--muted);text-align:center}
.rd-cap{cursor:pointer;color:var(--accent);font-size:12px;font-weight:500}
.rd-right{border-left:1px solid var(--hair);padding-left:32px}
.rd-status{margin:0 0 8px;min-height:0}.rd-status:empty{display:none}
.calc{margin-bottom:10px}
.calc .cl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:15px}
.calc .cl>span{color:var(--muted)}
.calc .cl output{font-size:18px;font-weight:600}
.calc .cl.tot{border-bottom:0;padding-top:14px}
.calc .cl.tot>span{color:var(--ink);font-weight:600}
.calc .cl.tot output{font-size:32px;font-weight:700;letter-spacing:-.025em}
.info{width:19px;height:19px;margin-left:6px;padding:0;border-radius:50%;border:1.5px solid var(--accent);background:none;color:var(--accent);font:italic 700 11px/1 Georgia,serif;cursor:pointer;vertical-align:1px}
.info:disabled{opacity:.3;cursor:default}
.info:hover:not(:disabled){background:var(--accent);color:#fff}
#rdPay,#rdMod{margin-bottom:6px}
.adj{min-height:18px;font-size:13px;color:var(--muted);margin:2px 0 10px}.adj.warn{color:var(--warn)}
.rd-right .frm{margin-bottom:8px}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.acts .btn{flex:1 1 auto}
@media (max-width:1060px){.rd{grid-template-columns:1fr}.rd-right{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:16px}}
/* auction */
.ag{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start}
.ag #auF2{margin-top:12px}
@media (max-width:980px){.ag{grid-template-columns:1fr}}

/* ---------- cash ---------- */
.cday{max-width:920px}
.cs{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.cs table{width:100%;border-collapse:collapse;font-size:14px}
.cs th{text-align:left;padding:8px 6px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line)}
.cs td{padding:8px 6px;border-bottom:1px solid var(--hair)}
.cs td small{color:var(--muted)}
.cs td:last-child,.cs th:last-child{width:28px;padding:0 2px;text-align:center}
.cs tr.g{cursor:pointer}.cs tr.g:hover td{background:var(--side)}
.cs tr.g td:first-child{text-decoration:underline dotted;text-underline-offset:3px}
.cs tr.ob td{font-weight:600;background:none}
.cs tr.pad td{border-bottom-color:transparent}
.cs tr.sub td{font-size:13px;color:var(--muted);padding-top:3px;padding-bottom:3px}.cs tr.sub td:first-child{padding-left:22px}
.cs tfoot td{font-weight:600;border-top:1px solid var(--line);border-bottom:0}
.cs-close{display:flex;justify-content:space-between;align-items:baseline;padding:14px 6px 4px;margin-top:6px;border-top:2px solid var(--ink);font-weight:600;font-size:15px}
.cs-close b{font-size:26px;letter-spacing:-.02em}
.cday-add{display:grid;grid-template-columns:240px 150px 1fr auto;gap:8px;margin-top:18px}
@media (max-width:760px){.cs{grid-template-columns:1fr}.cday-add{grid-template-columns:1fr 1fr}}

/* ---------- reports and settings: list on the left ---------- */
.rlay{display:grid;grid-template-columns:184px minmax(0,1fr);gap:32px;align-items:start}
.rside{display:flex;flex-direction:column;gap:1px;position:sticky;top:0;min-height:60vh}
.rside button{text-align:left;height:32px;padding:0 10px;border:0;border-radius:7px;background:none;font-size:14px;cursor:pointer;flex:none}
.rside button:hover{background:var(--side)}
.rside button[aria-current=page]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.rside .sa-btn{height:24px;font-size:11.5px;color:var(--faint)}
.rmain{min-width:0}
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filters label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.filters label.grow{flex:1;min-width:200px}
.filters select,.filters input:not([type=checkbox]){min-width:130px}
.filters .tools{margin-left:auto;display:flex;gap:6px;align-self:flex-end}
.filters .spacer{display:none}
.filters label.chk{align-self:flex-end;height:32px}
.filters input.rq-amt{min-width:0;width:110px;text-align:right}.filters input.rq-pct{width:70px}
#repBody .rsum,#printArea .rsum{display:none}
@media (max-width:760px){.rlay{grid-template-columns:1fr}.rside{position:static;flex-direction:row;flex-wrap:wrap;min-height:0}}
.themes{display:flex;flex-wrap:wrap;gap:8px}
.theme{display:flex;gap:8px;align-items:center;height:34px;padding:0 14px 0 8px;border:1px solid var(--line);border-radius:17px;background:#fff;cursor:pointer;font-weight:500}
.theme i{width:18px;height:18px;border-radius:50%}
.theme[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
/* statements */
.fagrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;margin-bottom:10px}
.stmt{width:100%;border-collapse:collapse;font-size:14px}
.stmt td{padding:6px 2px;border-bottom:1px solid var(--hair)}
.stmt tr.h td{padding-top:16px;font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line)}
.stmt tr:first-child.h td{padding-top:2px}
.stmt td:first-child{padding-left:10px}.stmt tr.h td:first-child{padding-left:2px}
.stmt tr.s-t td{font-weight:600}
.stmt tr.s-g td{font-weight:700;font-size:15px;border-top:1px solid var(--ink);border-bottom:0}
.stmt tr.s-m td{border-bottom:0;padding-top:0;color:var(--muted)}
.stmt td.num{white-space:nowrap}
@media (max-width:900px){.fagrid2{grid-template-columns:1fr}}
/* dashboard */
.adh{margin:6px 0 8px;font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-bottom:16px}
.stat{padding:12px 14px;border:0;border-right:1px solid var(--hair);background:none;text-align:left;font:inherit;color:inherit}
.stat:last-child{border-right:0}
button.stat{cursor:pointer}button.stat:hover{background:var(--side)}
.stat .k{color:var(--muted);font-size:12px}
.stat .v{font-size:22px;font-weight:700;letter-spacing:-.02em}
.stat .s{font-size:12px;color:var(--muted)}
.adgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px;margin-bottom:18px}
.bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;height:160px;align-items:stretch}
.bday{display:flex;flex-direction:column;gap:4px;min-width:0}
.bday .bb{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:2px;border-bottom:1px solid var(--line)}
.bday .bb i{display:block;width:42%;min-height:1px;border-radius:3px 3px 0 0}
.bday span{text-align:center;font-size:11px;color:var(--muted)}
.b-out{background:var(--c1)}.b-in{background:var(--c2)}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.att{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.att button{width:100%;display:flex;gap:14px;align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid var(--hair);padding:9px 4px;cursor:pointer;font:inherit;color:inherit}
.att button:hover{background:var(--side)}
.att b{font-size:20px;min-width:40px;text-align:center}
.att span{display:flex;flex-direction:column;font-weight:500}.att small{font-weight:400;color:var(--muted);font-size:12px}
.att .bad b{color:var(--bad)}.att .warn b{color:var(--warn)}.att .ok b{color:var(--ok)}.att .muted b{color:var(--faint)}
@media (max-width:900px){.adgrid{grid-template-columns:1fr}}
/* charts (Analysis) */
.an-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px;margin-bottom:10px}
.an-grid .wide{grid-column:1/-1}
.chart{padding:4px 0 6px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .ax{font-size:11px;fill:var(--muted)}
.chart .vl{font-size:11px;fill:var(--ink);font-weight:600}
.chart .gl{stroke:var(--hair);stroke-width:1}
.chart .bl{stroke:var(--line);stroke-width:1}
.chart [data-tip]:hover{filter:brightness(1.12)}
.legend2{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin:2px 0 6px}
.legend2 i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.an-tbl{margin-top:8px}.an-tbl[hidden]{display:none}
.panel>h2 .tview{margin-left:auto;height:22px;padding:0 8px;font-size:11.5px;font-weight:600;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--accent);cursor:pointer;text-transform:none;letter-spacing:0}
.hbar{display:grid;grid-template-columns:96px minmax(0,1fr) 150px;gap:8px;align-items:center;font-size:12.5px;padding:3px 0}
.hbar .tr{height:14px;background:var(--fill);border-radius:0 4px 4px 0}
.hbar .fl{height:100%;border-radius:0 4px 4px 0;min-width:2px}
.hbar .v{text-align:right;color:var(--ink)}
#vtip{position:fixed;z-index:200;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;padding:6px 9px;border-radius:7px;box-shadow:0 6px 18px rgba(0,0,0,.2);white-space:pre-line;max-width:260px}
@media (max-width:900px){.an-grid{grid-template-columns:1fr}.hbar{grid-template-columns:80px minmax(0,1fr) 120px}}
.sa-bar{display:flex;gap:8px;margin-bottom:12px}

/* ---------- popups, toasts ---------- */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.28);display:grid;place-items:center;z-index:100;padding:16px}
.mdl{background:var(--page);border-radius:14px;width:min(540px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px 24px;box-shadow:0 24px 64px rgba(0,0,0,.24)}
.mdl.wide{width:min(1000px,100%)}
.mdl h2{margin:0 0 14px;font-size:19px;font-weight:700;letter-spacing:-.015em;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mdl .tgls{grid-template-columns:1fr;margin-top:10px}
.mdl .frm{grid-template-columns:110px minmax(0,1fr)}
.dgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.thumbs figure{margin:0}
.thumbs img,.thumbs .ph-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--fill);display:grid;place-items:center;font-size:12px;color:var(--muted)}
.thumbs figcaption{font-size:12px;color:var(--muted)}
ul.hist{padding-left:18px;font-size:13px;margin:6px 0}ul.hist li{margin:3px 0}
.camwrap{margin-top:10px;background:#000;border-radius:10px;overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center}
.camwrap video,.camwrap img{width:100%;height:100%;object-fit:contain}
.fpbox{height:200px;display:grid;place-items:center;border-radius:10px;color:var(--muted);background:var(--fill)}.fpbox img{max-height:190px}
.ph-img{display:grid;place-items:center;overflow:hidden;color:var(--muted);font-size:12px}
.ph-img img{width:100%;height:100%;object-fit:cover}
.phs{display:grid;gap:12px}.phs.duo{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.phs .ph-img{aspect-ratio:4/3;border-radius:10px;background:var(--fill)}
.phs .ph-lbl{font-weight:500;font-size:13px;margin:5px 0 4px}
.phs .ph-btns{display:flex;gap:6px;flex-wrap:wrap}
.ph-prev{margin-top:6px;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);flex-wrap:wrap}
.ph-prev img{width:48px;height:36px;object-fit:cover;border-radius:4px}
.cc{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:12px}
.cc .fg{grid-template-columns:80px minmax(0,1fr)}
@media (max-width:720px){.cc,.dgrid{grid-template-columns:1fr}}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:200;display:grid;gap:6px;width:max-content;max-width:92vw}
.t{background:rgba(29,29,31,.92);color:#fff;padding:10px 18px;border-radius:12px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.t.err{background:var(--bad)}
#printArea{display:none}
/* print preview: the paper at its real size (smaller on a small screen) */
.pv{background:#E7E1D8;border-radius:10px;padding:16px 12px;max-height:min(68vh,760px);overflow:auto;display:flex;justify-content:center;align-items:flex-start}
.pv-paper{background:#fff;color:#000;box-shadow:0 2px 14px rgba(0,0,0,.18);flex:none}
.pv-a5{width:148mm;min-height:200mm;padding:7mm}.pv-a4{width:210mm;min-height:250mm;padding:14mm}.pv-r80{width:80mm;padding:3mm}
.pv-note{text-align:center;margin:8px 0 0}
.fd-show{margin-top:12px}

/* ---------- this computer (Settings → Look) ---------- */
:root[data-size="large"] body{zoom:1.1}
:root[data-density="compact"] .grid td{padding:3px 8px}
:root[data-density="compact"] .grid th{padding:4px 8px}
:root[data-density="compact"] #main{padding:6px 18px}
:root[data-photos="off"] .pl-pics{display:none}

/* ---------- phones and small tablets ----------
   Compact: the logo at the top corner opens the menu (Home, Settings, Owner, Lock); the five work screens stay on the
   right side as small buttons (as on a computer, only narrower). Boxes are 36 px high with 16 px text (smaller text makes phones zoom in); labels stay beside
   the boxes so a form is short. */
button,a,input,select,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tbar .nm{background:none;border:0;padding:0;margin:0 auto;font:inherit;color:inherit;cursor:pointer}
.nm-more{display:none}
.pmenu{display:flex;flex-direction:column;gap:6px}
.pmenu button{height:46px;border:1px solid var(--line);border-radius:10px;background:var(--page);color:var(--ink);font-size:16px;font-weight:600;text-align:left;padding:0 16px;cursor:pointer}
.pmenu button[aria-current=page]{border-color:var(--accent);color:var(--accent)}
.pmenu .pm-lock{color:var(--muted);margin-top:6px}
@media (max-width:820px){
  .desk{grid-template-columns:minmax(0,1fr) 64px;grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh;height:var(--vvh,100dvh)}
  #main{scroll-padding-bottom:24px}
  .tbar{grid-template-columns:1fr auto;padding:calc(5px + env(safe-area-inset-top,0px)) 12px 5px;min-height:44px;gap:8px}
  .tbar .nm{order:-1;margin:0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}.tbar .tlogo{height:30px}
  .nm-more{display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;opacity:.8;flex:none}
  .tbar #clkD,.tbar .tm,.pd-x,.tbar .clk-l{display:none}.tbar .dt{text-align:right}.pill.demo{margin-left:0;font-size:11px}
  /* small buttons on the right: the work screens and Settings; Owner and Lock are in the logo menu */
  .rail2{flex-direction:column;gap:5px;padding:8px 5px calc(8px + env(safe-area-inset-bottom,0px));overflow-y:auto;overflow-x:hidden}
  .rail2 button{width:100%;flex:none;min-width:0;height:38px;padding:0 1px;text-align:center;font-size:11.5px;letter-spacing:-.01em!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* phones: the work screens and Settings at the top; Owner and Lock / Exit demo at the bottom (no logo menu, 10/10/2026) */
  .rail2 [data-go="settings"]{order:1}.rail2 .grow{order:2;flex:1 1 auto}.rail2 #ownerBtn,.rail2 #lockBtn{order:3}
  .rail2 #lockBtn,.rail2 #ownerBtn{white-space:normal;line-height:1.1;height:auto;min-height:38px;padding:4px 2px}
  /* Settings shows on phones too, right under Reports (owner, 10/10/2026) */
  #main{padding:8px 8px 16px;-webkit-overflow-scrolling:touch}.vbar{padding:10px 12px 2px;font-size:19px}
  .sbar{display:none}
  input,select,textarea{font-size:16px;height:36px;padding:0 9px}textarea{height:auto;padding:7px 9px}
  .grid td input,.grid td select,.pl-items td input{height:34px}
  .btn{height:38px;padding:0 14px}.btn.small{height:32px}.btn.wide{height:44px}
  .seg{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}.seg button{height:32px;flex:0 0 auto}
  .frm{grid-template-columns:62px minmax(0,1fr);gap:6px 6px}
  .frm .r.two>*{min-width:0}
  .frm>label,.frm>.lab,.frm .r .lab{font-size:12.5px}
  .frm .r{gap:6px}.frm .r .lab{padding-left:2px}
  .frm.wide,.fg{grid-template-columns:1fr;gap:3px}
  .frm .r.door>input{width:64px}.frm .r.pin>.sw:last-child{width:86px}
  .pno,output.fix{min-height:34px}
  output.fix{padding:5px 9px;font-size:14px}
  h3{margin:14px 0 6px}
  .tgls{grid-template-columns:1fr}.tgl{padding:9px 2px}
  .pl,.rd,.ag{gap:12px}
  .pl-pics{gap:8px;margin-top:12px}
  .pslot,.pslot .ph-img{width:62px}.pslot .ph-img{height:62px;border-radius:8px}.pslot .ph-prev{height:62px}
  .pslot .ph-img:not(:has(img))::before{width:22px;height:17px}
  .rd-choice{gap:6px}.rd-choice button{padding:6px 8px}.rd-choice button small{font-size:11px}
  .rd-pics{gap:8px}.rd-pics figure,.rd-pics .ph-img{width:62px}.rd-pics .ph-img{height:62px}
  .pl-items{max-height:none}.pl-items td{padding:1px 3px}
  .pl-tot{padding:6px 4px}
  .calc .cl{padding:8px 0;font-size:14px}.calc .cl output{font-size:16px}.calc .cl.tot output{font-size:24px}
  input.big{height:40px;font-size:19px}
  .acts{gap:6px;margin-top:12px}.acts .btn{flex:1 1 30%;padding:0 8px}
  .savebtn{width:100%}
  output.paid{font-size:21px}
  .rlay{gap:10px}
  .rside{flex-wrap:nowrap;overflow-x:auto;gap:4px;margin:0 -8px;padding:0 8px 6px;border-bottom:1px solid var(--hair);scrollbar-width:none}
  .rside::-webkit-scrollbar{display:none}
  .rside button{flex:0 0 auto;height:32px}
  .filters{gap:8px}.filters label{flex:1 1 140px}.filters .tools{margin-left:0;width:100%}.filters .tools .btn{flex:1}
  .grid{font-size:13px}.grid th,.grid td{padding:6px 7px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{border-bottom:1px solid var(--hair)}
  .bars{grid-template-columns:repeat(7,minmax(0,1fr))}.bars .bday:nth-child(-n+7){display:none}
  .srow{grid-template-columns:1fr 70px;align-items:end}.srow .prev{grid-column:1/-1;padding:0}
  .bar{gap:8px;margin-bottom:10px}
  /* customer suggestions: name and phone on one line, the rest under it */
  .sugg{max-width:calc(100vw - 84px)}
  .sg:has(.sg-n){grid-template-columns:minmax(0,1fr) auto;gap:0 10px;white-space:normal;padding:4px 10px}
  .sg:has(.sg-n)>span{white-space:nowrap}
  /* popups rise from the bottom, full width */
  .ov{place-items:end stretch;padding:0}
  .mdl,.mdl.wide{width:100%;max-height:92dvh;border-radius:16px 16px 0 0;padding:16px 14px calc(16px + env(safe-area-inset-bottom,0px))}
  .mdl .frm{grid-template-columns:80px minmax(0,1fr)}
  .mdl .row.end .btn{flex:1 1 auto}
  .camwrap{aspect-ratio:3/4;max-height:58dvh}
  .pv{max-height:62dvh;padding:10px 6px}
  /* home and log in */
  .brand .lg{width:min(420px,86vw)}.brand-sub{font-size:12px;letter-spacing:.4em}
  .auth{padding:18px 12px;align-content:start}
  .land{gap:18px}.card>h1{padding:18px 16px 0}.card .pb{padding:16px}
  .cs-close b{font-size:22px}
  .cday-add{gap:6px}
}
@media (max-width:380px){
  .desk{grid-template-columns:minmax(0,1fr) 62px}
  .rail2{padding-left:4px;padding-right:4px}
  .rail2 button{font-size:10.5px}
  .frm{grid-template-columns:58px minmax(0,1fr)}
  .pl-items td:nth-child(3){width:90px}.pl-items td:nth-child(4){width:66px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- printing: the pawn ticket and receipts keep the shop's format ---------- */
@media print{
  html,body{background:#fff!important}
  body>*:not(#printArea){display:none!important}
  #printArea{display:block!important;color:#000;background:#fff;font-family:var(--font);font-size:12pt}
  @page{margin:12mm}
}
.tk h1{font-size:20pt;margin:0}
.tk h2{font-size:14pt;margin:10px 0 6px;border-bottom:2px solid #000}
.tk table{width:100%;border-collapse:collapse;margin:6px 0}
.tk th,.tk td{border:1px solid #000;padding:4px 6px;text-align:left;font-size:11pt}
.tk table.rq-grid{table-layout:auto}.tk table.rq-grid :is(th,td){font-size:7.5pt;padding:2px 3px;word-break:break-word}.tk table.rq-grid th{font-weight:600}.tk table.rq-grid :is(th,td).num{text-align:right;white-space:nowrap}
.tk .r{text-align:right}
.tk .sign{display:flex;justify-content:space-between;margin-top:42px}
.tk .sign span{border-top:1px solid #000;padding-top:4px;min-width:200px;text-align:center}
/* ===== Pawn ticket (Maharaja Pawn Broking format) ===== */
.a5{break-inside:avoid}.a5+.a5{break-before:page}
.a5r h1{font-size:15pt}.a5r h2{font-size:12pt}.a5r th,.a5r td{font-size:9.5pt;padding:2px 5px}.a5r .sign{margin-top:28px}.a5r .sign span{min-width:0;font-size:9.5pt}
.tkt{width:100%;max-width:134mm;margin:0 auto;color:#000;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:10.5pt;line-height:1.35}
.tkt-h{text-align:center;margin-bottom:8px}
.tkt-sm{font-size:10pt;letter-spacing:.05em}
.tkt-co{font-size:17pt;font-weight:800;letter-spacing:.03em}
.tkt-logo{display:block;height:16mm;width:auto;margin:1mm auto 0}
.tkt-jwrow{display:flex;justify-content:flex-end;margin-top:3px}
.tk-h{text-align:center;margin-bottom:6px}.tk-h p{margin:4px 0 0;font-size:10pt}.tk-logo{display:block;height:15mm;width:auto;margin:0 auto}
.tkt-pb{font-size:11.5pt;font-weight:700;letter-spacing:.04em}
.tkt-ad{font-size:10pt}
.tkt-top{display:flex;justify-content:space-between;gap:10px}
.tkt-l{flex:1}
.tkt-r{text-align:right}
.tkt-r img,.tkt-noimg{width:30mm;height:30mm;object-fit:cover;display:block;margin:6px 0 0 auto;border:1px solid #000}
.tkt-form{font-size:9.5pt}
.tkt-b{font-weight:700;font-size:11pt}
.tkt-gap{margin-top:6px}
.tkt-addr{display:flex;gap:6px;margin-top:6px}
.tkt-amt{font-size:15pt;font-weight:800;margin-top:8px}
.tkt-words{margin:4px 0 6px}
.tkt-tb{width:100%;border-collapse:collapse;font-family:"Courier New",Courier,monospace;font-size:10.5pt}
.tkt-tb th,.tkt-tb td{padding:3px 4px;text-align:left}
.tkt-tb thead th{border-top:1px dashed #000;border-bottom:1px dashed #000}
.tkt-tb tfoot td{border-top:1px dashed #000;border-bottom:1px dashed #000;font-family:Arial,sans-serif;font-weight:700}
.tkt-tb .r{text-align:right}
.tkt-loan{display:flex;justify-content:space-between;margin-top:8px;font-size:13pt}
.tkt-sig{display:flex;justify-content:space-between;margin-top:34px;padding-bottom:4px;border-bottom:1px dashed #000;font-weight:600}
.tkt-terms{margin-top:6px;font-size:10pt;font-weight:600}
.tkt-terms div{display:flex;justify-content:space-between;gap:10px}
.tkt-last{justify-content:center!important;margin-top:10px;font-size:11pt}
.tkt-jw{width:26mm;height:20mm;object-fit:cover;border:1px solid #000;margin-top:4px}
.tkt-due{margin-top:6px;font-size:10.5pt}
/* Form D: declaration when the pawn ticket is lost (A4) */
.fd{max-width:180mm;margin:0 auto;color:#000;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:11pt;line-height:1.45}
.fd-top{display:flex;justify-content:space-between;gap:12px}.fd-top>div:last-child{text-align:right}
.fd-h{text-align:center;margin:14px 0 12px}.fd-h b{font-size:15pt;letter-spacing:.06em}.fd-t{font-weight:700;margin-top:6px;text-decoration:underline}
.fd-kv{width:100%;border-collapse:collapse;margin:6px 0}.fd-kv th{text-align:left;font-weight:400;width:62mm;vertical-align:top;padding:4px 8px 4px 0}.fd-kv td{padding:4px 0;vertical-align:top}
.fd-p{text-align:justify;margin:12px 0}
.fd-tb{width:100%;border-collapse:collapse;margin:8px 0}.fd-tb th,.fd-tb td{border:1px solid #000;padding:5px 7px;text-align:left}.fd-tb .r{text-align:right}.fd-tb tfoot td{font-weight:700}
.fd-sig{display:flex;justify-content:flex-end;margin-top:34px}.fd-sig span{border-top:1px solid #000;padding-top:4px;min-width:62mm;text-align:center}
.fd-id{margin-top:18px;border-top:1px dashed #000;padding-top:10px}.fd-id p{margin:8px 0}
.fd-lines td{border-bottom:1px dotted #000;height:24px}
/* Small receipt (80 mm) */
.rcpt{width:72mm;margin:0 auto;font-family:"Courier New",Courier,monospace;font-size:10.5pt;line-height:1.3;color:#000;background:#fff}
.rc-h{text-align:center;font-size:9.5pt}.rc-h b{font-size:12pt;display:block;margin-bottom:2px}
.rc-t{text-align:center;font-weight:700;margin:6px 0;border-top:1px dashed #000;border-bottom:1px dashed #000;padding:3px 0}
.rl{display:flex;justify-content:space-between;gap:8px}.rl.b{font-weight:700}
.rc-d{border-top:1px dashed #000;margin:4px 0}
.rc-f{text-align:center;font-size:9.5pt;margin-top:6px}
.rc-prev{max-height:46vh;overflow:auto;border-radius:10px;padding:10px 0;margin:8px 0;background:var(--fill)}
.rc-prev .rcpt{padding:10px;box-shadow:0 2px 10px rgba(0,0,0,.12)}

/* Demo */
.pill.demo{background:color-mix(in srgb,var(--gold) 18%,#fff);color:color-mix(in srgb,var(--gold) 65%,#000);margin-left:8px}
.btn.demo{border-color:var(--accent);color:var(--accent)}
.demo-note{text-align:center;font-size:12px;margin-top:6px}

/* =========================================================
   MAHARAJA THEME (Settings → Look → Theme; the default)
   From the Maharaja Pawn Broking brand board (08/10/2026): Primary #A84B3B (warm, royal), Secondary gold #C5A572,
   Tertiary #EADBCB (cards, sections), Background #FAF6EE, Accent olive #7F8A73 (used only a little).
   The logo's own red (#8C2626, the word "Maharaja") is the dark red; the button list is the lighter #A84B3B.
   Screen layout as the version the owner liked (07/10/2026): red top bar with the logo, a gold strip with the
   name of the screen, the red button list on the right with the open screen in gold.
   Every colour set fills the same roles:
   p9 darkest · p8 dark (logo red) · p7 main · p5 light · p3 soft · a5 gold · a3 light gold · a1 pale gold
   b0 page · b1 page 2 · b2 cards and lines · ink0 text · ink1 text 2 · onp text on red
   c1/c2 chart series (default #A84B3B and #B8862B pass the dataviz check on white and cream), r1…r5 chart scale light → dark.
   Minimal is the plain white and grey look above.
   ========================================================= */
:root[data-style="maharaja"]{
  /* Maharaja (default): the brand board and the logo */
  --p9:#6E1F1A; --p8:#8C2626; --p7:#A84B3B; --p5:#BD6A58; --p3:#E3B4A8;
  --a5:#C5A572; --a3:#DCC59C; --a1:#F3E8D6;
  --b0:#FAF6EE; --b1:#F4ECE1; --b2:#EADBCB; --ink0:#3A2621; --ink1:#7A6359; --onp:#FFF8EE;
  --c1:#A84B3B; --c2:#B8862B; --r1:#E7B9AE; --r2:#CC7E6C; --r3:#A84B3B; --r4:#8C2626; --r5:#6E1F1A;
}
/* Olive Gold: banana leaf with brass */
:root[data-style="maharaja"][data-theme="olive"]{--p9:#2F3714;--p8:#414C1C;--p7:#56662A;--p5:#738536;--p3:#AEB98A;--a5:#C9A227;--a3:#E8CF6A;--a1:#FAF2CF;--b0:#FDFCF5;--b1:#F7F4E4;--b2:#ECE7CF;--ink0:#22260F;--ink1:#4F5537;--onp:#FFF6D2;--c1:#6B7B2A;--c2:#C9A227;--r1:#A9B866;--r2:#8A9A3F;--r3:#6B7B2A;--r4:#525E1F;--r5:#3B4416}
/* Peacock: deep teal with gold */
:root[data-style="maharaja"][data-theme="peacock"]{--p9:#073A42;--p8:#0B4F5A;--p7:#0E6A78;--p5:#1A8796;--p3:#8CC3CB;--a5:#C9971F;--a3:#E9C766;--a1:#FAF0D2;--b0:#FAFDFC;--b1:#EEF6F4;--b2:#DAEAE7;--ink0:#0E2529;--ink1:#3D5A5E;--onp:#FFF4D6;--c1:#00899C;--c2:#C9971F;--r1:#6FBCC8;--r2:#2BA3B5;--r3:#00899C;--r4:#006A78;--r5:#004C56}
/* Kanchi Silk: rani pink with zari */
:root[data-style="maharaja"][data-theme="kanchi"]{--p9:#4A0B32;--p8:#661046;--p7:#86175E;--p5:#A52E7A;--p3:#D79BC0;--a5:#C9971F;--a3:#EBCB6E;--a1:#FBF0D2;--b0:#FFFBFC;--b1:#FBF1F5;--b2:#F1DFE8;--ink0:#2B0F20;--ink1:#5B3E50;--onp:#FFF4D6;--c1:#9A1D6B;--c2:#C9971F;--r1:#E2A3C8;--r2:#C25596;--r3:#9A1D6B;--r4:#7A1655;--r5:#57103D}
/* Sandalwood: light and calm */
:root[data-style="maharaja"][data-theme="sandal"]{--p9:#4A3220;--p8:#64452C;--p7:#87603C;--p5:#A87C52;--p3:#D2B597;--a5:#B5832A;--a3:#E3C893;--a1:#F8EEDB;--b0:#FFFDF9;--b1:#FAF5EC;--b2:#EFE5D3;--ink0:#2B2016;--ink1:#5C4B3C;--onp:#FFF8EC;--c1:#9C5B26;--c2:#C9971F;--r1:#D4A07A;--r2:#B97843;--r3:#9C5B26;--r4:#7A461C;--r5:#573212}
/* Apple Modern: grey and blue, no gold */
:root[data-style="maharaja"][data-theme="apple"]{--p9:#1D1D1F;--p8:#2C2C2E;--p7:#3A3A3C;--p5:#636366;--p3:#AAAAAA;--a5:#007AFF;--a3:#B3D7FF;--a1:#E5F0FF;--b0:#FFFFFF;--b1:#F5F5F7;--b2:#EDEDF0;--ink0:#1D1D1F;--ink1:#4A4A4F;--onp:#F5F5F7;--c1:#007AFF;--c2:#FF9500;--r1:#86B6EF;--r2:#3D96FF;--r3:#007AFF;--r4:#005ECC;--r5:#004599}
/* The roles mapped onto the names the screens use. The same in every colour set: good (olive), danger, warning, focused box. */
:root[data-style="maharaja"]{
  --accent:var(--p7); --gold:var(--a5); --accent-soft:color-mix(in srgb,var(--p7) 12%,#fff); --ring:color-mix(in srgb,var(--a5) 45%,transparent);
  --page:var(--b0); --side:var(--b1); --fill:var(--b2); --ink:var(--ink0); --muted:var(--ink1); --faint:color-mix(in srgb,var(--ink1) 45%,#fff);
  --line:color-mix(in srgb,var(--b2) 70%,var(--a5)); --hair:color-mix(in srgb,var(--b2) 65%,#fff);
  --card:#FFFDF9; --goldtext:color-mix(in srgb,var(--a5) 62%,#000);
  --ok:#56634A; --ok-bg:#E6EADF; --bad:#B3261E; --bad-bg:#FBE9E7; --warn:#A35F00; --warn-bg:#FFF2DC; --focusfill:#FFF8E6;
}
[data-style="maharaja"] body{background:var(--b0)}
[data-style="maharaja"] h3,[data-style="maharaja"] .panel>h2,[data-style="maharaja"] .sec>h3,[data-style="maharaja"] .adh{color:var(--goldtext);letter-spacing:.14em;font-weight:700}

/* top bar: the logo's red, lighter in the middle; the light logo; date and time in cream; a gold line under it */
[data-style="maharaja"] .tbar{background:linear-gradient(90deg,var(--p8),var(--p7) 50%,var(--p8));color:var(--onp);border-bottom:2px solid var(--a5);-webkit-backdrop-filter:none;backdrop-filter:none}
[data-style="maharaja"] .tbar .nm{color:var(--onp)}
[data-style="maharaja"] .tbar .lg-c{display:none!important}
[data-style="maharaja"] .tbar .lg-l{display:block!important}
[data-style="maharaja"] .desk{grid-template-rows:58px minmax(0,1fr)}
[data-style="maharaja"] .tbar .tlogo{height:48px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
/* the name of the screen on a gold strip */
[data-style="maharaja"] .vbar{margin:0;padding:4px 16px;font-size:11.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;text-align:center;color:var(--p9);
  background:linear-gradient(90deg,var(--a5),var(--a3) 50%,var(--a5));border-bottom:1px solid color-mix(in srgb,var(--a5) 75%,#000)}
[data-style="maharaja"] .sbar{background:var(--b1);border-top-color:var(--b2)}

/* the button list on the right: the lighter red, each screen a button, the open screen in gold */
[data-style="maharaja"] .rail2{background:linear-gradient(180deg,var(--p7),color-mix(in srgb,var(--p7) 65%,var(--p8)));border-left:2px solid var(--a5);padding:10px 8px;gap:6px}
[data-style="maharaja"] .rail2 button{height:34px;border-radius:7px;text-align:center;color:var(--onp);font-weight:600;letter-spacing:.01em;
  background:linear-gradient(180deg,color-mix(in srgb,var(--p5) 85%,#fff),var(--p7));border:1px solid color-mix(in srgb,var(--p9) 45%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.18)}
[data-style="maharaja"] .rail2 button:hover{filter:brightness(1.08)}
[data-style="maharaja"] .rail2 button[aria-current=page]{background:linear-gradient(180deg,var(--a1),var(--a3) 45%,var(--a5));color:var(--p9);border-color:var(--a5);font-weight:700}
[data-style="maharaja"] #ownerBtn{background:linear-gradient(180deg,var(--a1),var(--a3));color:var(--p9);border-color:var(--a5)}
[data-style="maharaja"] #ownerBtn.on{background:#fff;color:var(--p8)}
[data-style="maharaja"] #lockBtn{background:rgba(0,0,0,.16);border-color:rgba(0,0,0,.22);box-shadow:none;color:var(--onp)}

/* cards: Pledge and Redemption, two cards side by side */
[data-style="maharaja"] :is(.pl-cust,.pl-jewel,.pl-loanc,.pl-photo,.rd-left,.rd-right){background:var(--card);border:1px solid var(--b2);border-radius:8px;padding:10px 12px 12px;box-shadow:0 1px 3px rgba(90,45,25,.06)}
[data-style="maharaja"] .card-h{margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid var(--b2)}

/* boxes: white; the box with the cursor in light gold; boxes that cannot change are darker */
[data-style="maharaja"] :is(input,select,textarea){background:#fff;border-color:var(--line)}
[data-style="maharaja"] :is(input,select,textarea):focus{border-color:var(--a5);background:var(--focusfill);box-shadow:0 0 0 3px var(--ring)}
[data-style="maharaja"] .pl-items td input:focus{border-color:var(--a5);background:var(--focusfill);box-shadow:0 0 0 3px var(--ring)}
[data-style="maharaja"] :is(input[readonly],input:disabled,select:disabled,textarea:disabled,output.fix){background:var(--b2);border-color:transparent;color:var(--ink0)}
[data-style="maharaja"] .pno{background:var(--accent-soft);color:var(--p7);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p7) 30%,#fff)}

/* buttons: round ends; main buttons in red */
[data-style="maharaja"] .btn{border-radius:999px;background:var(--card);border-color:color-mix(in srgb,var(--a5) 70%,#fff);color:var(--ink0);padding:0 16px}
[data-style="maharaja"] .btn:hover{background:var(--a1)}
[data-style="maharaja"] .btn.primary{background:var(--p7);border-color:var(--p7);color:#fff;font-weight:600;box-shadow:0 2px 6px color-mix(in srgb,var(--p7) 28%,transparent)}
[data-style="maharaja"] .btn.primary:hover{background:color-mix(in srgb,var(--p7) 88%,#000);filter:none}
[data-style="maharaja"] .btn.on{background:var(--accent-soft);border-color:var(--p7);color:var(--p7)}
[data-style="maharaja"] .btn.danger{background:var(--card);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,#fff)}
[data-style="maharaja"] .btn.small{padding:0 12px}
[data-style="maharaja"] .btn:focus-visible{outline:3px solid var(--a5);outline-offset:2px}
[data-style="maharaja"] .lnk,[data-style="maharaja"] .linkbtn{color:var(--p7)}
[data-style="maharaja"] .seg{background:var(--b2);border-radius:999px}
[data-style="maharaja"] .seg button{border-radius:999px}
[data-style="maharaja"] .seg button[aria-pressed=true]{background:var(--p7);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
[data-style="maharaja"] .tgl input:checked+i{background:var(--p7)}
/* tags: open in red, redeemed in olive, auctioned grey */
[data-style="maharaja"] :is(.st,.pill,.tag){border-radius:999px}
[data-style="maharaja"] .st-OPEN{background:var(--accent-soft);color:var(--p7)}
[data-style="maharaja"] :is(.st-REDEEMED,.pill.ok){background:var(--ok-bg);color:var(--ok)}
[data-style="maharaja"] :is(.st-AUCTIONED,.pill.bad){background:color-mix(in srgb,var(--ink1) 14%,#fff);color:var(--ink0)}

/* lists on the left (Reports, Settings) */
[data-style="maharaja"] .rside button[aria-current=page]{background:var(--accent-soft);color:var(--p7);font-weight:700;box-shadow:inset 3px 0 0 var(--p7)}
[data-style="maharaja"] .rside button:hover:not([aria-current]){background:color-mix(in srgb,var(--b2) 50%,#fff)}
/* tables */
[data-style="maharaja"] :is(.grid th,.pl-items th,.cs th){background:color-mix(in srgb,var(--b2) 55%,#fff);color:var(--goldtext);letter-spacing:.05em;text-transform:uppercase;font-size:11px;border-bottom-color:var(--line)}
[data-style="maharaja"] .grid td{border-bottom-color:var(--hair)}
[data-style="maharaja"] .grid tfoot td{background:var(--card)}
[data-style="maharaja"] :is(.rows tbody tr:hover td,.cs tr.g:hover td){background:color-mix(in srgb,var(--a1) 70%,#fff)}
[data-style="maharaja"] :is(.calc .cl.tot output,output.paid){color:var(--p7)}
[data-style="maharaja"] .cs-close{border-top-color:var(--p7)}
[data-style="maharaja"] .rd-right{border-left:1px solid var(--b2)}
/* suggestions under a box: dark text on white, the chosen line marked in red */
[data-style="maharaja"] .sugg{background:#fff;color:var(--ink0);border-color:color-mix(in srgb,var(--a5) 60%,#fff);box-shadow:0 12px 28px rgba(80,40,20,.16)}
[data-style="maharaja"] :is(.sg.on,.sg:hover){background:color-mix(in srgb,var(--a1) 75%,#fff);box-shadow:inset 3px 0 0 var(--p7)}
[data-style="maharaja"] .sg mark{background:color-mix(in srgb,var(--a5) 40%,#fff)}

/* home: the logo on the cream page */
[data-style="maharaja"] .home{background:radial-gradient(ellipse at 50% 45%,#fff,transparent 62%)}
[data-style="maharaja"] .brand-sub{color:var(--goldtext)}
/* log in: cream page, the logo, a white card with a red edge on top */
[data-style="maharaja"] body:has(.auth){background:radial-gradient(ellipse at 28% 30%,#fff,transparent 55%),var(--b0)}
[data-style="maharaja"] .auth .card{background:#fff;border:1px solid var(--b2);border-top:3px solid var(--p7);box-shadow:0 10px 32px rgba(90,45,25,.10)}
[data-style="maharaja"] .steps li.on{border-bottom-color:var(--p7)}
[data-style="maharaja"] .btn.demo{border-color:var(--a5);color:var(--p8);background:color-mix(in srgb,var(--a1) 70%,#fff)}
/* popups and messages */
[data-style="maharaja"] .mdl{background:var(--card);border-top:3px solid var(--a5)}
[data-style="maharaja"] .t{background:var(--ink0);color:var(--onp)}
[data-style="maharaja"] .t.err{background:var(--bad);color:#fff}
[data-style="maharaja"] .pill.demo{background:linear-gradient(180deg,var(--a3),var(--a5));color:var(--p9)}
@media (max-width:820px){
  [data-style="maharaja"] .rail2{border-left:2px solid var(--a5);border-top:0;padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px))}
  [data-style="maharaja"] .rail2 button{height:38px;padding:0 2px;border-radius:6px}
  [data-style="maharaja"] .desk{grid-template-rows:auto minmax(0,1fr)}
  [data-style="maharaja"] .tbar .tlogo{height:32px}
  [data-style="maharaja"] :is(.pl-cust,.pl-jewel,.pl-loanc,.pl-photo,.rd-left,.rd-right){padding:10px 10px 12px;border-radius:8px}
  [data-style="maharaja"] .rd-right{border-left:1px solid var(--b2)}
}

/* More colour sets (08/10/2026): each is a main colour (p7) and a bright second colour (a5); the other roles are mixed from them.
   p7 is dark enough for white text on buttons. Works in both themes (Minimal uses p7 as its accent). */
:root[data-style][data-theme="mango"]{--p7:#C2410C;--a5:#F59F00}
:root[data-style][data-theme="lotus"]{--p7:#C2255C;--a5:#FAB005}
:root[data-style][data-theme="ocean"]{--p7:#1864AB;--a5:#22B8CF}
:root[data-style][data-theme="mint"]{--p7:#087F5B;--a5:#82C91E}
:root[data-style][data-theme="lavender"]{--p7:#6741D9;--a5:#F06595}
:root[data-style][data-theme="sunset"]{--p7:#C92A2A;--a5:#FD7E14}
:root[data-style][data-theme="indigo"]{--p7:#364FC7;--a5:#FCC419}
:root[data-style][data-theme="berry"]{--p7:#862E9C;--a5:#20C997}
:root[data-style][data-theme="rosegold"]{--p7:#A94452;--a5:#D9A066}
:root[data-style][data-theme="forest"]{--p7:#2B8A3E;--a5:#FAB005}
:root[data-style="maharaja"]:is([data-theme="mango"],[data-theme="lotus"],[data-theme="ocean"],[data-theme="mint"],[data-theme="lavender"],[data-theme="sunset"],[data-theme="indigo"],[data-theme="berry"],[data-theme="rosegold"],[data-theme="forest"]){
  --p9:color-mix(in srgb,var(--p7) 55%,#000); --p8:color-mix(in srgb,var(--p7) 78%,#000); --p5:color-mix(in srgb,var(--p7) 80%,#fff); --p3:color-mix(in srgb,var(--p7) 45%,#fff);
  --a3:color-mix(in srgb,var(--a5) 60%,#fff); --a1:color-mix(in srgb,var(--a5) 18%,#fff);
  --b0:color-mix(in srgb,var(--a5) 4%,#fff); --b1:color-mix(in srgb,var(--p7) 5%,#fff); --b2:color-mix(in srgb,var(--a5) 14%,#fff);
  --ink0:color-mix(in srgb,var(--p7) 22%,#151515); --ink1:color-mix(in srgb,var(--p7) 28%,#555); --onp:#fff;
  --c1:var(--p7); --c2:var(--a5); --r1:color-mix(in srgb,var(--p7) 40%,#fff); --r2:color-mix(in srgb,var(--p7) 70%,#fff); --r3:var(--p7); --r4:var(--p8); --r5:var(--p9);
}
:root[data-style="minimal"]:is([data-theme="mango"],[data-theme="lotus"],[data-theme="ocean"],[data-theme="mint"],[data-theme="lavender"],[data-theme="sunset"],[data-theme="indigo"],[data-theme="berry"],[data-theme="rosegold"],[data-theme="forest"]){--accent:var(--p7);--gold:var(--a5)}

/* ---------- Redemption: Close pledge or Modify, as on the 07/10 screen ---------- */
.rd-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
.rd-choice button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);color:var(--ink);cursor:pointer;font:inherit}
.rd-choice button b{font-size:14px}.rd-choice button small{font-size:12px;color:var(--muted);line-height:1.3}
.rd-choice button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.rd-choice button[aria-pressed=true] small{color:rgba(255,255,255,.85)}
.rd-choice button:disabled{opacity:.45;cursor:default}
#rdMod .r>input{flex:1}
/* the i button: bigger, and the word "Interest" opens it too */
.info{width:24px;height:24px;font-size:13px;margin-left:4px;vertical-align:0}
.info-l{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.info-l:disabled{cursor:default;text-decoration:none}

/* ---------- Search, Customers, Auction lists: a firm, compact grid like the old Windows lists ----------
   Thin lines round every cell, one line per row, a grey-cream header, striped rows: about twice as many rows fit. */
table.grid.xgrid{border-collapse:collapse;font-size:12.5px;border:1px solid #CBBFAF;background:#fff}
table.grid.xgrid th{background:linear-gradient(#FFFFFF,#ECE5DA);color:#3A2E28;border:1px solid #CBBFAF;padding:3px 7px;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;white-space:nowrap}
table.grid.xgrid td{border:1px solid #E1D8CC;padding:2px 7px;height:24px;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
table.grid.xgrid tbody tr:nth-child(even) td{background:#FAF7F2}
table.grid.xgrid.rows tbody tr:hover td{background:#F4E7DA}
table.grid.xgrid .st{border-radius:2px;padding:0 6px;font-size:11px}
table.grid.xgrid td input[type=checkbox]{width:14px;height:14px}
input.search{border-radius:3px;height:30px;border:1px solid #B9AEA2;box-shadow:inset 1px 1px 2px rgba(0,0,0,.10);background:#fff}
@media (max-width:820px){ table.grid.xgrid{font-size:12px} table.grid.xgrid td{height:26px;max-width:160px} input.search{height:36px} }
/* Redemption buttons in a tidy grid: Save · Form D · Print · Clear (Auction moved to Search, 10/10/2026) */
.rd-right .acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:820px){ .rd-right .acts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rd-right .acts .btn{width:100%;padding:0 6px}
/* Search screen: square buttons and choices, to match the firm list */
#main[data-view=customers] .btn{border-radius:3px;height:30px}
#main[data-view=customers] .seg,#main[data-view=customers] .seg button{border-radius:3px}
/* Logo on every screen size: it takes the width of its own area (never the whole window), keeps its shape,
   and never gets taller than a third of the screen (phones turned sideways). */
.brand{width:100%;max-width:640px;padding:0 12px}
.brand .lg{width:100%!important;max-width:620px;height:auto;max-height:34vh;object-fit:contain}
.hero{min-width:0}
.tbar .tlogo{max-width:100%;object-fit:contain}
@media (max-width:820px){ .brand{max-width:440px} .tbar .nm{max-width:100%} }
@media (max-width:360px){ .tbar .tlogo,[data-style="maharaja"] .tbar .tlogo{height:26px} .pill.demo{padding:1px 6px} }
@media (max-height:500px) and (orientation:landscape){ .brand .lg{max-height:28vh} .desk{grid-template-rows:auto minmax(0,1fr)} }

/* ---------- List: jewel cover labels, exactly 7 cm × 3 cm, packed on A4 (3 across × 9 down) ----------
   The page has no side margin so three 7 cm labels fill the 21 cm width; 12 mm top and bottom. Dashed lines to cut on.
   Text keeps 3.5 mm inside each label, so the edge of a printer that cannot print to the paper edge cuts no words. */
.lbl-sheet{display:grid;grid-template-columns:repeat(3,70mm);grid-template-rows:repeat(9,30mm);height:270mm;width:210mm;break-after:page;color:#000;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}
.lbl-sheet:last-child{break-after:auto}
.lbl{box-sizing:border-box;width:70mm;height:30mm;padding:2.6mm 3.5mm;border-right:.2mm dashed #888;border-bottom:.2mm dashed #888;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;break-inside:avoid}
.lbl.lbl-l{border-left:.2mm dashed #888}
.lbl.lbl-t{border-top:.2mm dashed #888}
.lbl-row{display:flex;justify-content:space-between;align-items:baseline;gap:2mm;font-size:11pt;line-height:1.1;white-space:nowrap}
.lbl-row b{font-weight:800;overflow:hidden;text-overflow:ellipsis}.lbl-row b+b{flex:none}
.lbl-mid{text-align:center;line-height:1.2;min-width:0}
.lbl-item{font-size:9.5pt;font-weight:600;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.lbl-name{font-size:10.5pt;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-a4l{width:210mm;min-height:273mm;padding:12mm 0}
.lb-list{max-height:min(46vh,420px);margin-top:6px}

/* ---------- phones: compact work screens, firm and square like the Search list ----------
   Pledge, Redemption, Cash, Reports, Settings: 30 px boxes with square corners, thin lines, small labels, tables with
   lines round every cell. Text in the boxes stays 16 px (smaller makes phones zoom in). Laptops are not touched. */
@media (max-width:820px){
  html[data-style] #main :is(.pl-cust,.pl-jewel,.pl-loanc,.pl-photo,.rd-left,.rd-right){padding:8px;border-radius:4px;box-shadow:none}
  html[data-style] #main .card-h{margin:0 0 6px;padding-bottom:4px;font-size:10.5px}
  html[data-style] #main h3{margin:10px 0 4px;font-size:10.5px}
  html[data-style] #main .frm{grid-template-columns:58px minmax(0,1fr);gap:4px 6px}
  html[data-style] #main :is(.frm>label,.frm>.lab,.frm .r .lab){font-size:11.5px}
  html[data-style] #main .frm .r{gap:4px}
  html[data-style] #main :is(input:not([type=checkbox]),select){height:30px;border-radius:3px;padding:0 6px}
  html[data-style] #main textarea{border-radius:3px}
  html[data-style] #main :is(output.fix,.pno){min-height:28px;padding:3px 6px;border-radius:3px;font-size:13px}
  html[data-style] #main .pno{font-size:14px}
  html[data-style] #main .btn{height:32px;border-radius:4px;padding:0 10px;font-size:13.5px}
  html[data-style] #main .btn.small{height:28px}
  html[data-style] #main :is(.seg,.seg button){border-radius:3px}.seg button{height:28px}
  /* Pledge */
  html[data-style] #main .pl{gap:8px}
  html[data-style] #main .pl-pics{gap:6px;margin-top:8px}
  html[data-style] #main :is(.pslot,.pslot .ph-img){width:54px}html[data-style] #main .pslot .ph-img{height:54px;border-radius:4px}html[data-style] #main .pslot .ph-prev{height:54px}
  html[data-style] #main .pslot .cap-btn{font-size:10.5px}
  html[data-style] #main .pl-items{border:1px solid #CBBFAF}
  html[data-style] #main .pl-items th{background:linear-gradient(#fff,#ECE5DA);color:#3A2E28;border:1px solid #CBBFAF;padding:3px 5px;font-size:11px;text-transform:none;letter-spacing:0}
  html[data-style] #main .pl-items td{border:1px solid #E1D8CC;padding:0 2px}
  html[data-style] #main .pl-items td input{height:28px;border-radius:0}
  html[data-style] #main .pl-tot{padding:4px 2px;font-size:13px}
  html[data-style] #main .pl-loan{margin-top:6px}
  html[data-style] #main output.paid{font-size:18px;min-height:28px}
  html[data-style] #main .savebtn{height:36px;margin-top:2px}
  html[data-style] #main .row{margin-top:8px}
  /* Redemption */
  html[data-style] #main .rd{gap:8px}
  html[data-style] #main .rd-choice{gap:5px;margin-bottom:6px}
  html[data-style] #main .rd-choice button{padding:5px 7px;border-radius:4px}html[data-style] #main .rd-choice button b{font-size:13px}html[data-style] #main .rd-choice button small{font-size:10.5px}
  html[data-style] #main .calc{margin-bottom:4px}
  html[data-style] #main .calc .cl{padding:5px 0;font-size:13px}html[data-style] #main .calc .cl output{font-size:14px}html[data-style] #main .calc .cl.tot{padding-top:7px}html[data-style] #main .calc .cl.tot output{font-size:20px}
  html[data-style] #main input.big{height:34px;font-size:18px}
  html[data-style] #main .adj{font-size:12px;margin:2px 0 6px;min-height:0}
  html[data-style] #main .rd-right .acts{gap:5px;margin-top:8px}
  html[data-style] #main :is(.rd-pics figure,.rd-pics .ph-img){width:54px}html[data-style] #main .rd-pics .ph-img{height:54px;border-radius:4px}html[data-style] #main .rd-pics{gap:6px;margin-top:8px}
  html[data-style] #main .info{width:22px;height:22px}
  /* every table: lines round every cell, as in the Search list */
  html[data-style] #main table.grid{border:1px solid #CBBFAF;font-size:12px;border-collapse:collapse}
  html[data-style] #main table.grid th{background:linear-gradient(#fff,#ECE5DA);color:#3A2E28;border:1px solid #CBBFAF;padding:3px 6px;font-size:11.5px;text-transform:none;letter-spacing:0}
  html[data-style] #main table.grid td{border:1px solid #E1D8CC;padding:3px 6px}
  html[data-style] #main table.grid tfoot td{background:#F6F0E7}
  /* Cash, Reports, Settings */
  html[data-style] #main .cs :is(th,td){padding:4px 5px}html[data-style] #main .cs-close{padding:8px 4px 2px}html[data-style] #main .cs-close b{font-size:19px}
  html[data-style] #main .cday-add{gap:4px;margin-top:10px}
  html[data-style] #main .tgl{padding:6px 2px;font-size:13.5px}
  html[data-style] #main .filters{gap:6px;margin-bottom:8px}
  html[data-style] #main .filters label{font-size:11px}
  html[data-style] #main .stat{padding:7px 8px}html[data-style] #main .stat .v{font-size:17px}
  html[data-style] #main .stmt td{padding:4px 2px;font-size:12.5px}
}

/* ---------- 09/10/2026: planned, compact work screens ----------
   The screen follows the order of the work (and of the Enter key): who → what → money → proof.
   Pledge: the customer across the top in three short rows; under it Jewels | Loan | Photos side by side.
   Every box is as wide as what goes in it: phone, PIN, door, amounts and interest are short boxes; names, streets and
   villages are wider but never stretch across the screen. Boxes 28 px high on a laptop (phones: 30 px, 16 px text).
   The box with the cursor: red edge, gold ring, light gold inside, and its label in red. */
.pl{grid-template-columns:minmax(0,1.45fr) minmax(250px,.85fr) minmax(230px,.8fr);grid-template-areas:"cust cust cust" "jewel loan photo";gap:14px;align-items:stretch;max-width:1240px}
.pl-cust{grid-area:cust}.pl-jewel{grid-area:jewel}.pl-loanc{grid-area:loan}.pl-photo{grid-area:photo}
.pl-cust,.pl-jewel,.pl-loanc,.pl-photo{min-width:0}
:root[data-photos="off"] .pl{grid-template-columns:minmax(0,1.6fr) minmax(250px,.9fr);grid-template-areas:"cust cust" "jewel loan"}
:root[data-photos="off"] .pl-photo{display:none}
[data-style="minimal"] .pl{gap:18px 32px}
@media (max-width:1060px){ .pl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"cust cust" "jewel jewel" "loan photo"} }
/* customer: rows of short labelled boxes */
.cf{display:flex;flex-direction:column;gap:7px}
.cf-row{display:flex;flex-wrap:wrap;gap:7px 22px;align-items:center}
.fl{display:flex;align-items:flex-start;gap:8px;min-width:0}
/* the label stands level with the first box of its row (Address next to Door and Street) */
.fl-l{font-size:12.5px;color:var(--muted);white-space:nowrap;line-height:28px}
.cf-row>.fl:first-child>.fl-l{width:52px;flex:none}
.bx{display:flex;align-items:center;gap:6px;min-width:0}
#p_store{width:150px}
#pform #pno{min-width:70px;justify-content:center;font-size:14px}
#pform #p_date{min-width:92px;justify-content:center}
#c_phone{width:122px}
/* Name box: "Ravi S/O Murugan" in one box, with a light hint of what comes next */
.sw-name{width:330px}
.ghost{position:absolute;inset:0;display:flex;align-items:center;white-space:pre;overflow:hidden;pointer-events:none;color:var(--faint);z-index:2}
.ghost .gh-t{color:transparent}
#c_doorNo{width:58px}.sw-street{width:210px}.sw-village{width:170px}
.sw-dist{width:150px}#c_pin{width:72px}
/* loan: short boxes */
.pl-loan{margin-top:0}
#pform .frm.pl-loan{grid-template-columns:58px auto;justify-content:start}
#p_loan,#o_present{width:112px}
#pform .frm .r.unit>input{width:58px}
.frm .r.unit>span{white-space:nowrap}
.pl-loanc .row{margin-top:10px}
#pform .btn.savebtn{height:32px;min-width:120px;font-size:14px}
#pform output.paid{font-size:22px;min-height:28px}
/* jewels: a proper box, a line round the table and between the cells */
#pform .pl-items{max-height:34vh;border:1px solid var(--line);border-radius:4px;background:#fff}
#pform .pl-items td{padding:1px 3px;border-right:1px solid var(--hair)}
#pform .pl-items td:last-child{border-right:0}
#pform .pl-items th{padding:4px 6px}
#pform .pl-items td input{height:26px}
#pform .pl-items td:nth-child(3){width:100px}#pform .pl-items td:nth-child(4){width:76px}
#pform .pl-tot{padding:6px 4px 0}
/* photos */
.pl-photo .pl-pics{margin-top:0;gap:8px}
.pl-photo .pslot,.pl-photo .pslot .ph-img{width:68px}.pl-photo .pslot .ph-img{height:68px;border-radius:6px}.pl-photo .pslot .ph-prev{height:68px}
.pl-photo .pslot .ph-img:not(:has(img))::before{width:22px;height:17px}
.pl-photo .pslot .cap-btn{font-size:11.5px}
.pl-photo .pslot .ph-prev{padding:3px}
#pform .pl-photo .pslot .ph-prev .btn{height:auto;min-height:20px;padding:2px 3px;font-size:10px;line-height:1.15;white-space:normal;border-radius:4px}
/* small boxes */
:is(#pform,#rdForm) .frm{grid-template-columns:64px minmax(0,1fr);gap:6px 8px}
#rdForm .frm{grid-template-columns:84px minmax(0,1fr)}
:is(#pform,#rdForm) :is(.frm>label,.frm>.lab,.frm .r .lab){font-size:12.5px}
:is(#pform,#rdForm) .frm .r{gap:6px}
:is(#pform,#rdForm) .frm .r .lab{padding-left:4px}
:is(#pform,#rdForm) :is(input:not([type=checkbox]),select){height:28px;border-radius:5px;padding:0 8px;font-size:13.5px}
:is(#pform,#rdForm) select{padding-right:2px}
:is(#pform,#rdForm) :is(output.fix,.pno){min-height:28px;padding:3px 8px;border-radius:5px;font-size:13.5px}
:is(#pform,#rdForm) .btn{height:30px}
[data-style="maharaja"] .rd{gap:14px}
/* Redemption: boxes as wide as what goes in them */
#rdForm .frm .r.two>*{flex:none}
#rdNo{width:120px}#r_rno{min-width:84px}
/* The second box of a line keeps its name with it; on a phone the two go under the first box when the line is too narrow. */
#rdForm .frm .r.two .pair{display:flex;gap:6px;align-items:center;min-width:0}
@media (max-width:820px){ #rdForm .frm .r.two{flex-wrap:wrap;row-gap:5px} }
#rdForm .frm output.fix{width:fit-content;min-width:120px;max-width:100%;justify-self:start}
#rdForm input.big{height:34px;font-size:19px;width:170px}
#rd_rem{max-width:320px}
#rdMod .r>input#rn_loan{flex:none;width:130px}
#rdMod .r.unit>input#rn_rate{flex:none;width:58px}
#rdForm .calc{margin-bottom:6px}
#rdForm .calc .cl{padding:6px 0;font-size:14px}
#rdForm .calc .cl output{font-size:16px}
#rdForm .calc .cl.tot{padding-top:8px}
#rdForm .calc .cl.tot output{font-size:26px}
#rdForm .rd-choice{margin-bottom:8px}
#rdForm .rd-choice button{padding:5px 10px}
#rdForm .rd-choice button small{font-size:11.5px}
#rdForm .adj{margin:2px 0 6px}
#rdForm .rd-items th,#rdForm .rd-items td{padding:3px 8px}
#rdForm h3:not(.card-h){margin:12px 0 6px}
#rdForm .acts{margin-top:10px;gap:6px}
/* Cash (inside Reports): tighter rows, short entry boxes */
.cday{max-width:860px}
.cs th{padding:5px 6px}.cs td{padding:5px 6px}
.cs-close{padding:9px 6px 3px;font-size:14px}.cs-close b{font-size:22px}
.cday-add{grid-template-columns:220px 130px minmax(0,300px) auto;justify-content:start;margin-top:12px}
.cday-add :is(input,select){height:30px}
@media (max-width:760px){.cday-add{grid-template-columns:1fr 1fr}}
/* other screens: number boxes and form boxes never stretch across the screen */
#main :is(input[inputmode=numeric],input[inputmode=decimal]):not(td input){max-width:160px}
#main .frm.wide :is(input:not([type=checkbox]),select){max-width:340px}
#main .frm.wide textarea{max-width:480px}
/* the box with the cursor */
:is(#pform,#rdForm) :is(input:not([type=checkbox]),select):focus,#pform .pl-items td input:focus{border-color:var(--accent);background:#FFF0C4;box-shadow:0 0 0 2px var(--gold),0 0 9px 1px color-mix(in srgb,var(--gold) 60%,transparent);position:relative;z-index:1}
:is(#pform,#rdForm) .frm>:is(label,.lab):has(+ :focus-within),#pform .fl:focus-within>.fl-l{color:var(--accent);font-weight:700}
#pform #items tr:focus-within td{background:color-mix(in srgb,var(--gold) 12%,#fff)}
@media (max-width:820px){
  .pl,:root[data-photos="off"] .pl{grid-template-columns:minmax(0,1fr);grid-template-areas:"cust" "jewel" "loan" "photo"}
  html[data-style] #main .pl{gap:8px}
  html[data-style] #main .pl-photo .pl-pics{margin-top:0}
  html[data-style] #main .pl-items{border-radius:0;background:#fff}
  html[data-style] #main .pl-items td{border:1px solid #E1D8CC}
  html[data-style] #main .pl-photo .pslot .cap-btn{font-size:10.5px}
  html[data-style] #main .savebtn{width:100%}
  /* customer: every label in one column, boxes after it; short pairs share a line */
  .cf{gap:5px}.cf-row{gap:5px 10px}
  .fl{flex:1 1 100%;gap:6px}
  .fl>.fl-l,.cf-row>.fl:first-child>.fl-l{width:54px;flex:none;font-size:11.5px}
  .bx{flex:1 1 0;flex-wrap:wrap;gap:4px}
  .cf-row:first-child>.fl:not(:first-child),.cf-addr>.fl:not(:first-child){flex:1 1 auto}
  .cf-row:first-child>.fl:last-child>.fl-l,.cf-addr>.fl:last-child>.fl-l{width:auto}
  .cf-addr>.fl:nth-child(2){flex:1 1 0;min-width:0}.cf-addr>.fl:nth-child(3){flex:none}
  .cf-addr>.fl:nth-child(2) .bx,.cf-addr>.fl:nth-child(2) .sw-dist{flex:1 1 0;width:auto;min-width:0}
  #c_phone{width:140px}
  #p_store{flex:1 1 0;width:auto}
  .sw-name{flex:1 1 100%;width:auto}
  .fl-l{line-height:30px}
  /* Door, Street and Village on one line (owner, 10/10/2026) */
  #c_doorNo{width:48px}
  /* compact tables (the default) keep the phone page margins */
  :root[data-density="compact"] #main{padding:8px 8px 16px}.sw-street{flex:1.2 1 0;width:auto;min-width:0}.sw-village{flex:1 1 0;width:auto;min-width:0}
  /* phones keep 16 px text in the boxes (smaller text makes a phone zoom in) */
  html[data-style] #main :is(#pform,#rdForm) :is(input:not([type=checkbox]),select){font-size:16px}
  html[data-style] #main .frm .r .lab{padding-left:2px}
}

/* ---------- Import (Settings → Import, and after Create a company) ---------- */
.im-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 12px;margin-bottom:8px}
.im-map label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted)}
.im-map select{height:28px}
.im-sum{margin:8px 0;font-size:13.5px}
.im-prev{max-height:min(38vh,320px)}
.mdl .frm .tgl{border-bottom:0;padding:4px 0;font-weight:400;font-size:13.5px}

/* Pledge: ✕ removes a jewel row; hidden on the empty row */
#pform .pl-items :is(td,th).it-x{width:28px;padding:0;text-align:center}
#pform .pl-items tr:has(input[data-k="desc"]:placeholder-shown):has(input[data-k="gross"]:placeholder-shown) .x{visibility:hidden}
#pform .pl-items .x{font-size:12px;padding:2px 6px}


/* ---------- 10/10/2026: ✕ on every popup, print paper note, Search ticks, ticket layout, Admin ----------
   Every popup has a ✕ at the top right (it stays in view when the popup scrolls); Esc closes it too. */
.mdl-x{position:sticky;top:-8px;float:right;z-index:4;width:32px;height:32px;margin:-10px -12px 0 8px;border:0;border-radius:50%;background:var(--fill);color:var(--ink);font-size:15px;line-height:32px;text-align:center;cursor:pointer;padding:0}
.mdl-x:hover{background:var(--bad-bg);color:var(--bad)}
.mdl-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[data-style="maharaja"] .mdl-x{background:color-mix(in srgb,var(--b2) 70%,#fff);color:var(--p8)}
@media (max-width:820px){ .mdl-x{width:36px;height:36px;line-height:36px;margin:-6px -4px 0 8px;top:-4px} }
/* print preview: the paper to use, on top; "saved" line above it */
.pv-paperline{margin:-6px 0 10px;padding:7px 12px;border-radius:8px;background:var(--warn-bg);color:var(--warn);font-size:14px;font-weight:600;text-align:center}
.pv-paperline b{font-weight:800;letter-spacing:.02em}
.done-line{margin:0 40px 10px 0;padding:8px 12px;border-radius:8px;background:var(--ok-bg);color:var(--ok);font-size:14px;line-height:1.4}
.pv-tl{padding:0}.pv-r58{width:58mm;padding:2mm}
.rcpt.r58{width:52mm;font-size:8.5pt}.rcpt.r58 .rc-h b{font-size:10pt}
/* the pawn ticket drawn from its layout: every part a box in mm on the paper */
.tl-page{position:relative;background:#fff;color:#000;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;line-height:1.3;overflow:hidden;box-sizing:border-box;flex:none}
.tl-page+.tl-page{break-before:page}
.tl-el{position:absolute;overflow:hidden;box-sizing:border-box;overflow-wrap:anywhere}
.tl-el img{display:block}
.tl-photo img{width:100%;height:100%;object-fit:cover;border:.3mm solid #000}
.tl-logo img{width:100%;height:100%;object-fit:contain}
.tl-jewel{display:flex;gap:2mm;justify-content:var(--al,flex-end);align-items:flex-start}
.tl-jewel img{height:100%;aspect-ratio:4/3;object-fit:cover;border:.3mm solid #000;flex:none}
.tl-items table{width:100%;border-collapse:collapse;font-family:"Courier New",Courier,monospace}
.tl-items th,.tl-items td{padding:.5mm 1mm;text-align:left;font-weight:400}
.tl-items thead th{border-top:.25mm dashed #000;border-bottom:.25mm dashed #000}
.tl-items tfoot td{border-top:.25mm dashed #000;border-bottom:.25mm dashed #000;font-family:Arial,sans-serif;font-weight:700}
.tl-items .r{text-align:right}
.tl-caddr{display:flex;gap:1.5mm}.tl-caddr>span{flex:none}
.tl-loan{display:flex;justify-content:space-between;align-items:center;gap:3mm}
.tl-sign{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:.25mm dashed #000;padding-bottom:1mm}
.tl-terms .tt{display:flex;justify-content:space-between;gap:2mm}
.tl-terms .tl-last{text-align:center;margin-top:1.5mm}
.tl-measure{position:fixed;left:-20000px;top:0;visibility:hidden;pointer-events:none}
.tl-ph{width:100%;height:100%;display:grid;place-items:center;border:.3mm dashed #999;color:#888;font-size:9pt;text-align:center}
/* the layout canvas */
.mdl.mdl-full{width:min(1240px,100%);max-height:calc(100vh - 24px)}
.ld-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:8px}
.ld-bar .lab{font-size:13px;color:var(--muted)}
.ld-size{display:inline-flex;gap:6px;align-items:center;font-size:13px}.ld-size input{width:70px}
.ld-tools{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;min-height:42px;padding:5px 0;margin-bottom:8px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ld-name{font-size:13.5px;margin-right:4px}.ld-fs{font-size:12.5px;min-width:44px;text-align:center}
.ld-hid{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;margin-left:auto}.ld-hid .lab{font-size:12px;color:var(--muted)}
.ld-chip{border:1px dashed var(--line);background:#fff;border-radius:999px;padding:2px 9px;font-size:12px;cursor:pointer;color:var(--accent)}
.ld-wrap{background:#E7E1D8;border-radius:10px;padding:12px;overflow:auto;max-height:68vh}
.ld-stage{position:relative;margin:0 auto}
.ld-stage .tl-page{transform-origin:0 0;box-shadow:0 2px 14px rgba(0,0,0,.18);position:absolute;left:0;top:0}
.ld-stage .tl-el{cursor:move;touch-action:none;user-select:none;-webkit-user-select:none;outline:1px dashed rgba(168,75,59,.35);outline-offset:-1px}
.ld-stage .tl-el:hover{outline-color:rgba(168,75,59,.8)}
.ld-stage .tl-el.sel{outline:2px solid var(--accent);background:rgba(255,236,170,.35);z-index:2;overflow:visible}
.ld-stage .tl-el.off{display:none}
.ld-stage .tl-el .ld-h{display:none;position:absolute;right:0;bottom:0;background:var(--accent);border:1px solid #fff;cursor:nwse-resize;touch-action:none}
.ld-stage .tl-el.sel .ld-h{display:block}
.pr-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
/* Search: a tick on each pledge, Edit next to the number */
.s-grid :is(th,td).tk{width:30px;text-align:center;padding:0 4px;cursor:pointer}
.s-grid td.ed{width:1%;padding:0 4px;white-space:nowrap}.s-grid td.ed .lnk{padding:0 3px;font-size:12px;font-weight:600}.s-grid td.ed .lnk+.lnk{margin-left:4px}
table.grid.xgrid.s-grid tbody tr.ticked td{background:color-mix(in srgb,var(--gold) 16%,#fff)}
.s-ticked{font-size:13px;color:var(--muted);white-space:nowrap}
.s-bar .btn{white-space:nowrap}
.au-tw{max-height:min(46vh,420px)}
.au-tw input{height:26px;max-width:120px}
/* Settings → Fields */
.fd-t td{vertical-align:middle}.fd-t .fd-n{max-width:260px}
.fd-t .tgl{border:0;padding:0;justify-content:flex-start}
.fd-add input{max-width:260px}
/* Pledge: the extra details row */
.xf .bx input{width:180px}
@media (max-width:820px){ .xf .bx input{width:auto;flex:1 1 0} .s-bar .spacer{display:none} }
/* Admin: secrets with Show / Hide */
.sec{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;user-select:all}
/* phones: the jewel's name gets the room (No, weight, purity and ✕ stay narrow); long labels of extra details are not cut */
@media (max-width:820px){
  #pform .pl-items td:first-child,#pform .pl-items th:first-child{width:24px;padding-right:2px}
  #pform .pl-items td:nth-child(3){width:64px}#pform .pl-items td:nth-child(4){width:48px}
  #pform .pl-items :is(td,th).it-x{width:22px}
  #pform .pl-items th{font-size:10.5px;padding:3px 3px}
  .xf .fl>.fl-l{width:auto;min-width:54px;max-width:45%;white-space:normal;line-height:1.15;align-self:center}
}
/* ✕ on the title strip of every screen: closes the screen (as Esc) */
.vwrap{position:relative}
.scr-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:50%;background:rgba(255,255,255,.55);color:var(--ink);font-size:13px;line-height:26px;padding:0;text-align:center;cursor:pointer;z-index:2}
.scr-x:hover{background:var(--bad-bg);color:var(--bad)}
[data-style="maharaja"] .scr-x{width:22px;height:22px;line-height:22px;font-size:11.5px;background:rgba(255,255,255,.45);color:var(--p9)}
[data-style="minimal"] .scr-x{top:22px;transform:none;background:var(--fill)}
@media (max-width:820px){ .scr-x{width:30px;height:30px;line-height:30px;font-size:14px;right:6px} [data-style="maharaja"] .scr-x{width:26px;height:26px;line-height:26px;font-size:12.5px} [data-style="minimal"] .scr-x{top:8px} }
/* a line on top of a suggestion list (the PIN codes of the chosen district) */
.sg-h{position:sticky;top:0;z-index:1;padding:4px 9px;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--fill);border-bottom:1px solid var(--line);white-space:nowrap}
/* 10/10/2026, all-round check: the "Show earlier" / "Showing 2,000 of …" line of long lists, and a red line in Settings */
tr.more td{text-align:center;padding:7px 9px;background:var(--fill)}
tr.more .lnk{font-weight:600}
/* A phone shows the left part of a wide table: "Show more" sits there, not in the middle of the whole table. */
@media (max-width:820px){ tr.more td{text-align:left} }
/* Settings on a phone: "12 months 7 days" fits on its line; the license table scrolls with the names readable. */
.frm .r.unit>span{flex:none}
@media (max-width:820px){ #co_dm,#co_dd{width:60px} }
#stT input[data-k="name"]{min-width:130px}#stT input[data-k="lic"]{min-width:110px}
.tgl.off.bad,.tgl.off.bad b{color:var(--bad)}
/* 10/10/2026: the Old data box (PawnPro import), its progress, the photos line and the PawnPro history rows */
.srow{grid-template-columns:1.5fr 64px 108px 1fr auto auto}
@media (max-width:620px){ .srow{grid-template-columns:1fr 64px 96px} .srow .prev{display:none} }
.od{border:1.5px dashed var(--line);border-radius:10px;padding:14px;margin:4px 0 8px;transition:background .15s,border-color .15s}
.od.over{border-color:var(--accent);background:var(--fill)}
.od-btns{gap:8px;flex-wrap:wrap}
.od-hint{margin:8px 0 0;font-size:12.5px}
.od-st{margin:8px 0 0;font-weight:600;color:var(--muted)}
.od-st:empty{display:none}
.od-sum{margin:10px 0;padding:10px 12px;background:var(--fill);border-radius:8px}
.od-sum .kv{margin-top:6px}
.od-num{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
.od-co{display:flex;gap:8px;align-items:center;margin-bottom:6px;font-size:13px}
.msg.warn{background:var(--fill);color:var(--warn)}
.pbar{height:8px;background:var(--fill);border-radius:4px;overflow:hidden;margin:10px 0 4px}
.pbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
#bgjob{font-weight:600;color:var(--accent);margin:0 12px}
.s-hist{margin:14px 0 6px;font-size:14px}
tr.hist{cursor:pointer}
tr.hist td{color:var(--muted)}
/* 11/10/2026: Create a company: Login · Old data · Details · Preview · Codes; the Find PawnPro steps */
.card.wide{width:min(760px,100%)}
.auth .fg.w-pin{grid-template-columns:1fr 1fr;gap:4px 12px}
.w-from{margin:0 0 4px;font-size:12.5px;color:var(--muted)}
.auth textarea{resize:vertical;min-height:52px}
.srow{grid-template-columns:minmax(0,1.5fr) 60px minmax(0,1fr) 96px 96px 34px;grid-template-areas:"n l b p r x"}
.srow .s-n{grid-area:n}.srow .s-l{grid-area:l}.srow .s-b{grid-area:b}.srow .s-p{grid-area:p}.srow .s-r{grid-area:r}.srow .s-x{grid-area:x}
.srow input{width:100%}
@media (max-width:620px){ .srow{grid-template-columns:minmax(0,1fr) 84px 84px;grid-template-areas:"n n l" "b p r";padding-bottom:10px;border-bottom:1px solid var(--hair)} .srow .s-x{grid-area:auto;grid-column:1/-1;justify-self:end} .srow .s-x:empty{display:none} }
.od-guide{margin:10px 0 0;padding-left:20px;font-size:13px;line-height:1.7}
.od-guide kbd{font-size:12px;opacity:1;font-family:inherit;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--page)}
.card h3 .btn.small{margin-left:8px;vertical-align:1px}
.w-lic td,.w-lic th{white-space:nowrap}
.auth .card{min-width:0}
@media (max-width:620px){ .steps{gap:14px;padding:0 16px} .steps li:not(.on){font-size:0} .steps li:not(.on)::before{font-size:13px;content:counter(s)} }
@media (max-width:620px){ .w-lic thead{display:none} .w-lic,.w-lic tbody,.w-lic tr,.w-lic td{display:block;width:100%} .w-lic tr{padding:8px 0;border-bottom:1px solid var(--hair)} .w-lic td{border:0;padding:1px 0;display:flex;justify-content:space-between;gap:12px;white-space:normal;text-align:right} .w-lic td:first-child{font-weight:600;text-align:left} .w-lic td[data-l]::before{content:attr(data-l);color:var(--muted);font-weight:400;text-align:left} }
.od-pick{display:grid;gap:6px;margin-top:10px;max-height:260px;overflow:auto}
.od-file{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--page);color:inherit;font:inherit;cursor:pointer}
.od-file:hover,.od-file:focus-visible{border-color:var(--accent);background:var(--fill)}
.od-file b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.od-file .note{grid-column:1;font-size:12px}.od-file .num{grid-row:1;grid-column:2;font-size:12.5px;color:var(--muted)}
/* 11/10/2026: small customer photo in Search and in the Pledge suggestions; Search → Pledges / Customers */
.cth{display:inline-block;flex:none;width:28px;height:28px;border-radius:5px;overflow:hidden;background:var(--fill);border:1px solid var(--hair);vertical-align:middle}
.cth img{width:100%;height:100%;object-fit:cover;display:block}
.s-cust{display:flex;align-items:center;gap:8px;min-width:150px}
.s-cust>span:last-child{min-width:0}
.sg:has(.sg-n){grid-template-columns:150px 140px 92px 120px 22px}
.sg-ph .cth{width:24px;height:24px}

.s-bar .seg+.seg{margin-left:8px}
/* 11/10/2026: page numbers under long tables */
.pager{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:2px 0}
.pager button{min-width:30px;height:28px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:var(--page);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.pager button:hover:not(:disabled){border-color:var(--accent)}
.pager button[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.pager button:disabled{opacity:.4;cursor:default}
.pager .pg-gap{padding:0 2px;color:var(--muted)}
.pager .note{margin-left:8px;font-size:12px}
.pager{position:sticky;left:8px;width:max-content;max-width:calc(100vw - 110px)}
.s-cust>span:last-child{line-height:1.25}
/* 11/10/2026: typed dates (dd/mm/yyyy) instead of the calendar */
.daybox{width:112px;font-variant-numeric:tabular-nums}
.bs-rate{margin:4px 0 10px;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;background:var(--page);font-size:14px}
.bs-rate b{font-size:17px}
/* 11/10/2026: help line on the log in and recovery screens */
.help-line{text-align:center;margin:10px 0 0;font-size:13px;color:var(--muted)}
.help-line a{color:inherit;font-weight:600;text-decoration:none;border-bottom:1px dotted currentColor}
/* 11/10/2026: authenticator set up */
.to-steps{padding-left:20px;line-height:1.7}.to-steps .code{margin:6px 0}.to-key{font-size:18px;letter-spacing:.08em}
.otp-in{font-size:22px;letter-spacing:.3em;text-align:center;max-width:180px}
/* 11/10/2026: Terms and Conditions tick, links and popup */
.w-terms{margin-top:12px;line-height:1.5}.w-terms a,.doc-links a{color:var(--accent)}
.doc-links{text-align:center;margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.doc{max-height:min(62vh,560px);overflow:auto;padding-right:6px;line-height:1.55}
.doc h1{font-size:20px;margin:0 0 2px}.doc h2{font-size:15px;margin:16px 0 4px}.doc p,.doc li{margin:4px 0;font-size:14px}
/* 14/10/2026: Maharaja for Windows (desktop.js): this computer on the top bar, the first log in, Devices, Site, Backup */
.app-chip{margin-right:10px;background:color-mix(in srgb,var(--gold,#C5A572) 30%,#fff);color:#3a2a10;font-size:11.5px;vertical-align:1px}
.app-chip:empty{display:none}
.app-chip.bad{background:var(--bad-bg);color:var(--bad)}
.app-line{text-align:center;margin:6px 0 0;font-size:12.5px}
.app-choices{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.app-choices .btn{justify-content:center}
.pill.host{background:color-mix(in srgb,var(--gold,#C5A572) 40%,#fff);color:#3a2a10}
.dv-t td.acts,.bk-t td.acts{white-space:nowrap}
.bk-t td.bad{color:var(--bad)}
.bk-where,.bk-add{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.kvbox{margin-bottom:10px}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.sa-drive{margin:0 0 8px}
@media (max-width:820px){.app-chip{display:none}}
/* 15/10/2026: Search → Filters (status, dates, gold / silver, loan, weight, village, sort), headings that sort, Print or Export */
.s-filt{padding:10px 12px;border:1px solid var(--hair);border-radius:10px;background:var(--page);margin:-4px 0 12px}
.filters .fl{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.filters .fl-in{display:flex;align-items:center;gap:6px;color:var(--ink);max-width:100%}
.filters .fl-in .seg{min-width:0}
.filters .fl-in .to{font-size:12px;color:var(--muted)}
.filters .fl-in input.rq-amt{min-width:0;width:92px}
.filters .fl-in input.daybox{min-width:0;width:108px}
.s-fbtn .cnt{display:inline-block;min-width:18px;margin-left:4px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center}
.s-grid th.srt{cursor:pointer;user-select:none;white-space:nowrap}
.s-grid th.srt:hover{color:var(--accent)}
.s-grid th.srt i{font-style:normal;font-size:9px;margin-left:3px;color:var(--accent)}
.ex-sec{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:12px 0 6px}
.ex-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 12px;margin:0 0 12px}
.sx-print table{font-size:9pt}
@media (max-width:600px){ .filters .fl{flex:1 1 100%;min-width:0} .filters .fl-in{width:100%} .filters .fl-in .seg{display:inline-flex;flex-wrap:wrap;overflow:visible} .filters .fl-in input.rq-amt,.filters .fl-in input.daybox{flex:1 1 0;width:0;min-width:0} .ex-cols{grid-template-columns:1fr 1fr} }
/* 15/10/2026 (later): more filters — quick dates, saved filters, the second order, overdue dates in red */
.filters .fl.sv{flex:1 1 100%}
.filters .fl.sv .fl-in{flex-wrap:wrap;gap:6px}
.sv-chip{display:inline-flex;align-items:center;height:28px;padding:0 2px 0 6px;border:1px solid var(--line);border-radius:14px;background:var(--page)}
.sv-chip .lnk{font-weight:600}
.sv-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:11px;line-height:1;padding:6px}
.sv-x:hover{color:var(--bad)}
.filters .qd{display:flex;flex-wrap:wrap;gap:0 6px;margin-top:2px}
.filters .qd .lnk{font-size:12px;padding:2px 2px}
.filters .qd .lnk[aria-pressed="true"]{font-weight:700;text-decoration:underline}
.filters .fl-in input.rq-amt.sm{width:56px}
.filters .fl-in .dd{display:flex;align-items:center;gap:6px}
.filters .btn.s-d2{align-self:flex-end;font-size:12px}

.sv-name{display:flex;flex-direction:column;gap:4px;margin:10px 0 4px;font-size:13px;color:var(--muted)}
@media (max-width:600px){ .filters .fl-in input.rq-amt.sm{flex:1 1 0;width:0} .filters .fl.fl-date .fl-in{flex-wrap:wrap} .filters .fl.fl-date .dd{flex:1 1 100%} .filters .fl.fl-date .dd input.daybox{flex:1 1 0;width:0} .filters .fl-in .seg button{padding:0 6px;font-size:12.5px} .s-filt{padding:8px} .filters .fl.sv .fl-in{width:auto} }
/* 15/10/2026: Article (Gold / Silver) in the Jewels heading of the Pledge screen; Space or arrows change it */
.card-h.pl-jh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pl-metal{display:inline-flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px;color:var(--muted)}
.pl-metal select{width:auto;min-width:84px;height:26px;padding:0 6px;font-size:13px;font-weight:600;color:var(--ink)}
.pl-metal select:focus{background:var(--focusfill,#FFF6D0)}
/* 15/10/2026: a better sideways scroll bar. On a computer a table's box fits the work area (--fit, ui.js fitWatch), so the
   scroll bar is always on screen and the headings (sticky) stay on top; the bar is thick, in the shop's colour. */
@media (min-width:821px){ #main .tw{max-height:var(--fit,none);overscroll-behavior-x:contain} #main .tw.fit-rest{max-height:var(--rest,var(--fit,none))} }
@media (hover:hover) and (pointer:fine){
  .tw::-webkit-scrollbar{width:14px;height:16px}
  .tw::-webkit-scrollbar-track{background:var(--fill);border-radius:8px}
  .tw::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 70%,#fff);border:3px solid var(--fill);border-radius:8px;min-width:48px}
  .tw::-webkit-scrollbar-thumb:hover,.tw::-webkit-scrollbar-thumb:active{background:var(--accent)}
  .tw::-webkit-scrollbar-corner{background:var(--fill)}
  .tw::-webkit-scrollbar-button{display:none}
}
@supports not selector(::-webkit-scrollbar){ .tw{scrollbar-color:var(--accent) var(--fill)} }
/* 15/10/2026: numbering news (numberNews, shell.js) */
.nn-list{margin:0 0 12px;padding-left:18px;display:flex;flex-direction:column;gap:8px;line-height:1.5}
.nn-list li.bad{color:var(--bad)}
.nn-list .btn.small{margin-left:6px;vertical-align:1px}
/* 15/10/2026: the log in page is plain white with only the word "Maharaja" (no figure, no BANKERS) */
html:has(.auth.land),body:has(.auth.land),[data-style] body:has(.auth.land){background:#fff!important}
.brand .lg-word{display:block;width:min(460px,76vw);height:auto}
@media (max-width:860px){ .brand .lg-word{width:min(320px,70vw)} }
.auth .btn.win-dl{margin-top:14px;display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:600}
/* 16/10/2026: suggestion lists are big (up to 200 lines, most of the screen), scroll both ways, and the arrow keys keep
   the marked line in view; close spellings are marked ≈; the interest rate in small letters */
.sugg{max-height:min(60vh,520px);overflow:auto}
.sugg .sg-h{left:0}
small.close{color:var(--warn);font-weight:700;margin:0 2px 0 0}
small.rate{color:var(--muted);font-size:11px;font-weight:500;margin-left:4px}
/* 16/10/2026: minimal reports (owner: "just tables, better looking, minimalistic"): plain tables, thin lines, Today first */
.mini-rep{max-width:880px}
.mini-rep .mh{margin:22px 0 8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mini-rep .mh:first-child{margin-top:4px}
table.rtab{width:100%;max-width:560px;border-collapse:collapse;font-size:14px;background:var(--card,#fff)}
table.rtab.wide{max-width:none}
table.rtab th{font-size:11.5px;font-weight:600;color:var(--muted);text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.rtab td{padding:9px 10px;border-bottom:1px solid var(--hair)}
table.rtab .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.rtab tr.sub td{padding-top:4px;padding-bottom:4px;color:var(--muted);font-size:13px}
table.rtab tr.sub td:first-child{padding-left:26px}
table.rtab tr.go{cursor:pointer}table.rtab tr.go:hover td{background:var(--accent-soft,#f6efe6)}
table.rtab tr.now td{font-weight:600}
table.rtab tr.bad td{color:var(--bad)}
table.rtab tfoot td{font-weight:700;border-top:1px solid var(--line);border-bottom:0}
#repBody .grid td,#repBody .grid th{padding-top:7px;padding-bottom:7px}

/* Plans, payments and the OTP (03/11/2026) */
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.msg.warn{color:var(--warn)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:6px 0 8px}
.plan-card{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--page);color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.plan-card.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--ring)}
.plan-card .pc-h{display:flex;gap:8px;align-items:center;font-size:17px}
.plan-card .pc-p{font-size:22px;font-weight:700}.plan-card .pc-p small{font-size:12px;font-weight:500;color:var(--muted)}
.plan-card ul,.plan-feat{margin:4px 0 0;padding-left:18px;font-size:13px;line-height:1.45}
.paybox{border:1px dashed var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.paybox p{margin:0}.paybox input{max-width:320px}
.pay-amt,.pay-no{font-size:17px}
.otp-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.otp-row .otp-in{max-width:160px;font-size:18px}
.pp-add{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0}.pp-add input{width:56px;margin-left:6px}
.pp-kind{margin:4px 0}
.s-sim{margin-left:6px;flex:none}