@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Tajawal',Tahoma,Arial,sans-serif;color:#262238;background:#f7f8fc;font-synthesis:none;--purple:#7529da;--muted:#92909f;--border:#efedf4}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;transition:.18s}button:disabled{opacity:.5;cursor:wait}button:hover{filter:brightness(.97);transform:translateY(-1px)}input,select{width:100%;border:1px solid #e3dfea;border-radius:10px;padding:14px;background:white;color:#2c263e;outline:none}input:focus,select:focus{border-color:#9859e9;box-shadow:0 0 0 3px #8b3fe912}button:focus-visible{outline:3px solid #c6a5f2;outline-offset:3px}label{display:block;font-size:14px;font-weight:600;margin:20px 0 9px}label input,label select{margin-top:9px}h1,h2,h3,p{margin:0}h1{font-size:30px;letter-spacing:-.7px}h3{font-size:18px}p{line-height:1.8}small{font-size:12px}.muted{color:var(--muted);line-height:1.8}.primary,.secondary{border:0;border-radius:10px;padding:13px 20px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:46px}.primary{background:var(--purple);color:white;box-shadow:0 4px 10px #7529da12}.secondary{background:white;color:#6e557f;border:1px solid #e5dbee}.wide{width:100%}.text-button{background:none;border:0;color:var(--purple);font-weight:700;white-space:nowrap}.layout{display:flex;min-height:100vh}aside{width:245px;flex-shrink:0;background:#fff;border-left:1px solid var(--border);padding:30px 20px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:9px}.brand img{width:53px;height:60px;object-fit:cover;object-position:center;clip-path:inset(0 0 0 0);border-radius:8px}.brand strong{display:block;font-size:20px;font-weight:900}.brand small{display:block;color:#8f859f;margin-top:5px;font-size:11px}.workspace{display:flex;align-items:center;gap:10px;border:1px solid var(--border);padding:13px 10px;border-radius:12px;margin:31px 0}.workspace-icon{background:#f2e9ff;color:var(--purple);width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:800}.workspace strong{font-size:13px}.workspace small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3eb78c}.workspace .live-dot{margin-right:auto}.nav-caption{color:#aaa4b6;font-size:11px;margin:0 12px 15px}nav{display:flex;flex-direction:column;gap:7px}nav button{display:flex;align-items:center;gap:13px;border:0;padding:13px 15px;border-radius:9px;background:transparent;color:#81798e;text-align:right;font-weight:600;font-size:14px}nav button>span{font-size:21px;width:22px;text-align:center}nav button.active{color:var(--purple);background:#f2eafd}nav b{font-size:9px;margin-right:auto;background:#e8d7fe;padding:3px 7px;border-radius:5px}.sidebar-bottom{margin-top:auto;padding-top:40px}.help-card{background:linear-gradient(140deg,#faf8ff,#f3ecfc);border:1px solid #eee4fa;border-radius:12px;padding:17px;margin-bottom:24px}.help-card>span{display:block;color:#9753df;font-size:25px;margin-bottom:10px}.help-card strong{font-size:13px}.help-card p{font-size:11px;color:#9b8dab;margin-top:8px}.profile{border-top:1px solid var(--border);padding-top:20px;display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;display:inline-grid;place-items:center;background:#f1e7fc;border-radius:11px;color:#8a45cb;font-size:15px;font-weight:700;flex-shrink:0}.profile strong{font-size:12px}.profile small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.profile button{margin-right:auto;border:0;background:none;color:#9f95aa;font-size:21px}main{min-width:0;flex:1}header{height:78px;background:#ffffffb0;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 38px;font-size:12px;color:#928a9f}.breadcrumb span{margin:0 13px;color:#c8c2d1}.breadcrumb strong{color:#655b75;font-weight:500}.header-meta{display:flex;gap:9px;align-items:center;font-size:11px}.divider{height:14px;width:1px;background:#ded9e6;margin:0 12px}.content{max-width:1500px;margin:auto;padding:33px 38px 0}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{font-size:10px;font-weight:700;color:#a598b4;letter-spacing:.3px;margin-bottom:9px}.page-heading p{font-size:13px;color:#9990a5;margin-top:9px}.page-heading>.primary{font-size:12px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:25px}.stat{background:white;border:1px solid var(--border);border-radius:13px;padding:20px}.stat>div{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#8f869b}.stat i{font-size:21px;font-style:normal;background:#f4ecff;color:#8a43d2;border-radius:10px;width:37px;height:37px;display:grid;place-items:center}.stat i.green{color:#45a18b;background:#eaf8f2}.stat i.amber{color:#d3a04f;background:#fff6e7}.stat i.blue{color:#578dcc;background:#edf5ff}.stat>strong{font-size:28px;display:block;margin:9px 0 12px;font-weight:800;letter-spacing:-.4px}.stat>small{font-size:10px;color:#a69cad}.panel{background:white;border:1px solid var(--border);border-radius:14px;overflow:hidden}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:23px 24px}.section-heading h3{font-size:16px}.section-heading p{font-size:11px;color:#a49aac;margin-top:6px}.badge{font-size:10px;color:#8c8099;background:#f7f6fa;border:1px solid var(--border);border-radius:6px;padding:6px 10px;white-space:nowrap}.dashboard-grid{display:grid;grid-template-columns:1.9fr 1fr;gap:22px;margin-bottom:25px}.chart{height:205px;margin:4px 25px 0;position:relative;padding:10px 45px 26px 0}.chart-grid{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:26px;pointer-events:none}.chart-grid span{font-size:9px;color:#b4acbf;border-bottom:1px dashed #f0ecf5;padding-bottom:3px}.bars{height:100%;display:flex;justify-content:space-around;align-items:flex-end;position:relative;gap:16px}.bar-column{height:100%;display:flex;flex:1;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}.bar{width:65%;max-width:38px;border-radius:5px 5px 0 0;background:linear-gradient(#a678ed,#d9c3f8);min-height:2px;position:relative}.bar-column:nth-last-child(2) .bar{background:linear-gradient(#8436df,#aa70ee)}.bar span{display:none;position:absolute;bottom:100%;white-space:nowrap;font-size:9px;background:#6f26c5;color:white;padding:4px;border-radius:4px}.bar:hover span{display:block}.bar-column small{position:absolute;bottom:-25px;font-size:9px;color:#9b91a8;white-space:nowrap}.chart-note{font-size:10px;color:#a094ad;margin:22px 25px 20px}.chart-note .live-dot{background:#a56de3;margin-left:5px}.reward-panel{overflow:hidden;position:relative;border-radius:14px;padding:26px;color:white;background:radial-gradient(ellipse at 0% 0%,#a065e5,transparent 65%),linear-gradient(135deg,#8f42e1,#6220be);min-height:315px}.reward-panel .eyebrow{color:#e1c6fc}.reward-panel h2{font-size:27px;line-height:1.5;margin:12px 0}.reward-panel p{font-size:12px;color:#e3ccfb}.reward-orbit{position:absolute;left:10px;top:38px;transform:rotate(-15deg);font-size:105px;color:#ffffff18}.reward-bottom{display:flex;gap:28px;border-top:1px solid #ffffff24;margin-top:20px;padding-top:17px}.reward-bottom span{font-size:9px;color:#d8b8f8}.reward-bottom strong{display:block;font-size:12px;color:white;margin-top:8px}.reward-panel button{width:100%;margin-top:18px;border:1px solid #ffffff36;background:#ffffff12;color:white;border-radius:8px;padding:10px;font-size:11px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:right;white-space:nowrap}th{background:#fbfafd;color:#a198ae;font-weight:500;font-size:11px;padding:13px 24px}td{border-top:1px solid #f3f0f7;padding:17px 24px;font-size:12px;color:#7c718c}td strong{font-size:12px;color:#544961}.customer-cell{display:flex;align-items:center;gap:10px}.customer-cell small{display:block;font-size:10px;color:#afa6b9;margin-top:5px}.soft{width:33px;height:33px;background:#f6f0fd;font-size:12px}.points{color:#9462bc;background:#f8f3fe;padding:5px 9px;border-radius:5px;font-size:11px}.number{color:#62566f;font-weight:600}footer{display:flex;justify-content:space-between;padding:27px 0;color:#b4aabd;font-size:10px}.empty{text-align:center;padding:38px;white-space:normal}.empty>span{display:block;font-size:30px;color:#b793d8;margin-bottom:12px}.empty strong{display:block;font-size:15px}.empty p{font-size:12px;margin-top:7px;color:#a79bae}.pos-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:24px}.form-panel{padding:27px}.form-panel .section-heading{padding:0 0 20px;border-bottom:1px solid var(--border)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.step-label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;margin-top:24px}.step-label b{display:grid;place-items:center;border-radius:50%;background:#f2e8ff;color:var(--purple);width:26px;height:26px;font-size:12px}.step-label small{color:#b6aabb;font-weight:400}.info-line{font-size:11px;background:#faf8fd;border-radius:8px;padding:13px;margin-top:10px;color:#9a8aa9}.amount-input{font-size:28px;font-weight:700;padding:18px}.summary{padding:26px;text-align:center}.summary h3{text-align:right;font-size:16px}.summary-icon{width:60px;height:60px;border-radius:18px;background:#f3e9ff;color:#8e40de;display:grid;place-items:center;font-size:32px;margin:26px auto 12px}.summary>p{font-size:12px;color:#a08daf}.summary>strong{display:block;font-size:37px;color:var(--purple);margin:12px}.summary strong small{font-size:14px}.summary dl{text-align:right}.summary dl>div{display:flex;justify-content:space-between;font-size:13px;padding:14px 0;color:#9a8ba6}.summary dd{margin:0;font-weight:700;color:#605069}.summary .total{border-top:1px solid var(--border);margin-top:10px;font-weight:700}.summary>small{font-size:11px;color:#aea0b7}.kiosk-card{padding:24px;background:#f0eafa;border-radius:13px;margin-top:22px}.kiosk-card>span{font-size:27px;color:#9063bf}.kiosk-card h3{font-size:16px;margin-top:12px}.kiosk-card p{font-size:12px;color:#9c86ad;margin:10px 0 18px}.search{max-width:290px;font-size:12px;background:#fcfbfe}.count{display:inline-block;border-radius:6px;background:#f3eafa;color:#9561b8;padding:4px 7px;font-size:11px;margin-right:8px}.three{grid-template-columns:repeat(3,1fr)}.report-filters{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;margin-bottom:24px}.report-filters>div{display:flex;gap:15px;align-items:end}.report-filters label{margin:0;font-size:11px}.report-filters input{padding:10px}.explain{padding:30px;height:max-content}.explain>span{font-size:40px;color:#9d63d7}.explain h3{margin:15px 0}.explain p{font-size:13px;color:#96849f;margin:15px 0}.form-error{color:#c2425f;font-size:13px;margin-top:14px}.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:white}.auth-story{padding:40px 60px;background:radial-gradient(at 20% 65%,#e5d3fa,transparent 60%),#f6f0fc;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh}.auth-story h1{font-size:48px;line-height:1.5;font-weight:900;margin:20px 0}.auth-story h1 span{color:var(--purple)}.auth-story p{color:#9881ac;font-size:16px}.auth-story>small{color:#a993bb}.loyalty-card{margin:35px 0 25px;padding:25px;max-width:370px;background:linear-gradient(120deg,#9655e4,#6923bf);color:white;border-radius:18px;box-shadow:0 25px 45px #6f20b327;transform:rotate(-4deg)}.loyalty-card>span{display:block;font-weight:800}.loyalty-card b{float:left;font-size:35px}.loyalty-card>small{display:block;opacity:.6;margin-top:8px}.loyalty-card>strong{display:block;margin:30px 0;font-size:25px}.loyalty-card>div{font-size:10px;opacity:.8;display:flex;justify-content:space-between}.auth-form{display:flex;align-items:center;justify-content:center;padding:50px}.auth-form>div{max-width:370px;width:100%}.pill{display:inline-block;font-size:11px;color:#9766c5;background:#f5eefc;padding:8px 12px;border-radius:7px;margin-bottom:20px}.auth-form h2{font-size:30px;margin-bottom:12px}.auth-form p{font-size:13px;color:#a197ab;margin-bottom:26px}.auth-form button{margin-top:20px}.auth-form .muted{display:block;text-align:center;margin-top:25px}.modal-backdrop{position:fixed;inset:0;background:#23143266;z-index:50;display:flex;align-items:center;justify-content:center;padding:25px;backdrop-filter:blur(5px)}.modal{background:white;max-width:760px;width:100%;max-height:90vh;overflow:auto;border-radius:18px;padding:28px;box-shadow:0 20px 90px #23143230}.modal:has(#userform),.modal:has(#unlock),.modal:has(#confirm-sale){max-width:480px}.modal-title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:15px}.modal-title h2{font-size:22px}.close{background:#f5f1f8;border:0;border-radius:8px;width:32px;height:32px;font-size:22px;color:#9b82ab}.modal>p{font-size:13px;color:#9d8ba9}.compact{grid-template-columns:1fr 1fr;margin-top:20px}.confirm-details{padding:22px;background:#faf6ff;border-radius:12px;margin:22px 0;text-align:center}.confirm-details strong{font-size:26px;color:var(--purple)}.confirm-details p{margin:10px}.kiosk{max-width:570px;margin:35px auto;padding:20px;text-align:center}.kiosk>.brand{justify-content:center;margin-bottom:30px}.kiosk .panel{padding:38px}.kiosk h1{line-height:1.5}.kiosk p{font-size:14px;color:#a188b3;margin:15px 0}.kiosk label{text-align:right}.kiosk input{padding:18px}.kiosk .primary{margin-top:20px}.kiosk small{display:block;color:#b39abd;margin-top:22px;line-height:1.7}.kiosk>.text-button{margin-top:22px}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);z-index:100;background:#30233e;color:white;box-shadow:0 10px 30px #20102830;border-radius:10px;padding:15px 25px;opacity:0;pointer-events:none;transition:.2s;font-size:14px;max-width:90vw}#toast.visible{opacity:1;transform:translate(-50%,0)}.fatal{padding:70px;text-align:center}
@media(min-width:1500px){.content{padding-top:45px}.stats{margin-bottom:30px}.dashboard-grid{margin-bottom:30px}.chart{height:240px}.reward-panel{padding:30px}}
@media(max-width:1150px){aside{width:205px;padding:25px 14px}.brand strong{font-size:17px}.content{padding:25px 24px 0}header{padding:0 24px}.stat{padding:15px}.stat>strong{font-size:23px}.stats{gap:12px}.dashboard-grid{grid-template-columns:1.5fr 1fr}.reward-panel{padding:22px}.reward-panel h2{font-size:24px}.auth-story{padding:40px}.auth-story h1{font-size:39px}}
@media(max-width:850px){aside{width:78px;padding:22px 10px}.brand>div,aside .workspace,aside .nav-caption,aside nav button b,aside .help-card,aside .profile>div,aside .profile>button{display:none}aside .brand img{width:55px}nav{margin-top:35px}nav button{font-size:0;padding:13px;gap:0}nav button>span{font-size:24px}.profile{justify-content:center}.stats{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr 1fr}.pos-grid{grid-template-columns:1fr}.header-meta{display:none}.page-heading h1{font-size:25px}.page-heading p{font-size:12px}.three{grid-template-columns:repeat(3,1fr)}.report-filters{gap:15px;flex-wrap:wrap}.auth-story{padding:30px}.auth-story h1{font-size:31px}.auth-form{padding:30px}}
@media(max-width:600px){aside{width:62px;padding:18px 6px}aside .brand img{width:49px;height:49px}nav button{padding:12px 9px}.content{padding:22px 14px 0}header{padding:0 16px;height:60px}.page-heading{align-items:flex-start;gap:12px}.page-heading>.primary{padding:10px;font-size:10px;min-height:38px;white-space:nowrap}.page-heading h1{font-size:23px}.eyebrow{font-size:9px}.page-heading p{font-size:11px}.stats{gap:10px}.stat{padding:13px}.stat>div{font-size:10px}.stat i{width:28px;height:28px;font-size:16px}.stat>strong{font-size:22px}.stat>small{font-size:9px}.dashboard-grid{grid-template-columns:1fr}.section-heading{padding:18px 15px;flex-wrap:wrap}.section-heading p{font-size:10px}th,td{padding:13px 15px}.form-panel{padding:18px}.form-grid{grid-template-columns:1fr;gap:0}.three{grid-template-columns:1fr}.report-filters{padding:15px}.report-filters>div{flex-wrap:wrap}.report-filters label{width:calc(50% - 8px)}footer{font-size:8px;gap:20px}.auth{display:block}.auth-story{display:none}.auth-form{min-height:100vh;padding:30px}.auth-form:before{content:''}.modal{padding:20px}.modal-backdrop{padding:12px}.compact{grid-template-columns:1fr}.kiosk{margin:0;padding:18px}.kiosk .panel{padding:25px}.kiosk h1{font-size:27px}}
@media(max-width:850px){aside .profile{flex-direction:column}aside .profile>button{display:block;margin:3px auto 0}}
.simple-sale{max-width:620px;margin:0 auto;padding:28px 32px}.simple-sale label:first-child{margin-top:0}.simple-sale input{min-height:56px;font-size:18px}.simple-sale .primary{margin-top:24px;min-height:54px;font-size:17px}.simple-sale>.text-button{margin-top:14px;padding:12px}@media(max-width:600px){.simple-sale{padding:22px 18px}}
.layout aside[hidden],.screen-toggle[hidden]{display:none!important}
.header-start,.header-actions{display:flex;align-items:center;gap:18px;min-width:0}
.nav-toggle,.screen-toggle{border:1px solid #e4d8f2;background:#ffffffd9;color:#713cb0;border-radius:12px;min-height:44px;padding:10px 14px;flex-shrink:0}
.nav-toggle{font-size:23px;line-height:1;width:46px}.screen-toggle{font-size:13px;font-weight:700}
.pos-layout{min-height:100vh;min-height:100dvh;background:radial-gradient(ellipse at 10% 15%,#d8b9f670,transparent 45%),radial-gradient(ellipse at 90% 80%,#ceb4f56b,transparent 43%),repeating-linear-gradient(135deg,transparent 0 90px,#a372cf06 90px 92px),#f6f1fb}
.pos-layout main{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.pos-layout header{background:#ffffff70;backdrop-filter:blur(12px);flex-shrink:0;border-bottom-color:#e9dcf4}
.pos-layout .content{width:100%;max-width:none;flex:1;display:flex;flex-direction:column;padding:24px clamp(18px,5vw,80px) 16px;margin:0}
.pos-layout .page-heading{max-width:720px;width:100%;margin:0 auto 20px}.pos-layout .page-heading .eyebrow,.pos-layout footer,.pos-layout .header-meta{display:none}.pos-layout .page-heading p{color:#89709e}.pos-layout #page{width:100%;flex:1;display:flex;align-items:flex-start;justify-content:center}
.pos-layout .simple-sale{width:100%;max-width:720px;margin:0;padding:clamp(22px,3vw,38px);border:1px solid #fff;border-radius:24px;background:#ffffffed;box-shadow:0 18px 65px #63308d0d}
.pos-layout .simple-sale input{background:#fcfaff;border-color:#e8def1;border-radius:12px;min-height:60px}.pos-layout .simple-sale label{color:#5e456f;font-size:16px}.pos-layout .simple-sale .primary{min-height:58px;background:linear-gradient(105deg,#8e3ee2,#7021c7);border-radius:12px}
@media(max-width:850px){.layout aside:not([hidden]){width:220px;padding:24px 16px}.layout aside:not([hidden]) .brand>div,.layout aside:not([hidden]) .nav-caption{display:block}.layout aside:not([hidden]) nav button{font-size:14px;gap:12px}.layout aside:not([hidden]) .profile>div{display:block}.layout aside:not([hidden]) .profile{flex-direction:row}.layout aside:not([hidden]) .profile>button{margin-right:auto}.header-start{gap:10px}.pos-layout .content{padding:22px 18px}.pos-layout .page-heading h1{font-size:27px}}
@media(max-width:600px){.layout{position:relative}.layout aside:not([hidden]){position:fixed;right:0;top:64px;bottom:0;height:calc(100dvh - 64px);z-index:30;overflow:auto;box-shadow:-15px 15px 50px #42235722}.layout header{height:64px;padding:0 14px;position:sticky;top:0;z-index:31}.header-start .breadcrumb{font-size:11px}.header-start .breadcrumb span{margin:0 6px}.screen-toggle{font-size:11px;padding:10px}.header-actions{gap:0}.pos-layout .content{padding:22px 14px}.pos-layout .simple-sale{padding:22px;border-radius:19px}.pos-layout .page-heading p{font-size:12px}.pos-layout .simple-sale input{min-height:56px}}