/* UXUI component library — consumes tokens.css */
*,*::before,*::after{box-sizing:border-box}
.ux{font-family:var(--font-body);color:var(--color-text-primary);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.ux [dir="rtl"],.ux[dir="rtl"]{font-family:var(--font-arabic)}
:where(.ux) a:where(:not(.btn):not(.chip)){color:var(--color-text-link);text-underline-offset:3px;text-decoration-thickness:1px}
:where(.ux) a:where(:not(.btn):not(.chip)):hover{color:var(--color-action-primary-pressed)}
:where(.ux) a.btn{text-decoration:none}
.ux :focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .ico.dir{transform:scaleX(-1)}

/* button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--button-height-md);min-width:44px;max-width:100%;padding:10px 18px;border-radius:0;border:var(--border-1) solid transparent;font:500 15px/1.25 var(--font-body);text-align:center;cursor:pointer;text-decoration:none;transition:background var(--motion-duration-fast) var(--motion-ease-standard),border-color var(--motion-duration-fast),color var(--motion-duration-fast)}
[dir="rtl"] .btn{font-family:var(--font-arabic);font-weight:600}
.btn--sm{min-height:var(--button-height-sm);padding:7px 14px;font-size:14px}
.btn--lg{min-height:var(--button-height-lg);padding:13px 22px;font-size:16px}
.btn--primary{background:var(--color-action-primary);color:var(--color-action-on-primary)}
.btn--primary:hover,.btn--primary.is-hover{background:var(--color-action-primary-hover)}
.btn--primary:active,.btn--primary.is-pressed{background:var(--color-action-primary-pressed)}
.btn--secondary{background:var(--color-surface-raised);color:var(--color-text-primary);border-color:var(--color-border-strong)}
.btn--secondary:hover,.btn--secondary.is-hover{background:var(--color-surface-subtle)}
.btn--secondary:active,.btn--secondary.is-pressed{background:var(--mineral-200)}
.btn--ghost{background:transparent;color:var(--color-text-link);padding-inline:10px}
.btn--ghost:hover,.btn--ghost.is-hover{background:var(--color-selected-bg)}
.btn--inverse{background:var(--white);color:var(--ink-900)}
.btn.is-focus{box-shadow:var(--focus-ring)}
.btn:disabled,.btn.is-disabled{background:var(--color-disabled-bg);color:var(--color-disabled-fg);border-color:transparent;cursor:not-allowed}
.btn.is-loading{color:transparent;position:relative;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:ux-spin .8s linear infinite}
.btn--secondary.is-loading::after{border-color:var(--mineral-300);border-top-color:var(--ink-900)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:0;border:var(--border-1) solid var(--color-border-decorative);background:var(--color-surface-raised);color:var(--color-text-primary);cursor:pointer}
.iconbtn:hover{background:var(--color-surface-subtle)}
@keyframes ux-spin{to{transform:rotate(360deg)}}

/* field */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field__label{font:500 14px/1.4 var(--font-body);color:var(--color-text-primary)}
[dir="rtl"] .field__label{font-family:var(--font-arabic)}
.field__label .opt{color:var(--color-text-secondary);font-weight:400}
.field__help{font-size:13px;line-height:1.45;color:var(--color-text-secondary)}
.field__msg{display:flex;gap:6px;align-items:flex-start;font-size:13px;line-height:1.45}
.field__msg .ico{width:16px;height:16px;margin-top:1px}
.field__msg--error{color:var(--color-status-danger)}
.field__msg--success{color:var(--color-status-success)}
.input,.select,.textarea{width:100%;height:var(--input-height);padding:0 14px;border-radius:0;border:var(--border-1) solid var(--color-border-interactive);background:var(--color-surface-raised);color:var(--color-text-primary);font:400 16px/1.4 var(--font-body);transition:border-color var(--motion-duration-fast),box-shadow var(--motion-duration-fast)}
[dir="rtl"] .input,[dir="rtl"] .select,[dir="rtl"] .textarea{font-family:var(--font-arabic)}
.textarea{height:auto;min-height:112px;padding:12px 14px;resize:vertical;line-height:1.6}
.input::placeholder,.textarea::placeholder{color:var(--slate-500)}
.input:hover,.select:hover,.textarea:hover,.input.is-hover{border-color:var(--ink-700)}
.input:focus,.select:focus,.textarea:focus,.input.is-focus{outline:none;border-color:var(--color-focus);box-shadow:0 0 0 3px var(--color-selected-bg)}
.input.is-error,.textarea.is-error{border-color:var(--color-status-danger);border-width:2px;padding:0 13px}
.input.is-success{border-color:var(--color-status-success)}
.input:disabled,.input.is-disabled{background:var(--color-disabled-bg);color:var(--color-disabled-fg);border-color:var(--mineral-200);cursor:not-allowed}
.select{appearance:none;padding-inline-end:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314171C' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px;background-position:right 12px center}
[dir="rtl"] .select{background-position:left 12px center}

/* check + radio */
.choice{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:10px 0;cursor:pointer;font-size:15px;line-height:1.45}
.choice input{appearance:none;width:20px;height:20px;margin:1px 0 0;flex:none;border:var(--border-2) solid var(--color-border-interactive);background:var(--white);display:grid;place-items:center;cursor:pointer;transition:background var(--motion-duration-fast),border-color var(--motion-duration-fast)}
.choice input[type=checkbox]{border-radius:0}
.choice input[type=radio]{border-radius:50%}
.choice input:checked{background:var(--color-action-primary);border-color:var(--color-action-primary)}
.choice input[type=checkbox]:checked::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.choice input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.choice input:focus-visible{box-shadow:var(--focus-ring)}
.choice input:disabled{background:var(--color-disabled-bg);border-color:var(--mineral-300)}
.choice.is-disabled{color:var(--color-disabled-fg);cursor:not-allowed}

/* chip */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--chip-radius);border:var(--border-1) solid var(--color-border-interactive);background:var(--color-surface-raised);color:var(--color-text-primary);font:500 14px/1 var(--font-body);cursor:pointer;transition:background var(--motion-duration-fast),border-color var(--motion-duration-fast)}
[dir="rtl"] .chip{font-family:var(--font-arabic)}
.chip:hover{border-color:var(--ink-900)}
.chip[aria-pressed="true"]{background:var(--color-selected-bg);border-color:var(--color-action-primary);color:var(--color-selected-fg)}
.chip[aria-pressed="true"] .ico{display:block}
.chip .ico{width:16px;height:16px;display:none}

/* badge */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);font:500 12.5px/1 var(--font-body);background:var(--color-surface-subtle);color:var(--color-text-secondary)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--success{background:var(--color-status-success-bg);color:var(--color-status-success)}
.badge--warning{background:var(--color-status-warning-bg);color:var(--color-status-warning)}
.badge--info{background:var(--color-status-info-bg);color:var(--color-status-info)}

/* product card */
.pcard{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border-radius:0;background:var(--color-surface-raised);box-shadow:var(--elevation-1);transition:box-shadow var(--motion-duration-base) var(--motion-ease-standard);min-width:0}
.pcard:hover{box-shadow:var(--elevation-2)}
.pcard__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.pcard__mark{width:40px;height:40px;border-radius:0;background:var(--color-selected-bg);color:var(--color-action-primary);display:grid;place-items:center;font:700 16px/1 var(--font-display)}
.pcard__name{font:700 22px/1.2 var(--font-display);letter-spacing:-.01em;margin:0}
[dir="rtl"] .pcard__name{font-family:var(--font-arabic);letter-spacing:0}
.pcard__problem{margin:0;color:var(--color-text-secondary);font-size:15px;line-height:1.55}
.pcard__for{font:500 12px/1.4 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-secondary)}
[dir="rtl"] .pcard__for{font-family:var(--font-arabic);text-transform:none;letter-spacing:0;font-size:13px}
.pcard__cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:15px;color:var(--color-text-link);text-decoration:none;min-height:44px}

/* navigation */
.nav{display:flex;align-items:center;gap:var(--space-6);height:72px;padding:0 var(--space-6);background:var(--color-surface-raised);border-bottom:var(--border-1) solid var(--color-border-decorative)}
.nav__brand{display:flex;align-items:center;height:24px;color:var(--ink-900);--spk:var(--color-action-primary)}
.nav__brand svg{height:100%;width:auto}
.nav__links{display:flex;gap:var(--space-1);margin-inline-start:var(--space-4)}
.nav__links a{display:inline-flex;align-items:center;height:44px;padding:0 12px;border-radius:0;color:var(--color-text-primary);text-decoration:none;font-size:15px;font-weight:500}
.nav__links a:hover{background:var(--color-surface-subtle);color:var(--color-text-primary)}
.nav__links a[aria-current="page"]{color:var(--color-action-primary);box-shadow:inset 0 -2px 0 var(--color-action-primary);border-radius:0}
.nav__end{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-3)}
.lang{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:0;border:0;background:transparent;color:var(--color-text-primary);font:500 14px/1 var(--font-body);cursor:pointer}
.lang:hover{background:var(--color-surface-subtle)}
.lang .ar{font-family:var(--font-arabic);font-size:15px}
.nav__menu{display:none}
.nav--compact .nav__links,.nav--compact .lang,.nav--compact .nav__end .btn{display:none}
.nav--compact .nav__menu{display:inline-flex}

/* mobile menu sheet */
.sheet{background:var(--color-surface-raised);border-radius:0;box-shadow:var(--elevation-3);overflow:hidden}
.sheet__hd{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 var(--space-4) 0 var(--space-5);border-bottom:var(--border-1) solid var(--color-border-decorative)}
.sheet__list{list-style:none;margin:0;padding:var(--space-2) 0}
.sheet__list a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 var(--space-5);color:var(--color-text-primary);text-decoration:none;font:600 18px/1.2 var(--font-display)}
[dir="rtl"] .sheet__list a{font-family:var(--font-arabic)}
.sheet__ft{padding:var(--space-4) var(--space-5) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);border-top:var(--border-1) solid var(--color-border-decorative)}

/* alert */
.alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:0;border:var(--border-1) solid;font-size:15px;line-height:1.5}
.alert .ico{margin-top:2px}
.alert b{display:block;font-weight:600;margin-bottom:2px}
.alert--info{background:var(--color-status-info-bg);border-color:#B7D2EE;color:var(--ink-900)}.alert--info .ico{color:var(--color-status-info)}
.alert--success{background:var(--color-status-success-bg);border-color:#B5DBC4;color:var(--ink-900)}.alert--success .ico{color:var(--color-status-success)}
.alert--warning{background:var(--color-status-warning-bg);border-color:#E6D39C;color:var(--ink-900)}.alert--warning .ico{color:var(--color-status-warning)}
.alert--danger{background:var(--color-status-danger-bg);border-color:#EDBCC8;color:var(--ink-900)}.alert--danger .ico{color:var(--color-status-danger)}

/* tabs */
.tabs__list{display:flex;gap:var(--space-1);border-bottom:var(--border-1) solid var(--color-border-decorative);overflow-x:auto}
.tabs__tab{height:48px;padding:0 var(--space-4);border:0;background:transparent;font:500 15px/1 var(--font-body);color:var(--color-text-secondary);cursor:pointer;box-shadow:inset 0 -2px 0 transparent;white-space:nowrap}
[dir="rtl"] .tabs__tab{font-family:var(--font-arabic)}
.tabs__tab:hover{color:var(--color-text-primary)}
.tabs__tab[aria-selected="true"]{color:var(--color-text-primary);box-shadow:inset 0 -2px 0 var(--color-action-primary)}
.tabs__panel{padding:var(--space-5) 0 0;font-size:15px;color:var(--color-text-secondary)}

/* accordion */
.acc{border-top:var(--border-1) solid var(--color-border-decorative)}
.acc details{border-bottom:var(--border-1) solid var(--color-border-decorative)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:56px;cursor:pointer;list-style:none;font:600 17px/1.3 var(--font-display)}
[dir="rtl"] .acc summary{font-family:var(--font-arabic)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ico{transition:transform var(--motion-duration-base) var(--motion-ease-standard)}
.acc details[open] summary .ico{transform:rotate(180deg)}
.acc .acc__body{padding:0 0 var(--space-5);color:var(--color-text-secondary);font-size:15px;max-width:60ch}

/* breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--color-text-secondary);list-style:none;margin:0;padding:0}
.crumbs a{color:var(--color-text-secondary)}
.crumbs .ico{width:14px;height:14px}

/* dialog */
.dialog{border:0;padding:0;border-radius:0;box-shadow:var(--elevation-3);max-width:460px;width:calc(100% - 32px);color:var(--color-text-primary)}
.dialog::backdrop{background:rgba(20,23,28,.48)}
.dialog__bd{padding:var(--space-6)}
.dialog__bd h3{font:700 22px/1.2 var(--font-display);margin:0 0 var(--space-2)}
.dialog__bd p{margin:0;color:var(--color-text-secondary);font-size:15px}
.dialog__ft{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);background:var(--color-surface-default)}

/* loading + empty */
.spinner{width:24px;height:24px;border-radius:50%;border:2.5px solid var(--mineral-200);border-top-color:var(--color-action-primary);animation:ux-spin .8s linear infinite}
.skel{border-radius:0;background:linear-gradient(90deg,var(--mineral-100),#F3F4F6,var(--mineral-100));background-size:200% 100%;animation:ux-shimmer 1.4s linear infinite}
@keyframes ux-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.spinner,.skel,.btn.is-loading::after{animation:none}}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);padding:var(--space-10) var(--space-6);border:var(--border-1) dashed var(--mineral-300);border-radius:0}
.empty h4{margin:0;font:700 18px/1.3 var(--font-display)}
.empty p{margin:0;color:var(--color-text-secondary);font-size:15px;max-width:36ch}

/* ===== AI patterns — the orange Spark means AI ===== */
.spk-i{width:14px;height:14px;flex:none;color:var(--color-ai)}
.btn--ai{background:var(--color-surface-raised);color:var(--color-ai-strong);border:1.5px solid var(--color-ai)}
.btn--ai:hover,.btn--ai.is-hover{background:var(--color-ai-subtle)}
.btn--ai .spk-i{width:16px;height:16px}
.ai-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:var(--radius-pill);background:var(--color-ai-subtle);color:var(--color-ai-text);font:600 12.5px/1 var(--font-body);white-space:nowrap}
[dir="rtl"] .ai-badge{font-family:var(--font-arabic)}
.ai-badge .spk-i{width:12px;height:12px}
.ai-note{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--color-text-secondary)}
.ai-note .spk-i{margin-top:3px}
.ai-surface{background:var(--color-surface-raised);border:1.5px solid var(--color-ai-border);border-radius:0;overflow:hidden}
.ai-surface__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--color-ai-subtle);border-bottom:1px solid var(--color-ai-border)}
.ai-surface__hd b{font:600 14px/1.3 var(--font-body)}
.ai-surface__bd{padding:16px;font-size:15px;line-height:1.6}
.ai-surface__ft{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--color-border-decorative)}
.msg{max-width:88%;padding:12px 14px;border-radius:0;background:var(--color-surface-subtle);font-size:15px;line-height:1.5}
[dir="rtl"] .msg{border-radius:0}
.msg small{display:block;font:500 11.5px/1.4 var(--font-mono);color:var(--color-text-secondary);margin-bottom:4px}
.conf{display:inline-flex;align-items:center;gap:8px;font:500 12.5px/1 var(--font-body);color:var(--color-text-secondary)}
.conf__bars{display:inline-flex;gap:2px}
.conf__bars i{width:6px;height:12px;border-radius:0;background:var(--mineral-300)}
.conf--high .conf__bars i{background:var(--color-status-success)}
.conf--med .conf__bars i:nth-child(-n+2){background:var(--color-status-warning)}
.conf--low .conf__bars i:first-child{background:var(--color-status-danger)}
.xfield{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--color-border-decorative);align-items:center}
.xfield:last-child{border-bottom:0}
.xfield__k{font:500 13px/1.4 var(--font-body);color:var(--color-text-secondary)}
.xfield__v{font:600 16px/1.35 var(--font-body)}
.xfield__src{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13px;color:var(--color-text-secondary)}
.xfield.is-check{background:var(--color-status-warning-bg);margin:0 -16px;padding:14px 16px;border-bottom-color:transparent}
.stream{display:flex;flex-direction:column;gap:10px;font-size:15px}
.stream__step{display:flex;align-items:center;gap:10px;color:var(--color-text-secondary)}
.stream__step.done{color:var(--color-text-primary)}
.stream__step.done .ico{color:var(--color-status-success)}
.stream__step.now{color:var(--color-text-primary);font-weight:500}
.spk-think{width:18px;height:18px;color:var(--color-ai);animation:ux-think 1.6s var(--motion-ease-standard) infinite}
@keyframes ux-think{0%{transform:rotate(0) scale(1)}50%{transform:rotate(90deg) scale(.82)}100%{transform:rotate(180deg) scale(1)}}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--color-ai);vertical-align:-2px;margin-inline-start:2px;animation:ux-blink 1s steps(1) infinite}
@keyframes ux-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.spk-think,.caret{animation:none}}
.prompt{border:var(--border-1) solid var(--color-border-interactive);border-radius:0;background:var(--color-surface-raised);transition:border-color var(--motion-duration-fast),box-shadow var(--motion-duration-fast)}
.prompt:focus-within{border-color:var(--color-ai);box-shadow:0 0 0 3px var(--color-ai-subtle)}
.prompt textarea{display:block;width:100%;min-height:76px;border:0;resize:none;background:transparent;padding:14px 16px 6px;font:400 16px/1.55 var(--font-body);color:var(--color-text-primary)}
[dir="rtl"] .prompt textarea{font-family:var(--font-arabic)}
.prompt textarea:focus{outline:none}
.prompt__ft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 8px 12px}
.prompt__send{width:44px;height:44px;border-radius:0;border:0;background:var(--color-action-primary);color:#fff;display:grid;place-items:center;cursor:pointer}
.prompt__send:disabled{background:var(--color-disabled-bg);color:var(--color-disabled-fg);cursor:not-allowed}
.fb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--color-text-secondary)}
.fb .iconbtn{width:44px;height:44px;border-radius:var(--radius-pill)}
.fb .iconbtn[aria-pressed="true"]{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}