/* خبيرك — الألوان والعناصر المشتركة بين لوحة الفريق وبوابة التاجر */
:root{
  --royal:#0558AA; --sky:#00A8EF; --mid:#3891C9; --teal:#4ADEDF; --mint:#00F0CA;
  --ink:#133263; --muted:#5B7190; --line:#E1EAF3; --bg:#F4F8FC; --card:#FFFFFF; --soft:#EEF5FB;
  --side:#022243; --side-2:#06305A; --side-ink:#AFC7E0; --side-hi:#FFFFFF; --side-act:rgba(74,222,223,.13);
  --ok:#1A9E6A; --warn:#D98E12; --bad:#E0544B; --info:#0A78D1; --gray:#94A3B8; --gold:#C98A1E; --wa:#1FAF5A;
  --ok-bg:#E5F5EE; --warn-bg:#FEF3DF; --bad-bg:#FCEBEA; --info-bg:#E6F2FC; --gold-bg:#FFF6DE; --gray-bg:#EEF2F6; --wa-bg:#E3F6EA;
  --note-bg:#FFF8DC; --note-line:#F3E0A0;
  --grad:linear-gradient(135deg,#0558AA 0%,#00A8EF 100%);
  --grad-logo:linear-gradient(135deg,#00A8EF 0%,#4ADEDF 100%);
  --overlay:rgba(2,34,67,.45);
  --shadow:0 1px 2px rgba(5,40,80,.04),0 4px 16px rgba(5,40,80,.06);
  --shadow-lg:0 12px 40px rgba(2,34,67,.18);
  --font:"Tajawal",system-ui,"Segoe UI",Tahoma,sans-serif;
  --r:14px; --r-sm:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --royal:#3A8FE0; --sky:#2DB8F2; --mid:#5AA6D8; --ink:#E4EEF8; --muted:#8EA5C1; --line:#1B3554; --bg:#061727; --card:#0B2239; --soft:#0F2C4B;
  --side:#020F1C; --side-2:#0A2340; --side-ink:#9DB6D0; --side-act:rgba(74,222,223,.12);
  --ok:#3CC48C; --warn:#F2B140; --bad:#F07068; --info:#4BA8F0; --gray:#7D8DA3; --gold:#E3A940; --wa:#3CC873;
  --ok-bg:#0D3326; --warn-bg:#3A2B0C; --bad-bg:#3E1A18; --info-bg:#0C2A47; --gold-bg:#3A2C0E; --gray-bg:#14283F; --wa-bg:#0D3322;
  --note-bg:#2E2810; --note-line:#4A3F14; --overlay:rgba(0,0,0,.6);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --royal:#3A8FE0; --sky:#2DB8F2; --mid:#5AA6D8; --ink:#E4EEF8; --muted:#8EA5C1; --line:#1B3554; --bg:#061727; --card:#0B2239; --soft:#0F2C4B;
  --side:#020F1C; --side-2:#0A2340; --side-ink:#9DB6D0; --side-act:rgba(74,222,223,.12);
  --ok:#3CC48C; --warn:#F2B140; --bad:#F07068; --info:#4BA8F0; --gray:#7D8DA3; --gold:#E3A940; --wa:#3CC873;
  --ok-bg:#0D3326; --warn-bg:#3A2B0C; --bad-bg:#3E1A18; --info-bg:#0C2A47; --gold-bg:#3A2C0E; --gray-bg:#14283F; --wa-bg:#0D3322;
  --note-bg:#2E2810; --note-line:#4A3F14; --overlay:rgba(0,0,0,.6);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--royal);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;line-height:1.3}
p{margin:0}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:13px}
.xs{font-size:12px}
.b{font-weight:700}
.hide{display:none!important}
.row{display:flex;align-items:center;gap:8px}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.between{justify-content:space-between}
.stack>*+*{margin-top:12px}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg.i.sm{width:15px;height:15px}
svg.i.lg{width:22px;height:22px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-sm);padding:9px 15px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,transform .05s}
.btn:hover{border-color:var(--mid);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--grad);border-color:transparent;color:#fff}
.btn.primary:hover{filter:brightness(1.07)}
.btn.wa{background:var(--wa);border-color:transparent;color:#fff}
.btn.wa-soft{background:var(--wa-bg);border-color:transparent;color:var(--wa)}
.btn.soft{background:var(--soft);border-color:transparent;color:var(--royal)}
.btn.danger{color:var(--bad)}
.btn.danger:hover{border-color:var(--bad)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--soft);color:var(--ink)}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:9px}
.btn.icon{padding:8px;width:38px;height:38px}
.btn.icon.sm{width:32px;height:32px;padding:6px}
.btn.block{width:100%}

/* forms */
label.f{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:5px}
.input,select.input,textarea.input{width:100%;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:9px 12px;outline:none;transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(0,168,239,.15)}
textarea.input{resize:vertical;min-height:90px;line-height:1.7}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.check{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:14px}
.check input{width:17px;height:17px;accent-color:var(--royal)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:5px 12px;font-size:13px;cursor:pointer;font-weight:500}
.chip.on{background:var(--royal);border-color:var(--royal);color:#fff}

/* cards & pills */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-h h3{font-size:16px;font-weight:800}
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:2px 10px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--gray-bg);color:var(--muted)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.gold{background:var(--gold-bg);color:var(--gold)}
.pill.soft{background:var(--soft);color:var(--royal)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.av{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;flex:none}
.av.sm{width:32px;height:32px;border-radius:9px;font-size:14px}
.av.lg{width:64px;height:64px;border-radius:16px;font-size:26px}
.av.round{border-radius:50%}
.empty{text-align:center;color:var(--muted);padding:28px 12px;font-size:14px}
.empty svg.i{width:34px;height:34px;opacity:.5;display:block;margin:0 auto 8px}

/* modal & toast */
.overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px 16px;z-index:50;overflow-y:auto;animation:fade .15s}
.modal{background:var(--card);border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:540px;padding:22px;animation:pop .18s}
.modal.wide{max-width:780px}
.modal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-h h3{font-size:18px;font-weight:800}
.modal-f{display:flex;gap:8px;justify-content:flex-start;margin-top:18px;flex-wrap:wrap}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--side);color:#fff;padding:11px 20px;border-radius:12px;box-shadow:var(--shadow-lg);z-index:60;font-weight:700;font-size:14px;animation:pop .18s;max-width:calc(100% - 32px)}
.toast.err{background:var(--bad)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.toast{animation:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* logo */
.logo{display:flex;align-items:center;gap:11px}
.logo-tile{width:42px;height:42px;border-radius:12px;background:var(--grad-logo);display:grid;place-items:center;color:#022243;flex:none}
.logo-tile svg.i{width:23px;height:23px;stroke-width:2.4}
.logo b{display:block;font-size:20px;font-weight:800;line-height:1.1}
.logo small{display:block;font-size:12px;opacity:.75}

/* stars */
.stars{display:inline-flex;gap:2px;color:var(--gold);direction:ltr}
.stars button{background:none;border:0;padding:2px;cursor:pointer;color:var(--line);font-size:28px;line-height:1}
.stars button.on{color:var(--gold)}

/* auth screen */
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(1200px 600px at 80% -10%,rgba(0,168,239,.18),transparent 60%),radial-gradient(900px 500px at 0% 110%,rgba(74,222,223,.16),transparent 60%),var(--bg)}
.auth .card{width:100%;max-width:400px;padding:28px}
.auth .logo{justify-content:center;margin-bottom:22px}
.auth .logo b{color:var(--ink)}
.auth .err{color:var(--bad);font-size:14px;min-height:22px;margin-top:8px}

@media (max-width:560px){
  .grid2,.grid3{grid-template-columns:1fr}
  .modal{padding:18px;border-radius:16px}
  .overlay{padding-top:3vh}
}