:root {
  --ink-950: #0d0f12;
  --ink-900: #12151a;
  --ink-850: #181c22;
  --ink-800: #20252d;
  --ink-750: #2b3039;
  --paper: #f9f5ec;
  --paper-muted: #d7d1c3;
  --text: #f6f1e8;
  --text-muted: #aaa79f;
  --gold-100: #fff4c9;
  --gold-300: #e8c979;
  --gold-400: #d5af50;
  --gold-500: #b88b2d;
  --gold-600: #86621f;
  --green: #31b777;
  --red: #ed6464;
  --warning: #f1b84c;
  --blue: #7dafe7;
  --border: rgba(232, 201, 121, .18);
  --border-strong: rgba(232, 201, 121, .34);
  --shadow: 0 20px 60px rgba(0, 0, 0, .28);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --side-w: 248px;
  --top-h: 62px;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--ink-950);
}

html[data-theme="light"] {
  --ink-950: #eef1f6;
  --ink-900: #f4f6fa;
  --ink-850: #ffffff;
  --ink-800: #ffffff;
  --ink-750: #e6e9f0;
  --paper: #1c2230;
  --paper-muted: #5a6272;
  --text: #1d2430;
  --text-muted: #626c7d;
  --gold-100: #6b4c12;
  --gold-300: #a67c26;
  --gold-400: #b88b2d;
  --gold-500: #9c7220;
  --gold-600: #7a5716;
  --green: #1f9d63;
  --red: #d64545;
  --warning: #c98a1a;
  --blue: #2d6fb8;
  --border: rgba(120, 92, 20, .2);
  --border-strong: rgba(120, 92, 20, .35);
  --shadow: 0 18px 48px rgba(15, 23, 42, .16);
  color: var(--text);
  background: var(--ink-950);
}
html[data-theme="light"] body { background: var(--ink-950); color: var(--text); }
html[data-theme="light"] .app-shell { background: radial-gradient(circle at 8% 0%, rgba(184,139,45,.08), transparent 30rem), var(--ink-950); }
html[data-theme="light"] select option { color: #1d2430; background: #ffffff; }

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink-950); }
body { min-height: 100vh; margin: 0; background: var(--ink-950); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
input, select, textarea {
  width: 100%;
  min-height: 42px;
  padding: .7rem .85rem;
  color: var(--text);
  background: rgba(8, 10, 13, .62);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  outline: 0;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.7; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-inline-end: 2.4rem; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a67c26' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: left .9rem center; }
html[dir="rtl"] select { background-position: left .9rem center; }
select option { color: var(--text); background: #14171d; }
select optgroup { color: var(--gold-300); background: #14171d; }
input::placeholder, textarea::placeholder { color: #8f908f; }
input:focus, select:focus, textarea:focus { border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(213,175,80,.16); background: rgba(8,10,13,.82); }
input[type="checkbox"] { width: 18px; min-height: 18px; accent-color: var(--gold-400); }
input[type="number"], .latin, .number { direction: ltr; text-align: start; font-variant-numeric: tabular-nums; }
/* الحقل المحسوب: يُقرأ ولا يُكتب. لونه الباهت يقول إنه ناتجُ حسابٍ لا خانةَ إدخال، فلا
   يحاول أحد تصحيح الجرام بيده ثم يجده قد تغيّر مع الوحدة. */
input[readonly] { color: var(--gold-100); border-style: dashed; background: rgba(4,6,9,.28); cursor: default; }
input[readonly]:focus { box-shadow: none; }
html[data-theme="light"] input[readonly] { background: rgba(0,0,0,.03); }

.skip-link { position: fixed; inset-inline-start: 1rem; top: -4rem; z-index: 10000; padding: .65rem 1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: #111; background: var(--gold-300); transition: top .15s ease; }
.skip-link:focus { top: 0; }
.app-loader { min-height: 100vh; display: grid; place-content: center; gap: 1rem; text-align: center; color: var(--paper-muted); }
.app-loader__mark { width: 44px; height: 44px; margin: auto; border: 3px solid rgba(232,201,121,.2); border-top-color: var(--gold-300); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 50% { opacity: .45; } }

/* Login — the image fills the complete screen; the authenticated form remains a readable card. */
.login-screen { position: relative; min-height: 100svh; isolation: isolate; overflow: clip; background: var(--ink-950); }
.login-art { --login-background: url('/admin-assets/goldjewelryplatform.jpg'); position: absolute; inset: 0; z-index: 0; min-height: 100%; isolation: isolate; overflow: hidden; background: #0f1115 var(--login-background) center/cover no-repeat; }
.login-art::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(8,10,13,.97) 0%, rgba(8,10,13,.84) 30%, rgba(8,10,13,.30) 62%, rgba(8,10,13,.40) 100%), linear-gradient(0deg, rgba(8,10,13,.72), transparent 48%); }
.login-art__content { position: absolute; z-index: 1; inset-inline-start: clamp(2rem, 7vw, 8rem); inset-inline-end: auto; bottom: clamp(2.5rem, 10vh, 7rem); width: min(540px, calc(100% - 4rem)); }
.login-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .7rem; color: var(--gold-100); border: 1px solid rgba(232,201,121,.42); border-radius: 999px; background: rgba(13,15,18,.58); font-size: .82rem; }
.login-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-300); box-shadow: 0 0 13px var(--gold-300); }
.login-art h1 { max-width: 550px; margin: 1rem 0 .6rem; color: #fff8e7; font-size: clamp(2rem, 4.3vw, 4rem); line-height: 1.25; }
.login-art p { max-width: 490px; margin: 0; color: rgba(250,246,236,.75); font-size: clamp(.95rem, 1.25vw, 1.1rem); line-height: 2; }
.login-panel-wrap { position: relative; z-index: 2; min-height: 100svh; display: grid; align-items: center; justify-items: end; padding: clamp(1.5rem, 5vw, 5.5rem); background: linear-gradient(90deg, rgba(8,10,13,.30), transparent 60%); }
.login-panel-wrap::after { content: ""; position: absolute; inset-inline-end: clamp(1.5rem, 5vw, 5.5rem); top: 15%; width: 1px; height: 70%; background: linear-gradient(transparent, rgba(232,201,121,.42), transparent); }
.login-panel { position: relative; width: min(100%, 455px); padding: clamp(1.45rem, 3.2vw, 2.35rem); border: 1px solid rgba(232,201,121,.27); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(25,29,35,.88), rgba(10,12,16,.82)); box-shadow: 0 24px 80px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(20px) saturate(120%); animation: fade-in .4s ease both; }
.brand-lockup { display: flex; align-items: center; gap: .85rem; margin-bottom: 2.35rem; }
.brand-mark { position: relative; display: grid; width: 47px; height: 47px; place-items: center; flex: 0 0 auto; border: 1px solid var(--gold-400); border-radius: 15px; color: var(--gold-100); background: linear-gradient(145deg, rgba(232,201,121,.18), rgba(184,139,45,.05)); box-shadow: inset 0 0 24px rgba(232,201,121,.07), 0 8px 28px rgba(0,0,0,.2); }
.brand-mark svg { width: 28px; height: 28px; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-lockup__title { margin: 0; color: var(--gold-100); font-size: 1.05rem; font-weight: 750; }
.brand-lockup__subtitle { display: block; margin-top: .18rem; color: var(--text-muted); font-size: .76rem; }
.login-panel h2 { margin: 0; font-size: 1.65rem; }
.login-panel__lead { margin: .65rem 0 1.8rem; color: var(--text-muted); line-height: 1.8; }
.form-stack { display: grid; gap: 1rem; }
.field { display: grid; gap: .42rem; }
.field label { color: var(--paper-muted); font-size: .86rem; font-weight: 650; }
.field-hint { color: var(--text-muted); font-size: .76rem; line-height: 1.5; }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: .9rem; }
.check-field { display: inline-flex; align-items: center; gap: .5rem; color: var(--paper-muted); font-size: .83rem; }
.check-field input { flex: 0 0 auto; }
.login-text-input { direction: rtl; text-align: right; }
.login-remember { width: fit-content; min-height: 28px; cursor: pointer; user-select: none; }
.login-remember span { line-height: 1.5; }
.form-message { min-height: 1.3rem; margin: 0; color: var(--red); font-size: .84rem; line-height: 1.5; }
.password-field { position: relative; }
.password-field input { padding-inline-end: 3rem; direction: rtl; text-align: right; }
.password-toggle { position: absolute; inset-inline-end: .38rem; top: 50%; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; color: var(--paper-muted); border: 0; border-radius: 8px; background: transparent; transform: translateY(-50%); }
.password-toggle:hover, .password-toggle:focus-visible { color: var(--gold-100); background: rgba(232,201,121,.12); outline: 0; }
.password-toggle svg { width: 19px; height: 19px; }
.login-twofactor { text-align: right; }
.login-twofactor .login-panel__lead { margin: 0; }
.login-twofactor .number { text-align: center; letter-spacing: .28em; }
.login-twofactor__qr { display: block; width: min(220px, 100%); aspect-ratio: 1; margin: .2rem auto; padding: .6rem; border: 1px solid rgba(232,201,121,.42); border-radius: 15px; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.25); }

/* Application chrome */
.app-shell { min-height: 100vh; background: radial-gradient(circle at 8% 0%, rgba(184,139,45,.11), transparent 30rem), var(--ink-950); }
.sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50; display: flex; width: var(--side-w); flex-direction: column; padding: 1rem .75rem; background: linear-gradient(180deg, #171a20 0%, #111318 100%); border-inline-end: 1px solid var(--border); box-shadow: 16px 0 45px rgba(0,0,0,.14); transition: transform .2s ease; }
.sidebar__brand { display: flex; align-items: center; gap: .7rem; min-height: 56px; padding: .5rem .6rem 1rem; border-bottom: 1px solid var(--border); }
.sidebar__brand .brand-mark { width: 39px; height: 39px; border-radius: 12px; }
.sidebar__brand .brand-mark svg { width: 24px; height: 24px; }
.sidebar__name { min-width: 0; overflow: hidden; color: var(--gold-100); font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__caption { display: block; margin-top: .2rem; color: var(--text-muted); font-size: .7rem; }
.sidebar__nav { display: grid; gap: .32rem; flex: 1; overflow-y: auto; padding: 1rem 0; scrollbar-width: thin; }
.nav-link { display: flex; align-items: center; gap: .75rem; min-height: 45px; padding: .55rem .72rem; color: #c8c4b9; border: 1px solid transparent; border-radius: 11px; background: transparent; text-align: right; transition: color .16s ease, background .16s ease, border .16s ease; }
.nav-link svg { width: 20px; height: 20px; flex: 0 0 auto; opacity: .85; }
.nav-link:hover { color: var(--gold-100); background: rgba(232,201,121,.08); }
.nav-link.is-active { color: var(--gold-100); border-color: rgba(232,201,121,.26); background: linear-gradient(90deg, rgba(232,201,121,.14), rgba(232,201,121,.04)); box-shadow: inset 2px 0 0 var(--gold-400); }
.nav-link.is-active svg { color: var(--gold-300); opacity: 1; }
.nav-separator { height: 1px; margin: .45rem .55rem; background: var(--border); }
.sidebar__foot { padding: .75rem .55rem .15rem; color: var(--text-muted); border-top: 1px solid var(--border); font-size: .73rem; line-height: 1.65; }
.sidebar__foot strong { display: block; color: var(--paper-muted); font-size: .78rem; font-weight: 650; }
.sidebar-backdrop { display: none; }

.content-shell { min-height: 100vh; margin-inline-start: var(--side-w); }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .9rem; min-height: var(--top-h); padding: .8rem clamp(1rem, 2vw, 2.2rem); border-bottom: 1px solid var(--border); background: rgba(18,21,26,.88); backdrop-filter: blur(16px); }
.topbar__mobile { display: none; }
.topbar__context { min-width: 0; flex: 1; }
.crumb { margin: 0 0 .2rem; color: var(--gold-300); font-size: .72rem; }
.topbar__title { margin: 0; overflow: hidden; color: var(--paper); font-size: 1.12rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.topbar__actions { display: flex; align-items: center; gap: .55rem; }
.quick-search { position: relative; width: min(29vw, 310px); }
.quick-search svg { position: absolute; inset-inline-start: .75rem; top: 50%; width: 17px; height: 17px; color: var(--gold-300); transform: translateY(-50%); pointer-events: none; }
.quick-search input { min-height: 39px; padding-inline-start: 2.35rem; font-size: .82rem; background: rgba(4,6,8,.42); }
.quick-search kbd { position: absolute; inset-inline-end: .5rem; top: 50%; padding: .1rem .35rem; color: var(--text-muted); border: 1px solid rgba(255,255,255,.1); border-radius: 5px; font: .65rem/1 monospace; transform: translateY(-50%); pointer-events: none; }
.topbar-icon, .user-menu__button, .button-icon { display: inline-grid; width: 39px; height: 39px; place-items: center; padding: 0; color: var(--paper-muted); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(4,6,8,.35); transition: border .15s ease, color .15s ease, background .15s ease; }
.topbar-icon:hover, .user-menu__button:hover, .button-icon:hover { color: var(--gold-100); border-color: rgba(232,201,121,.4); background: rgba(232,201,121,.09); }
.topbar-icon svg, .user-menu__button svg, .button-icon svg { width: 19px; height: 19px; }
.topbar-bell { position: relative; overflow: visible; }
.topbar-bell__badge { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--danger, #e5484d); color: #fff; font-size: .68rem; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px rgba(4,6,8,.9); }
.topbar-bell.is-live { color: var(--gold-100); border-color: rgba(232,201,121,.55); }
.topbar-bell.is-live svg { transform-origin: 50% 2px; animation: bell-swing 1.4s ease-in-out infinite; }
.topbar-bell.is-live .topbar-bell__badge { animation: bell-pulse 1.4s ease-out infinite; }
@keyframes bell-swing { 0%, 100% { transform: rotate(0deg); } 12% { transform: rotate(14deg); } 24% { transform: rotate(-12deg); } 36% { transform: rotate(9deg); } 48% { transform: rotate(-6deg); } 60% { transform: rotate(0deg); } }
@keyframes bell-pulse { 0% { box-shadow: 0 0 0 2px rgba(4,6,8,.9), 0 0 0 0 rgba(229,72,77,.55); } 70% { box-shadow: 0 0 0 2px rgba(4,6,8,.9), 0 0 0 8px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 2px rgba(4,6,8,.9), 0 0 0 0 rgba(229,72,77,0); } }
@media (prefers-reduced-motion: reduce) { .topbar-bell.is-live svg, .topbar-bell.is-live .topbar-bell__badge { animation: none; } }
.user-menu { position: relative; }
.user-menu__button { display: flex; width: auto; gap: .5rem; padding: .25rem .42rem .25rem .55rem; }
.user-avatar { display: grid; width: 29px; height: 29px; place-items: center; color: #1c170d; border-radius: 9px; background: linear-gradient(145deg, var(--gold-100), var(--gold-400)); font-size: .77rem; font-weight: 800; }
.user-menu__name { max-width: 120px; overflow: hidden; color: var(--paper-muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.popover { position: absolute; inset-inline-end: 0; top: calc(100% + .6rem); z-index: 80; width: 230px; padding: .45rem; border: 1px solid var(--border-strong); border-radius: 13px; background: #1d2128; box-shadow: var(--shadow); }
.popover[hidden] { display: none; }
.popover__label { display: block; padding: .6rem .72rem; color: var(--text-muted); font-size: .7rem; }
.popover__item { display: flex; width: 100%; align-items: center; gap: .65rem; padding: .62rem .7rem; color: var(--paper-muted); border: 0; border-radius: 9px; background: transparent; text-align: right; }
.popover__item:hover { color: var(--gold-100); background: rgba(232,201,121,.08); }
.popover__item svg { width: 18px; height: 18px; }
.popover__item--danger { color: #ff9898; }

.page { width: 100%; max-width: 2560px; padding: clamp(1rem, 2vw, 2.4rem); margin: 0 auto; animation: fade-in .22s ease both; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: .1rem 0 1.35rem; }
.page-header h2 { margin: 0; color: var(--paper); font-size: clamp(1.35rem, 2.1vw, 1.8rem); }
.page-header p { max-width: 700px; margin: .45rem 0 0; color: var(--text-muted); font-size: .88rem; line-height: 1.8; }
.page-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; }
.btn { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: .48rem; padding: .62rem .9rem; color: var(--paper); border: 1px solid transparent; border-radius: 10px; background: var(--ink-750); font-size: .83rem; font-weight: 650; transition: transform .15s ease, background .15s ease, border .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, .nav-link:focus-visible, .topbar-icon:focus-visible, .user-menu__button:focus-visible, .button-icon:focus-visible, .popover__item:focus-visible { outline: 3px solid rgba(232,201,121,.42); outline-offset: 2px; }
.btn svg { width: 17px; height: 17px; }
.btn--primary { color: #171208; border-color: #e4c166; background: linear-gradient(135deg, var(--gold-300), var(--gold-500)); box-shadow: 0 6px 20px rgba(184,139,45,.18); }
.btn--primary:hover { background: linear-gradient(135deg, #f1d98c, var(--gold-400)); }
.btn--soft { color: var(--gold-100); border-color: rgba(232,201,121,.22); background: rgba(232,201,121,.08); }
.btn--quiet { color: var(--paper-muted); border-color: rgba(255,255,255,.1); background: transparent; }
.btn--danger { color: #ffd4d4; border-color: rgba(237,100,100,.35); background: rgba(237,100,100,.1); }
.btn--sm { min-height: 33px; padding: .4rem .6rem; font-size: .75rem; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric { position: relative; min-height: 138px; overflow: hidden; padding: 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(35,40,48,.94), rgba(21,24,29,.94)); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.metric::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--metric-color, var(--gold-400)), transparent); opacity: .75; }
.metric__top { display: flex; align-items: center; justify-content: space-between; gap: .7rem; color: var(--text-muted); font-size: .79rem; }
.metric__icon { display: grid; width: 32px; height: 32px; place-items: center; color: var(--metric-color, var(--gold-300)); border: 1px solid color-mix(in srgb, var(--metric-color, var(--gold-300)) 30%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--metric-color, var(--gold-300)) 10%, transparent); }
.metric__icon svg { width: 18px; height: 18px; }
.metric__value { display: block; margin-top: 1.1rem; color: var(--paper); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 780; font-variant-numeric: tabular-nums; }
.metric__detail { display: block; margin-top: .35rem; color: var(--text-muted); font-size: .74rem; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); gap: 1rem; }
.panel { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(25,29,35,.78); box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.panel--overflow { overflow: visible; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem 1.05rem; border-bottom: 1px solid var(--border); }
.panel__title { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--paper); font-size: .94rem; font-weight: 720; }
.panel__title svg { width: 18px; height: 18px; color: var(--gold-300); }
.panel__body { padding: 1rem 1.05rem; }
.panel__body--flush { padding: 0; }
.price-list { display: grid; gap: .55rem; }
.price-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem; padding: .75rem .78rem; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(7,9,12,.22); }
.price-item__title { display: block; color: var(--paper); font-size: .86rem; font-weight: 650; }
.price-item__meta { display: block; margin-top: .25rem; color: var(--text-muted); font-size: .72rem; }
.price-item__number { color: var(--gold-100); font-size: .88rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.chart { min-height: 230px; padding: .6rem .2rem 0; }
.chart svg { display: block; width: 100%; height: 220px; overflow: visible; }
.chart--live svg { height: 300px; }
.chart__summary { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: .6rem; margin-bottom: .7rem; }
/* اسم الرجل المرسومة يتصدّر الملخّص بعرضه كاملاً: «سعر الشراء» أو «سعر البيع» أو «الوسط».
   بلا هذا السطر كان المدير يرى قبل/بعد بلا معرفة أي رقم يُقاس. */
.chart__leg { grid-column: 1 / -1; justify-self: start; padding: .12rem .6rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(232,201,121,.1); color: var(--gold-300); font-size: .74rem; font-weight: 700; }
.chart__stat { display: grid; gap: .2rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(7,9,12,.28); }
.chart__stat--before { border-inline-start: 3px solid var(--paper-muted); }
.chart__stat--after.chart__stat--up { border-inline-start: 3px solid var(--green); background: rgba(46,160,90,.1); }
.chart__stat--after.chart__stat--down { border-inline-start: 3px solid var(--red); background: rgba(214,73,73,.1); }
.chart__stat--after.chart__stat--flat { border-inline-start: 3px solid var(--gold-300); }
.chart__stat-label { color: var(--text-muted); font-size: .74rem; font-weight: 600; }
.chart__stat-value { color: var(--paper); font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.chart__stat--after.chart__stat--up .chart__stat-value { color: var(--green); }
.chart__stat--after.chart__stat--down .chart__stat-value { color: var(--red); }
.chart__flow { display: grid; place-items: center; gap: .05rem; min-width: 92px; padding: .4rem .7rem; border-radius: 12px; font-variant-numeric: tabular-nums; }
.chart__flow--up { color: var(--green); background: rgba(46,160,90,.14); border: 1px solid rgba(46,160,90,.4); }
.chart__flow--down { color: var(--red); background: rgba(214,73,73,.14); border: 1px solid rgba(214,73,73,.4); }
.chart__flow--flat { color: var(--gold-300); background: rgba(232,201,121,.12); border: 1px solid rgba(232,201,121,.35); }
.chart__flow-arrow { font-size: 1.05rem; line-height: 1; }
.chart__flow-diff { font-size: .96rem; font-weight: 800; line-height: 1.1; }
.chart__flow-pct { font-size: .74rem; font-weight: 700; opacity: .85; }
.chart__grid { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.chart__line { fill: none; stroke: var(--gold-300); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.chart--live .chart__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: chart-draw 1.4s ease forwards; }
.chart__area { opacity: .9; }
/* كل نقطة في السجل مرسومة وقابلة للتأشير: التلميح يحمل القيمة والوقت. */
.chart__point { fill: var(--ink-950); stroke-width: 2; transition: r .12s ease; }
.chart__point:hover { fill: var(--paper); }
.chart__axis { fill: var(--text-muted); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart__extreme circle { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.4; }
.chart__extreme--high .chart__axis { fill: var(--green); }
.chart__extreme--low .chart__axis { fill: var(--red); }
.chart__label { fill: var(--text-muted); font-size: 11px; }
.chart__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .76rem; }
.chart__foot-item { display: inline-flex; align-items: center; gap: .3rem; font-variant-numeric: tabular-nums; }
.chart__foot-item svg { width: 15px; height: 15px; }
.chart__foot-item b { color: var(--paper); font-weight: 800; }
.chart__foot-item--high b { color: var(--green); }
.chart__foot-item--low b { color: var(--red); }
/* تنبيه مصدر البيانات: سجل قديم بلا أرجل رُسم بالوسط. يظهر محدَّداً لا كملاحظة عابرة. */
.chart__foot-item--note { padding: .1rem .5rem; border: 1px dashed var(--gold-300); border-radius: 999px; color: var(--gold-300); }
.chart__dot { fill: var(--ink-950); stroke: var(--paper-muted); stroke-width: 2.5; }
.chart__tag { fill: var(--paper-muted); font-size: 12px; font-weight: 700; }
.chart__marker { opacity: 0; transform-box: fill-box; transform-origin: center; animation: chart-pop .4s ease 1.3s forwards, chart-pulse 2s ease-in-out 1.7s infinite; }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-fade { to { opacity: 1; } }
@keyframes chart-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes chart-pulse { 0%,100% { r: 6.5; } 50% { r: 9; } }
@media (prefers-reduced-motion: reduce) { .chart--live .chart__line, .chart__marker { animation: none; stroke-dashoffset: 0; opacity: 1; } }

.grid-shell { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(25,29,35,.78); box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.grid-toolbar__count { color: var(--text-muted); font-size: .78rem; }
.grid-toolbar__filter { width: min(100%, 280px); min-height: 35px; }
.table-scroll { width: 100%; overflow-x: auto; }
.data-grid { width: 100%; min-width: 760px; border-collapse: collapse; text-align: right; }
.data-grid th { padding: .82rem .85rem; color: #d7d1c3; border-bottom: 1px solid var(--border); background: rgba(4,6,9,.29); font-size: .73rem; font-weight: 680; letter-spacing: .01em; white-space: nowrap; }
.data-grid td { padding: .8rem .85rem; color: #eae5d9; border-bottom: 1px solid rgba(255,255,255,.055); font-size: .82rem; vertical-align: middle; }
.data-grid tbody tr { transition: background .14s ease; }
.data-grid tbody tr:hover { background: rgba(232,201,121,.045); }
.data-grid tbody tr:last-child td { border-bottom: 0; }
.cell-sub { display: block; margin-top: .23rem; color: var(--text-muted); font-size: .71rem; }
.cell-id { color: var(--gold-300); direction: ltr; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.cell-actions { display: flex; gap: .35rem; justify-content: flex-start; }
/* صف هوية النظام: شعار + اسم، ومربّعا اللون، وشرائح حالة الصور. */
.cell-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.identity-cell { display: flex; align-items: center; gap: .6rem; }
.identity-colors { display: flex; flex-wrap: wrap; gap: .4rem; }
.identity-swatch { display: inline-flex; align-items: center; gap: .34rem; padding: .22rem .46rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.04); font-size: .69rem; }
.identity-swatch i { width: 13px; height: 13px; border: 1px solid rgba(0,0,0,.35); border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; }
.identity-swatch .latin { color: var(--text-muted); direction: ltr; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; }
.thumb { display: block; width: 45px; height: 45px; object-fit: cover; border: 1px solid var(--border); border-radius: 9px; background: var(--ink-800); }
.thumb--empty { display: grid; place-items: center; color: var(--text-muted); }
.thumb--empty svg { width: 20px; height: 20px; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .26rem .48rem; border: 1px solid transparent; border-radius: 999px; font-size: .69rem; font-weight: 670; white-space: nowrap; }
.chip--success { color: #a9f4c9; border-color: rgba(49,183,119,.25); background: rgba(49,183,119,.12); }
.chip--danger { color: #ffc2c2; border-color: rgba(237,100,100,.25); background: rgba(237,100,100,.11); }
.chip--warning { color: #ffe1a0; border-color: rgba(241,184,76,.25); background: rgba(241,184,76,.1); }
.chip--info { color: #cbe3ff; border-color: rgba(125,175,231,.25); background: rgba(125,175,231,.1); }
.chip--neutral { color: var(--paper-muted); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.change-up { color: #92efb8; }
.change-down { color: #ffaaa4; }

.state { display: grid; min-height: 200px; place-content: center; gap: .7rem; padding: 1.4rem; text-align: center; }
.state svg { width: 33px; height: 33px; margin: auto; color: var(--gold-300); }
.state h3 { margin: .15rem 0 0; color: var(--paper); font-size: .96rem; }
.state p { max-width: 430px; margin: 0; color: var(--text-muted); font-size: .81rem; line-height: 1.7; }
.state .btn { margin: .25rem auto 0; }
.state--error svg { color: var(--red); }
.state--loading svg { animation: pulse 1s ease-in-out infinite; }
.skeleton-line { width: 100%; height: 11px; border-radius: 99px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.13), rgba(255,255,255,.04)); background-size: 200% 100%; animation: shimmer 1.1s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton-stack { display: grid; gap: .9rem; padding: 1.1rem; }

/* Forms and modals */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .95rem; }
.form-grid .field--wide { grid-column: 1 / -1; }
.form-section { display: grid; gap: .15rem; margin-top: .3rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.form-section:first-child { margin-top: 0; }
.form-section__title { display: inline-flex; align-items: center; gap: .45rem; color: var(--gold-300); font-size: .9rem; font-weight: 700; }
.form-section__title svg { width: 17px; height: 17px; }
.form-section__hint { color: var(--text-muted); font-size: .76rem; line-height: 1.5; }
.form-note { display: flex; align-items: flex-start; gap: .55rem; padding: .7rem .8rem; color: #ffe4a8; border: 1px solid rgba(241,184,76,.26); border-radius: 10px; background: rgba(241,184,76,.08); font-size: .78rem; line-height: 1.65; }
.form-note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .05rem; }
.image-upload { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem; padding: .7rem; border: 1px dashed rgba(232,201,121,.3); border-radius: var(--radius-sm); background: rgba(4,6,9,.18); }
.image-upload__preview { display: grid; width: 58px; height: 58px; place-items: center; overflow: hidden; color: var(--text-muted); border: 1px solid var(--border); border-radius: 9px; background: var(--ink-800); }
.image-upload__preview img { width: 100%; height: 100%; object-fit: cover; }
.image-upload__preview svg { width: 24px; height: 24px; }
.image-upload input { min-height: auto; padding: .4rem; font-size: .76rem; }
.image-upload__text { display: block; margin-top: .35rem; color: var(--text-muted); font-size: .71rem; }
.crop { display: grid; gap: .6rem; padding: .7rem; border: 1px dashed rgba(232,201,121,.3); border-radius: var(--radius-sm); background: rgba(4,6,9,.18); }
.crop__stage { position: relative; width: 100%; max-height: 340px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--ink-800); touch-action: none; cursor: grab; }
.crop.is-ready .crop__stage { cursor: move; }
.crop__stage img { position: absolute; top: 50%; left: 50%; max-width: none; transform: translate(-50%, -50%); user-select: none; -webkit-user-drag: none; }
.crop__current { width: 100% !important; height: 100% !important; object-fit: cover; }
.crop__empty { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .4rem; color: var(--text-muted); font-size: .76rem; }
.crop__empty svg { width: 26px; height: 26px; }
.crop__guides { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .18s ease; background-image: linear-gradient(to right, transparent calc(33.333% - 1px), rgba(255,255,255,.28) calc(33.333% - 1px) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent calc(66.666% - 1px), rgba(255,255,255,.28) calc(66.666% - 1px) calc(66.666% + 1px), transparent calc(66.666% + 1px)), linear-gradient(to bottom, transparent calc(33.333% - 1px), rgba(255,255,255,.28) calc(33.333% - 1px) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent calc(66.666% - 1px), rgba(255,255,255,.28) calc(66.666% - 1px) calc(66.666% + 1px), transparent calc(66.666% + 1px)); }
.crop__stage:hover .crop__guides, .crop__stage:focus-within .crop__guides { opacity: 1; }
.crop__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.crop__ratios { display: flex; flex-wrap: wrap; gap: .35rem; }
.crop__ratio { display: grid; gap: .1rem; padding: .35rem .6rem; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; background: transparent; cursor: pointer; font: inherit; line-height: 1.2; }
.crop__ratio[aria-pressed="true"] { color: var(--gold-100); border-color: rgba(232,201,121,.55); background: rgba(232,201,121,.12); }
.crop__ratio-value { font-size: .78rem; font-variant-numeric: tabular-nums; }
.crop__ratio-caption { font-size: .66rem; opacity: .8; }
.crop__zoom { display: flex; align-items: center; gap: .45rem; margin-inline-start: auto; color: var(--text-muted); font-size: .74rem; }
.crop__zoom input { width: 140px; min-height: auto; padding: 0; accent-color: var(--gold-100); }
.crop__meta { display: block; color: var(--text-muted); font-size: .71rem; font-variant-numeric: tabular-nums; }
.crop input[type="file"] { min-height: auto; padding: .4rem; font-size: .76rem; }
@media (max-width: 640px) {
  .crop__zoom { margin-inline-start: 0; width: 100%; }
  .crop__zoom input { flex: 1; width: auto; }
}
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding: .8rem; border: 1px dashed rgba(232,201,121,.35); border-radius: var(--radius-sm); background: rgba(4,6,9,.2); direction: ltr; }
.recovery-codes code { display: block; padding: .55rem .4rem; overflow: hidden; color: var(--gold-100); text-align: center; text-overflow: ellipsis; white-space: nowrap; border-radius: 7px; background: rgba(232,201,121,.1); font-size: .78rem; }
.modal-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; background: rgba(3,4,6,.7); backdrop-filter: blur(5px); animation: fade-in .16s ease both; }
.modal { width: min(100%, var(--modal-w, 620px)); max-height: min(90vh, 850px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 17px; background: #1b1f25; box-shadow: 0 28px 85px rgba(0,0,0,.55); }
.modal--sm { --modal-w: 430px; }
.modal--lg { --modal-w: 880px; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: 0 0 auto; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); }
.modal > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.modal__title { margin: 0; color: var(--paper); font-size: 1rem; }
.modal__close { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; color: var(--text-muted); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: transparent; }
.modal__close:hover { color: var(--paper); border-color: rgba(232,201,121,.35); }
.modal__close svg { width: 17px; height: 17px; }
.modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1.1rem; }
.modal__body > :first-child { margin-top: 0; }
.modal__body > :last-child { margin-bottom: 0; }
.modal__foot { display: flex; justify-content: flex-end; gap: .6rem; flex: 0 0 auto; padding: .9rem 1.1rem; border-top: 1px solid var(--border); background: inherit; }
.modal-open { overflow: hidden; }

.dialog-stack { display: grid; gap: 1rem; }
.dialog-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.dialog-metrics > div { display: grid; gap: .3rem; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(4,6,9,.2); }
.dialog-section { display: grid; gap: .5rem; }
.dialog-section h4 { margin: 0; color: var(--gold-100); font-size: .82rem; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.detail-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.detail-list li { padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(4,6,9,.2); font-size: .8rem; }

.toast-region { position: fixed; z-index: 300; inset-inline-start: 1rem; bottom: 1rem; display: grid; width: min(360px, calc(100vw - 2rem)); gap: .6rem; pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: .6rem; padding: .82rem .9rem; color: var(--paper); border: 1px solid var(--border); border-radius: 12px; background: rgba(28,32,39,.96); box-shadow: var(--shadow); animation: fade-in .2s ease both; font-size: .82rem; line-height: 1.6; pointer-events: auto; }
.toast svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--gold-300); margin-top: .05rem; }
.toast--error svg { color: var(--red); }
.toast--success svg { color: var(--green); }

.hidden { display: none !important; }
/* خاصية hidden تُطاع فعلاً: قاعدة المتصفّح لها أضعف من أي `display` نكتبه، فـ`.field { display: grid }`
   كانت تُبطلها — واختيار «كيف يُفتح الشراء والبيع» يُخفي حقلاً فلا يُخفى، وكذلك حقول طريقة التسعير
   في نافذة المجوهرات. سطرٌ واحد هنا أصحُّ من صنفٍ يُضاف في كل موضع ويُنسى في موضع. */
[hidden] { display: none !important; }
.text-muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .quick-search { width: min(27vw, 250px); }
}

@media (min-width: 1900px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1.8fr) minmax(360px, 1fr); gap: 1.4rem; }
  .metric-grid { gap: 1.4rem; }
  .ticker-board { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (min-width: 2600px) {
  .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8rem; }
  .dashboard-grid { gap: 1.8rem; }
  .ticker-board { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (max-width: 860px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .login-screen { width: 100%; max-width: 100%; min-width: 0; }
  .login-art, .login-panel-wrap, .login-panel { min-width: 0; max-width: 100%; }
  .login-art { min-height: 100svh; background-position: 59% center; }
  .login-art::before { background: linear-gradient(0deg, rgba(8,10,13,.96) 0%, rgba(8,10,13,.79) 40%, rgba(8,10,13,.38) 100%); }
  .login-art__content { inset-inline: 1.5rem; top: max(2rem, env(safe-area-inset-top)); bottom: auto; width: auto; max-width: none; }
  .login-art h1, .login-art p { overflow-wrap: anywhere; }
  .login-art h1 { font-size: 1.75rem; }
  .login-art p { font-size: .84rem; line-height: 1.8; }
  .login-panel-wrap { min-height: 100svh; align-items: end; justify-items: stretch; padding: 7.6rem 1rem max(1rem, env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(8,10,13,.46), transparent 48%); }
  .login-panel-wrap::after { display: none; }
  .login-panel { width: min(100%, 520px); margin-inline: auto; }
  .sidebar { transform: translateX(-105%); box-shadow: 16px 0 50px rgba(0,0,0,.4); }
  html[dir="rtl"] .sidebar { transform: translateX(-105%); }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(2,3,5,.58); backdrop-filter: blur(2px); }
  .app-shell.sidebar-open .sidebar-backdrop { display: block; }
  .content-shell { margin-inline-start: 0; }
  .topbar__mobile { display: inline-grid; }
  .topbar { min-height: 65px; padding: .7rem 1rem; }
  .quick-search { width: min(42vw, 245px); }
}
@media (max-width: 620px) {
  .login-panel-wrap { padding: 7.2rem .75rem max(.75rem, env(safe-area-inset-bottom)); }
  .login-panel { padding: 1.35rem; border-radius: 18px; }
  .brand-lockup { margin-bottom: 1.45rem; }
  .metric-grid { grid-template-columns: 1fr; gap: .75rem; }
  .metric { min-height: 118px; }
  .page { padding: 1rem; }
  .page-header { display: grid; margin-bottom: 1rem; }
  .page-actions { justify-content: stretch; }
  .page-actions .btn { flex: 1; }
  .topbar__title { font-size: .98rem; }
  .crumb { font-size: .66rem; }
  .quick-search { display: none; }
  .user-menu__name { display: none; }
  .grid-toolbar { align-items: stretch; flex-direction: column; }
  .grid-toolbar__filter { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field--wide { grid-column: auto; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal { width: 100%; max-height: 92vh; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
  .modal__body { padding: 1rem; }
  .modal__foot { padding: .8rem 1rem; }
  .modal__foot .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Dark scrollbars — removes the bright native tracks from nav, tables and modals. */
* { scrollbar-width: thin; scrollbar-color: rgba(232,201,121,.34) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(232,201,121,.28); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(232,201,121,.48); background-clip: padding-box; }
.sidebar__nav, .table-scroll, .modal__body, .trade-tickers { scrollbar-color: rgba(232,201,121,.34) transparent; }

/* Compact modal grid + inline per-field errors. */
.form-grid--compact { gap: .78rem .8rem; }
.field-error { margin: 0; color: var(--red); font-size: .76rem; line-height: 1.5; }
.field.has-error > label { color: var(--red); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); box-shadow: 0 0 0 3px rgba(237,100,100,.16); }

/* Sequential grid counter replaces raw identifiers. */
.data-grid .col-seq { width: 3rem; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: center; }

/* عمود التحديد: صف واحد يُؤشَّر ثم يُسعَّر من زر الرأس. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.data-grid .col-pick { width: 2.6rem; text-align: center; }
.pick { display: inline-grid; place-items: center; cursor: pointer; }
.pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pick__box { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--border); border-radius: 6px; background: rgba(4,6,9,.5); transition: border-color .14s ease, background .14s ease; }
.pick__box svg { width: 14px; height: 14px; color: transparent; }
.pick input:checked + .pick__box { border-color: var(--gold-400); background: linear-gradient(135deg, var(--gold-300), var(--gold-500)); }
.pick input:checked + .pick__box svg { color: #171208; }
.pick input:focus-visible + .pick__box { outline: 3px solid rgba(232,201,121,.42); outline-offset: 2px; }
.data-grid tbody tr.is-picked { background: rgba(232,201,121,.1); box-shadow: inset 3px 0 0 var(--gold-400); }
.data-grid tbody tr.is-picked:hover { background: rgba(232,201,121,.14); }

/* شريط الصف المحدَّد فوق القريد. */
.select-hint { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .7rem; padding: .55rem .8rem; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius-md); background: rgba(4,6,9,.28); font-size: .78rem; }
.select-hint svg { width: 16px; height: 16px; }
.select-hint__icon { display: inline-grid; place-items: center; color: var(--gold-300); }
.select-hint__meta { color: var(--text-muted); font-size: .72rem; }
.select-hint--on { color: var(--gold-100); border-style: solid; border-color: rgba(232,201,121,.34); background: rgba(232,201,121,.08); }
.select-hint--on .select-hint__icon { color: var(--green); }
.select-hint--on .btn { margin-inline-start: auto; }

/* زر معطَّل: «إضافة سعر» لا يعمل بلا صف محدَّد، ويجب أن يُرى ذلك. */
.btn[disabled], .btn:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.btn[disabled]:hover, .btn:disabled:hover { transform: none; }

/* بطاقة الربط الإجباري بصف المجوهرات داخل نافذة التسعير. */
.bind-card { display: grid; gap: .5rem; padding: .7rem .8rem; border: 1px solid rgba(232,201,121,.28); border-radius: var(--radius-md); background: rgba(232,201,121,.06); }
.bind-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.bind-card__head svg { width: 17px; height: 17px; color: var(--gold-300); }
.bind-card__head strong { font-size: .92rem; }
.bind-card__sku { color: var(--text-muted); font-size: .72rem; }
.bind-card__lock { display: inline-flex; align-items: center; gap: .25rem; margin-inline-start: auto; padding: .1rem .45rem; color: var(--gold-100); border: 1px solid rgba(232,201,121,.3); border-radius: 999px; font-size: .66rem; }
.bind-card__lock svg { width: 12px; height: 12px; }
.bind-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: .4rem; }
.bind-card__cell { display: grid; gap: .1rem; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 9px; background: rgba(4,6,9,.35); }
.bind-card__cell small { color: var(--text-muted); font-size: .64rem; }
.bind-card__cell b { font-size: .8rem; font-weight: 700; }

/* Top navigation layout (switchable from the toolbar). */
.app-shell--top .content-shell { margin-inline-start: 0; }
.topbar__brand { display: flex; align-items: center; gap: .55rem; }
.topbar__brand-name { font-weight: 700; color: var(--gold-100); }
.topnav { position: sticky; top: var(--top-h); z-index: 38; display: flex; gap: .35rem; overflow-x: auto; padding: .5rem clamp(1rem, 2vw, 2.2rem); border-bottom: 1px solid var(--border); background: rgba(18,21,26,.9); backdrop-filter: blur(14px); }
.topnav .nav-link { min-height: 40px; white-space: nowrap; border-radius: 999px; }
.topnav .nav-link.is-active { box-shadow: inset 0 -2px 0 var(--gold-400); }

/* Trading board: tabs + big before/after tickers + movement chart. */
.trade-board { margin-bottom: 1.1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(24,28,34,.9), rgba(15,17,22,.9)); }
/* الأنواع يميناً والمدى (يومي/شهري) يساراً في سطر واحد، وينكسران سطرين على الشاشات الضيقة. */
.trade-board__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .9rem; margin-bottom: .9rem; }
.trade-tabs { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; min-width: 0; }
.trade-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; background: rgba(4,6,9,.4); white-space: nowrap; transition: color .16s ease, border .16s ease, background .16s ease; }
.trade-tab:hover { color: var(--gold-100); border-color: var(--border-strong); }
.trade-tab.is-active { color: #10130f; border-color: transparent; background: linear-gradient(90deg, var(--gold-300), var(--gold-400)); font-weight: 700; }
.trade-tab__mark { font-size: .68rem; line-height: 1; opacity: .9; }
.trade-tab--up .trade-tab__mark { color: var(--green); }
.trade-tab--down .trade-tab__mark { color: var(--red); }
.trade-tab--flat .trade-tab__mark { color: var(--gold-300); }
.trade-tab.is-active .trade-tab__mark { color: #10130f; }
.trade-ranges { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(4,6,9,.5); flex-shrink: 0; }
.trade-range { padding: .34rem .75rem; color: var(--text-muted); border: 0; border-radius: 999px; background: transparent; font-size: .8rem; font-weight: 600; white-space: nowrap; transition: color .16s ease, background .16s ease; }
.trade-range:hover { color: var(--gold-100); }
.trade-range.is-active { color: #10130f; background: linear-gradient(90deg, var(--gold-300), var(--gold-400)); font-weight: 800; }
.trade-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1rem; align-items: start; }

/* حركة الأسعار اليومية: شريط المدى، ثم مدى التاريخ، ثم شمعات مصغّرة تُقرأ بالنسب. */
.movement-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; margin-bottom: .75rem; }
.movement-range { color: var(--text-muted); font-size: .75rem; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.panel__head .movement-range { direction: rtl; }
.movement-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 26px; min-width: 46px; }
.movement-spark i { display: block; width: 5px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); }
.movement-spark--empty { color: var(--text-muted); height: auto; }
.trade-tickers { display: grid; gap: .7rem; max-height: 460px; overflow-y: auto; }
.trade-stage { display: grid; gap: .8rem; min-width: 0; }
.trade-move { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem 1.1rem; padding: 1.1rem 1.3rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(150deg, rgba(24,28,34,.96), rgba(15,17,22,.96)); position: relative; overflow: hidden; }
.trade-move::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; background: var(--gold-400); }
.trade-move--up::before { background: var(--green); }
.trade-move--down::before { background: var(--red); }
.trade-move__glyph { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; font-size: 2rem; font-weight: 800; background: rgba(255,255,255,.06); color: var(--gold-300); }
.trade-move--up .trade-move__glyph { color: var(--green); background: rgba(49,183,119,.16); }
.trade-move--down .trade-move__glyph { color: var(--red); background: rgba(237,100,100,.16); }
.trade-move__body { display: grid; gap: .25rem; min-width: 0; }
.trade-move__label { color: var(--text-muted); font-size: .82rem; }
.trade-move__sub { color: var(--text-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.trade-move__delta { justify-self: end; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(255,255,255,.06); color: var(--text-muted); }
.trade-move--up .trade-move__delta { color: var(--green); background: rgba(49,183,119,.18); }
.trade-move--down .trade-move__delta { color: var(--red); background: rgba(237,100,100,.18); }
.trade-chart { min-height: 340px; display: grid; align-items: center; padding: .6rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(4,6,9,.34); min-width: 0; overflow: hidden; }
.trade-chart svg { display: block; width: 100%; max-width: 100%; height: auto; }

/* سعر الشراء وسعر البيع: الرقمان الوحيدان اللذان يكتبهما الأدمن ويُسعَّر بهما المخزون.
   يظهران في البطاقة الكبيرة وفي بطاقات الأنواع بنفس الشكل، ومعهما «قبل ← بعد» وسهم ونسبة —
   والسهم والنص لا اللون وحده، ليُقرأ في عمى الألوان وعلى شاشة أحادية. */
.trade-move__quotes, .ticker__quotes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.quote { flex: 1 1 150px; display: grid; gap: .15rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(4,6,9,.45); min-width: 0; }
.quote--buy { border-inline-start: 3px solid var(--green); }
.quote--sell { border-inline-start: 3px solid var(--red); }
.quote__label { color: var(--text-muted); font-size: .74rem; }
.quote__value { margin: 0; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.quote__value b { font-size: 1.05rem; font-weight: 800; color: var(--gold-100); overflow-wrap: anywhere; }
.quote--big .quote__value b { font-size: clamp(1.5rem, 3.6vw, 2.3rem); line-height: 1.05; }
.quote__before { color: var(--text-muted); font-size: .76rem; text-decoration: line-through; }
.quote--big .quote__before { font-size: .95rem; }
.quote__unit { color: var(--text-muted); font-size: .72rem; }
.quote__move { display: inline-flex; align-items: center; gap: .25rem; font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.quote--up .quote__value b, .quote--up .quote__move { color: var(--green); }
.quote--down .quote__value b, .quote--down .quote__move { color: var(--red); }
.quote__move--new { color: var(--gold-300); font-weight: 650; }
/* الوسط: سطر واحد صغير مكتوب عليه أنه متوسط. كان رقماً كبيراً وحده فقرأه المدير «سعر الغرام». */
.trade-move__mid { color: var(--text-muted); font-size: .74rem; font-variant-numeric: tabular-nums; border-top: 1px dashed var(--border); padding-top: .3rem; margin-top: .15rem; }

/* Per-currency price board (سلعة / وزن / منطقة × عملة). */
.price-board { margin-top: 1rem; }
.price-board .panel__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.board-legs { display: inline-flex; gap: .3rem; padding: .2rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(4,6,9,.4); }
.board-leg { padding: .35rem .85rem; border-radius: 999px; color: var(--text-muted); font-size: .82rem; font-weight: 650; transition: color .16s ease, background .16s ease; }
.board-leg:hover { color: var(--gold-100); }
.board-leg.is-active { color: #10130f; background: linear-gradient(90deg, var(--gold-300), var(--gold-400)); }
.price-board__table td, .price-board__table th { font-variant-numeric: tabular-nums; }
.board-cell { text-align: end; }
.board-cell__before { display: block; color: var(--text-muted); font-size: .7rem; text-decoration: line-through; }
.board-cell__value { font-size: 1rem; font-weight: 750; }
.board-cell--up .board-cell__value { color: var(--green); }
.board-cell--down .board-cell__value { color: var(--red); }
.board-cell--empty { color: var(--text-muted); }

/* Colour picker: native swatch + HEX box kept in sync. */
.color-field { display: flex; align-items: center; gap: .5rem; }
.color-field__swatch { width: 52px; height: 40px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(4,6,9,.4); cursor: pointer; }
.color-field__hex { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.color-field__chip { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 50%; flex: 0 0 auto; }

/* مبلغ حسب عمله: compact currency lines showing قبل then the new sell and buy amount. */
.price-rows { display: grid; gap: .35rem; }
.price-row { display: grid; grid-template-columns: minmax(104px, 1fr) minmax(96px, 1.1fr) minmax(84px, .9fr) minmax(84px, .9fr) auto; gap: .4rem; align-items: end; padding: .4rem .45rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(4,6,9,.32); }
.price-row__cell { display: grid; gap: .15rem; min-width: 0; }
.price-row__cell > span { color: var(--text-muted); font-size: .66rem; }
.price-row__cell input, .price-row__cell select { padding: .34rem .45rem; font-size: .8rem; }
.price-row__before { display: flex; align-items: baseline; gap: .25rem; padding: .3rem .4rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: rgba(4,6,9,.45); font-variant-numeric: tabular-nums; font-size: .76rem; white-space: nowrap; overflow: hidden; }
.price-row__before-label { color: var(--text-muted); font-size: .64rem; }
.price-row__before b { color: var(--gold-100); font-weight: 700; }
.price-row__before i { color: var(--text-muted); font-style: normal; }
.price-row__before-new { color: var(--text-muted) !important; font-weight: 600 !important; }
.price-row .button-icon { align-self: center; }
.price-rows__foot { display: flex; justify-content: flex-start; margin-top: .45rem; }
@media (max-width: 760px) { .price-row { grid-template-columns: 1fr 1fr; } .price-row__before { grid-column: 1 / -1; } .price-row .button-icon { grid-column: 2; justify-self: end; } }

/* Product grid cell listing every currency amount on its own line. */
.cell-prices { display: grid; gap: .15rem; }
.cell-prices__row { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: .35rem; align-items: baseline; font-variant-numeric: tabular-nums; font-size: .73rem; }
.cell-prices__code { color: var(--text-muted); }
.cell-prices__head { color: var(--text-muted); font-size: .62rem; }
.cell-prices__sell { color: var(--red); font-weight: 700; }
.cell-prices__buy { color: var(--green); font-weight: 700; }
.cell-prices__dir { font-size: .66rem; color: var(--text-muted); }
.cell-prices__dir--up { color: var(--green); }
.cell-prices__dir--down { color: var(--red); }

/* العيار في قريد الأسعار: نص واحد من الخادم بلا حساب محلي. */
.cell-karat { display: inline-flex; align-items: center; padding: .1rem .45rem; color: var(--gold-100); border: 1px solid rgba(232,201,121,.28); border-radius: 999px; background: rgba(232,201,121,.07); font-size: .74rem; }

/* المنطقة cell in the market grid. */
.cell-region { display: inline-flex; align-items: center; padding: .12rem .5rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(4,6,9,.4); font-size: .76rem; }

/* العملة والسعر merged into a single grid field: code, then شراء / بيع. */
.cell-quote { display: grid; grid-template-columns: auto auto auto auto; gap: .3rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.cell-quote__code { color: var(--text-muted); font-size: .74rem; }
.cell-quote__buy { color: var(--green); font-weight: 700; font-size: .82rem; }
.cell-quote__sell { color: var(--red); font-weight: 700; font-size: .82rem; }
.cell-quote__sep { color: var(--text-muted); }
.cell-quote__hint { grid-column: 1 / -1; color: var(--text-muted); font-size: .62rem; }

/* قبل / قبل ← بعد chips inside the market price dialog. */
.calc-output--legs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.calc-leg { display: inline-flex; align-items: baseline; gap: .28rem; padding: .22rem .55rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(4,6,9,.45); font-variant-numeric: tabular-nums; }
.calc-leg small { color: var(--text-muted); font-size: .66rem; }
.calc-leg b { font-size: .86rem; font-weight: 700; }
.calc-leg i { font-style: normal; font-size: .7rem; }
.calc-leg--buy b { color: var(--green); }
.calc-leg--sell b { color: var(--red); }
.calc-leg--up { border-color: rgba(34,197,94,.5); }
.calc-leg--up i { color: var(--green); }
.calc-leg--down { border-color: rgba(239,68,68,.5); }
.calc-leg--down i { color: var(--red); }
.calc-leg--flat i, .calc-leg--new i { color: var(--text-muted); }
.calc-leg__empty { color: var(--text-muted); font-size: .78rem; }
.calc-leg__note { color: var(--gold-300); font-size: .66rem; }
.calc-leg__title { flex: 1 0 100%; color: var(--text-muted); font-size: .66rem; }

/* لوحة حساب سعر القطعة في نافذة المجوهرات: الشرائح تُقرأ كمعادلة في سطر واحد،
   والسطر الأخير يشرح من أين جاء الرقم (سعر الجرام × الوزن × النقاوة، والمنطقة). */
[data-product-calc] { flex-direction: column; align-items: stretch; gap: .4rem; }
[data-product-calc] [data-product-calc-body] { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
[data-product-calc] .calc-leg__note, [data-product-calc] .calc-leg__empty { flex: 1 0 100%; line-height: 1.6; }

/* شرائح العيار: عيار السوق يُختار بضغطة، والخانة تبقى مفتوحة لعيار غير معتاد. */
.karat-field { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.karat-field > input { width: 6.5rem; flex: 0 0 auto; }
.karat-field__chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.karat-chip { padding: .26rem .62rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(4,6,9,.45); color: var(--text-muted); font: inherit; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.karat-chip:hover { border-color: var(--border-strong); color: var(--text); }
.karat-chip.is-active { border-color: var(--gold-400); background: rgba(232,201,121,.14); color: var(--gold-100); }
html[data-theme="light"] .karat-chip { background: rgba(0,0,0,.03); }
html[data-theme="light"] .karat-chip.is-active { background: rgba(184,139,45,.12); color: var(--gold-600, var(--gold-400)); }

/* سطر عملة واحدة داخل نافذة التسعير: السعر المحفوظ، ثم رفع/تخفيض، ثم قبل ← بعد. */
.gram-rows { display: grid; gap: .55rem; }
.gram-row { display: grid; gap: .5rem; padding: .7rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(4,6,9,.32); }
.gram-row--focus { border-color: var(--border-strong); background: rgba(232,201,121,.06); }
.gram-row__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.gram-row__currency { display: inline-flex; align-items: center; gap: .35rem; color: var(--gold-100); font-weight: 700; }
.gram-row__currency svg { width: 16px; height: 16px; }
.gram-row__currency .latin { color: var(--text-muted); font-size: .72rem; font-weight: 500; }
.gram-row__saved, .gram-row__move { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.gram-row__legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem; }
.gram-leg { display: grid; gap: .25rem; }
.gram-leg__label { color: var(--text-muted); font-size: .72rem; }
.gram-leg__control { display: grid; grid-template-columns: auto 1fr auto; gap: .3rem; align-items: stretch; }
.gram-leg__control input { width: 100%; text-align: center; }
.gram-step { display: inline-flex; align-items: center; justify-content: center; width: 34px; color: var(--gold-100); border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(4,6,9,.5); cursor: pointer; transition: color .16s ease, border .16s ease, background .16s ease; }
.gram-step svg { width: 16px; height: 16px; }
.gram-step:hover { border-color: var(--border-strong); background: rgba(232,201,121,.12); }
.gram-step:active { transform: translateY(1px); }
.gram-row__move--total { padding-top: .35rem; border-top: 1px dashed var(--border); }

/* ربط مع بورصة: بطاقة لكل ربط — رأسها وأزرارها، شريط بياناتها، مفاتيحها، ثم قريد صفوفها. */
.feed-stack { display: grid; gap: 1rem; }
.feed-card { animation: panel-in .22s ease both; }
.feed-card--pending { border-color: rgba(241,184,76,.45); }
.feed-card__actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.feed-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; margin-inline-start: .45rem; padding: 0 .35rem; color: #241903; border-radius: 999px; background: var(--warning); font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.feed-lead { display: flex; align-items: flex-start; gap: .45rem; margin: 0 0 .9rem; color: var(--text-muted); font-size: .8rem; line-height: 1.6; }
.feed-lead svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .18rem; color: var(--gold-300); }
.feed-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.feed-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(4,6,9,.32); font-variant-numeric: tabular-nums; }
.feed-chip svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--gold-300); }
.feed-chip small { color: var(--text-muted); font-size: .68rem; }
.feed-chip b { color: var(--text); font-size: .78rem; font-weight: 700; overflow-wrap: anywhere; }
.feed-chip--status { padding: 0; border-color: transparent; background: transparent; }
.feed-chip--ok b { color: var(--green); }
.feed-chip--warn b { color: var(--warning); }
.feed-chip--danger { border-color: rgba(232,110,110,.4); background: rgba(232,110,110,.1); }
.feed-chip--danger b { color: var(--red); }
.feed-chip--danger svg { color: var(--red); }
.feed-error { display: flex; align-items: flex-start; gap: .45rem; margin: 0 0 .8rem; padding: .55rem .7rem; border: 1px solid rgba(232,110,110,.34); border-radius: var(--radius-sm); background: rgba(232,110,110,.09); font-size: .8rem; line-height: 1.55; }
.feed-error svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .12rem; color: var(--red); }
.feed-alert { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .85rem; padding: .65rem .8rem; border: 1px solid rgba(241,184,76,.42); border-radius: var(--radius-sm); background: rgba(241,184,76,.1); font-size: .82rem; line-height: 1.55; }
.feed-alert svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--warning); }
.feed-alert span { flex: 1 1 16rem; }
.feed-alert strong { color: var(--gold-100); }
.feed-alert .btn { margin-inline-start: auto; }

/* شارة «تلقائي»: هذا الصف أنشأه الربط بنفسه من إدارة المجوهرات ولم يكتبه الأدمن. الكلمة
   مكتوبة والأيقونة معها، فلا يُقرأ الفرق من اللون وحده. */
.feed-auto { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .45rem; border: 1px dashed var(--gold-300); border-radius: 999px; color: var(--gold-300); font-size: .68rem; font-weight: 700; }
.feed-auto svg { width: 12px; height: 12px; color: var(--gold-300); }

/* المفتاح مفتاحٌ فعلي لا مربّع تأشير: ضغطته تُرسل حقلها وحده فوراً بلا نافذة ولا حفظ. */
.feed-switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem; margin-bottom: .85rem; }
.feed-switch { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; color: var(--text-muted); text-align: start; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(4,6,9,.32); cursor: pointer; transition: color .16s ease, border .16s ease, background .16s ease; }
.feed-switch:hover { border-color: var(--border-strong); }
.feed-switch[disabled] { opacity: .6; cursor: progress; }
.feed-switch__track { position: relative; flex: 0 0 auto; width: 40px; height: 22px; border: 1px solid var(--border-strong); border-radius: 999px; background: rgba(4,6,9,.6); transition: border .18s ease, background .18s ease; }
.feed-switch__track i { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-muted); transition: inset-inline-start .18s ease, background .18s ease; }
.feed-switch__text { display: grid; gap: .1rem; }
.feed-switch__text strong { color: var(--text); font-size: .84rem; font-weight: 700; }
.feed-switch__text small { font-size: .7rem; }
.feed-switch.is-on { color: var(--text); border-color: rgba(49,183,119,.42); background: rgba(49,183,119,.08); }
.feed-switch.is-on .feed-switch__track { border-color: rgba(49,183,119,.6); background: rgba(49,183,119,.3); }
.feed-switch.is-on .feed-switch__track i { inset-inline-start: 21px; background: #dcffee; }

/* سلسلة الحساب: خطوات مرقّمة من أونصة البورصة إلى مبلغ صف المجوهرات، بأرقام هذا الربط. */
.feed-chain { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .85rem; padding: 0; list-style: none; }
.feed-chain li { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .55rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(4,6,9,.24); }
.feed-chain li b { color: var(--text); font-size: .74rem; font-weight: 600; }
.feed-chain__no { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; color: #241903; border-radius: 50%; background: var(--gold-300); font-size: .64rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.feed-chain__label { border-color: transparent; background: transparent; }
.feed-chain__label svg { width: 14px; height: 14px; color: var(--gold-300); }
.feed-chain__label b { color: var(--text-muted); font-size: .72rem; font-weight: 700; }

/* حصيلة «اختبار» أو «اسحب الآن»: عدّادات الدورة، ثم سطر لكل صف بأرجل السعر. */
.feed-run { display: grid; gap: .7rem; }
.feed-run__counters { display: flex; flex-wrap: wrap; gap: .4rem; }
.feed-run__rows { display: grid; gap: .5rem; max-height: 46vh; overflow-y: auto; }
.feed-run__row { display: grid; gap: .45rem; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(4,6,9,.32); }
.feed-run__head { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.feed-run__head strong { color: var(--gold-100); font-size: .84rem; }
.feed-run__head .latin, .feed-run__head .cell-sub { color: var(--text-muted); font-size: .74rem; }
.feed-run__head .chip { margin-inline-start: auto; }
.feed-run__legs { display: flex; flex-wrap: wrap; gap: .35rem; }
.feed-run__note { color: var(--text-muted); font-size: .78rem; line-height: 1.6; }

/* حصيلة إعادة التسعير مجموعةً بربطها: عنوانٌ لكل ربط ثم صفوفه، فلا تختلط أسعار ربطين. */
.feed-run__group { display: grid; gap: .45rem; }
.feed-run__group > h4 { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; color: var(--gold-100); font-size: .8rem; font-weight: 700; }

/* خليّة سعر صرف في جدول الأزواج: الرقم زرٌّ يفتح نافذته، وبجانبه مفتاح إيقافه. والفارغة
   زرُّ «أضف» بخطٍّ متقطّع — الفراغ ليس عطلاً، فسعرٌ واحد لكل المناطق يكفي أكثر العملات. */
.fx-cell { display: inline-flex; gap: .3rem; align-items: center; }
.fx-cell__value { display: grid; gap: .1rem; padding: .3rem .5rem; color: inherit; text-align: start; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(4,6,9,.32); cursor: pointer; font: inherit; }
.fx-cell__value strong { color: var(--gold-100); font-size: .84rem; font-variant-numeric: tabular-nums; }
.fx-cell__value small { color: var(--text-muted); font-size: .68rem; }
.fx-cell__value:hover, .fx-cell__value:focus-visible { border-color: var(--gold-300); background: rgba(212,166,68,.12); }
.fx-cell--off .fx-cell__value { opacity: .62; border-style: dashed; }
.fx-cell--off .fx-cell__value strong { color: var(--text-muted); text-decoration: line-through; }
.fx-cell--add { display: inline-flex; gap: .3rem; align-items: center; padding: .3rem .55rem; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius-sm); background: transparent; cursor: pointer; font: inherit; font-size: .74rem; }
.fx-cell--add svg { width: 14px; height: 14px; }
.fx-cell--add:hover, .fx-cell--add:focus-visible { color: var(--gold-100); border-color: var(--gold-300); background: rgba(212,166,68,.1); }

/* «ما ينقصك لتُنشر الأسعار»: سطرٌ لكل زوج ومنطقة ينتظر رقماً، وزرُّه يفتح نافذته عليه. */
.fx-needed { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.fx-needed li { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(4,6,9,.28); }
.fx-needed .latin { color: var(--gold-100); font-size: .8rem; font-weight: 600; }
.fx-needed b { color: var(--text); font-size: .76rem; }
.fx-needed small { flex: 1 1 14rem; color: var(--text-muted); font-size: .72rem; line-height: 1.55; }
.fx-needed .btn { margin-inline-start: auto; }
.feed-run__link { display: flex; align-items: flex-start; gap: .4rem; margin: 0; color: var(--text-muted); font-size: .76rem; line-height: 1.55; }
.feed-run__link svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: .16rem; color: var(--gold-300); }
.feed-run__link b { color: var(--text); font-weight: 700; }
/* حصيلة إعادة التسعير تأتي مجموعةً لكل ربط، فيفصل بينها عنوانٌ خفيف بدل أن تسيل الصفوف. */
.feed-run__group { display: grid; gap: .45rem; }
.feed-run__group > h4 { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .2rem 0 0; color: var(--gold-100); font-size: .8rem; font-weight: 700; }
.feed-run__group > h4 small { color: var(--text-muted); font-size: .72rem; font-weight: 600; }

/* خليّة سعر صرف: صفٌّ لكل زوج عملات وعمودٌ لكل منطقة، فالخليّة زرُّ رقمٍ ومعه مفتاح إيقافه.
   والفارغة زرُّ «أضف» بخطٍّ متقطّع — الفراغ هنا ليس عطلاً: عملةٌ سعرها واحد في كل مكان
   يكفيها صفُّ «كل المناطق»، فلا يُطلب من صاحب المحل رقمٌ لا يعرفه. */
.fx-cell { display: flex; gap: .3rem; align-items: stretch; }
.fx-cell__value { display: grid; gap: .1rem; flex: 1 1 auto; min-width: 0; padding: .35rem .5rem; color: var(--text); text-align: start; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(4,6,9,.32); cursor: pointer; transition: border-color .16s, background .16s; }
.fx-cell__value:hover { border-color: var(--gold-300); background: rgba(4,6,9,.5); }
.fx-cell__value strong { color: var(--gold-100); font-size: .86rem; font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.fx-cell__value small { color: var(--text-muted); font-size: .7rem; }
.fx-cell .icon-btn { flex: 0 0 auto; align-self: center; }
.fx-cell--off .fx-cell__value { border-style: dashed; opacity: .62; }
.fx-cell--off .fx-cell__value strong { color: var(--text-muted); text-decoration: line-through; }
.fx-cell--add { display: inline-flex; gap: .3rem; align-items: center; padding: .35rem .55rem; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius-sm); background: transparent; font-size: .76rem; cursor: pointer; transition: color .16s, border-color .16s; }
.fx-cell--add:hover { color: var(--gold-100); border-color: var(--gold-300); }
.fx-cell--add svg { width: 14px; height: 14px; }
/* خانة «سعر عام» الفارغة: شرطةٌ لا زرّ — الأسعار الجديدة تُكتب لصنعاء وعدن بأسمائهما. */
.fx-cell--none { justify-content: center; padding: .35rem .55rem; color: var(--text-muted); font-size: .8rem; }

/* «ما ينقصك لتُنشر الأسعار»: سطرٌ لكل (عملة، منطقة) بلا مسار تحويل، وزرُّه يفتح النافذة
   على ذلك الزوج بعينه — فلا يُطلب من صاحب المحل أن يعيد اختيار ما قالته له الشاشة. */
.fx-needed { display: grid; gap: .4rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.fx-needed li { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(4,6,9,.28); }
.fx-needed .latin { color: var(--gold-100); font-size: .8rem; font-weight: 700; }
.fx-needed b { color: var(--text); font-size: .76rem; font-weight: 700; }
.fx-needed small { flex: 1 1 14rem; min-width: 0; color: var(--text-muted); font-size: .72rem; line-height: 1.55; }
.fx-needed .btn { margin-inline-start: auto; }

/* حالة مفتاح الـ API فوق حقله: الحقل يبقى فارغاً دائماً لأن المفتاح لا يعود من الخادم،
   فبدون سطر صريح يُقرأ الفراغ «ضاع مفتاحي». محفوظ أخضر، وناقص أحمر. */
.key-state { display: flex; align-items: flex-start; gap: .4rem; margin: 0 0 .4rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .76rem; line-height: 1.55; }
.key-state svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: .14rem; }
.key-state b { font-weight: 800; }
.key-state--saved { color: var(--text); border-color: rgba(49,183,119,.4); background: rgba(49,183,119,.08); }
.key-state--saved svg, .key-state--saved b { color: var(--green); }
.key-state--missing { color: var(--text); border-color: rgba(232,110,110,.4); background: rgba(232,110,110,.09); }
.key-state--missing svg { color: var(--red); }

/* حلقة المفاتيح: خانةٌ لكل مفتاح بترتيب الأولوية — الأول هو العامل، وما نفدت حصته يُتخطّى
   إلى الذي بعده. الخانة المحفوظة تُعرض مُقنَّعة مع حكم المزوّد عليها، فلا يُطلب من الأدمن
   أن يعيد لصق ثلاثة مفاتيح كلّما عدّل رقماً — و«استبدال» يجلب المفتاح المحفوظ إلى خانته
   ليُقرأ ويُصحَّح، وإن تعذّر الجلبُ رُدَّ المُقنَّع مكانه فلا يُمحى محفوظٌ بالحفظ التالي. */
.key-ring { display: grid; gap: .45rem; }
.key-ring__row { display: grid; gap: .35rem; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(4,6,9,.28); }
.key-ring__row[data-saved="1"] { border-color: rgba(49,183,119,.32); }
.key-ring__head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.key-ring__no { color: var(--text-muted); font-size: .72rem; font-weight: 700; }
.key-ring__head > b.latin { color: var(--gold-100); font-size: .84rem; font-weight: 800; letter-spacing: .04em; }
.key-ring__tools { display: inline-flex; gap: .3rem; margin-inline-start: auto; }
.key-ring__note { margin: 0; font-size: .72rem; line-height: 1.55; }
.key-ring__actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.key-ring__actions [data-key-count] { margin-inline-start: auto; font-size: .72rem; }
/* رسالةُ الخانة: التكرارُ وتعذُّرُ الإظهار يُقالان تحت الخانة نفسها لا في نخبٍ يمرّ ويذهب،
   فيرى الأدمن أيَّ خانةٍ يصلح. والنبرةُ ثلاثٌ: خطأٌ أحمر، وخبَرٌ رمادي، وتمامٌ أخضر. */
.key-ring__msg { margin: 0; font-size: .73rem; line-height: 1.55; }
.key-ring__msg.field-error--info { color: var(--text-muted); }
.key-ring__msg.field-error--ok { color: var(--green); }
.key-ring__row--bad { border-color: rgba(214,69,69,.55); background: rgba(214,69,69,.07); }
.key-ring__row--bad input[data-key-input] { border-color: rgba(214,69,69,.55); }
html[data-theme="light"] .key-ring__row { background: rgba(20,26,38,.03); }
html[data-theme="light"] .key-ring__head > b.latin { color: #8a6a12; }

/* مفتاح API لاتيني: حقل كلمة المرور يفرض RTL على مدخلاته، والمفتاح يُقرأ يساراً. وهو صفٌّ
   مرن لا موضعاً مطلقاً، لأن زرّي «إظهار» و«نسخ» معاً لا يتّسع لهما داخل الحقل. */
.password-field--latin { display: flex; align-items: stretch; gap: .3rem; }
.password-field--latin input { flex: 1 1 auto; min-width: 0; padding-inline-end: .85rem; direction: ltr; text-align: start; }
.password-field--latin .password-toggle { position: static; flex: 0 0 auto; width: 40px; height: auto; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(4,6,9,.4); transform: none; }
.password-field--latin .password-toggle:hover, .password-field--latin .password-toggle:focus-visible { color: var(--gold-100); border-color: var(--border-strong); background: rgba(232,201,121,.12); }

/* Catalog tabs (الأنواع / العملات / المناطق) */
.catalog-tabs { display: flex; gap: .4rem; overflow-x: auto; margin-bottom: .8rem; padding-bottom: .25rem; }
.catalog-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; background: rgba(4,6,9,.4); white-space: nowrap; transition: color .16s ease, border .16s ease, background .16s ease; }
.catalog-tab svg { width: 17px; height: 17px; }
.catalog-tab:hover { color: var(--gold-100); border-color: var(--border-strong); }
.catalog-tab.is-active { color: #10130f; border-color: transparent; background: linear-gradient(90deg, var(--gold-300), var(--gold-400)); font-weight: 700; }
.catalog-tab__count { min-width: 22px; padding: 0 .35rem; border-radius: 999px; background: rgba(255,255,255,.1); font-size: .72rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.catalog-tab.is-active .catalog-tab__count { background: rgba(16,19,15,.18); }
.catalog-panel { animation: panel-in .22s ease both; }

/* Movement animation: new values slide in like a trading terminal. */
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes leg-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.quote__value b, .board-cell__value { animation: leg-pop .28s ease both; }
@media (prefers-reduced-motion: reduce) {
  .catalog-panel, .quote__value b, .board-cell__value { animation: none; }
}

.ticker-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; }
.ticker { display: grid; gap: .55rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(4,6,9,.4); border-inline-start: 3px solid var(--gold-400); animation: fade-in .2s ease; }
.ticker--up { border-inline-start-color: var(--green); }
.ticker--down { border-inline-start-color: var(--red); }
.ticker__head { display: flex; align-items: center; gap: .55rem; }
.ticker__emoji { font-size: 1.4rem; }
.ticker__name { display: block; font-size: .95rem; }
.ticker__currency { color: var(--text-muted); font-size: .74rem; }
.ticker__head .delta { margin-inline-start: auto; }
/* «كان: شراء … • بيع …» — سطر السعر السابق بالرجلين معاً، لا وسطاً واحداً. */
.ticker__prev { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ticker__foot { display: flex; justify-content: space-between; gap: .5rem; color: var(--text-muted); font-size: .72rem; }

.delta { display: inline-flex; align-items: center; gap: .28rem; padding: .2rem .5rem; border-radius: 999px; font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(255,255,255,.06); }
.delta--up { color: #92efb8; background: rgba(49,183,119,.16); }
.delta--down { color: #ffaaa4; background: rgba(237,100,100,.16); }
.delta--flat { color: var(--text-muted); }
.delta__pct { opacity: .85; }
.delta__glyph { font-size: .7rem; }
/* اسم الرجل داخل الشارة: النسبة لا تُقرأ بلا الرقم الذي حُسبت عليه. */
.delta__leg { padding-inline-end: .3rem; border-inline-end: 1px solid rgba(255,255,255,.22); margin-inline-end: .1rem; font-size: .68rem; font-weight: 650; opacity: .9; }

.cell-metal { display: inline-flex; align-items: center; gap: .5rem; }
.cell-metal__emoji { font-size: 1.15rem; }
.cell-sub { display: block; color: var(--text-muted); font-size: .74rem; }

/* Metal / icon / role pickers. */
.metal-picker, .icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.metal-tile, .icon-tile { display: grid; gap: .3rem; place-items: center; padding: .7rem .5rem; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(4,6,9,.4); cursor: pointer; transition: border .16s ease, background .16s ease; text-align: center; }
.metal-tile:hover, .icon-tile:hover { border-color: var(--border-strong); background: rgba(232,201,121,.08); }
.metal-tile input, .icon-tile input { position: absolute; opacity: 0; pointer-events: none; }
.metal-tile:has(input:checked), .icon-tile:has(input:checked) { border-color: var(--gold-400); background: rgba(232,201,121,.14); box-shadow: 0 0 0 2px rgba(213,175,80,.22); }
.metal-tile__emoji, .icon-tile svg { font-size: 1.5rem; width: 24px; height: 24px; }
.metal-tile__name { font-size: .8rem; font-weight: 650; }
.metal-tile__code { color: var(--text-muted); font-size: .7rem; }

.role-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; }
.role-tile { display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(4,6,9,.4); cursor: pointer; transition: border .16s ease, background .16s ease; }
.role-tile:hover { border-color: var(--border-strong); }
.role-tile:has(input:checked) { border-color: var(--gold-400); background: rgba(232,201,121,.12); }
.role-tile__name { font-weight: 650; }
.role-tile__count { display: block; color: var(--text-muted); font-size: .72rem; }

.permission-group { margin-bottom: .8rem; }
.permission-group__title { margin: 0 0 .45rem; color: var(--gold-300); font-size: .8rem; font-weight: 700; }

.calc-output { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .85rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: rgba(4,6,9,.4); font-variant-numeric: tabular-nums; }
.calc-output strong { color: var(--gold-100); font-size: 1.1rem; }

/* قيمة مقفلة بنفس مقاسات حقل الإدخال، فتبقى صفوف النافذة على استقامة واحدة. */
.locked-value { display: flex; align-items: center; gap: .45rem; min-height: 42px; padding: .7rem .85rem; color: var(--paper-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: rgba(4,6,9,.4); }
.locked-value svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--gold-300); }
.locked-value b { color: var(--text); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.login-twofactor { display: grid; gap: .6rem; }

@media (max-width: 860px) {
  .trade-grid { grid-template-columns: 1fr; }
  .trade-tickers { max-height: none; }
  .trade-board__head { flex-direction: column; align-items: stretch; }
  .trade-ranges { justify-content: space-between; }
  .trade-range { flex: 1; text-align: center; }
  .trade-move { grid-template-columns: auto 1fr; }
  .trade-move__delta { grid-column: 2; justify-self: start; }
  .feed-card .panel__head { align-items: stretch; flex-direction: column; }
  .feed-card__actions { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .feed-switches { grid-template-columns: 1fr; }
  .feed-card__actions .btn, .feed-card__actions .button-icon { flex: 1 1 auto; justify-content: center; }
  .feed-alert .btn { width: 100%; margin-inline-start: 0; }
  .feed-run__head .chip { margin-inline-start: 0; }
  .feed-run__rows { max-height: none; }
  /* على الجوّال يصير السطر عمودياً، فيأخذ زرُّ «أضف سعره» عرضه كاملاً بدل أن يُزاحم النص. */
  .fx-needed li { flex-direction: column; align-items: stretch; }
  .fx-needed .btn { width: 100%; margin-inline-start: 0; justify-content: center; }
}

/* Background refresh: keep the current cards fully visible and fixed in place,
   only hinting that fresh data is loading. No collapse to skeletons. */
#admin-main[aria-busy="true"] { position: relative; }
#admin-main[aria-busy="true"]::after { content: ""; position: absolute; inset-inline-end: 1.1rem; top: 1.1rem; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--gold-400); animation: spin .7s linear infinite; pointer-events: none; z-index: 5; }

/* =====================================================================
   LIGHT THEME — full component remap.
   The token overrides above are not enough because many components use
   hardcoded dark surfaces (rgba(4,6,9,*), #1b1f25 …) and hardcoded light
   text (#c8c4b9, #92efb8, #a9f4c9 …). In light mode those stay dark/washed
   out and become unreadable. Below every surface is flipped to a light
   card background and every text tone to a dark, high-contrast ink so the
   whole dashboard reads consistently. Contrast targets: body text ≥ 7:1,
   secondary text ≥ 4.5:1 (WCAG AA/AAA).
   ===================================================================== */
html[data-theme="light"] {
  /* Neutral surfaces used across cards/panels/tables. */
  --surface: #ffffff;
  --surface-2: #f4f6fa;
  --surface-sunken: #eef1f6;
  --ink-strong: #141a24;   /* headings / primary numbers */
  --ink-body: #1d2430;     /* body text */
  --ink-soft: #4a5568;     /* secondary text */
  --hair: rgba(20, 26, 36, .12);
  --hair-strong: rgba(20, 26, 36, .2);
}
/* Global text + surfaces */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { color: var(--ink-body); background: #ffffff; border-color: var(--hair-strong); }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #8892a2; }
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus { border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(166,124,38,.18); background: #ffffff; }
html[data-theme="light"] select option,
html[data-theme="light"] select optgroup { color: var(--ink-body); background: #ffffff; }

/* Sidebar */
html[data-theme="light"] .sidebar { background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%); border-inline-end: 1px solid var(--hair); box-shadow: 16px 0 45px rgba(15,23,42,.08); }
html[data-theme="light"] .sidebar__name { color: var(--gold-600); }
html[data-theme="light"] .nav-link { color: var(--ink-soft); }
html[data-theme="light"] .nav-link:hover { color: var(--gold-600); background: rgba(166,124,38,.1); }
html[data-theme="light"] .nav-link.is-active { color: var(--gold-600); border-color: rgba(166,124,38,.3); background: linear-gradient(90deg, rgba(166,124,38,.14), rgba(166,124,38,.04)); }
html[data-theme="light"] .nav-link.is-active svg { color: var(--gold-500); }

/* Topbar */
html[data-theme="light"] .topbar,
html[data-theme="light"] .topnav { background: rgba(255,255,255,.9); border-bottom: 1px solid var(--hair); }
html[data-theme="light"] .topbar__title,
html[data-theme="light"] .topbar__brand-name { color: var(--ink-strong); }
html[data-theme="light"] .crumb { color: var(--gold-600); }
html[data-theme="light"] .topbar-icon,
html[data-theme="light"] .user-menu__button,
html[data-theme="light"] .button-icon { color: var(--ink-soft); border-color: var(--hair-strong); background: #ffffff; }
html[data-theme="light"] .topbar-icon:hover,
html[data-theme="light"] .user-menu__button:hover,
html[data-theme="light"] .button-icon:hover { color: var(--gold-600); border-color: rgba(166,124,38,.45); background: rgba(166,124,38,.1); }
html[data-theme="light"] .quick-search input { background: #f4f6fa; }
html[data-theme="light"] .quick-search svg { color: var(--gold-500); }
html[data-theme="light"] .user-menu__name { color: var(--ink-soft); }
html[data-theme="light"] .popover { background: #ffffff; border-color: var(--hair-strong); }
html[data-theme="light"] .popover__item { color: var(--ink-body); }
html[data-theme="light"] .popover__item:hover { color: var(--gold-600); background: rgba(166,124,38,.1); }
html[data-theme="light"] .popover__item--danger { color: #c0392b; }

/* Metric cards */
html[data-theme="light"] .metric { background: linear-gradient(145deg, #ffffff, #f4f6fa); border-color: var(--hair); box-shadow: 0 12px 30px rgba(15,23,42,.08); }
html[data-theme="light"] .metric__value { color: var(--ink-strong); }
html[data-theme="light"] .metric__top,
html[data-theme="light"] .metric__detail { color: var(--ink-soft); }

/* Panels */
html[data-theme="light"] .panel,
html[data-theme="light"] .grid-shell { background: #ffffff; border-color: var(--hair); box-shadow: 0 10px 30px rgba(15,23,42,.07); }
html[data-theme="light"] .panel__head,
html[data-theme="light"] .grid-toolbar { border-bottom: 1px solid var(--hair); }
html[data-theme="light"] .panel__title { color: var(--ink-strong); }
html[data-theme="light"] .panel__title svg { color: var(--gold-500); }
html[data-theme="light"] .grid-toolbar__count { color: var(--ink-soft); }

/* Data grid */
html[data-theme="light"] .data-grid th { color: var(--ink-soft); background: #f4f6fa; border-bottom: 1px solid var(--hair); }
html[data-theme="light"] .data-grid td { color: var(--ink-body); border-bottom: 1px solid var(--hair); }
html[data-theme="light"] .data-grid tbody tr:hover { background: rgba(166,124,38,.06); }
html[data-theme="light"] .cell-sub,
html[data-theme="light"] .cell-metal__sub { color: var(--ink-soft); }
html[data-theme="light"] .cell-id { color: var(--gold-600); }
html[data-theme="light"] .thumb { background: #eef1f6; border-color: var(--hair); }
html[data-theme="light"] .pick__box { background: #ffffff; border-color: var(--hair); }
html[data-theme="light"] .data-grid tbody tr.is-picked { background: rgba(166,124,38,.1); }
html[data-theme="light"] .select-hint { color: var(--ink-soft); background: #f4f6fa; border-color: var(--hair); }
html[data-theme="light"] .select-hint--on { color: var(--ink-body); background: rgba(166,124,38,.08); border-color: rgba(166,124,38,.32); }
html[data-theme="light"] .bind-card { background: rgba(166,124,38,.06); border-color: rgba(166,124,38,.28); }
html[data-theme="light"] .bind-card__cell { background: #ffffff; border-color: var(--hair); }
html[data-theme="light"] .bind-card__sku { color: var(--ink-soft); }
html[data-theme="light"] .bind-card__lock { color: var(--gold-600); border-color: rgba(166,124,38,.32); }
html[data-theme="light"] .cell-karat { color: var(--gold-600); background: rgba(166,124,38,.08); border-color: rgba(166,124,38,.28); }

/* Price list */
html[data-theme="light"] .price-item { background: #f4f6fa; border-color: var(--hair); }
html[data-theme="light"] .price-item__title { color: var(--ink-strong); }
html[data-theme="light"] .price-item__meta { color: var(--ink-soft); }
html[data-theme="light"] .price-item__number { color: var(--gold-600); }

/* Chart */
html[data-theme="light"] .chart__grid { stroke: rgba(20,26,36,.1); }
html[data-theme="light"] .chart__line { stroke: var(--gold-500); }
html[data-theme="light"] .chart__point { fill: var(--gold-500); stroke: #ffffff; }
html[data-theme="light"] .chart__point:hover { fill: var(--gold-600); }
html[data-theme="light"] .chart__axis { fill: var(--ink-soft); }
html[data-theme="light"] .chart__extreme circle { stroke: rgba(20,26,36,.4); }
html[data-theme="light"] .chart__foot { color: var(--ink-soft); border-color: var(--hair); }
html[data-theme="light"] .chart__foot-item b { color: var(--ink-body); }
html[data-theme="light"] .chart__label { fill: var(--ink-soft); }
html[data-theme="light"] .chart__badge-bg { fill: rgba(255,255,255,.96); }
html[data-theme="light"] .chart__badge-prices { fill: var(--ink-soft); }

/* Ticker cards (the "notification title / card text" the user flagged) */
html[data-theme="light"] .ticker,
html[data-theme="light"] .trade-chart { background: #f4f6fa; border-color: var(--hair); }
html[data-theme="light"] .ticker__name { color: var(--ink-strong); }
html[data-theme="light"] .ticker__currency,
html[data-theme="light"] .ticker__foot { color: var(--ink-soft); }

/* بطاقات الشراء/البيع (النهاري): الخلفية بيضاء والأرقام حِبريّة، والحدّ الملوّن يبقى هو
   المُميِّز بين الرجلين — مع السهم والنص، فلا يعتمد الفهم على اللون. */
html[data-theme="light"] .quote { background: #ffffff; border-color: var(--hair); }
html[data-theme="light"] .quote__label,
html[data-theme="light"] .quote__unit,
html[data-theme="light"] .quote__before { color: var(--ink-soft); }
html[data-theme="light"] .quote__value b { color: var(--gold-600); }
html[data-theme="light"] .quote--up .quote__value b,
html[data-theme="light"] .quote--up .quote__move { color: #12824f; }
html[data-theme="light"] .quote--down .quote__value b,
html[data-theme="light"] .quote--down .quote__move { color: #c0392b; }
html[data-theme="light"] .quote__move { color: var(--ink-soft); }
html[data-theme="light"] .quote__move--new { color: var(--gold-600); }
html[data-theme="light"] .trade-move__mid { color: var(--ink-soft); border-color: var(--hair); }
html[data-theme="light"] .chart__leg { color: var(--gold-600); background: rgba(184,142,47,.1); border-color: var(--hair); }
html[data-theme="light"] .chart__foot-item--note { color: var(--gold-600); border-color: var(--gold-500); }
html[data-theme="light"] .delta__leg { border-inline-end-color: rgba(20,26,36,.2); }

/* Price board legs (light) */
html[data-theme="light"] .board-legs { background: #ffffff; border-color: var(--hair); }
html[data-theme="light"] .board-leg { color: var(--ink-soft); }
html[data-theme="light"] .board-leg:hover { color: var(--gold-600); }
html[data-theme="light"] .board-leg.is-active { color: #ffffff; background: linear-gradient(90deg, var(--gold-500), var(--gold-400)); }
html[data-theme="light"] .board-cell__before,
html[data-theme="light"] .board-cell--empty { color: var(--ink-soft); }
html[data-theme="light"] .color-field__swatch { background: #ffffff; border-color: var(--hair); }
html[data-theme="light"] .color-field__chip { border-color: var(--hair); }
html[data-theme="light"] .catalog-tab { color: var(--ink-soft); background: #ffffff; border-color: var(--hair-strong); }
html[data-theme="light"] .catalog-tab:hover { color: var(--gold-600); }
html[data-theme="light"] .catalog-tab.is-active { color: #ffffff; background: linear-gradient(90deg, var(--gold-500), var(--gold-400)); }
html[data-theme="light"] .catalog-tab__count { background: rgba(20,26,36,.08); }
html[data-theme="light"] .catalog-tab.is-active .catalog-tab__count { background: rgba(255,255,255,.24); }

/* Trading board */
html[data-theme="light"] .trade-board { background: linear-gradient(160deg, #ffffff, #f4f6fa); border-color: var(--hair); }
html[data-theme="light"] .trade-tab { color: var(--ink-soft); background: #ffffff; border-color: var(--hair-strong); }
html[data-theme="light"] .trade-tab:hover { color: var(--gold-600); }
html[data-theme="light"] .trade-tab.is-active { color: #ffffff; background: linear-gradient(90deg, var(--gold-500), var(--gold-400)); }
html[data-theme="light"] .trade-tab.is-active .trade-tab__mark { color: #ffffff; }
html[data-theme="light"] .trade-ranges { background: #ffffff; border-color: var(--hair-strong); }
html[data-theme="light"] .trade-range { color: var(--ink-soft); }
html[data-theme="light"] .trade-range.is-active { color: #ffffff; background: linear-gradient(90deg, var(--gold-500), var(--gold-400)); }
html[data-theme="light"] .movement-range { color: var(--ink-soft); }
html[data-theme="light"] .movement-spark i { background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); }

/* Trading movement box (light) */
html[data-theme="light"] .trade-move { background: linear-gradient(150deg, #ffffff, #f4f6fa); border-color: var(--hair); }
html[data-theme="light"] .trade-move__glyph { background: rgba(20,26,36,.06); color: var(--gold-600); }
html[data-theme="light"] .trade-move--up .trade-move__glyph { color: #12824f; background: rgba(31,157,99,.16); }
html[data-theme="light"] .trade-move--down .trade-move__glyph { color: #c0392b; background: rgba(214,69,69,.16); }
html[data-theme="light"] .trade-move__label,
html[data-theme="light"] .trade-move__sub { color: var(--ink-soft); }
html[data-theme="light"] .trade-move__delta { background: rgba(20,26,36,.06); color: var(--ink-body); }
html[data-theme="light"] .trade-move--up .trade-move__delta { color: #12824f; background: rgba(31,157,99,.16); }
html[data-theme="light"] .trade-move--down .trade-move__delta { color: #c0392b; background: rgba(214,69,69,.16); }

/* ربط مع بورصة */
html[data-theme="light"] .feed-chip,
html[data-theme="light"] .feed-switch,
html[data-theme="light"] .feed-run__row { color: var(--ink-body); border-color: var(--hair-strong); background: #ffffff; }
html[data-theme="light"] .feed-chip b,
html[data-theme="light"] .feed-switch__text strong { color: var(--ink-strong); }
html[data-theme="light"] .feed-chip small,
html[data-theme="light"] .feed-lead,
html[data-theme="light"] .feed-switch,
html[data-theme="light"] .feed-switch__text small,
html[data-theme="light"] .feed-run__head .latin,
html[data-theme="light"] .feed-run__head .cell-sub,
html[data-theme="light"] .feed-run__note { color: var(--ink-soft); }
html[data-theme="light"] .feed-chip svg,
html[data-theme="light"] .feed-lead svg,
html[data-theme="light"] .feed-run__head strong { color: var(--gold-600); }
html[data-theme="light"] .feed-chip--status { border-color: transparent; background: transparent; }
html[data-theme="light"] .feed-chip--ok b { color: #12824f; }
html[data-theme="light"] .feed-chip--warn b { color: #9a6a12; }
html[data-theme="light"] .feed-auto,
html[data-theme="light"] .feed-auto svg { color: var(--gold-600); border-color: var(--gold-500); }
html[data-theme="light"] .feed-switch__track { border-color: var(--hair-strong); background: #e6e9f0; }
html[data-theme="light"] .feed-switch__track i { background: #8c95a4; }
html[data-theme="light"] .feed-switch.is-on { color: var(--ink-body); border-color: rgba(31,157,99,.4); background: rgba(31,157,99,.1); }
html[data-theme="light"] .feed-switch.is-on .feed-switch__track { border-color: rgba(31,157,99,.5); background: rgba(31,157,99,.34); }
html[data-theme="light"] .feed-switch.is-on .feed-switch__track i { background: #0f6b41; }
html[data-theme="light"] .feed-card--pending { border-color: rgba(201,138,26,.5); }
html[data-theme="light"] .feed-badge { color: #ffffff; background: #b0842a; }
html[data-theme="light"] .feed-alert { color: #6b4a05; border-color: rgba(201,138,26,.4); background: rgba(201,138,26,.12); }
html[data-theme="light"] .feed-alert strong { color: #4d3403; }
html[data-theme="light"] .feed-error { color: #8f2020; border-color: rgba(214,69,69,.34); background: rgba(214,69,69,.08); }
html[data-theme="light"] .feed-error svg { color: #c0392b; }
html[data-theme="light"] .feed-chain li { border-color: var(--hair); background: #f7f8fb; }
html[data-theme="light"] .feed-chain li b { color: var(--ink-body); }
html[data-theme="light"] .feed-chain__no { color: #ffffff; background: #b0842a; }
html[data-theme="light"] .feed-chain__label { background: transparent; }

/* أسعار الصرف في الوضع النهاري: الخليّة ورقةٌ بيضاء، والفارغة إطارٌ متقطّع باهت. */
html[data-theme="light"] .fx-cell__value,
html[data-theme="light"] .fx-needed li { color: var(--ink-body); border-color: var(--hair-strong); background: #ffffff; }
html[data-theme="light"] .fx-cell__value strong,
html[data-theme="light"] .fx-needed .latin { color: var(--gold-600); }
html[data-theme="light"] .fx-cell__value small,
html[data-theme="light"] .fx-needed small { color: var(--ink-soft); }
html[data-theme="light"] .fx-needed b { color: var(--ink-strong); }
html[data-theme="light"] .fx-cell__value:hover,
html[data-theme="light"] .fx-cell__value:focus-visible { border-color: var(--gold-500); background: rgba(176,132,42,.09); }
html[data-theme="light"] .fx-cell--off .fx-cell__value strong { color: var(--ink-soft); }
html[data-theme="light"] .fx-cell--add { color: var(--ink-soft); border-color: var(--hair-strong); }
html[data-theme="light"] .fx-cell--add:hover,
html[data-theme="light"] .fx-cell--add:focus-visible { color: var(--gold-600); border-color: var(--gold-500); background: rgba(176,132,42,.08); }
html[data-theme="light"] .feed-run__group > h4 { color: var(--gold-600); }
html[data-theme="light"] .feed-chip--danger { border-color: rgba(214,69,69,.34); background: rgba(214,69,69,.08); }
html[data-theme="light"] .feed-chip--danger b, html[data-theme="light"] .feed-chip--danger svg { color: #c0392b; }
html[data-theme="light"] .feed-chip--ok b { color: #12824f; }
html[data-theme="light"] .key-state--saved { color: var(--ink-body); border-color: rgba(31,157,99,.34); background: rgba(31,157,99,.09); }
html[data-theme="light"] .key-state--saved svg, html[data-theme="light"] .key-state--saved b { color: #12824f; }
html[data-theme="light"] .key-state--missing { color: var(--ink-body); border-color: rgba(214,69,69,.34); background: rgba(214,69,69,.08); }
html[data-theme="light"] .key-state--missing svg { color: #c0392b; }
html[data-theme="light"] .feed-run__link b { color: var(--ink-body); }
/* أسعار الصرف في الوضع النهاري: نفس الخلايا بحدود شعرية وخلفية بيضاء، وخطُّ «أضف» متقطّع. */
html[data-theme="light"] .feed-run__group > h4 { color: var(--gold-600); }
html[data-theme="light"] .feed-run__group > h4 small { color: var(--ink-soft); }
html[data-theme="light"] .fx-cell__value,
html[data-theme="light"] .fx-needed li { color: var(--ink-body); border-color: var(--hair-strong); background: #ffffff; }
html[data-theme="light"] .fx-cell__value:hover { border-color: var(--gold-600); background: rgba(184,139,45,.08); }
html[data-theme="light"] .fx-cell__value strong,
html[data-theme="light"] .fx-needed .latin { color: var(--gold-600); }
html[data-theme="light"] .fx-cell__value small,
html[data-theme="light"] .fx-needed small { color: var(--ink-soft); }
html[data-theme="light"] .fx-cell--off .fx-cell__value strong { color: var(--ink-soft); }
html[data-theme="light"] .fx-cell--add { color: var(--ink-soft); border-color: var(--hair-strong); }
html[data-theme="light"] .fx-cell--add:hover { color: var(--gold-600); border-color: var(--gold-600); }
html[data-theme="light"] .fx-needed b { color: var(--ink-strong); }
html[data-theme="light"] .password-field--latin .password-toggle { color: var(--ink-soft); border-color: var(--hair-strong); background: #ffffff; }
html[data-theme="light"] .password-field--latin .password-toggle:hover,
html[data-theme="light"] .password-field--latin .password-toggle:focus-visible { color: var(--gold-600); background: rgba(184,139,45,.12); }

/* Delta / change badges — keep semantic hues but darken for light bg */
html[data-theme="light"] .delta { background: rgba(20,26,36,.06); color: var(--ink-body); }
html[data-theme="light"] .delta--up,
html[data-theme="light"] .change-up { color: #12824f; background: rgba(31,157,99,.16); }
html[data-theme="light"] .delta--down,
html[data-theme="light"] .change-down { color: #c0392b; background: rgba(214,69,69,.16); }
html[data-theme="light"] .delta--flat { color: var(--ink-soft); }

/* Chips */
html[data-theme="light"] .chip--success { color: #12824f; border-color: rgba(31,157,99,.3); background: rgba(31,157,99,.12); }
html[data-theme="light"] .chip--danger { color: #c0392b; border-color: rgba(214,69,69,.3); background: rgba(214,69,69,.12); }
html[data-theme="light"] .chip--warning { color: #9a6a12; border-color: rgba(201,138,26,.3); background: rgba(201,138,26,.14); }
html[data-theme="light"] .chip--info { color: #1f5c99; border-color: rgba(45,111,184,.3); background: rgba(45,111,184,.12); }
html[data-theme="light"] .chip--neutral { color: var(--ink-soft); border-color: var(--hair-strong); background: #f4f6fa; }

/* Buttons */
html[data-theme="light"] .btn { color: var(--ink-body); background: #eef1f6; }
html[data-theme="light"] .btn--primary { color: #ffffff; border-color: var(--gold-500); background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); box-shadow: 0 6px 20px rgba(166,124,38,.22); }
html[data-theme="light"] .btn--primary:hover { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); }
html[data-theme="light"] .btn--soft { color: var(--gold-600); border-color: rgba(166,124,38,.28); background: rgba(166,124,38,.1); }
html[data-theme="light"] .btn--quiet { color: var(--ink-soft); border-color: var(--hair-strong); }
html[data-theme="light"] .btn--danger { color: #c0392b; border-color: rgba(214,69,69,.4); background: rgba(214,69,69,.1); }

/* States / skeletons */
html[data-theme="light"] .state h3 { color: var(--ink-strong); }
html[data-theme="light"] .state p { color: var(--ink-soft); }
html[data-theme="light"] .state svg { color: var(--gold-500); }
html[data-theme="light"] .skeleton-line { background: linear-gradient(90deg, rgba(20,26,36,.05), rgba(20,26,36,.11), rgba(20,26,36,.05)); background-size: 200% 100%; }

/* Modals / forms */
html[data-theme="light"] .modal { background: #ffffff; border-color: var(--hair-strong); box-shadow: 0 28px 85px rgba(15,23,42,.28); }
html[data-theme="light"] .modal__head,
html[data-theme="light"] .modal__foot { border-color: var(--hair); }
html[data-theme="light"] .modal__title { color: var(--ink-strong); }
html[data-theme="light"] .modal__close { color: var(--ink-soft); border-color: var(--hair-strong); }
html[data-theme="light"] .field label { color: var(--ink-body); }
html[data-theme="light"] .field-hint { color: var(--ink-soft); }
html[data-theme="light"] .form-section { border-color: var(--hair); }
html[data-theme="light"] .form-section__title { color: var(--gold-600); }
html[data-theme="light"] .form-section__hint { color: var(--ink-soft); }
html[data-theme="light"] .image-upload,
html[data-theme="light"] .crop,
html[data-theme="light"] .calc-output,
html[data-theme="light"] .gram-row,
html[data-theme="light"] .gram-step,
html[data-theme="light"] .locked-value,
html[data-theme="light"] .identity-swatch,
html[data-theme="light"] .metal-tile,
html[data-theme="light"] .role-tile { background: #f4f6fa; border-color: var(--hair-strong); color: var(--ink-body); }
html[data-theme="light"] .gram-row--focus { background: rgba(176,137,44,.08); border-color: var(--gold-600); }
html[data-theme="light"] .gram-row__currency { color: var(--gold-600); }
html[data-theme="light"] .gram-leg__label { color: var(--ink-soft); }
html[data-theme="light"] .gram-step { color: var(--gold-600); }
html[data-theme="light"] .image-upload__preview { background: #eef1f6; border-color: var(--hair); color: var(--ink-soft); }
html[data-theme="light"] .image-upload__text { color: var(--ink-soft); }
html[data-theme="light"] .crop__stage { background: #eef1f6; border-color: var(--hair); }
html[data-theme="light"] .crop__empty,
html[data-theme="light"] .crop__meta,
html[data-theme="light"] .crop__zoom,
html[data-theme="light"] .crop__ratio { color: var(--ink-soft); border-color: var(--hair); }
html[data-theme="light"] .crop__ratio[aria-pressed="true"] { color: var(--gold-600); border-color: var(--gold-600); background: rgba(176,137,44,.12); }
html[data-theme="light"] .crop__guides { background-image: linear-gradient(to right, transparent calc(33.333% - 1px), rgba(20,26,38,.24) calc(33.333% - 1px) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent calc(66.666% - 1px), rgba(20,26,38,.24) calc(66.666% - 1px) calc(66.666% + 1px), transparent calc(66.666% + 1px)), linear-gradient(to bottom, transparent calc(33.333% - 1px), rgba(20,26,38,.24) calc(33.333% - 1px) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent calc(66.666% - 1px), rgba(20,26,38,.24) calc(66.666% - 1px) calc(66.666% + 1px), transparent calc(66.666% + 1px)); }
html[data-theme="light"] .calc-output strong,
html[data-theme="light"] .locked-value b,
html[data-theme="light"] .metal-tile__name,
html[data-theme="light"] .role-tile__name { color: var(--ink-strong); }
html[data-theme="light"] .metal-tile__code,
html[data-theme="light"] .role-tile__count { color: var(--ink-soft); }
html[data-theme="light"] .permission-group__title { color: var(--gold-600); }

/* Toasts */
html[data-theme="light"] .toast { background: #ffffff; color: var(--ink-body); border-color: var(--hair-strong); box-shadow: 0 18px 48px rgba(15,23,42,.18); }
html[data-theme="light"] .toast svg { color: var(--gold-500); }
html[data-theme="light"] .toast--error svg { color: #c0392b; }
html[data-theme="light"] .toast--success svg { color: #12824f; }

/* Page header */
html[data-theme="light"] .page-header h2 { color: var(--ink-strong); }
html[data-theme="light"] .page-header p { color: var(--ink-soft); }

/* Scrollbars */
html[data-theme="light"] * { scrollbar-color: rgba(166,124,38,.4) transparent; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(166,124,38,.35); background-clip: padding-box; }