@font-face{font-family:Plex Arabic;src:url(vendor/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Plex Arabic;src:url(vendor/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Plex Arabic;src:url(vendor/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Plex Arabic;src:url(vendor/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root {
  --paper:#faf7f8;--white:#fff;--ink:#241a1d;--forest:#8a1538;--deep:#6e0f2c;
  --muted:#6b5a60;--line:#e7dfe1;--lime:#ffffff;--accent:#704d58;
  --mint:#f0e2e6;--lilac:#ebe8f6;--peach:#f7ebdf;--error:#a43632;
  --radius:18px;--shadow:0 10px 30px #3a282d0c;
  font-family:"Plex Arabic",Tahoma,Arial,sans-serif;font-size:15px;color:var(--ink);background:var(--paper);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;line-height:1.55;min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer;color:inherit}
button:disabled{cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,label:focus-within{outline:2px solid #8d5b6a;outline-offset:3px}
button:disabled{opacity:.48}
button,input,select{min-width:0}
button svg,.brand img{flex:none}
svg{vertical-align:middle}
input:not([type=checkbox]):not([type=file]),select{border:1px solid #e1d3d7;border-radius:10px;min-height:47px;padding:9px 13px;background:#fff;color:var(--ink);width:100%;font-weight:500}
input::placeholder{color:#837076;opacity:1}
input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:#661930;cursor:pointer;vertical-align:middle}
h1,h2,h3,p{margin:0}
h1{font-size:38px;font-weight:700;line-height:1.17;letter-spacing:-.025em}
h2{font-size:21px;font-weight:700;line-height:1.3}
h3{font-size:16px}
small{font-size:.85em}
strong,b{font-weight:600}
p,small{overflow-wrap:anywhere}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.boot{min-height:100dvh;display:grid;justify-items:center;align-content:center;gap:14px;color:var(--muted)}
.boot img{width:52px}

.brand{display:flex;align-items:center;gap:11px;white-space:nowrap;font-size:20px;letter-spacing:-.025em}
.brand img{width:40px;height:40px}
.brand strong{font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;min-height:42px;padding:7px 13px;font-weight:600;line-height:1.3;text-decoration:none;white-space:nowrap;transition:background .16s,border-color .16s,color .16s,transform .16s}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn svg{width:18px;height:18px}
.btn.primary{background:var(--forest);color:#fff;border-color:var(--forest);box-shadow:0 3px 5px #42101f20}
.btn.primary:hover:not(:disabled){background:#a01d45}
.btn.secondary{background:#fff;color:var(--forest);border-color:#e7dade}
.btn.secondary:hover:not(:disabled),.btn.quiet:hover:not(:disabled){background:#f3ebed;border-color:#e7dade}
.btn.quiet{background:transparent;color:#721c36}
.btn.danger-quiet{background:transparent;color:var(--error)}
.btn.danger-quiet:hover:not(:disabled){background:#fceeea}
.btn.danger{background:#aa3934;border-color:#aa3934}
.btn.hero-btn{background:var(--lime);color:#352429;border-color:var(--lime)}
.btn.hero-btn:hover:not(:disabled){background:#f7eef1}
.btn.hero-btn svg,.btn.quiet svg[data-arrow]{order:2}
.icon-btn{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;padding:0;background:#fff;border:1px solid #ebe4e6;border-radius:9px}
.icon-btn:hover{background:#f4edef}
.icon-btn svg{width:18px;height:18px}
.file-label{position:relative;cursor:pointer}
.file-label input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.file-label:hover{background:#f4edef}
.money-number{font-variant-numeric:tabular-nums;white-space:nowrap}
.currency{font-size:.55em;color:inherit;white-space:nowrap;font-weight:600}
.avatar{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border-radius:11px;background:#efe4e7;color:#513940;font-weight:700;font-size:17px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.large{width:78px;height:78px;font-size:31px;border-radius:15px}
.avatar.large svg{width:35px;height:35px}
.lab-label{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.lab-label i,.status i{width:7px;height:7px;flex:none;border-radius:50%;background:currentColor}

.login{min-height:100dvh;display:grid;grid-template-columns:minmax(420px,.88fr) minmax(0,1.12fr);align-items:stretch;background:#faf6f7}
.login-content{display:flex;flex-direction:column;justify-content:space-between;gap:38px;padding:38px clamp(34px,7.4vw,115px) 27px}
.login-form-area{width:min(100%,390px);margin-inline:auto;animation:appear .42s ease-out both}
.login-form-area .lab-label{color:#684852;margin-bottom:18px}
.login h1{font-size:clamp(38px,4vw,58px);line-height:1.12;letter-spacing:-.033em}
.login-title-line{white-space:nowrap}
.login-title-line>span{color:#8a1538}
.login-form-area>p{font-size:16px;color:var(--muted);margin:18px 0 27px}
.login-submit{min-height:48px;justify-content:space-between;margin-top:3px}
.login-switch{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-top:13px;color:var(--muted)}
.login-switch .btn{padding-inline:8px}
.login-note{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12.5px}
.login-note svg{width:16px;height:16px}
.login-visual{position:relative;isolation:isolate;overflow:hidden;margin:17px 0 17px 17px;border-radius:26px;background:#8a1538}

.shell{min-height:100dvh;display:grid;grid-template-columns:238px minmax(0,1fr)}
.rail{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;z-index:4;padding:27px 16px 16px;background:#fbf8f9;border-inline-end:1px solid #e9e2e4}
.rail>.brand{padding:0 12px 25px}
.rail-school{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 9px;border-block:1px solid #ebe4e6;margin:0 6px 23px}
.rail-school-icon{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:9px;background:#f1e4e8;color:#75525d}
.rail-school-icon svg{width:18px}
.rail-school>div,.profile>div{min-width:0}
.rail-school strong,.rail-school small,.profile strong,.profile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-school strong{font-size:13px}
.rail-school small,.profile small{color:var(--muted);font-size:11px}
.nav{display:grid;gap:5px}
.nav-item{width:100%;display:flex;align-items:center;gap:11px;border:1px solid transparent;border-radius:10px;min-height:47px;padding:7px 11px;background:transparent;font-weight:600;text-align:start;color:#5f454d;transition:background .16s}
.nav-item svg{width:19px;height:19px}
.nav-item:hover{background:#f2edee}
.nav-item.selected{color:#6b1b33;background:#f0e3e7;border-color:#ebdce1}
.rail-bottom{margin-top:auto}
.rail-lab{display:flex;align-items:center;gap:9px;padding:13px 9px;margin-bottom:9px;border-radius:11px;background:#f3ebed;color:#664750}
.rail-lab svg{width:19px;flex:none}
.rail-lab strong,.rail-lab span{display:block}
.rail-lab strong{font-size:12px}
.rail-lab span{font-size:10.5px}
.rail-bottom .exit{font-size:13px}
.workspace{min-width:0}
.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #ebe4e6;background:#fbf8f9;padding:0 clamp(19px,3.2vw,48px)}
.crumb{min-width:0}
.desktop-crumb{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:13px;white-space:nowrap}
.desktop-crumb b{color:#b2a0a5}
.desktop-crumb strong{color:var(--ink)}
.mobile-brand{display:none}
.top-actions,.top-date,.profile{display:flex;align-items:center;gap:10px;min-width:0}
.top-actions{gap:19px}
.top-date{font-size:12px;color:var(--muted);white-space:nowrap}
.top-date svg{width:17px}
.profile{padding:0;padding-inline-start:17px;border:0;border-inline-start:1px solid var(--line);background:none;text-align:start;max-width:192px}
.profile:hover strong{color:#6c4b55}
.profile .avatar{width:35px;height:35px}
.profile strong{font-size:13px}
.content{padding:26px clamp(19px,3.2vw,48px) 42px;max-width:1630px;margin-inline:auto}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:0 0 22px}
.page-head p,.panel-head p{color:var(--muted);font-size:14px;margin-top:5px}
.head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 21px 15px;min-height:66px}
.panel-head p{font-size:12.5px}
.panel-head .btn{min-height:36px}
.overview-hero{display:grid;grid-template-columns:1.24fr .76fr;align-items:center;position:relative;isolation:isolate;background:var(--forest);color:white;min-height:235px;border-radius:21px;overflow:hidden}
.hero-copy{padding:26px 33px;position:relative;z-index:2}
.hero-copy .lab-label{color:#f3d9e1}
.hero-copy h2{font-size:clamp(31px,4vw,55px);letter-spacing:-.04em;margin:7px 0 5px;line-height:1.12}
.hero-copy p{color:#e9d8dd;max-width:405px;margin:7px 0 19px;font-size:14px}
.hero-art{display:grid;position:relative;place-items:center;height:100%;isolation:isolate;min-height:210px;perspective:650px}
.hero-halo{position:absolute;width:440px;height:440px;inset-inline-start:44%;top:49%;transform:translate(50%,-50%);border-radius:50%;border:1px solid #95778045;box-shadow:0 0 0 35px #b1778918,0 0 0 70px #b1778913,0 0 0 110px #b177890c;z-index:-2}
.hero-card,.hero-backing{width:clamp(190px,22vw,294px);aspect-ratio:1.62;border-radius:13px;position:absolute;inset-inline-start:calc(50% - clamp(95px,11vw,147px))}
.hero-backing{transform:translate(14px,10px) rotate(9deg);background:#c98da0;box-shadow:0 16px 30px #2e0c1650}
.hero-card{display:flex;flex-direction:column;justify-content:space-between;padding:13px 15px;border:1px solid #fcf3f6;background:linear-gradient(135deg,#f3dde4,#fbedf1);color:#3b292e;transform:translate(-1px,-6px) rotate(-9deg);box-shadow:0 9px 22px #2e0c164d;animation:settle .58s cubic-bezier(.22,.7,.18,1) both}
.art-brand,.art-id,.art-bottom{display:flex;align-items:center;gap:7px}
.art-brand{font-size:10px}
.art-brand img{width:19px}
.art-id{gap:9px}
.art-avatar{width:37px;height:42px;display:grid;place-items:center;border-radius:6px;background:#e7cad3;color:#6c4b55}
.art-id strong,.art-id small{display:block;max-width:162px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-id strong{font-size:16px}
.art-id small,.art-bottom{font-size:10px;color:#6e525a}
.art-bottom{justify-content:space-between;border-top:1px solid #e5ced5;padding-top:5px}
.art-qr{display:grid;place-items:center;width:26px;height:26px;border-radius:4px;background:#fff;color:#6a1a32}
.art-qr svg{width:18px}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:15px 0 18px}
.metric{padding:15px 17px;display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:14px;min-width:0}
.metric-icon,.category-icon,.txn-icon{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:11px;color:#573c44;background:var(--mint)}
.metric-icon.lilac,.category-icon.drinks{color:#60517d;background:var(--lilac)}
.metric-icon.peach,.category-icon.snacks{color:#865636;background:var(--peach)}
.metric>div>span,.metric>div>strong{display:block}
.metric>div{min-width:0}
.metric>div>span{font-size:12.5px;color:var(--muted)}
.metric>div>strong{font-size:25px;line-height:1.25;font-weight:700}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.96fr);gap:15px;align-items:start}
.table-wrap{overflow:auto;scrollbar-color:#b9a0a7 transparent}
.table{width:100%;border-collapse:collapse;text-align:start}
.table th,.table td{padding:9px 12px;border-top:1px solid #f0eaec;text-align:start;white-space:nowrap}
.table th{font-size:11.5px;color:var(--muted);background:#f8f4f5;font-weight:600}
.table td{font-size:13px}
.table th:first-child,.table td:first-child{padding-inline-start:19px}
.table th:last-child,.table td:last-child{padding-inline-end:18px}
.table .icon-btn{width:32px;height:32px}
.table .icon-btn svg{width:16px}
.table tbody tr:hover,.table tbody .checked-row{background:#faf5f6}
.student-name{background:none;border:0;padding:0;display:flex;gap:8px;align-items:center;text-align:start}
.student-name strong,.student-name small{display:block}
.student-name strong{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.student-name small{display:none;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}
.student-name:hover strong{color:#6c4b55}
.amount-cell{font-weight:600}
.status{display:inline-flex;align-items:center;gap:5px;border-radius:22px;padding:3px 9px;font-size:10.5px;font-weight:600;background:#f4e7eb;color:#781e39}
.status.off{background:#faebe7;color:#8b423b}
.status i{width:5px;height:5px}
.transaction{min-width:0;display:grid;grid-template-columns:36px minmax(95px,1.2fr) minmax(95px,.8fr) auto 38px;align-items:center;gap:10px;border-top:1px solid #f1ebed;padding:10px 17px}
.txn-icon{width:34px;height:34px;border-radius:9px}
.txn-icon svg{width:17px;height:17px}
.txn-icon.sale,.txn-icon.support{background:#f7ebdf;color:#865636}
.txn-main strong,.txn-main small{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.txn-main strong,.txn-amount{font-weight:600;font-size:13px}
.txn-main small,.transaction time{font-size:11px;color:var(--muted)}
.txn-amount{white-space:nowrap;justify-self:end}
.txn-amount.positive{color:#81203d}
.transactions.compact .transaction{grid-template-columns:34px minmax(0,1fr) auto 31px;gap:8px;padding:10px 14px}
.transactions.compact .transaction time{display:none}
.transactions.compact .icon-btn{width:31px;height:31px}
.empty{min-height:133px;padding:20px 12px;display:grid;justify-items:center;align-content:center;gap:5px;text-align:center;color:var(--muted)}
.empty>svg{width:29px;height:29px;color:#85616c;margin-bottom:4px}
.empty>strong{color:var(--ink)}
.empty p{font-size:12px}
.directory-head{align-items:end}
.count-pill{padding:1px 8px;border-radius:20px;background:#f1e4e8;color:#684952;font-size:13px;font-weight:600}
.search{display:flex;align-items:center;gap:8px;position:relative;width:min(100%,245px)}
.search svg{position:absolute;inset-inline-start:11px;width:17px;color:#745760;pointer-events:none}
.search input:not([type=checkbox]):not([type=file]){min-height:40px;padding-inline-start:36px;background:#f9f5f6;font-size:13px}
.product-admin,.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.category-title,.account-summary{display:flex;align-items:center;gap:10px}
.category-title .category-icon{width:35px;height:35px}
.product-admin-row,.cashier-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:11px 17px;border-top:1px solid #f0edee}
.product-admin-row strong,.product-admin-row small,.cashier-row strong,.cashier-row small,.account-summary strong,.account-summary small{display:block}
.product-admin-row small,.cashier-row small,.account-summary small{color:var(--muted)}
.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.settings-body{padding:0 20px 18px;display:grid;gap:16px;justify-items:start}
.settings-actions{display:flex;gap:7px;flex-wrap:wrap}
.cashiers,.parent-recent{margin-top:16px}
.wallet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:14px}
.wallet-card{background:var(--forest);color:white;padding:20px 23px 23px;border-radius:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.wallet-card::after{content:"";width:225px;height:225px;border:1px solid #e6bbc845;border-radius:50%;box-shadow:0 0 0 25px #e3b4c218,0 0 0 46px #e3b4c214;position:absolute;inset-inline-end:-43px;bottom:-94px;pointer-events:none}
.wallet-card>*{position:relative;z-index:1}
.wallet-identity{display:flex;align-items:center;gap:10px}
.wallet-identity .avatar{width:43px;height:43px;background:#efccd7;color:#513840}
.wallet-identity h2{font-size:19px}
.wallet-identity p,.wallet-balance span{color:#e9d7dc;font-size:13px}
.wallet-symbol{margin-inline-start:auto;color:#f3d9e1}
.wallet-balance{margin:19px 0 14px}
.wallet-balance>span,.wallet-balance>strong{display:block}
.wallet-balance>strong{font-size:43px;line-height:1.14;font-weight:700}
.wallet-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn.wallet-quiet{color:#f2e5e9;border-color:#dbbfc77a;background:#741230}
.btn.wallet-quiet:hover{background:#9c2a4d}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}

.pos-grid{display:grid;grid-template-columns:minmax(0,1.36fr) minmax(305px,.94fr);align-items:start;gap:15px}
.catalog,.checkout{padding-bottom:9px}
.catalog .panel-head{align-items:center}
.checkout{position:sticky;top:13px}
.checkout-inner{padding:0 17px 10px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.pos-categories{padding:0 18px 14px}
.btn.chip{border-color:#e8dbdf;background:#fff;min-height:35px;border-radius:8px;color:#64454e;font-size:12px;padding-inline:10px}
.btn.chip svg{width:15px;height:15px}
.btn.chip:hover,.btn.chip.active{background:#f2e5e9;border-color:#c8aeb6;color:#5d172c}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 17px 10px}
.catalog-card{text-align:start;min-width:0;border:1px solid #eadee2;border-radius:13px;display:grid;gap:7px;padding:9px;background:#fff;transition:background .14s,border-color .14s}
.catalog-card:hover{border-color:#a07783;background:#f9f2f4}
.food-tile{display:grid;place-items:center;background:#f4e2e7;color:#684852;min-height:67px;border-radius:8px}
.food-tile svg{width:28px;height:28px}
.catalog-card.drinks .food-tile{background:#eeeaf8;color:#665889}
.catalog-card.snacks .food-tile{background:#f8eee2;color:#90623f}
.catalog-card>strong{overflow-wrap:anywhere;font-size:14px}
.product-foot{display:flex;align-items:center;justify-content:space-between;gap:3px;color:#60434c;font-size:13px}
.product-add{display:grid;place-items:center;background:#f0e2e6;color:#543b42;width:25px;height:25px;border-radius:7px;font-size:13px}
.product-add svg{width:15px}
.scan-form{padding:10px;background:#f4ebee;border:1px solid #eddde2;border-radius:13px}
.scan-banner{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.scan-banner strong,.scan-banner small,.scan-identity strong,.scan-identity small{display:block}
.scan-banner small,.scan-identity small{color:var(--muted)}
.scan-glyph{display:grid;place-items:center;width:38px;height:38px;background:#ecd8de;color:#63454e;border-radius:9px}
.scan-input-wrap{display:flex;gap:6px}
.scan-input-wrap input:not([type=checkbox]):not([type=file]){min-height:41px}
.scan-options{display:flex;gap:2px;flex-wrap:wrap;margin-top:5px}
.scan-options .btn{padding-inline:7px;font-size:12px;min-height:32px}
.scan-options .btn svg{width:15px}
.scan-identity{display:flex;align-items:center;gap:9px;min-width:0;padding:7px 0 12px}
.scan-identity>div{overflow-wrap:anywhere}
.scan-identity .btn{margin-inline-start:auto;font-size:11px}
.scan-balance,.mini-balance{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f3e5e9;padding:10px 12px;border-radius:9px;color:#553b43}
.scan-balance strong,.mini-balance>strong{font-size:21px;white-space:nowrap}
.support-note{margin:8px 0;color:#731d37;font-size:12px}
.support-note svg{width:16px}
.scan-enter{animation:scan-enter .34s ease-out both}
.cart-lines{margin-top:13px}
.cart-lines .empty{min-height:108px}
.cart-line{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #f0e9eb;padding:8px 0}
.cart-line strong,.cart-line small{display:block}
.cart-line small{color:var(--muted)}
.quantity{display:inline-flex;align-items:center;gap:6px}
.quantity .btn{min-width:31px;min-height:31px;padding:0;background:#f4edef;border-color:#ece3e6}
.quantity .btn>span:empty{display:none}
.quantity .btn:hover{background:#ecdbe0}
.cart-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:8px 0 10px}
.cart-total>strong{font-size:27px}
.checkout-buttons{display:grid;gap:6px}
.inline-error,.form-error{background:#faebe8;color:#8c332e;border-radius:8px;padding:7px 10px;margin:5px 0;font-size:13px}

.dialog{border:1px solid #e7dade;border-radius:18px;background:#fff;color:var(--ink);padding:0;width:min(480px,calc(100vw - 28px));max-height:min(90dvh,860px);box-shadow:0 25px 65px #2f0c1644;animation:appear .19s ease-out;overflow:auto}
.dialog.wide{width:min(790px,calc(100vw - 28px))}
.dialog::backdrop{background:#310c1792;backdrop-filter:blur(3px)}
.dialog-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 18px;border-bottom:1px solid #eee6e8;background:#fff}
.dialog-body{padding:17px 18px 19px}
.dialog-actions{display:flex;gap:7px;justify-content:flex-start;flex-wrap:wrap;margin-top:10px}
.field-stack{display:grid;gap:12px}
.field-stack label:not(.btn){display:grid;gap:4px;font-weight:600;font-size:13px}
.field-stack .check-label:not(.btn){display:flex;align-items:center;gap:9px;font-size:14px}
.field-stack .hint,.hint{color:var(--muted);font-size:12.5px}
.confirmation{margin-bottom:9px;font-size:14px;color:var(--muted)}
.photo-control{display:flex;align-items:center;gap:13px;margin-bottom:4px}
.photo-control small,.mini-balance small,.inactive-card small,.link-row small{display:block;color:var(--muted)}
.photo-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.photo-actions .btn{min-height:34px;font-size:12px}
.student-detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:15px}
.detail-card,.detail-tools{min-width:0}
.physical-card{background:#f9ebef;color:#8a1538;border:1px solid #dbc8ce;border-radius:12px;overflow:hidden;box-shadow:0 5px 19px #3e101e19}
.physical-card header,.physical-card footer{display:flex;justify-content:space-between;align-items:center;gap:7px;padding:8px 10px;font-size:10px}
.physical-card header{background:#8a1538;color:#fff;min-height:38px}
.physical-card header>span{font-weight:500;text-align:end;overflow-wrap:anywhere}
.physical-card .brand{font-size:12px;gap:5px}
.physical-card .brand img{width:23px;height:23px}
.physical-body,.physical-identity{display:flex;align-items:center;min-width:0;gap:8px}
.physical-body{justify-content:space-between;padding:11px 9px 9px}
.physical-identity strong,.physical-identity small{display:block;overflow-wrap:anywhere}
.physical-identity strong{font-weight:700;font-size:16px;line-height:1.25}
.physical-identity small{color:#61444d;font-size:11px}
.print-avatar{width:49px;height:54px;font-size:21px;border-radius:7px}
.actual-qr{width:71px;height:71px;flex:none;background:white;border-radius:3px}
.physical-card footer{border-top:1px solid #e8d5db;color:#65464f;padding-block:5px}
.detail-balance{display:flex;justify-content:space-between;align-items:center;margin:12px 0 8px;color:#5f424b}
.detail-balance strong{font-size:26px}
.detail-actions{display:flex;flex-wrap:wrap;gap:5px}
.detail-actions .btn{min-height:34px;padding-inline:9px;font-size:12px}
.detail-tools section{padding:0 0 10px;margin:0 0 9px;border-bottom:1px solid #eee6e8}
.detail-tools section:last-child{border-bottom:0;margin-bottom:0}
.detail-tools h3{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.detail-tools h3 svg{width:17px;color:#77525d}
.detail-tools p{font-size:12px;color:var(--muted);margin-bottom:7px}
.detail-tools .btn{min-height:33px;font-size:12px}
.link-row{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:4px;font-size:13px}
.inactive-card{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:12px}
.code-field{letter-spacing:.07em}
.receipt-head{text-align:center;padding:3px 0 12px}
.receipt-head h3{font-size:21px;margin-top:7px}
.receipt-head p,.receipt-head small{color:var(--muted)}
.receipt-mark{display:inline-grid;place-items:center;width:47px;height:47px;background:#f2dee4;color:#5e414a;border-radius:13px;animation:scan-enter .3s ease-out}
.receipt-summary{border-top:1px solid var(--line);padding-top:8px}
.receipt-items>div,.receipt-summary>div{display:flex;justify-content:space-between;gap:8px;padding:4px 0}
.receipt-summary>div strong{font-size:19px;white-space:nowrap}
.camera-view{position:relative;overflow:hidden;border-radius:12px;background:#3a0a19;min-height:160px}
.camera-view video{display:block;width:100%;max-height:55dvh}
.camera-overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#ffffff}
.camera-overlay svg{width:93px;height:93px;opacity:.86;filter:drop-shadow(0 1px 2px #0007)}
.camera-status{margin:9px 0;color:var(--muted)}
#toasts{position:fixed;z-index:10;inset-inline-end:18px;bottom:15px;pointer-events:none}
.toast{display:flex;align-items:center;gap:8px;max-width:min(440px,calc(100vw - 36px));background:#5c0d25;color:#fff;padding:11px 15px;border-radius:11px;box-shadow:0 7px 20px #35252a3a;animation:appear .2s ease-out}
.toast.error{background:#843a32}
.toast svg{width:19px;flex:none}
@keyframes appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes settle{from{opacity:.45;transform:translate(-4px,2px) rotate(-4deg) scale(.96)}to{opacity:1;transform:translate(-1px,-6px) rotate(-9deg) scale(1)}}
@keyframes scan-enter{from{opacity:.5;transform:scale(.98)}to{opacity:1;transform:scale(1)}}

@media(max-width:1120px){
  .shell{grid-template-columns:204px minmax(0,1fr)}
  .rail{padding-inline:12px}
  .dashboard-grid{grid-template-columns:minmax(0,1fr)}
  .transactions.compact .transaction{grid-template-columns:34px minmax(0,1fr) minmax(90px,.5fr) auto 38px;padding-inline:19px}
  .transactions.compact .transaction time{display:block}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-admin{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:850px){
  .shell{display:block}
  .rail{height:auto;position:fixed;inset:auto 0 0;display:block;padding:5px 4px max(5px,env(safe-area-inset-bottom));border:0;border-top:1px solid #e8d9de;box-shadow:0 -6px 21px #8a153812}
  .rail>.brand,.rail-school,.rail-bottom,.desktop-crumb{display:none}
  .mobile-brand{display:block}
  .mobile-brand .brand{font-size:17px}
  .mobile-brand img{width:32px;height:32px}
  .nav{display:flex;justify-content:center;max-width:700px;margin-inline:auto;gap:3px}
  .nav-item{flex:1;justify-content:center;flex-direction:column;gap:2px;padding:3px 4px;min-height:47px;font-size:10px;white-space:nowrap}
  .nav-item svg{width:17px;height:17px}
  .topbar{height:60px}
  .content{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  #toasts{bottom:calc(69px + env(safe-area-inset-bottom))}
  .login{grid-template-columns:minmax(350px,1.05fr) minmax(0,.95fr)}
  .login-content{padding-inline:25px}
}
/* permanent delete */
.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cashier-row .row-actions .btn.danger-quiet{padding-inline:10px}
.detail-tools section.danger-zone{background:#fbf1ef;border:1px solid #f0d4cf;border-radius:12px;padding:10px 12px}
.detail-tools .danger-zone h3,.detail-tools .danger-zone h3 svg{color:#9b2f2a}
.btn.danger{color:#fff}
.btn.danger:hover:not(:disabled){background:#8f2b27;border-color:#8f2b27}
.danger-note{display:flex;gap:10px;align-items:flex-start;background:#fbf1ef;border:1px solid #f0d4cf;color:#6d2622;border-radius:12px;padding:11px 13px;margin-bottom:11px;font-size:13.5px}
.danger-note>svg{flex:none;width:20px;height:20px;color:#a43632;margin-top:2px}
.danger-note strong{display:block;margin-bottom:4px;color:#8c2b27}
.danger-note ul{margin:0;padding-inline-start:18px;display:grid;gap:4px}
.danger-note p{margin:0}
.danger-note .currency{font-size:.85em}
.danger-hint{margin-bottom:12px}
.confirm-name{display:block;color:var(--ink);margin:2px 0 4px}
.dialog-extra{display:flex;justify-content:flex-start;border-top:1px dashed #eadde0;padding-top:8px;margin-top:2px}
@media(max-width:620px){
  h1{font-size:31px}
  h2{font-size:19px}
  .top-date,.profile>div{display:none}
  .profile{border:0;padding:0}
  .content{padding:18px 12px 81px}
  .topbar{padding-inline:13px}
  .page-head{align-items:flex-start;margin-bottom:14px;flex-wrap:wrap;gap:8px}
  .page-head p{font-size:12.5px}
  .head-actions{justify-content:flex-start}
  .head-actions .btn{min-height:36px;font-size:12px}
  .overview-hero{min-height:220px;grid-template-columns:minmax(0,1fr) minmax(0,.69fr);border-radius:15px}
  .hero-copy{padding:13px 13px 13px 0}
  .hero-copy h2{font-size:34px}
  .hero-copy p{font-size:12px;margin-bottom:10px}
  .hero-copy .btn{padding-inline:7px;min-height:33px;font-size:11px}
  .hero-copy .btn svg{width:14px}
  .hero-halo{width:180px;height:180px}
  .hero-card,.hero-backing{inset-inline-start:calc(50% - 59px);width:126px;border-radius:7px}
  .hero-card{padding:5px 6px}
  .hero-backing{transform:translate(2px,7px) rotate(11deg)}
  .art-brand{font-size:6px}
  .art-brand img{width:13px}
  .art-avatar{width:19px;height:21px;border-radius:4px}
  .art-avatar svg{width:14px}
  .art-id{gap:4px}
  .art-id strong{font-size:8px;max-width:86px}
  .art-id small,.art-bottom{font-size:5.7px;max-width:82px}
  .art-qr{width:14px;height:13px}
  .art-qr svg{width:11px}
  .metrics{gap:5px;margin:8px 0 12px}
  .metric{padding:7px 6px;gap:5px;flex-direction:column;align-items:flex-start;border-radius:9px}
  .metric-icon{width:29px;height:29px;border-radius:7px}
  .metric-icon svg{width:17px}
  .metric>div>span{font-size:10px}
  .metric>div>strong{font-size:18px}
  .dashboard-grid,.product-admin,.settings-grid,.pos-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .panel{border-radius:13px}
  .panel-head{min-height:54px;padding:11px 10px}
  .panel-head p{font-size:11px}
  .panel-head .btn{font-size:11px;padding-inline:7px}
  .directory-head{align-items:start;flex-wrap:wrap}
  .directory-head .search{width:100%}
  .table th,.table td{padding:7px 5px}
  .table th:first-child,.table td:first-child{padding-inline-start:8px}
  .table th:last-child,.table td:last-child{padding-inline-end:8px}
  .table .grade-col{display:none}
  .student-name .avatar{width:29px;height:29px;font-size:14px;border-radius:8px}
  .student-name{gap:5px}
  .student-name strong{max-width:104px;font-size:12px}
  .student-name small{display:block;max-width:100px}
  .table .icon-btn{width:28px;height:28px}
  .transactions .transaction,.transactions.compact .transaction{grid-template-columns:27px minmax(0,1fr) auto 28px;gap:5px;padding:8px}
  .transactions .transaction time,.transactions.compact .transaction time{display:none}
  .txn-icon,.transaction .icon-btn,.transactions.compact .icon-btn{width:27px;height:27px}
  .txn-icon svg{width:15px}
  .txn-main strong{font-size:12px}
  .txn-main small{font-size:10px}
  .wallet-card{padding:15px}
  .wallet-balance>strong{font-size:36px}
  .checkout{position:static;grid-row:1}
  .checkout-inner{padding-inline:10px}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:9px}
  .pos-categories{padding-inline:9px}
  .catalog .panel-head .search{width:49%}
  .login{display:flex;flex-direction:column;min-height:100dvh}
  .login-content{padding:18px 19px 15px;gap:25px}
  .login .brand{font-size:18px}
  .login .brand img{width:34px;height:34px}
  .login h1{font-size:clamp(34px,10vw,44px)}
  .login-form-area .lab-label{margin-bottom:8px}
  .login-form-area>p{margin:9px 0 18px;font-size:14px}
  .login-visual{min-height:180px;margin:0 12px 12px;border-radius:14px}
  .student-detail{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:359px){
  .status-col{display:none}
  .hero-card,.hero-backing{width:102px;inset-inline-start:calc(50% - 47px)}
  .hero-copy h2{font-size:28px}
  .nav-item{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.print-preview{display:block;width:min(100%,340px);margin:12px auto;border-radius:10px;box-shadow:var(--shadow)}
.print-progress{margin:12px 0;font-weight:600}
.print-actions a:focus-visible{outline:2px solid #8d5b6a;outline-offset:3px}
.sale-recovery:not(:empty){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;background:#f8eee4;border:1px solid #ead6c4;border-radius:11px;padding:9px 13px;margin-bottom:11px;color:#73472e;font-size:13px}
.btn.pos-jump{display:none}
@media(max-width:620px){
  .btn.pos-jump{position:fixed;inset-inline-end:14px;bottom:calc(66px + env(safe-area-inset-bottom));z-index:3;display:inline-flex;box-shadow:0 8px 23px #44112056}
}

.login-form-area>.login-access-note{font-size:13px;margin:13px 0 0}
.student-picker{border:1px solid var(--line);border-radius:10px;padding:9px 12px;max-height:185px;overflow:auto}
.student-picker legend{padding-inline:5px;font-size:13px;color:var(--muted)}
.student-picker label+label{margin-top:7px}



/* ===== v2: Qatar maroon & white theme ===== */
:root{--maroon:#8a1538;--maroon-deep:#6e0f2c;--maroon-dark:#4d0a1f;--rose:#f7eef1;--rose-line:#ecdce2}
.status{background:#e8f3ec;color:#2c6a45}
.txn-amount.positive{color:#2c6a45}
.btn.primary{background:var(--maroon);border-color:var(--maroon);box-shadow:0 3px 8px #8a153826}
.btn.primary:hover:not(:disabled){background:#a01d45;border-color:#a01d45}
.btn.secondary{color:var(--maroon);border-color:var(--rose-line)}
.btn.quiet{color:var(--maroon)}
.btn.hero-btn{background:#fff;color:var(--maroon);border-color:#fff}
.btn.hero-btn:hover:not(:disabled){background:var(--rose)}
.btn.wallet-quiet{background:#ffffff14;border-color:#ffffff59;color:#fff}
.btn.wallet-quiet:hover{background:#ffffff26}
button:focus-visible,input:focus-visible,select:focus-visible,label:focus-within{outline-color:#b8466a}
input:not([type=checkbox]):not([type=file]):focus,select:focus{border-color:#c06a85}
input[type=checkbox]{accent-color:var(--maroon)}
.nav-item.selected{color:var(--maroon);background:var(--rose);border-color:var(--rose-line);box-shadow:inset -3px 0 0 var(--maroon)}
.brand.light{color:#fff}
.flip{transform:scaleX(-1)}

/* Serrated (9-point) edge from the flag of Qatar */
.topbar{position:relative;background:var(--maroon);color:#fff;border-bottom:0;padding-inline-start:clamp(34px,4vw,60px)}
.topbar::before{content:"";position:absolute;inset-block:0;right:0;width:22px;background:#fff;clip-path:polygon(100% 0,100% 100%,42% 100%,0 94.444%,42% 88.889%,0 83.333%,42% 77.778%,0 72.222%,42% 66.667%,0 61.111%,42% 55.556%,0 50%,42% 44.444%,0 38.889%,42% 33.333%,0 27.778%,42% 22.222%,0 16.667%,42% 11.111%,0 5.556%,42% 0%)}
.desktop-crumb{color:#f3d9e1}
.desktop-crumb b{color:#d68aa1}
.desktop-crumb strong{color:#fff}
.top-date{color:#f3d9e1}
.profile{border-inline-start-color:#ffffff40;color:#fff}
.profile small,.rail-school small{color:inherit;opacity:.8}
.rail-school small{color:var(--muted);opacity:1}
.profile:hover strong{color:#fff;text-decoration:underline}
.profile .avatar{background:#fff;color:var(--maroon)}
.rail{background:#fff}
.rail-lab{background:var(--rose);color:#6e2a40}
.rail-school-icon{background:var(--rose);color:var(--maroon)}

.overview-hero{background:var(--maroon);padding-inline-start:26px}
.overview-hero::before{content:"";position:absolute;inset-block:0;right:0;width:34px;background:#fff;clip-path:polygon(100% 0,100% 100%,40% 100%,0 94.444%,40% 88.889%,0 83.333%,40% 77.778%,0 72.222%,40% 66.667%,0 61.111%,40% 55.556%,0 50%,40% 44.444%,0 38.889%,40% 33.333%,0 27.778%,40% 22.222%,0 16.667%,40% 11.111%,0 5.556%,40% 0%);z-index:3}
.hero-copy .lab-label{color:#f3d9e1}
.hero-copy p{color:#f6e4ea}
.hero-halo{border-color:#ffffff30;box-shadow:0 0 0 35px #ffffff0d,0 0 0 70px #ffffff09,0 0 0 110px #ffffff06}
.hero-backing{background:#c98da0}
.hero-card{background:#fff;border-color:#fff;color:var(--ink)}
.art-brand{background:var(--maroon);color:#fff;margin:-13px -15px 0;padding:6px 15px;border-radius:12px 12px 0 0}
.art-avatar{background:var(--rose);color:var(--maroon)}
.art-id small,.art-bottom{color:var(--muted)}
.art-bottom{border-top-color:var(--rose-line)}
.art-qr{color:var(--maroon)}
.wallet-card{background:var(--maroon);padding-inline-start:46px}
.wallet-card::before{content:"";position:absolute;inset-block:0;right:0;width:26px;background:#fff;clip-path:polygon(100% 0,100% 100%,40% 100%,0 94.444%,40% 88.889%,0 83.333%,40% 77.778%,0 72.222%,40% 66.667%,0 61.111%,40% 55.556%,0 50%,40% 44.444%,0 38.889%,40% 33.333%,0 27.778%,40% 22.222%,0 16.667%,40% 11.111%,0 5.556%,40% 0%);z-index:2}
.wallet-card::after{border-color:#ffffff30;box-shadow:0 0 0 25px #ffffff0c,0 0 0 46px #ffffff08}
.wallet-identity .avatar{background:#fff;color:var(--maroon)}
.wallet-identity p,.wallet-balance span{color:#f6e4ea}
.wallet-symbol{color:#f3d9e1}
.empty-action{display:flex;justify-content:center;padding:0 12px 18px}
.toast{background:#5c0d25}

/* Login */
.login{background:#fff}
.login-content{gap:28px}
.login-form-area .lab-label{color:var(--maroon)}
.login-title-line{color:var(--maroon)}
.login-divider{display:flex;align-items:center;gap:10px;margin:20px 0 10px;color:var(--muted);font-size:13px}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.login-register{width:100%;min-height:46px}
.login-back{margin-top:10px;padding-inline:4px}
.login-bottom{display:grid;gap:14px}
.login-visual{margin:0;border-radius:0;background:radial-gradient(120% 90% at 20% 15%,#a3214a 0%,var(--maroon) 45%,var(--maroon-deep) 100%);clip-path:polygon(0 0,calc(100% - 44px) 0,100% 5.556%,calc(100% - 44px) 11.111%,100% 16.667%,calc(100% - 44px) 22.222%,100% 27.778%,calc(100% - 44px) 33.333%,100% 38.889%,calc(100% - 44px) 44.444%,100% 50%,calc(100% - 44px) 55.556%,100% 61.111%,calc(100% - 44px) 66.667%,100% 72.222%,calc(100% - 44px) 77.778%,100% 83.333%,calc(100% - 44px) 88.889%,100% 94.444%,calc(100% - 44px) 100%,0 100%);display:flex;flex-direction:column;justify-content:center;gap:34px;padding:48px 92px 48px 56px;color:#fff}
.visual-emblem{position:absolute;width:62%;max-width:460px;left:-8%;bottom:-6%;opacity:.07;pointer-events:none}
.visual-copy{position:relative;display:grid;gap:10px;max-width:420px}
.visual-brand{display:flex;align-items:center;gap:10px;font-size:18px}
.visual-brand img{width:38px;height:38px}
.visual-copy strong{font-size:clamp(28px,2.7vw,40px);line-height:1.2;font-weight:700;letter-spacing:-.02em}
.visual-copy small{color:#f3d9e1;font-size:14px}
.visual-card{position:relative;width:min(100%,380px);aspect-ratio:85.6/54;background:#fff;border-radius:16px;box-shadow:0 26px 50px #2a061266;overflow:hidden;transform:rotate(-4deg);color:var(--ink);display:flex;flex-direction:column}
.vc-head{height:22%;background:var(--maroon);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 6%;font-size:13px;font-weight:700;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),94.444% 100%,88.889% calc(100% - 8px),83.333% 100%,77.778% calc(100% - 8px),72.222% 100%,66.667% calc(100% - 8px),61.111% 100%,55.556% calc(100% - 8px),50% 100%,44.444% calc(100% - 8px),38.889% 100%,33.333% calc(100% - 8px),27.778% 100%,22.222% calc(100% - 8px),16.667% 100%,11.111% calc(100% - 8px),5.556% 100%,0% calc(100% - 8px));padding-bottom:8px;box-sizing:content-box}
.vc-head span{display:flex;align-items:center;gap:7px}
.vc-head img{width:22px;height:22px}
.vc-head small{font-weight:500;opacity:.85}
.vc-body{flex:1;display:flex;justify-content:space-between;align-items:center;padding:3% 6% 6%}
.vc-id{display:flex;gap:10px;align-items:center}
.vc-id i{width:58px;height:72px;border-radius:9px;background:var(--rose)}
.vc-id span{display:grid;gap:8px}
.vc-id b{display:block;height:9px;width:92px;border-radius:5px;background:#e9d6dd}
.vc-id b+b{width:60px;background:#f1e5e9}
.vc-side{display:grid;justify-items:center;gap:8px}
.vc-gov{display:flex;align-items:center;gap:5px}
.vc-gov img{width:22px}
.vc-gov b{display:block;width:56px;height:7px;border-radius:4px;background:#e9d6dd}
.vc-qr{display:grid;place-items:center;width:74px;height:74px;border:1px solid var(--rose-line);border-radius:8px;color:var(--maroon)}
.vc-qr svg{width:46px;height:46px}

/* Ministry footer */
.gov-footer{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 0 4px;color:var(--maroon);text-align:start}
.gov-footer img{width:44px;height:auto;flex:none}
.gov-footer div{display:grid;line-height:1.35}
.gov-footer strong{font-size:14px;font-weight:700}
.gov-footer span{font-size:12px;color:var(--muted)}
.login-bottom .gov-footer{justify-content:flex-start;border-top:1px solid var(--line);padding-top:16px}
.gov-footer.in-app{margin-top:34px;border-top:1px solid var(--line);padding-top:20px}

/* Student card preview (rendered exactly like the printed PDF) */
.card-preview{margin:0}
.card-render,.card-skeleton{display:block;width:100%;aspect-ratio:85.6/54;border-radius:12px;box-shadow:0 8px 24px #4d0a1f24}
.card-skeleton{background:#fff;border:1px solid var(--rose-line);overflow:hidden;display:flex;flex-direction:column}
.cs-head{height:20%;background:var(--maroon);color:#fff;display:flex;align-items:center;padding:0 12px;font-size:12px;clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),94.444% 100%,88.889% calc(100% - 6px),83.333% 100%,77.778% calc(100% - 6px),72.222% 100%,66.667% calc(100% - 6px),61.111% 100%,55.556% calc(100% - 6px),50% 100%,44.444% calc(100% - 6px),38.889% 100%,33.333% calc(100% - 6px),27.778% 100%,22.222% calc(100% - 6px),16.667% 100%,11.111% calc(100% - 6px),5.556% 100%,0% calc(100% - 6px));padding-bottom:6px;box-sizing:content-box}
.cs-body{flex:1;display:flex;align-items:center;gap:10px;padding:12px}
.print-avatar{width:49px;height:54px;font-size:21px;border-radius:7px;background:var(--rose);color:var(--maroon)}
.inactive-card{border-color:var(--rose-line)}
.detail-tools h3 svg{color:var(--maroon)}

/* Parent invite code */
.invite-code{display:grid;justify-items:center;gap:4px;text-align:center;padding:16px 12px;border-radius:14px;background:var(--rose);border:1px dashed #d7a7b6;margin-bottom:14px}
.invite-code span{font-weight:600;color:var(--muted)}
.invite-code strong{font-size:clamp(24px,7vw,32px);letter-spacing:.08em;color:var(--maroon);font-variant-numeric:tabular-nums;user-select:all}
.invite-code small{color:var(--muted)}
.invite-steps{margin:0 0 10px;padding-inline-start:20px;display:grid;gap:5px;font-size:13.5px}

@media(max-width:850px){
  .rail{background:#fff}
  .login-visual{padding:40px 70px 40px 32px}
}
@media(max-width:620px){
  .topbar{padding-inline-start:28px}
  .topbar::before{width:16px}
  .overview-hero{padding-inline-start:20px}
  .overview-hero::before{width:20px}
  .wallet-card{padding-inline-start:34px}
  .wallet-card::before{width:18px}
  .login{background:#fff}
  .login-visual{order:-1;min-height:0;margin:0;padding:18px 20px 34px;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),94.444% 100%,88.889% calc(100% - 16px),83.333% 100%,77.778% calc(100% - 16px),72.222% 100%,66.667% calc(100% - 16px),61.111% 100%,55.556% calc(100% - 16px),50% 100%,44.444% calc(100% - 16px),38.889% 100%,33.333% calc(100% - 16px),27.778% 100%,22.222% calc(100% - 16px),16.667% 100%,11.111% calc(100% - 16px),5.556% 100%,0% calc(100% - 16px));gap:0;flex-direction:row;align-items:center;justify-content:space-between}
  .login-visual .visual-copy strong,.login-visual .visual-card{display:none}
  .visual-copy small{font-size:12px}
  .visual-emblem{position:static;width:64px;opacity:.9;order:2}
  .login-content{padding-top:16px}
  .login-content>.brand{display:none}
  .login h1{font-size:clamp(30px,9vw,40px)}
  .gov-footer strong{font-size:13px}
  .gov-footer img{width:38px}
  .gov-footer.in-app{margin-top:24px}
}

/* v2 responsive fixes */
.avatar svg{width:60%;height:60%}
.catalog .panel-head h2,.panel-head h2{overflow-wrap:normal}
.catalog .panel-head h2{white-space:nowrap}
.cashier-row small bdi{overflow-wrap:anywhere}
.gov-footer strong{overflow-wrap:normal}
@media(max-width:620px){
  .panel-head{flex-wrap:wrap}
  .panel-head>div:first-child{flex:1 1 170px;min-width:0}
  .cashier-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .cashier-row>.row-actions{grid-column:1/-1;justify-self:stretch}
  .cashier-row .row-actions .btn{min-height:36px;font-size:12.5px}
  .cashier-row .status{justify-self:end}
  .settings-body .settings-actions .btn{min-height:38px}
  .dialog-actions .btn{flex:1 1 auto}
  .gov-footer{gap:10px}
}
@media(max-width:359px){
  .gov-footer strong{font-size:12px}
}