@font-face{font-family:"ChatShop Arabic";src:url("../assets/fonts/NotoSansArabic-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ChatShop Arabic";src:url("../assets/fonts/NotoSansArabic-SemiBold.ttf") format("truetype");font-weight:500 900;font-style:normal;font-display:swap}
/* Theme-independent behavior and explicit appearance previews. */
html,body,.phone,.app-header,.app-root,.bottom-nav,.product-card,.card,
.settings-list,.setting-row,.search-field,.control,.icon-btn,.bottom-sheet,.modal-center {
  transition:background-color var(--duration-control) ease,color var(--duration-control) ease,border-color var(--duration-control) ease;
}
body{font-size:16px;line-height:1.5}
html[lang="ar"] body{line-height:1.75} html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0}
::selection{background:var(--accent);color:var(--accent-fg)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* Route headings receive programmatic focus for readers, but are not controls. */
h1[tabindex="-1"]:focus{outline:none}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:2px}
.theme-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.theme-choice{display:flex;flex-direction:column;text-align:start;gap:12px;padding:12px;min-width:0;min-height:44px;border-radius:16px;border:1px solid var(--border-control);background:var(--surface);color:var(--fg);transition:border-color var(--duration-control),background var(--duration-control)}
.theme-choice:hover{background:var(--hover)}
.theme-choice:active{background:var(--elevated)}
.theme-choice[aria-pressed="true"]{border-color:var(--primary);outline:1px solid var(--primary);outline-offset:0}
.theme-choice[data-value="light"]{--mock-bg:#F6F8FC;--mock-card:#FFFFFF;--mock-border:#D9E0EA;--mock-fg:#172033;--mock-primary:#1D4ED8;--mock-muted:#EEF2F8}
.theme-choice[data-value="dark"]{--mock-bg:#101722;--mock-card:#182235;--mock-border:#33435D;--mock-fg:#F2F5FA;--mock-primary:#7CA5FF;--mock-muted:#223049}
.theme-mock{height:150px;width:100%;border:1px solid var(--mock-border);background:var(--mock-bg);border-radius:12px;padding:10px;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.theme-mock-top{display:flex;justify-content:center;gap:2px;padding:3px;background:var(--mock-card);border-radius:999px;align-self:center;border:1px solid var(--mock-border);width:80%}
.theme-mock-pill{width:50%;height:12px;border-radius:999px;background:var(--mock-muted)}
.theme-mock-pill.active{background:var(--mock-primary)}
.theme-mock-search{height:15px;border-radius:6px;background:var(--mock-card);border:1px solid var(--mock-border)}
.theme-mock-cards{display:grid;grid-template-columns:1fr 1fr;gap:7px;flex:1;min-height:0}
.theme-mock-card{border-radius:8px;background:var(--mock-card);border:1px solid var(--mock-border);overflow:hidden;display:flex;flex-direction:column;gap:6px;padding-bottom:7px}
.theme-mock-photo{flex:1;min-height:0;background:var(--mock-muted);border-bottom:1px solid var(--mock-border)}
.theme-mock-line{height:5px;margin:0 7px;border-radius:3px;background:var(--mock-border)}
.theme-mock-line.short{width:54%}
.theme-mock-bottom{align-self:center;width:55%;height:8px;background:var(--mock-card);border:1px solid var(--mock-border);border-radius:999px}
.theme-choice-label{display:flex;align-items:center;gap:8px;font-weight:650;font-size:15px}
.theme-choice-label .ico{width:20px;height:20px}
.theme-choice-check{margin-inline-start:auto;width:22px;height:22px;border:1px solid var(--border-control);border-radius:50%;display:grid;place-items:center;color:transparent}
.theme-choice[aria-pressed="true"] .theme-choice-check{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}
.theme-choice-check .ico{width:14px;height:14px}
.theme-system{margin-top:16px;display:flex;align-items:center;gap:12px;min-height:68px;padding:14px 16px;border-radius:14px;border:1px solid var(--border-control);background:var(--surface);color:var(--fg);text-align:start;width:100%}
.theme-system:hover{background:var(--hover)}
.theme-system[aria-pressed="true"]{border-color:var(--primary);outline:1px solid var(--primary);outline-offset:0}
.theme-system .ico{width:20px;height:20px}
.theme-system-info{display:grid;gap:4px;flex:1;min-width:0}
.theme-system-info strong{font-size:15px;font-weight:650}
.theme-system-info small{color:var(--secondary);font-size:13px;line-height:1.5}
.theme-system-check{color:var(--primary)}
.theme-picker-caption{color:var(--secondary);font-size:13px;line-height:1.7;margin:16px 0 0}
@media(max-width:350px){.theme-picker{gap:10px}.theme-mock{height:130px;padding:8px}.theme-choice{padding:10px}.theme-choice-label{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}