/*!
 * 5 Stars Digital — panel theme (Bootstrap 5.3, light + dark, LTR + RTL)
 * Only CSS custom properties + a small set of components. No build step.
 */

/* ------------------------------------------------------------------ fonts (local files) */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Noto Nastaliq Urdu"; font-weight: 400; font-display: swap; src: url("../fonts/noto-nastaliq-urdu-arabic-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Nastaliq Urdu"; font-weight: 600; font-display: swap; src: url("../fonts/noto-nastaliq-urdu-arabic-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Nastaliq Urdu"; font-weight: 700; font-display: swap; src: url("../fonts/noto-nastaliq-urdu-arabic-700-normal.woff2") format("woff2"); }

/* ------------------------------------------------------------------ brand tokens */
:root {
    --brand-primary: #4F46E5;
    --brand-primary-hover: #4338CA;
    --brand-accent: #A855F7;
    --brand-accent-hover: #9333EA;
    --brand-dark: #0B0F24;
    --brand-dark-secondary: #111827;
    --brand-surface: #1E293B;
    --brand-text: #0B0F24;
    --brand-text-muted: #64748B;
    --brand-text-light: #F8FAFC;
    --brand-border: #334155;
    --brand-background: #F8FAFC;
    --brand-white: #FFFFFF;
    --brand-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #A855F7 100%);
    --brand-radius: 12px;
    --brand-shadow: 0 8px 24px rgba(11, 15, 36, 0.16);

    /* Order status colours (dot + tint). Meaningful, not decorative. */
    --st-ordered: #4F46E5;
    --st-reviewed: #7C3AED;
    --st-refunded: #0D9488;
    --st-delivered: #0284C7;
    --st-feedback: #059669;
    --st-completed: #16A34A;
    --st-onhold: #D97706;
    --st-cancelled: #64748B;
    --st-deleted: #9F1239;
    --st-scammed: #DC2626;

    /* Layout */
    --sd-sidebar-w: 268px;
    --sd-topbar-h: 64px;
    --sd-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Latin glyphs come from Plus Jakarta (its unicode-range has no Arabic), Urdu from Nastaliq. */
    --sd-font-urdu: "Plus Jakarta Sans", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", system-ui, sans-serif;
}

/* Light theme surfaces */
:root,
[data-bs-theme="light"] {
    --sd-canvas: #F8FAFC;
    --sd-surface: #FFFFFF;
    --sd-raised: #F1F5F9;
    --sd-ink: #0B0F24;
    --sd-muted: #64748B;
    --sd-line: #E2E8F0;
    --sd-line-strong: #CBD5E1;
    --sd-focus: rgba(79, 70, 229, .28);
    --sd-tint: rgba(79, 70, 229, .08);

    --bs-body-bg: var(--sd-canvas);
    --bs-body-color: var(--sd-ink);
    --bs-secondary-color: var(--sd-muted);
    --bs-border-color: var(--sd-line);
    --bs-tertiary-bg: var(--sd-raised);
    --bs-emphasis-color: var(--sd-ink);
    --bs-link-color: var(--brand-primary);
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: var(--brand-primary-hover);
    --bs-link-hover-color-rgb: 67, 56, 202;
}

/* Dark theme surfaces */
[data-bs-theme="dark"] {
    --sd-canvas: #0B0F24;
    --sd-surface: #111827;
    --sd-raised: #1E293B;
    --sd-ink: #F8FAFC;
    --sd-muted: #94A3B8;
    --sd-line: #1F2A3D;
    --sd-line-strong: #334155;
    --sd-focus: rgba(168, 85, 247, .35);
    --sd-tint: rgba(168, 85, 247, .12);

    --bs-body-bg: var(--sd-canvas);
    --bs-body-color: #E2E8F0;
    --bs-secondary-color: var(--sd-muted);
    --bs-border-color: var(--sd-line-strong);
    --bs-tertiary-bg: var(--sd-raised);
    --bs-emphasis-color: var(--sd-ink);
    --bs-secondary-bg: var(--sd-raised);
    --bs-link-color: #A5B4FC;
    --bs-link-color-rgb: 165, 180, 252;
    --bs-link-hover-color: #C4B5FD;
    --bs-link-hover-color-rgb: 196, 181, 253;
}

/* Bootstrap primary → brand */
:root {
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-primary-text-emphasis: #3730A3;
    --bs-primary-bg-subtle: #E0E7FF;
    --bs-primary-border-subtle: #C7D2FE;
    --bs-border-radius: 10px;
    --bs-border-radius-lg: var(--brand-radius);
    --bs-border-radius-sm: 7px;
    --bs-body-font-family: var(--sd-font);
    --bs-body-font-size: .9375rem;   /* 15px */
    --bs-body-line-height: 1.55;
    --bs-focus-ring-color: var(--sd-focus);
}
[data-bs-theme="dark"] {
    --bs-primary-text-emphasis: #C7D2FE;
    --bs-primary-bg-subtle: rgba(79, 70, 229, .18);
    --bs-primary-border-subtle: rgba(129, 140, 248, .35);
}

/* ------------------------------------------------------------------ base */
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--sd-canvas);
    font-feature-settings: "ss01" on, "cv11" on;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
[lang="ur"] body,
[lang="ur"] .form-control,
[lang="ur"] .form-select,
[lang="ur"] .btn {
    font-family: var(--sd-font-urdu);
}
[dir="rtl"] .bi-chevron-right, [dir="rtl"] .bi-chevron-left, [dir="rtl"] .bi-arrow-left, [dir="rtl"] .bi-arrow-right { display: inline-block; transform: scaleX(-1); }
[lang="zh"] body, [lang="zh"] .form-control, [lang="zh"] .form-select, [lang="zh"] .btn {
    /* Chinese uses the visitor's system CJK font (bundling one would add 5–10 MB). */
    font-family: "Plus Jakarta Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
}
[lang="ur"] body { line-height: 2.1; --bs-body-font-size: .95rem; }
[lang="ur"] .num, [lang="ur"] input[type="email"], [lang="ur"] input[type="password"], [lang="ur"] code { font-family: var(--sd-font); direction: ltr; unicode-bidi: isolate; }

h1, .h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.05rem); }
h2, .h2 { font-size: 1.625rem; }
h3, .h3 { font-size: 1.3125rem; }
h4, .h4 { font-size: 1.0625rem; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-weight: 700; letter-spacing: -.015em; color: var(--sd-ink); }
.text-muted, .text-secondary { color: var(--sd-muted) !important; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

::selection { background: rgba(124, 58, 237, .22); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ buttons */
.btn { font-weight: 600; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1rem; }
.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
    background-image: var(--brand-gradient);
    background-size: 160% 100%;
    background-position: 0 0;
    transition: background-position .3s ease, box-shadow .15s ease;
}
.btn-primary:hover, .btn-primary:focus-visible { background-position: 100% 0; }
.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--bs-primary-border-subtle);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #A5B4FC; }
.btn-ghost {
    --bs-btn-color: var(--sd-muted);
    --bs-btn-hover-color: var(--sd-ink);
    --bs-btn-hover-bg: var(--sd-raised);
    --bs-btn-active-bg: var(--sd-raised);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
}
.btn-icon { --bs-btn-padding-x: .55rem; --bs-btn-padding-y: .45rem; line-height: 1; font-size: 1.1rem; }

/* ------------------------------------------------------------------ forms */
.form-control, .form-select {
    background-color: var(--sd-surface);
    border-color: var(--sd-line-strong);
    padding-top: .6rem;
    padding-bottom: .6rem;
}
.form-control { padding-inline: .8rem; }
.form-select { padding-inline-start: .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem var(--sd-focus); }
.form-label { font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }
.form-text { color: var(--sd-muted); }
.form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--sd-focus); border-color: var(--brand-primary); }
.input-group-text { background: var(--sd-raised); border-color: var(--sd-line-strong); color: var(--sd-muted); }
.code-input { font-size: 1.6rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; font-family: var(--sd-font) !important; direction: ltr; }

/* ------------------------------------------------------------------ app shell */
.sd-shell { display: flex; min-height: 100vh; }

.sd-sidebar {
    --bs-offcanvas-width: var(--sd-sidebar-w);
    --bs-offcanvas-bg: var(--brand-dark);
    --bs-offcanvas-color: #CBD5E1;
    background: var(--brand-dark);
    color: #CBD5E1;
    width: var(--sd-sidebar-w);
    flex-shrink: 0;
    border-inline-end: 1px solid rgba(148, 163, 184, .08);
}
/* Bootstrap makes .offcanvas-lg transparent on desktop; keep the brand-dark rail. */
.sd-sidebar.offcanvas-lg { background-color: var(--brand-dark) !important; }
@media (min-width: 992px) {
    .sd-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
}
.sd-sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.sd-brand { display: flex; align-items: center; height: var(--sd-topbar-h); padding-inline: 1.25rem; flex-shrink: 0; }
.sd-brand img { height: 38px; width: auto; }

.sd-nav { list-style: none; margin: 0; padding: .5rem .75rem 1.5rem; }
.sd-nav-group { font-size: .75rem; font-weight: 600; color: #64748B; padding: 1.1rem .75rem .4rem; letter-spacing: .02em; }
.sd-nav-link {
    position: relative;
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .75rem;
    border-radius: 9px;
    color: #CBD5E1;
    text-decoration: none;
    font-weight: 500;
    font-size: .9rem;
}
.sd-nav-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; color: #94A3B8; }
.sd-nav-link:hover { background: rgba(148, 163, 184, .08); color: #fff; }
.sd-nav-link:hover i { color: #fff; }
.sd-nav-link.active { background: rgba(124, 58, 237, .16); color: #fff; }
.sd-nav-link.active i { color: #C4B5FD; }
/* The one signature detail: an active marker cut at the star's slant. */
.sd-nav-link.active::before {
    content: "";
    position: absolute;
    inset-block: 6px;
    inset-inline-start: -.75rem;
    width: 7px;
    background: var(--brand-gradient);
    clip-path: polygon(0 0, 100% 18%, 100% 82%, 0 100%);
}
[dir="rtl"] .sd-nav-link.active::before { clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 82%); }
.sd-nav-link .badge { margin-inline-start: auto; background: var(--brand-accent); font-weight: 600; }
.sd-nav-sub { list-style: none; padding: .15rem 0 .35rem; margin: 0; padding-inline-start: 2.25rem; }
.sd-nav-sub .sd-nav-link { padding: .4rem .75rem; font-size: .855rem; color: #94A3B8; }
.sd-nav-sub .sd-nav-link.active::before { inset-inline-start: -3rem; }
.sd-nav-toggle::after {
    content: "\F282"; font-family: bootstrap-icons; margin-inline-start: auto; font-size: .75rem; transition: transform .2s ease;
}
.sd-nav-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

.sd-sidebar-foot { margin-top: auto; padding: 1rem 1.25rem; font-size: .75rem; color: #64748B; border-top: 1px solid rgba(148, 163, 184, .08); }

.sd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.sd-topbar {
    position: sticky; top: 0; z-index: 1020;
    height: var(--sd-topbar-h);
    display: flex; align-items: center; gap: .5rem;
    padding-inline: 1rem;
    background: color-mix(in srgb, var(--sd-canvas) 86%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--sd-line);
}
@media (min-width: 992px) { .sd-topbar { padding-inline: 2rem; } }
.sd-topbar-title { font-weight: 700; font-size: 1.0625rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-topbar .btn-ghost { position: relative; }
.sd-topbar .dot-badge { position: absolute; top: 4px; inset-inline-end: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); box-shadow: 0 0 0 2px var(--sd-canvas); }

.sd-content { padding: 1.25rem 1rem 3rem; width: 100%; flex: 1; } /* full width on large screens */
@media (min-width: 992px) { .sd-content { padding: 2rem 2rem 4rem; } }

.sd-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.sd-page-head h1 { margin: 0; }
.sd-page-head p { margin: .25rem 0 0; color: var(--sd-muted); max-width: 64ch; }

/* ------------------------------------------------------------------ surfaces */
.sd-panel {
    background: var(--sd-surface);
    border: 1px solid var(--sd-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(11, 15, 36, .04), 0 10px 28px -14px rgba(11, 15, 36, .14);
}
[data-bs-theme="dark"] .sd-panel { box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 30px -16px rgba(0, 0, 0, .6); }
.sd-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--sd-line); }
.sd-panel-head h2, .sd-panel-head h3 { font-size: 1rem; margin: 0; }
.sd-panel-body { padding: 1.25rem; }
.card { --bs-card-bg: var(--sd-surface); --bs-card-border-color: var(--sd-line); --bs-card-border-radius: var(--brand-radius); }
.dropdown-menu { --bs-dropdown-bg: var(--sd-surface); --bs-dropdown-border-color: var(--sd-line); --bs-dropdown-link-active-bg: var(--brand-primary); box-shadow: var(--brand-shadow); border-radius: var(--brand-radius); padding: .4rem; }
.dropdown-item { border-radius: 7px; padding: .45rem .7rem; }
.modal { --bs-modal-bg: var(--sd-surface); --bs-modal-border-radius: var(--brand-radius); --bs-modal-border-color: var(--sd-line); }

/* KPI strip: one bordered row, figures separated by hairlines (not floating cards) */
.sd-kpis { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--sd-surface); border: 1px solid var(--sd-line); border-radius: var(--brand-radius); overflow: hidden; }
@media (min-width: 768px) { .sd-kpis { grid-template-columns: repeat(var(--cols, 4), 1fr); } }
.sd-kpi { padding: 1.1rem 1.25rem; border-inline-end: 1px solid var(--sd-line); border-bottom: 1px solid var(--sd-line); text-decoration: none; color: inherit; display: block; }
.sd-kpi:hover { background: var(--sd-tint); color: inherit; }
.sd-kpi-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--sd-ink); font-variant-numeric: tabular-nums; }
.sd-kpi-label { color: var(--sd-muted); font-size: .845rem; margin-top: .3rem; }
.sd-kpi-alert .sd-kpi-value { color: var(--st-onhold); }

/* Status ledger (dashboard) */
.sd-ledger { width: 100%; border-collapse: separate; border-spacing: 0; }
.sd-ledger th { font-size: .78rem; font-weight: 600; color: var(--sd-muted); padding: .75rem 1.25rem; text-align: end; border-bottom: 1px solid var(--sd-line); }
.sd-ledger th:first-child { text-align: start; }
.sd-ledger td { padding: .7rem 1.25rem; border-bottom: 1px solid var(--sd-line); text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }
.sd-ledger td:first-child { text-align: start; font-weight: 500; }
.sd-ledger tr:last-child td { border-bottom: 0; }
.sd-ledger tbody tr { cursor: pointer; }
.sd-ledger tbody tr:hover td { background: var(--sd-tint); }
.sd-ledger a { color: inherit; text-decoration: none; }
.sd-ledger .zero { color: var(--sd-line-strong); font-weight: 500; }

.status-dot { display: inline-flex; align-items: center; gap: .55rem; }
.status-dot::before { content: ""; width: .6rem; height: .6rem; border-radius: 3px; background: var(--c, var(--sd-muted)); transform: rotate(45deg); flex-shrink: 0; }
.status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.st-ordered { --c: var(--st-ordered); } .st-reviewed { --c: var(--st-reviewed); } .st-refunded { --c: var(--st-refunded); }
.st-delivered { --c: var(--st-delivered); } .st-feedback { --c: var(--st-feedback); } .st-completed { --c: var(--st-completed); }
.st-onhold { --c: var(--st-onhold); } .st-cancelled { --c: var(--st-cancelled); } .st-deleted { --c: var(--st-deleted); } .st-scammed { --c: var(--st-scammed); }
[data-bs-theme="dark"] { --st-ordered: #818CF8; --st-reviewed: #A78BFA; --st-refunded: #2DD4BF; --st-delivered: #38BDF8; --st-feedback: #34D399; --st-completed: #4ADE80; --st-onhold: #FBBF24; --st-cancelled: #94A3B8; --st-deleted: #FB7185; --st-scammed: #F87171; }

/* Late reviews call-out */
.sd-callout { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--brand-radius); border: 1px solid color-mix(in srgb, var(--st-onhold) 40%, transparent); background: color-mix(in srgb, var(--st-onhold) 9%, var(--sd-surface)); color: inherit; text-decoration: none; }
.sd-callout:hover { color: inherit; border-color: var(--st-onhold); }
.sd-callout i { font-size: 1.4rem; color: var(--st-onhold); }
.sd-callout strong { font-variant-numeric: tabular-nums; }

/* Tables */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--sd-line); --bs-table-hover-bg: var(--sd-tint); margin: 0; }
.table > thead th { font-size: .78rem; font-weight: 600; color: var(--sd-muted); background: var(--sd-raised); white-space: nowrap; }
.table > :not(caption) > * > * { padding: .75rem 1rem; vertical-align: middle; }

/* Avatar + online dot */
.avatar { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-gradient); color: #fff; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.4rem; }
.online-dot { position: absolute; bottom: 0; inset-inline-end: 0; width: 10px; height: 10px; border-radius: 50%; background: #94A3B8; box-shadow: 0 0 0 2px var(--sd-surface); }
.online-dot.is-online { background: #22C55E; }

/* Permission matrix */
.perm-section { border: 1px solid var(--sd-line); border-radius: var(--brand-radius); background: var(--sd-surface); }
.perm-section + .perm-section { margin-top: .75rem; }
.perm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--sd-line); }
.perm-section-head h3 { font-size: .95rem; margin: 0; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .35rem 1rem; padding: .85rem 1rem; }
.perm-count { font-size: .78rem; color: var(--sd-muted); font-variant-numeric: tabular-nums; }

/* Recovery codes */
.recovery-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; padding: 1rem; background: var(--sd-raised); border-radius: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; direction: ltr; }

/* Alerts / toasts */
.alert { border-radius: var(--brand-radius); border-width: 1px; }
.sd-toasts { position: fixed; z-index: 1090; inset-block-end: 1rem; inset-inline-end: 1rem; display: grid; gap: .5rem; max-width: min(380px, calc(100vw - 2rem)); }
.sd-toast { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; background: var(--brand-dark); color: #F8FAFC; border-radius: var(--brand-radius); box-shadow: var(--brand-shadow); font-size: .9rem; }
.sd-toast i { font-size: 1.1rem; margin-top: .05rem; }
.sd-toast.is-success i { color: #4ADE80; } .sd-toast.is-error i { color: #F87171; } .sd-toast.is-info i { color: #A5B4FC; }
.sd-toast .btn-close { filter: invert(1); margin-inline-start: auto; font-size: .7rem; }

/* Empty states */
.sd-empty { text-align: center; padding: 3rem 1rem; color: var(--sd-muted); }
.sd-empty i { font-size: 2rem; color: var(--sd-line-strong); display: block; margin-bottom: .5rem; }

/* Charts */
.sd-chart { min-height: 300px; }
.apexcharts-tooltip { border-radius: 10px !important; box-shadow: var(--brand-shadow) !important; }

/* ------------------------------------------------------------------ auth pages */
.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--sd-canvas);
}
@media (min-width: 992px) { .auth { grid-template-columns: minmax(420px, 5fr) 7fr; } }
.auth-brand {
    position: relative;
    overflow: hidden;
    background: var(--brand-dark);
    color: #CBD5E1;
    padding: 1.5rem;
    display: flex; flex-direction: column;
}
@media (min-width: 992px) { .auth-brand { padding: 3rem; } }
.auth-brand .auth-mark {
    position: absolute;
    width: 120%;
    max-width: 720px;
    inset-inline-end: -42%;
    top: 14%;
    opacity: .95;
    pointer-events: none;
}
/* Fade the star out behind the copy so the headline always reads cleanly. */
.auth-brand::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 58%;
    background: linear-gradient(to top, var(--brand-dark) 42%, rgba(11, 15, 36, 0));
    pointer-events: none;
}
.auth-brand > * { z-index: 1; }
.auth-brand .auth-mark { z-index: 0; }
.auth-brand-copy { position: relative; margin-top: auto; max-width: 30ch; display: none; }
@media (min-width: 992px) { .auth-brand-copy { display: block; } }
.auth-brand-copy h2 { color: #fff; font-size: 2rem; line-height: 1.15; letter-spacing: -.02em; margin-bottom: .75rem; }
.auth-brand-copy p { color: #94A3B8; margin: 0; }
.auth-brand .logo { height: 44px; width: auto; align-self: flex-start; position: relative; }
@media (max-width: 991.98px) { .auth-brand { flex-direction: row; align-items: center; height: 88px; } .auth-form { margin: 1.5rem auto auto; } .auth-main { min-height: calc(100vh - 88px); } .auth-brand .auth-mark { width: 200px; inset-inline-end: -36px; top: -40px; opacity: .55; } .auth-brand::after { display: none; } }
.auth-main { display: flex; flex-direction: column; padding: 1.25rem; }
@media (min-width: 992px) { .auth-main { padding: 2rem 3rem; } }
.auth-tools { display: flex; justify-content: flex-end; gap: .25rem; }
.auth-form { width: 100%; max-width: 400px; margin: auto; padding-block: 2rem; }
.auth-form h1 { font-size: 1.75rem; margin-bottom: .35rem; }
.auth-form .lead { color: var(--sd-muted); font-size: .95rem; margin-bottom: 1.75rem; }

/* ------------------------------------------------------------------ misc */
.text-gradient { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.min-w-0 { min-width: 0; }
.logo-on-light { display: inline; } .logo-on-dark { display: none; }
[data-bs-theme="dark"] .logo-on-light { display: none; } [data-bs-theme="dark"] .logo-on-dark { display: inline; }
.pagination { --bs-pagination-active-bg: var(--brand-primary); --bs-pagination-active-border-color: var(--brand-primary); --bs-pagination-bg: var(--sd-surface); --bs-pagination-border-color: var(--sd-line); margin: 0; }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 575.98px) {
    .sd-ledger th, .sd-ledger td { padding-inline: .75rem; }
    .sd-ledger th { white-space: nowrap; }
    .sd-panel-head, .sd-panel-body { padding-inline: 1rem; }
    .sd-kpi { padding: .9rem 1rem; }
    .sd-kpi-value { font-size: 1.5rem; }
}
.form-check-input:indeterminate { background-color: var(--brand-primary); border-color: var(--brand-primary); }
/* Long emails: keep them on one line on desktop, wrap only when space runs out. */
.sd-email { min-width: 15rem; overflow-wrap: anywhere; }
@media (max-width: 767.98px) { .sd-email { min-width: 11rem; } }

/* ------------------------------------------------------------------ footer credit */
.sd-footer { padding: 1.25rem 1rem; font-size: .8rem; color: var(--sd-muted); border-top: 1px solid var(--sd-line); }
@media (min-width: 992px) { .sd-footer { padding-inline: 2rem; } }
.sd-credit-link { font-weight: 600; text-decoration: none; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sd-credit-link:hover { text-decoration: underline; text-decoration-color: var(--brand-accent); }

/* ------------------------------------------------------------------ developer page */
.dev-page { background:
    radial-gradient(1200px 500px at 50% -120px, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 70%),
    var(--sd-canvas); }
.dev-bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; max-width: 960px; margin: 0 auto; }
.dev-main { max-width: 860px; margin: 0 auto; padding: 1rem 1.25rem 4rem; }
.dev-hero { text-align: center; padding-block: 1.5rem 2.5rem; }
.dev-photo { width: 220px; height: 220px; border-radius: 28px; object-fit: cover; box-shadow: 0 0 0 4px var(--sd-canvas), 0 0 0 6px var(--brand-accent), var(--brand-shadow); }
@media (min-width: 768px) { .dev-photo { width: 260px; height: 260px; } }
.dev-name { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); margin: 1.75rem 0 .25rem; letter-spacing: -.025em; }
.dev-title { color: var(--sd-muted); font-size: 1.05rem; margin-bottom: 1.25rem; }
.dev-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: .75rem; }
.dev-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--sd-line-strong); background: var(--sd-surface); color: var(--sd-ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.dev-chip:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.dev-chip i { color: var(--brand-accent); }
.dev-location { color: var(--sd-muted); font-size: .9rem; }
.dev-summary { max-width: 62ch; margin: 1rem auto 1.5rem; font-size: 1.02rem; }
.dev-skills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.dev-skills li { padding: .25rem .65rem; border-radius: 8px; background: var(--sd-tint); color: var(--sd-ink); font-size: .8rem; font-weight: 600; }
.dev-skills-sm { justify-content: flex-start; margin-top: .75rem; }
.dev-skills-sm li { font-size: .75rem; }
.dev-career h2 { font-size: 1.4rem; margin-bottom: 1.25rem; }
.dev-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.dev-timeline::before { content: ""; position: absolute; inset-block: .5rem; inset-inline-start: 7px; width: 2px; background: var(--sd-line-strong); }
.dev-job { position: relative; padding-inline-start: 2.25rem; padding-bottom: 1.75rem; }
.dev-job::before { content: ""; position: absolute; inset-inline-start: 1px; top: .45rem; width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg); background: var(--sd-surface); border: 2px solid var(--brand-primary); }
.dev-job.is-current::before { background: var(--brand-gradient); border-color: transparent; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-accent) 22%, transparent); }
.dev-job-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
.dev-job h3 { font-size: 1.1rem; margin: 0; }
.dev-company { margin: .1rem 0 0; font-weight: 600; color: var(--brand-primary); }
[data-bs-theme="dark"] .dev-company { color: #A5B4FC; }
.dev-company span { color: var(--sd-muted); font-weight: 400; }
.dev-period { margin: 0; color: var(--sd-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.dev-place { color: var(--sd-muted); font-size: .85rem; margin: .35rem 0 .5rem; }
.dev-text { margin: 0; max-width: 70ch; }
.dev-points { margin: 0; padding-inline-start: 1.1rem; max-width: 70ch; }
.dev-points li { margin-bottom: .2rem; }

/* ------------------------------------------------------------------ order screenshots + timeline */
.sd-shot figcaption { font-size: .8rem; color: var(--sd-muted); margin-top: .4rem; text-align: center; }
.sd-shot-img { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--sd-raised); border: 1px solid var(--sd-line); color: var(--sd-line-strong); font-size: 1.75rem; }
.sd-shot-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
a.sd-shot-img:hover img { transform: scale(1.03); }
.sd-shot-img.is-empty { border-style: dashed; }
.sd-timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-inline-start: 2px solid var(--sd-line); }
[dir="rtl"] .sd-timeline { padding: 0 1.1rem 0 0; }
.sd-timeline li { position: relative; padding: 0 0 1.1rem; }
.sd-timeline li::before { content: ""; position: absolute; inset-inline-start: calc(-1.1rem - 6px); top: .35rem; width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); background: var(--sd-surface); border: 2px solid var(--brand-primary); }
.sd-dl { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: .55rem 1rem; margin: 0; }
.sd-dl dt { color: var(--sd-muted); font-weight: 500; font-size: .875rem; }
.sd-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.file-drop { border: 1px dashed var(--sd-line-strong); border-radius: 10px; padding: .75rem; background: var(--sd-raised); }
.dot-unread { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); margin-inline-end: .4rem; vertical-align: middle; }
.sd-impersonating { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: var(--brand-gradient); color: #fff; font-size: .9rem; font-weight: 600; }
@media (min-width: 992px) { .sd-impersonating { padding-inline: 2rem; } }
.nav-underline { --bs-nav-underline-link-active-color: var(--brand-primary); --bs-nav-link-color: var(--sd-muted); --bs-nav-link-hover-color: var(--sd-ink); border-bottom: 1px solid var(--sd-line); gap: 1.25rem; }
[data-bs-theme="dark"] .nav-underline { --bs-nav-underline-link-active-color: #C4B5FD; }
.sd-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.sd-thread li { max-width: 85%; }
.sd-thread li.is-admin { align-self: flex-end; }
.sd-msg-meta { font-size: .75rem; color: var(--sd-muted); margin-bottom: .25rem; }
.sd-msg { padding: .75rem 1rem; border-radius: 12px; background: var(--sd-raised); white-space: pre-line; }
.is-admin .sd-msg { background: color-mix(in srgb, var(--brand-primary) 12%, var(--sd-surface)); border: 1px solid var(--bs-primary-border-subtle); }
.is-admin .sd-msg-meta { text-align: end; }
.sd-new { background: var(--sd-tint); }


/* ================================================================== UI kit (phase 2c) */

/* Page head: icon tile + title */
.sd-page-head { align-items: center; }
.sd-head-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--brand-gradient); color: #fff; font-size: 1.3rem; box-shadow: 0 8px 20px -8px rgba(124, 58, 237, .7); flex-shrink: 0; }
.sd-head-title { display: flex; align-items: center; gap: .9rem; min-width: 0; }

/* Panel header: title with icon chip + count badge */
.sd-panel-head h2 { display: flex; align-items: center; gap: .55rem; }
.sd-chip-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--sd-tint); color: var(--brand-primary); font-size: .95rem; }
[data-bs-theme="dark"] .sd-chip-icon { color: #C4B5FD; }
.sd-count { display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: 999px; background: var(--sd-raised); color: var(--sd-muted); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sd-panel-foot { padding: .85rem 1.25rem; border-top: 1px solid var(--sd-line); }
.sd-panel-foot:empty { display: none; }

/* Filter card (separate from the data card) */
.sd-filter { margin-bottom: 1.25rem; }
.sd-filter .sd-panel-body { padding: 1rem 1.25rem 1.15rem; }
.sd-filter .form-label { font-size: .78rem; color: var(--sd-muted); text-transform: uppercase; letter-spacing: .04em; }
.sd-filter-actions { display: flex; gap: .5rem; align-items: flex-end; justify-content: flex-end; }
.sd-filter-toggle { display: none; }
@media (max-width: 767.98px) {
    .sd-filter-toggle { display: inline-flex; }
    .sd-filter:not(.is-open) .sd-panel-body { display: none; }
    .sd-filter:not(.is-open) .sd-panel-head { border-bottom: 0; }
}

/* Tables inside data cards */
.sd-panel .table > thead th { background: var(--sd-raised); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.sd-panel .table > thead th:first-child { border-start-start-radius: 0; }
.sd-panel .table tbody tr:last-child td { border-bottom: 0; }
.sd-name-link { color: var(--sd-ink); font-weight: 600; text-decoration: none; }
.sd-name-link:hover { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
[data-bs-theme="dark"] .sd-name-link:hover { color: #C4B5FD; }

/* Action buttons: icon + text, tinted per action */
.sd-actions { display: inline-flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
@media (min-width: 992px) { td .sd-actions { flex-wrap: nowrap; } }
.sd-actions form { display: inline-flex; margin: 0; }
.sd-act {
    --a: var(--brand-primary);
    display: inline-flex; align-items: center; gap: .35rem;
    height: 32px; padding: 0 .7rem; border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--a) 22%, transparent);
    background: color-mix(in srgb, var(--a) 9%, var(--sd-surface));
    color: var(--a); font-weight: 600; font-size: .8rem; line-height: 1; white-space: nowrap;
    text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sd-act i { font-size: .95rem; }
.sd-act:hover, .sd-act:focus-visible { background: var(--a); color: #fff; border-color: var(--a); box-shadow: 0 6px 16px -8px var(--a); }
.sd-act:active { transform: translateY(1px); }
.sd-act[disabled] { opacity: .5; pointer-events: none; }
.sd-act-view { --a: #4F46E5; }
.sd-act-edit { --a: #B45309; }
.sd-act-delete { --a: #DC2626; }
.sd-act-login { --a: #0F766E; }
.sd-act-restore, .sd-act-approve { --a: #15803D; }
.sd-act-neutral { --a: #475569; }
[data-bs-theme="dark"] .sd-act-view { --a: #A5B4FC; }
[data-bs-theme="dark"] .sd-act-edit { --a: #FBBF24; }
[data-bs-theme="dark"] .sd-act-delete { --a: #F87171; }
[data-bs-theme="dark"] .sd-act-login { --a: #2DD4BF; }
[data-bs-theme="dark"] .sd-act-restore, [data-bs-theme="dark"] .sd-act-approve { --a: #4ADE80; }
[data-bs-theme="dark"] .sd-act-neutral { --a: #CBD5E1; }
[data-bs-theme="dark"] .sd-act:hover { color: var(--brand-dark); }
.sd-act-lg { height: 40px; padding: 0 1rem; font-size: .875rem; border-radius: 10px; }

/* Bulk bar */
.sd-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem 1.25rem; background: color-mix(in srgb, var(--brand-primary) 8%, var(--sd-surface)); border-bottom: 1px solid var(--bs-primary-border-subtle); }
.sd-bulkbar[hidden] { display: none; }
.sd-bulkbar strong { font-variant-numeric: tabular-nums; }
.sd-check { width: 2.5rem; }

/* Required fields */
.form-label.is-required::after, .is-required > .form-label::after { content: " *"; color: #DC2626; font-weight: 700; }
[data-bs-theme="dark"] .form-label.is-required::after { color: #F87171; }

/* Password eye toggle */
.sd-pass { position: relative; }
.sd-pass .form-control { padding-inline-end: 2.75rem; }
.sd-pass-btn { position: absolute; inset-block: 0; inset-inline-end: 0; width: 2.6rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--sd-muted); border-radius: 0 10px 10px 0; z-index: 5; }
[dir="rtl"] .sd-pass-btn { border-radius: 10px 0 0 10px; }
.sd-pass-btn:hover { color: var(--brand-primary); }
.sd-pass .form-control.is-invalid { padding-inline-end: 4.5rem; background-position: right 2.7rem center; }

/* Confirm / action modals */
.sd-modal-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 1.45rem; margin-bottom: 1rem; }
.sd-modal-icon.is-danger { background: color-mix(in srgb, #DC2626 12%, transparent); color: #DC2626; }
.sd-modal-icon.is-primary { background: var(--sd-tint); color: var(--brand-primary); }
.sd-modal-icon.is-success { background: color-mix(in srgb, #16A34A 13%, transparent); color: #16A34A; }
.modal-content { border: 1px solid var(--sd-line); box-shadow: 0 30px 70px -20px rgba(11, 15, 36, .45); }
.modal-backdrop.show { opacity: .55; backdrop-filter: blur(2px); }
.sd-option { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--sd-line); border-radius: 10px; background: var(--sd-raised); cursor: pointer; }
.sd-option:hover { border-color: var(--brand-primary); }
.sd-option .form-check-input { margin-top: .2rem; flex-shrink: 0; }

/* Floating chat button (PM) */
.sd-fab {
    position: fixed; z-index: 1040; inset-block-end: 1.25rem; inset-inline-end: 1.25rem;
    display: inline-flex; align-items: center; gap: .55rem; height: 54px; padding: 0 1.2rem 0 1rem; border-radius: 999px;
    background: var(--brand-gradient); color: #fff; font-weight: 700; text-decoration: none;
    box-shadow: 0 14px 30px -10px rgba(124, 58, 237, .75), 0 0 0 4px color-mix(in srgb, var(--brand-accent) 18%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}
.sd-fab:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(124, 58, 237, .85), 0 0 0 6px color-mix(in srgb, var(--brand-accent) 22%, transparent); }
.sd-fab i { font-size: 1.35rem; }
.sd-fab-badge { position: absolute; top: -4px; inset-inline-end: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #EF4444; color: #fff; font-size: .72rem; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--sd-canvas); }
@media (max-width: 575.98px) { .sd-fab span.sd-fab-label { display: none; } .sd-fab { width: 56px; padding: 0; justify-content: center; } }
body.has-fab .sd-toasts { inset-block-end: 5.5rem; }

/* PM dashboard: status cards (old layout, new look) */
.sd-alert-card { position: relative; overflow: hidden; border-radius: 14px; padding: 1.15rem 1.25rem; color: #fff; background: linear-gradient(135deg, #1E1B4B, #4C1D95 60%, #7C3AED); box-shadow: 0 14px 30px -16px rgba(76, 29, 149, .8); height: 100%; display: flex; flex-direction: column; }
.sd-alert-card::after { content: ""; position: absolute; inset-inline-end: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 70%); }
.sd-alert-card a { color: inherit; text-decoration: none; }
.sd-alert-split { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; flex: 1; }
.sd-alert-split a { display: flex; flex-direction: column; justify-content: center; padding: .6rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .08); transition: background-color .15s ease; }
.sd-alert-split a:hover { background: rgba(255, 255, 255, .16); }
.sd-alert-num { font-size: 1.9rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sd-alert-lbl { font-size: .60rem; white-space: nowrap; opacity: .85; margin-top: .3rem; display: flex; align-items: center; gap: .35rem; }
.sd-alert-foot { margin-top: .85rem; padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .16); font-weight: 600; font-size: .875rem; display: flex; justify-content: space-between; align-items: center; }
.sd-alert-foot .badge { background: #F59E0B; color: #111827; }

.st-card { display: flex; flex-direction: column; height: 100%; border-radius: 14px; background: var(--sd-surface); border: 1px solid var(--sd-line); text-decoration: none; color: inherit; overflow: hidden; position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; box-shadow: 0 1px 2px rgba(11, 15, 36, .04); }
.st-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--c, var(--brand-primary)); }
.st-card:hover { color: inherit; transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--c) 80%, transparent); }
.st-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.1rem .4rem; }
.st-card-name { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--sd-ink); }
.st-card-name i { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); font-size: 1rem; }
.st-card-total { font-size: .75rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent); padding: .15rem .55rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.st-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: .4rem .5rem 1rem; flex: 1; align-content: center; }
.st-card-grid div { text-align: center; padding: .25rem; }
.st-card-grid div + div { border-inline-start: 1px dashed var(--sd-line-strong); }
.st-card-grid b { display: block; font-size: 1.45rem; font-weight: 800; line-height: 1.15; color: var(--sd-ink); font-variant-numeric: tabular-nums; }
.st-card-grid b.zero { color: var(--sd-line-strong); }
.st-card-grid small { color: var(--sd-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

/* Inbox (mail-client layout) */
.sd-inbox { display: grid; grid-template-columns: 1fr; min-height: 560px; }
@media (min-width: 992px) { .sd-inbox { grid-template-columns: minmax(320px, 400px) 1fr; } }
.sd-inbox-list { border-inline-end: 1px solid var(--sd-line); display: flex; flex-direction: column; min-width: 0; }
.sd-inbox-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: .6rem .75rem; border-bottom: 1px solid var(--sd-line); }
.sd-inbox-tabs a { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--sd-muted); text-decoration: none; white-space: nowrap; }
.sd-inbox-tabs a:hover { background: var(--sd-raised); color: var(--sd-ink); }
.sd-inbox-tabs a.active { background: var(--brand-primary); color: #fff; }
.sd-inbox-tabs a .sd-count { background: rgba(255, 255, 255, .2); color: inherit; padding: 0 .4rem; }
.sd-inbox-items { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; max-height: 70vh; }
.sd-inbox-item { display: flex; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--sd-line); text-decoration: none; color: inherit; position: relative; }
.sd-inbox-item:hover { background: var(--sd-raised); color: inherit; }
.sd-inbox-item.active { background: var(--sd-tint); }
.sd-inbox-item.active::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--brand-gradient); }
.sd-inbox-item.is-unread .sd-inbox-from { font-weight: 800; }
.sd-inbox-item.is-unread::after { content: ""; position: absolute; top: 1.1rem; inset-inline-end: 1rem; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 20%, transparent); }
.sd-inbox-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.1rem; color: var(--k, var(--brand-primary)); background: color-mix(in srgb, var(--k, var(--brand-primary)) 13%, transparent); }
.k-order { --k: #0284C7; } .k-message { --k: #7C3AED; } .k-whatsapp { --k: #16A34A; } .k-broadcast { --k: #DB2777; }
.sd-inbox-body { min-width: 0; flex: 1; }
.sd-inbox-top { display: flex; justify-content: space-between; gap: .5rem; padding-inline-end: 1.2rem; }
.sd-inbox-from { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-inbox-time { font-size: .72rem; color: var(--sd-muted); white-space: nowrap; flex-shrink: 0; }
.sd-inbox-snip { font-size: .83rem; color: var(--sd-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .15rem; }
.sd-inbox-read { display: flex; flex-direction: column; min-width: 0; }
.sd-inbox-read-head { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--sd-line); }
.sd-inbox-read-body { padding: 1.5rem; flex: 1; }
.sd-bubble { max-width: 680px; padding: 1.1rem 1.25rem; border-radius: 4px 16px 16px 16px; background: var(--sd-raised); white-space: pre-line; font-size: .95rem; line-height: 1.65; }
[dir="rtl"] .sd-bubble { border-radius: 16px 4px 16px 16px; }
.sd-inbox-empty { display: grid; place-items: center; text-align: center; color: var(--sd-muted); padding: 3rem 1.5rem; height: 100%; }
.sd-inbox-empty i { font-size: 2.8rem; display: block; margin-bottom: .75rem; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 991.98px) {
    .sd-inbox.has-open .sd-inbox-list { display: none; }
    .sd-inbox:not(.has-open) .sd-inbox-read { display: none; }
    .sd-inbox-list { border-inline-end: 0; }
}

/* Phones: list tables become stacked rows (card-like), so action buttons stay readable */
@media (max-width: 767.98px) {
    .sd-panel .table > thead { display: none; }
    .sd-panel .table, .sd-panel .table > tbody, .sd-panel .table > tbody > tr { display: block; width: 100%; }
    .sd-panel .table > tbody > tr { position: relative; padding: .85rem 1rem; border-bottom: 1px solid var(--sd-line); }
    .sd-panel .table > tbody > tr:last-child { border-bottom: 0; }
    .sd-panel .table > tbody > tr > td { display: block; padding: .15rem 0; border: 0; text-align: start !important; }
    .sd-panel .table > tbody > tr > td.d-none { display: none !important; }
    .sd-panel .table > tbody > tr > td:has(> [data-check-row]) { position: absolute; top: .9rem; inset-inline-end: 1rem; padding: 0; }
    .sd-panel .table > tbody > tr > td:has(> .sd-empty) { padding: 0; }
    .sd-panel .table .sd-actions { justify-content: flex-start; margin-top: .5rem; }
    .sd-panel .table-responsive { overflow: visible; }
}

/* ==================================================================
   v3 — modern, quiet, data-dense
   Light rail, solid controls, compact tables. Colour is reserved for
   order statuses (the one loud element) and the primary action.
   ================================================================== */
:root, [data-bs-theme="light"] {
    --sd-canvas: #F6F7F9;
    --sd-surface: #FFFFFF;
    --sd-raised: #F2F4F7;
    --sd-hover: #F9FAFB;
    --sd-ink: #101828;
    --sd-ink-2: #344054;
    --sd-muted: #667085;
    --sd-line: #EAECF0;
    --sd-line-strong: #D0D5DD;
    --sd-tint: #EEF2FF;
    --sd-tint-ink: #3730A3;
    --sd-focus: rgba(79, 70, 229, .22);
    --sd-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --sd-shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, .18);
    --bs-body-color: var(--sd-ink-2);
}
[data-bs-theme="dark"] {
    --sd-canvas: #0B0E14;
    --sd-surface: #12161F;
    --sd-raised: #1A1F2B;
    --sd-hover: #161B25;
    --sd-ink: #F2F4F7;
    --sd-ink-2: #D0D5DD;
    --sd-muted: #98A2B3;
    --sd-line: #222836;
    --sd-line-strong: #2E3546;
    --sd-tint: rgba(99, 102, 241, .16);
    --sd-tint-ink: #C7D2FE;
    --sd-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --sd-shadow-lg: 0 16px 40px -10px rgba(0, 0, 0, .6);
    --bs-body-color: var(--sd-ink-2);
}
:root { --bs-body-font-size: .875rem; --bs-border-radius: 8px; --sd-sidebar-w: 252px; --sd-topbar-h: 60px; }

h1, .h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; }
h2, .h2 { font-size: 1.125rem; font-weight: 650; }
h3, .h3 { font-size: 1rem; font-weight: 650; }

/* Buttons: solid, no gradients */
.btn { --bs-btn-font-size: .875rem; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .9rem; --bs-btn-border-radius: 8px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .1rem; }
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; --bs-btn-font-size: .8125rem; }
.btn-primary { background-image: none; box-shadow: var(--sd-shadow-xs); }
.btn-primary:hover, .btn-primary:focus-visible { background-image: none; }
.btn-ghost {
    --bs-btn-color: var(--sd-ink-2); --bs-btn-bg: var(--sd-surface); --bs-btn-border-color: var(--sd-line-strong);
    --bs-btn-hover-color: var(--sd-ink); --bs-btn-hover-bg: var(--sd-hover); --bs-btn-hover-border-color: var(--sd-line-strong);
    --bs-btn-active-bg: var(--sd-raised); --bs-btn-active-border-color: var(--sd-line-strong);
    box-shadow: var(--sd-shadow-xs);
}
.sd-topbar .btn-ghost, .btn-ghost.btn-icon, .auth-tools .btn-ghost { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; box-shadow: none; }
.btn-danger { --bs-btn-bg: #D92D20; --bs-btn-border-color: #D92D20; --bs-btn-hover-bg: #B42318; --bs-btn-hover-border-color: #B42318; }
.btn-outline-primary { --bs-btn-bg: var(--sd-surface); }

/* Forms */
.form-control, .form-select { padding-top: .5rem; padding-bottom: .5rem; border-color: var(--sd-line-strong); border-radius: 8px; box-shadow: var(--sd-shadow-xs); font-size: .875rem; }
.form-control-lg { font-size: 1rem; }
.form-label { font-weight: 500; font-size: .8125rem; color: var(--sd-ink-2); }
.input-group-text { background: var(--sd-surface); color: var(--sd-muted); }

/* Shell: light rail */
.sd-sidebar, .sd-sidebar.offcanvas-lg { background: var(--sd-surface) !important; color: var(--sd-ink-2); border-inline-end: 1px solid var(--sd-line); --bs-offcanvas-bg: var(--sd-surface); --bs-offcanvas-color: var(--sd-ink-2); }
.sd-sidebar .offcanvas-body { scrollbar-color: var(--sd-line-strong) transparent; }
.sd-brand { height: var(--sd-topbar-h); padding-inline: 1.25rem; border-bottom: 1px solid var(--sd-line); }
.sd-brand img { height: 32px; }
.sd-nav { padding: .75rem .75rem 1.5rem; }
.sd-nav-group { color: var(--sd-muted); font-size: .75rem; font-weight: 600; letter-spacing: 0; padding: 1rem .65rem .35rem; }
.sd-nav-link { color: var(--sd-ink-2); font-size: .875rem; font-weight: 500; padding: .5rem .65rem; border-radius: 8px; gap: .65rem; }
.sd-nav-link i { color: var(--sd-muted); font-size: 1.05rem; }
.sd-nav-link:hover { background: var(--sd-hover); color: var(--sd-ink); }
.sd-nav-link:hover i { color: var(--sd-ink-2); }
.sd-nav-link.active { background: var(--sd-tint); color: var(--sd-tint-ink); font-weight: 600; }
.sd-nav-link.active i { color: var(--brand-primary); }
[data-bs-theme="dark"] .sd-nav-link.active i { color: #A5B4FC; }
.sd-nav-link.active::before { display: none; }
.sd-nav-sub { padding-inline-start: 1.85rem; border-inline-start: 1px solid var(--sd-line); margin-inline-start: 1.15rem; padding-inline-start: .5rem; }
.sd-nav-sub .sd-nav-link { color: var(--sd-muted); font-size: .8125rem; padding: .4rem .6rem; }
.sd-nav-sub .sd-nav-link.active { color: var(--sd-tint-ink); background: var(--sd-tint); }
.sd-nav-toggle.active { background: transparent; color: var(--sd-ink); }
.sd-sidebar-foot { color: var(--sd-muted); border-top: 1px solid var(--sd-line); }
.sd-topbar { background: var(--sd-surface); backdrop-filter: none; height: var(--sd-topbar-h); }
.sd-topbar-title { font-size: .9375rem; font-weight: 600; color: var(--sd-ink); }
.sd-content { padding: 1.5rem 1rem 3rem; }
@media (min-width: 992px) { .sd-content { padding: 1.75rem 2rem 4rem; } }
.sd-footer { background: transparent; }

/* Page head: title + actions, no decoration */
.sd-head-icon { display: none; }
.sd-page-head { margin-bottom: 1.25rem; align-items: center; }
.sd-page-head h1 { font-size: 1.5rem; }
.sd-page-head p { font-size: .875rem; margin-top: .2rem; }

/* Cards */
.sd-panel { border-radius: 12px; box-shadow: var(--sd-shadow-xs); border-color: var(--sd-line); }
[data-bs-theme="dark"] .sd-panel { box-shadow: none; }
.sd-panel-head { padding: .85rem 1.15rem; min-height: 56px; }
.sd-panel-head h2, .sd-panel-head h3 { font-size: .9375rem; font-weight: 650; gap: .5rem; }
.sd-panel-body { padding: 1.15rem; }
.sd-chip-icon { width: auto; height: auto; background: none; color: var(--sd-muted); font-size: 1rem; border-radius: 0; }
[data-bs-theme="dark"] .sd-chip-icon { color: var(--sd-muted); }
.sd-count { background: var(--sd-raised); color: var(--sd-ink-2); font-weight: 600; font-size: .75rem; border: 1px solid var(--sd-line); }

/* Filter bar: a single quiet row; header only on phones */
.sd-filter { margin-bottom: 1rem; }
.sd-filter .sd-panel-body { padding: .85rem 1rem; }
.sd-filter .form-label { text-transform: none; letter-spacing: 0; font-size: .75rem; color: var(--sd-muted); font-weight: 500; margin-bottom: .25rem; }
@media (min-width: 768px) { .sd-filter .sd-panel-head { display: none; } }

/* Tables */
.sd-panel .table > thead th { background: var(--sd-hover); text-transform: none; letter-spacing: 0; font-size: .75rem; font-weight: 500; color: var(--sd-muted); padding-top: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--sd-line); }
.table > :not(caption) > * > * { padding: .7rem 1rem; }
.table { --bs-table-hover-bg: var(--sd-hover); }
.table > tbody > tr > td { border-color: var(--sd-line); color: var(--sd-ink-2); }
.sd-name-link { color: var(--sd-ink); font-weight: 600; }
.sd-name-link:hover { color: var(--brand-primary); }

/* Status: dot + tint (the loud element) */
.status-pill { font-size: .75rem; font-weight: 600; padding: .15rem .55rem .15rem .45rem; gap: .35rem; border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); background: color-mix(in srgb, var(--c) 9%, var(--sd-surface)); }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex-shrink: 0; }

/* Row actions: first column, icon-only squares; the label becomes the tooltip */
.sd-col-actions { width: 1%; white-space: nowrap; }
td .sd-actions, th.sd-col-actions { justify-content: flex-start; }
td .sd-actions { flex-wrap: nowrap; gap: .25rem; }
td .sd-act { width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 8px; background: var(--sd-surface); border-color: var(--sd-line-strong); color: var(--sd-muted); box-shadow: var(--sd-shadow-xs); }
td .sd-act i { font-size: .95rem; }
td .sd-act > span { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
td .sd-act:hover, td .sd-act:focus-visible { background: color-mix(in srgb, var(--a) 10%, var(--sd-surface)); color: var(--a); border-color: color-mix(in srgb, var(--a) 35%, transparent); box-shadow: none; }
[data-bs-theme="dark"] td .sd-act:hover { color: var(--a); }
/* Page-level action buttons (detail pages): text + icon, quiet outline */
.sd-act { background: var(--sd-surface); border: 1px solid var(--sd-line-strong); color: var(--sd-ink-2); box-shadow: var(--sd-shadow-xs); font-weight: 600; }
.sd-act i { color: var(--a); }
.sd-act:hover, .sd-act:focus-visible { background: color-mix(in srgb, var(--a) 8%, var(--sd-surface)); color: var(--a); border-color: color-mix(in srgb, var(--a) 35%, transparent); box-shadow: none; }
.sd-act-delete:hover { background: #D92D20; border-color: #D92D20; color: #fff; }
.sd-act-delete:hover i { color: #fff; }
td .sd-act-delete:hover i { color: var(--a); }
.sd-act-lg { height: 38px; }
@media (max-width: 767.98px) {
    .sd-panel .table > tbody > tr > td.sd-col-actions { position: static; }
    .sd-panel .table > tbody > tr { display: flex; flex-direction: column; }
    .sd-panel .table > tbody > tr > td.sd-col-actions { order: 99; }
}

/* Bulk bar */
.sd-bulkbar { background: var(--sd-tint); border-bottom: 1px solid var(--sd-line); color: var(--sd-tint-ink); padding: .55rem 1rem; }

/* Modals + toasts */
.modal-content { border-radius: 14px; border-color: var(--sd-line); box-shadow: var(--sd-shadow-lg); }
.sd-toast { background: var(--sd-ink); color: var(--sd-surface); border-radius: 10px; }
[data-bs-theme="dark"] .sd-toast { background: #F2F4F7; color: #101828; }
[data-bs-theme="dark"] .sd-toast .btn-close { filter: none; }

/* Floating chat */
.sd-fab { background: var(--brand-primary); box-shadow: var(--sd-shadow-lg); height: 48px; padding: 0 1.1rem 0 .95rem; }
.sd-fab:hover { background: var(--brand-primary-hover); box-shadow: var(--sd-shadow-lg); transform: none; }

/* KPI strip */
.sd-kpis { box-shadow: var(--sd-shadow-xs); border-radius: 12px; }
.sd-kpi-value { font-size: 1.5rem; font-weight: 700; }
.sd-kpi-label { font-size: .8125rem; }

/* PM dashboard status cards */
.st-card { border-radius: 12px; box-shadow: var(--sd-shadow-xs); }
.st-card::before { inset-inline: auto; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; height: auto; }
.st-card:hover { transform: none; box-shadow: var(--sd-shadow-lg); }
.st-card-name { font-size: .9375rem; }
.st-card-grid b { font-size: 1.375rem; font-weight: 700; }
.st-card-grid small { text-transform: none; letter-spacing: 0; font-size: .75rem; font-weight: 500; }
.sd-alert-card { background: #1E1B4B; box-shadow: var(--sd-shadow-lg); border-radius: 12px; }

/* Nav underline tabs */
.nav-underline { gap: 1.5rem; }
.nav-underline .nav-link { font-weight: 500; font-size: .875rem; padding-block: .6rem; }
.nav-underline .nav-link.active { font-weight: 600; }

/* Back link above a page title */
.sd-back { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; font-weight: 500; color: var(--sd-muted); text-decoration: none; }
.sd-back:hover { color: var(--sd-ink); }

/* Key/value list inside a card */
.sd-facts { margin: 0; padding: .35rem 1.15rem .6rem; }
.sd-facts > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--sd-line); min-width: 0; }
.sd-facts > div:last-child { border-bottom: 0; }
.sd-facts dt { font-weight: 500; color: var(--sd-muted); font-size: .8125rem; flex-shrink: 0; }
.sd-facts dd { margin: 0; text-align: end; min-width: 0; color: var(--sd-ink-2); }

/* Order issue conversation: one column, staff replies marked, not chat bubbles */
.sd-convo { list-style: none; margin: 0; padding: .5rem 0; }
.sd-convo-item { display: flex; gap: .85rem; padding: 1rem 1.15rem; position: relative; }
.sd-convo-item + .sd-convo-item::before { content: ""; position: absolute; top: 0; inset-inline: 1.15rem; border-top: 1px solid var(--sd-line); }
.sd-convo-item.is-staff { background: color-mix(in srgb, var(--brand-primary) 4%, var(--sd-surface)); }
.sd-convo-main { min-width: 0; flex: 1; }
.sd-convo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; margin-bottom: .35rem; }
.sd-convo-meta strong { color: var(--sd-ink); font-weight: 600; font-size: .875rem; }
.sd-convo-meta time { color: var(--sd-muted); margin-inline-start: auto; }
.sd-role { font-size: .6875rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; background: var(--sd-raised); color: var(--sd-muted); border: 1px solid var(--sd-line); }
.sd-role.is-staff { background: var(--sd-tint); color: var(--sd-tint-ink); border-color: transparent; }
.sd-convo-text { white-space: pre-line; color: var(--sd-ink-2); line-height: 1.6; overflow-wrap: anywhere; }
.sd-file { display: inline-flex; align-items: center; gap: .6rem; margin-top: .6rem; max-width: 320px; padding: .4rem; border: 1px solid var(--sd-line); border-radius: 10px; background: var(--sd-surface); color: var(--sd-ink-2); text-decoration: none; }
.sd-file:hover { border-color: var(--sd-line-strong); color: var(--sd-ink); }
.sd-file img { display: block; max-width: 100%; max-height: 220px; border-radius: 7px; object-fit: cover; }
.sd-file-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--sd-raised); color: var(--sd-muted); font-size: 1.1rem; flex-shrink: 0; }
.sd-convo-closed { display: flex; align-items: center; gap: .5rem; margin: 0 1.15rem; padding: .7rem .9rem; border-radius: 10px; background: var(--sd-raised); color: var(--sd-muted); font-size: .8125rem; }
.sd-composer { padding: 1rem 1.15rem 1.15rem; border-top: 1px solid var(--sd-line); }
.sd-composer .form-control { resize: vertical; min-height: 92px; }
.sd-composer-bar { display: flex; align-items: center; gap: .5rem; margin-top: .65rem; }
.sd-composer-bar [data-file-name] { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

/* Segmented folder switch */
.sd-seg { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; background: var(--sd-raised); border: 1px solid var(--sd-line); border-radius: 10px; }
.sd-seg a { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 7px; font-size: .8125rem; font-weight: 600; color: var(--sd-muted); text-decoration: none; }
.sd-seg a span { font-size: .75rem; color: var(--sd-muted); font-weight: 500; }
.sd-seg a:hover { color: var(--sd-ink); }
.sd-seg a.active { background: var(--sd-surface); color: var(--sd-ink); box-shadow: var(--sd-shadow-xs); }

/* PM inbox feed */
.sd-feed { display: flex; flex-direction: column; gap: 1rem; max-width: 760px; }
.sd-note { background: var(--sd-surface); border: 1px solid var(--sd-line); border-radius: 14px; padding: 1.15rem 1.25rem 1.3rem; box-shadow: var(--sd-shadow-xs); }
.sd-note.is-unread { border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--sd-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 9%, transparent); }
.sd-note-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; padding-inline-end: 2rem; }
.sd-note-logo { width: 36px; height: 36px; border-radius: 10px; background: var(--sd-tint); padding: 5px; flex-shrink: 0; }
.sd-note-from { font-weight: 650; color: var(--sd-ink); font-size: .875rem; }
.sd-note-time { font-size: .75rem; color: var(--sd-muted); }
.sd-note-new { margin-inline-start: auto; font-size: .6875rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; background: var(--brand-primary); color: #fff; }
.sd-update .sd-note-new { margin-inline-start: 0; }
.sd-note-title { font-size: 1.125rem; font-weight: 700; color: var(--sd-ink); margin: 0 0 .6rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.sd-note-figure { margin: 0 0 .85rem; }
.sd-note-figure img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 10px; border: 1px solid var(--sd-line); background: var(--sd-raised); }
.sd-note-body { white-space: pre-line; line-height: 1.65; color: var(--sd-ink-2); overflow-wrap: anywhere; }
.sd-note-remove { position: absolute; top: .85rem; inset-inline-end: .85rem; }
/* The Remove button sits top-right: keep the "New" badge clear of it. */
.has-remove .sd-note-head { padding-inline-end: 6.5rem; }
@media (max-width: 575.98px) {
    .has-remove .sd-note-head { padding-inline-end: 2.75rem; }
    .sd-note-remove .btn span { display: none; }
}
.sd-update { display: flex; gap: .85rem; background: var(--sd-surface); border: 1px solid var(--sd-line); border-radius: 12px; padding: .9rem 1.1rem; box-shadow: var(--sd-shadow-xs); }
.sd-update.is-unread { border-inline-start: 3px solid var(--brand-primary); }
.sd-update-icon { --c: var(--sd-muted); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.sd-update-text { margin-top: .25rem; color: var(--sd-ink-2); white-space: pre-line; }

/* Admin inbox bits */
.sd-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--sd-line); flex-shrink: 0; background: var(--sd-raised); }
.sd-thumb.is-empty { display: grid; place-items: center; color: var(--sd-muted); }
.sd-meter { flex: 1; height: 6px; min-width: 70px; border-radius: 999px; background: var(--sd-raised); overflow: hidden; }
.sd-meter.is-lg { height: 8px; }
.sd-meter span { display: block; height: 100%; background: var(--brand-primary); border-radius: inherit; }
.sd-picker { max-height: 340px; overflow-y: auto; border: 1px solid var(--sd-line); border-radius: 10px; }
.sd-picker-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem; border-bottom: 1px solid var(--sd-line); cursor: pointer; margin: 0; }
.sd-picker-row:last-child { border-bottom: 0; }
.sd-picker-row:hover { background: var(--sd-hover); }
.sd-picker-row[hidden] { display: none; }
.btn-group .btn-ghost.active { background: var(--sd-tint); color: var(--sd-tint-ink); border-color: var(--sd-line-strong); }

/* Activity log: field changes */
.sd-diff { margin-top: .35rem; font-size: .8125rem; }
.sd-diff summary { cursor: pointer; color: var(--brand-primary); font-weight: 500; width: max-content; }
[data-bs-theme="dark"] .sd-diff summary { color: #A5B4FC; }
.sd-diff dl { margin: .4rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; padding: .6rem .75rem; background: var(--sd-raised); border-radius: 8px; }
.sd-diff dt { color: var(--sd-muted); font-weight: 500; }
.sd-diff dd { margin: 0; overflow-wrap: anywhere; }
.sd-diff del { color: #B42318; text-decoration-color: color-mix(in srgb, #B42318 45%, transparent); }
.sd-diff ins { color: #067647; text-decoration: none; font-weight: 600; }
[data-bs-theme="dark"] .sd-diff del { color: #FDA29B; } [data-bs-theme="dark"] .sd-diff ins { color: #75E0A7; }

/* =====================================================================
   Phase 2e — dark sidebar, stat cards, headings, motion
   ===================================================================== */

/* ---------- Title Case headings (opt out with .sd-raw) ---------- */
.sd-nav-link > span, .sd-nav-group, .sd-page-head h1:not(.sd-raw), .sd-panel-head h2:not(.sd-raw),
.sd-panel .table > thead th, .modal-title, .sd-stat-label, .sd-topbar-title, .nav-underline .nav-link, .sd-seg a { text-transform: capitalize; }
[lang="ur"] *, [lang="zh"] * { text-transform: none !important; }

/* ---------- Dark sidebar with glow ---------- */
.sd-sidebar, .sd-sidebar.offcanvas-lg {
    --sb-ink: #CBD5E1; --sb-muted: #7C8AA5; --sb-line: rgba(148, 163, 184, .12);
    background: #0B0F24 !important;
    background-image: radial-gradient(120% 60% at 0% 0%, rgba(124, 58, 237, .22) 0%, rgba(11, 15, 36, 0) 60%), radial-gradient(90% 40% at 100% 100%, rgba(79, 70, 229, .18) 0%, rgba(11, 15, 36, 0) 60%) !important;
    color: var(--sb-ink); border-inline-end: 1px solid var(--sb-line);
    --bs-offcanvas-bg: #0B0F24; --bs-offcanvas-color: var(--sb-ink);
}
.sd-sidebar .offcanvas-body { scrollbar-color: #2A3350 transparent; }
.sd-brand { border-bottom: 1px solid var(--sb-line); position: relative; }
.sd-brand::after { content: ""; position: absolute; inset-inline: 1.25rem; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .7), transparent); opacity: .6; }
.sd-brand img { height: 34px; transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; }
.sd-brand a:hover img { transform: scale(1.04); filter: drop-shadow(0 0 10px rgba(168, 85, 247, .55)); }
.sd-nav-group { color: var(--sb-muted); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 1.15rem .75rem .4rem; }
.sd-nav-link { position: relative; color: var(--sb-ink); font-weight: 500; overflow: hidden; isolation: isolate; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.sd-nav-link i:not(.sd-nav-hint) { color: var(--sb-muted); transition: color .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.sd-nav-link::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, rgba(124, 58, 237, .28), rgba(79, 70, 229, 0)); opacity: 0; transform: translateX(-30%); transition: opacity .25s ease, transform .35s ease; }
[dir="rtl"] .sd-nav-link::after { background: linear-gradient(270deg, rgba(124, 58, 237, .28), rgba(79, 70, 229, 0)); transform: translateX(30%); }
.sd-nav-link:hover { background: rgba(148, 163, 184, .07); color: #fff; transform: translateX(2px); }
[dir="rtl"] .sd-nav-link:hover { transform: translateX(-2px); }
.sd-nav-link:hover i:not(.sd-nav-hint) { color: #C4B5FD; transform: scale(1.12); }
.sd-nav-link:hover::after { opacity: .55; transform: none; }
.sd-nav-link.active { background: rgba(124, 58, 237, .18); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .18), 0 8px 22px -14px rgba(124, 58, 237, .9); }
.sd-nav-link.active::after { opacity: 1; transform: none; }
.sd-nav-link.active i:not(.sd-nav-hint) { color: #C4B5FD; }
[data-bs-theme="dark"] .sd-nav-link.active i { color: #C4B5FD; }
.sd-nav-link.active::before { display: block; content: ""; position: absolute; inset-block: 22%; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #818CF8, #C084FC); box-shadow: 0 0 10px rgba(192, 132, 252, .9); clip-path: none; }
[dir="rtl"] .sd-nav-link.active::before { border-radius: 3px 0 0 3px; clip-path: none; }
.sd-nav-toggle.active { background: transparent; color: #fff; box-shadow: none; }
.sd-nav-toggle.active::after, .sd-nav-toggle.active::before { display: none; }
.sd-nav-toggle::after { display: inline-block; opacity: .6; }
.sd-nav-sub { border-inline-start: 1px solid var(--sb-line); }
.sd-nav-sub .sd-nav-link { color: var(--sb-muted); }
.sd-nav-sub .sd-nav-link:hover { color: #fff; }
.sd-nav-sub .sd-nav-link.active { color: #fff; background: rgba(124, 58, 237, .16); }
.sd-nav-sub .sd-nav-link.active::before { inset-inline-start: 0; }
.sd-nav-hint { font-size: .8rem !important; width: auto !important; color: var(--sb-muted) !important; opacity: .8; margin-inline-start: .15rem; }
.sd-nav-hint:hover { color: #C4B5FD !important; opacity: 1; }
.sd-nav-badge { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: .6875rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #F43F5E, #E11D48); box-shadow: 0 0 0 0 rgba(244, 63, 94, .6); animation: sd-badge-pulse 2.4s ease-out infinite; }
.sd-nav-hint + .sd-nav-badge { margin-inline-start: auto; }
.sd-sidebar-foot { color: var(--sb-muted); border-top: 1px solid var(--sb-line); }
@keyframes sd-badge-pulse { 0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, .55); } 70% { box-shadow: 0 0 0 7px rgba(244, 63, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); } }

/* ---------- Page head: smaller title + tinted icon ---------- */
.sd-head-title { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.sd-head-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; font-size: 1.15rem; color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 11%, var(--sd-surface)); border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, transparent); box-shadow: none; }
[data-bs-theme="dark"] .sd-head-icon { color: #C4B5FD; background: rgba(124, 58, 237, .16); border-color: rgba(167, 139, 250, .2); }
.sd-page-head h1 { font-size: 1.3rem; line-height: 1.25; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.sd-page-head p { font-size: .8125rem; }
.sd-hint { font-size: .85em; color: var(--sd-muted); cursor: help; vertical-align: middle; transition: color .15s; }
.sd-hint:hover, .sd-hint:focus { color: var(--brand-primary); outline: 0; }
.sd-alert-card .sd-hint { color: rgba(255, 255, 255, .7); }
.sd-alert-card .sd-hint:hover { color: #fff; }

/* ---------- Card headers: tinted chip icons again ---------- */
.sd-chip-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: .9rem; color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 10%, transparent); }
[data-bs-theme="dark"] .sd-chip-icon { color: #C4B5FD; background: rgba(124, 58, 237, .16); }
.sd-panel-head h2 { display: flex; align-items: center; gap: .55rem; margin: 0; }

/* ---------- Filter card: header + body + footer on every screen ---------- */
.sd-filter .sd-panel-head { display: flex; }
@media (min-width: 768px) { .sd-filter-toggle { display: none !important; } }
.sd-filter .sd-panel-body { padding: 1rem 1.15rem 1.1rem; }
.sd-filter-foot { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; background: color-mix(in srgb, var(--sd-hover) 70%, transparent); border-radius: 0 0 12px 12px; }
@media (max-width: 767.98px) {
    .sd-filter:not(.is-open) .sd-filter-foot { display: none; }
    .sd-filter-foot .btn { flex: 1; }
}
.sd-quick-ranges { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- Stats cards ---------- */
.sd-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); }
@media (max-width: 575.98px) { .sd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
.sd-stat {
    --c: var(--brand-primary);
    position: relative; display: flex; align-items: center; gap: .8rem; padding: 1rem 1rem .95rem; min-width: 0;
    background: var(--sd-surface); border: 1px solid var(--sd-line); border-top: 3px solid var(--c); border-radius: 12px;
    color: inherit; text-decoration: none; overflow: hidden; isolation: isolate; box-shadow: var(--sd-shadow-xs);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, border-color .25s ease;
}
.sd-stat::after { content: ""; position: absolute; z-index: -1; width: 140px; height: 140px; inset-inline-end: -50px; top: -60px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); transition: transform .4s ease; }
.sd-stat:hover { color: inherit; transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 35%, var(--sd-line)); border-top-color: var(--c); box-shadow: 0 18px 32px -18px color-mix(in srgb, var(--c) 75%, transparent); }
.sd-stat:hover::after { transform: scale(1.35); }
.sd-stat-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; font-size: 1.25rem; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.sd-stat:hover .sd-stat-icon { transform: rotate(-8deg) scale(1.08); }
.sd-stat-text { display: flex; flex-direction: column; min-width: 0; }
.sd-stat-value { font-size: 1.4rem; font-weight: 750; line-height: 1.15; color: var(--sd-ink); letter-spacing: -.02em; }
.sd-stat-label { font-size: .78rem; color: var(--sd-muted); font-weight: 500; line-height: 1.3; }
@media (max-width: 575.98px) { .sd-stat { flex-direction: column; align-items: flex-start; } }
.sd-stat-hint { font-size: .72rem; color: var(--sd-muted); opacity: .85; }
.sd-stat-go { position: absolute; top: .7rem; inset-inline-end: .75rem; color: var(--c); opacity: 0; transform: translate(-4px, 4px); transition: opacity .2s, transform .25s; }
.sd-stat:hover .sd-stat-go { opacity: 1; transform: none; }
.sd-stat.is-alert .sd-stat-value { color: var(--c); }
.sd-stat.is-alert .sd-stat-icon { animation: sd-ring 2.6s ease-in-out infinite; }
.tone-indigo { --c: #4F46E5; } .tone-violet { --c: #7C3AED; } .tone-teal { --c: #0D9488; } .tone-sky { --c: #0284C7; }
.tone-green { --c: #16A34A; } .tone-amber { --c: #D97706; } .tone-rose { --c: #E11D48; } .tone-slate { --c: #64748B; }
[data-bs-theme="dark"] .tone-indigo { --c: #818CF8; } [data-bs-theme="dark"] .tone-violet { --c: #A78BFA; } [data-bs-theme="dark"] .tone-teal { --c: #2DD4BF; }
[data-bs-theme="dark"] .tone-sky { --c: #38BDF8; } [data-bs-theme="dark"] .tone-green { --c: #4ADE80; } [data-bs-theme="dark"] .tone-amber { --c: #FBBF24; }
[data-bs-theme="dark"] .tone-rose { --c: #FB7185; } [data-bs-theme="dark"] .tone-slate { --c: #94A3B8; }
@keyframes sd-ring { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 16%, transparent); } }

/* PM status cards: top border + lift */
.st-card { border-radius: 12px; }
.st-card::before { inset-inline: 0; inset-inline-start: 0; top: 0; bottom: auto; width: auto; height: 3px; }
.st-card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -18px color-mix(in srgb, var(--c) 75%, transparent); border-color: color-mix(in srgb, var(--c) 35%, var(--sd-line)); }
.st-card-name i { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.st-card:hover .st-card-name i { transform: rotate(-8deg) scale(1.1); }
.sd-alert-card { border-top: 3px solid #C084FC; background: linear-gradient(135deg, #1E1B4B, #3B1D7A 65%, #6D28D9); transition: transform .25s ease, box-shadow .25s ease; }
.sd-alert-card:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -18px rgba(109, 40, 217, .9); }
.sd-alert-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .14); }

/* ---------- Live PayPal check on "Add new order" ---------- */
.sd-check-spinner { position: absolute; top: 50%; inset-inline-end: .75rem; margin-top: -.5rem; color: var(--brand-primary); }
.sd-check-result:empty { display: none; }
.sd-check-result { display: flex; align-items: flex-start; gap: .5rem; margin-top: .5rem; padding: .55rem .75rem; border-radius: 8px; font-size: .8125rem; font-weight: 500; animation: sd-fade-up .25s ease both; }
.sd-check-result.is-danger { background: color-mix(in srgb, #E11D48 9%, var(--sd-surface)); color: #BE123C; border: 1px solid color-mix(in srgb, #E11D48 28%, transparent); }
.sd-check-result.is-success { background: color-mix(in srgb, #16A34A 8%, var(--sd-surface)); color: #15803D; border: 1px solid color-mix(in srgb, #16A34A 25%, transparent); }
[data-bs-theme="dark"] .sd-check-result.is-danger { color: #FDA4AF; } [data-bs-theme="dark"] .sd-check-result.is-success { color: #86EFAC; }
.sd-check-result.is-danger i { animation: sd-shake .45s ease both; }
form.is-locked [data-lockable], form.is-locked [data-lockable-group] { opacity: .5; filter: grayscale(.4); cursor: not-allowed; transition: opacity .25s, filter .25s; }
form.is-locked .sd-panel:last-of-type { position: relative; }

/* ---------- Order issue composer: email toggle ---------- */
.sd-notify-check { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem .25rem 2.4rem; border-radius: 8px; border: 1px dashed var(--sd-line-strong); }
.sd-notify-check:has(:checked) { border-style: solid; border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent); background: var(--sd-tint); }

/* ---------- Floating chat: icon only ---------- */
.sd-fab { width: 54px; height: 54px; padding: 0; border-radius: 50%; justify-content: center; background: linear-gradient(135deg, #4F46E5, #7C3AED 60%, #A855F7); box-shadow: 0 14px 30px -10px rgba(124, 58, 237, .75); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s; }
.sd-fab:hover { transform: translateY(-3px) scale(1.06); background: linear-gradient(135deg, #4338CA, #6D28D9 60%, #9333EA); box-shadow: 0 18px 36px -10px rgba(124, 58, 237, .9), 0 0 0 6px rgba(168, 85, 247, .18); }
.sd-fab i { font-size: 1.4rem; margin: 0; }
.sd-fab-label { display: none !important; }

/* ---------- Developer photo: centred with a soft dark overlay ---------- */
.dev-photo-wrap { position: relative; display: block; width: max-content; margin: 0 auto; border-radius: 28px; }
.dev-photo-wrap::after { content: ""; position: absolute; inset: 0; border-radius: 28px; pointer-events: none; background: linear-gradient(180deg, rgba(11, 15, 36, .08) 0%, rgba(11, 15, 36, .18) 55%, rgba(11, 15, 36, .42) 100%); }
.dev-photo { display: block; margin: 0 auto; object-position: center 20%; }

/* ---------- Sign-in page motion ---------- */
.auth-brand .auth-mark { animation: sd-float 7s ease-in-out infinite, sd-glow 5s ease-in-out infinite; }
.auth-brand .logo { animation: sd-fade-down .6s .1s cubic-bezier(.2, .8, .2, 1) both; }
.auth-brand-copy { animation: sd-fade-up .7s .25s cubic-bezier(.2, .8, .2, 1) both; }
.auth-form-mark { display: block; width: 52px; height: 52px; margin-bottom: 1.1rem; animation: sd-pop .6s .1s cubic-bezier(.3, 1.5, .5, 1) both, sd-float-sm 5s 1s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(124, 58, 237, .35)); }
.auth-form > * { animation: sd-fade-up .55s cubic-bezier(.2, .8, .2, 1) both; }
.auth-form > :nth-child(2) { animation-delay: .08s; } .auth-form > :nth-child(3) { animation-delay: .16s; } .auth-form > :nth-child(4) { animation-delay: .24s; } .auth-form > :nth-child(5) { animation-delay: .32s; }
.auth-form form > * { animation: sd-fade-up .5s cubic-bezier(.2, .8, .2, 1) both; }
.auth-form form > :nth-child(2) { animation-delay: .3s; } .auth-form form > :nth-child(3) { animation-delay: .38s; } .auth-form form > :nth-child(4) { animation-delay: .46s; } .auth-form form > :nth-child(5) { animation-delay: .54s; } .auth-form form > :nth-child(6) { animation-delay: .62s; }
.auth-form .btn-primary { position: relative; overflow: hidden; }
.auth-form .btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); animation: sd-shine 3.5s 1.2s ease-in-out infinite; }

/* ---------- Error pages ---------- */
.sd-error-body { margin: 0; min-height: 100vh; background: #0B0F24; color: #E2E8F0; overflow-x: hidden; }
.sd-error { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 2rem 1rem; text-align: center; isolation: isolate; }
.sd-error-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 40% at 20% 15%, rgba(124, 58, 237, .35), transparent 70%), radial-gradient(35% 35% at 85% 85%, rgba(79, 70, 229, .3), transparent 70%); animation: sd-drift 14s ease-in-out infinite alternate; }
.sd-error-logo img { height: 40px; width: auto; animation: sd-fade-down .6s ease both; }
.sd-error-card { position: relative; width: 100%; max-width: 480px; padding: 2.25rem 1.75rem 2rem; border-radius: 20px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); animation: sd-fade-up .6s .1s cubic-bezier(.2, .8, .2, 1) both; overflow: hidden; }
.sd-error-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, #4F46E5, #7C3AED, #A855F7); }
.sd-error-icon { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; font-size: 1.6rem; color: #C4B5FD; background: rgba(124, 58, 237, .18); border: 1px solid rgba(167, 139, 250, .25); animation: sd-pop .6s .25s cubic-bezier(.3, 1.5, .5, 1) both, sd-float-sm 5s 1s ease-in-out infinite; }
.sd-error-code { margin: .75rem 0 0; font-size: clamp(4rem, 3rem + 5vw, 6.5rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; background: linear-gradient(135deg, #A5B4FC, #C084FC 50%, #F0ABFC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sd-error-kicker { margin: .25rem 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #94A3B8; }
.sd-error h1 { color: #fff; font-size: 1.4rem; margin-bottom: .5rem; }
.sd-error-msg { color: #94A3B8; margin: 0 auto 1.5rem; max-width: 40ch; }
.sd-error .btn-outline-light { --bs-btn-border-color: rgba(255, 255, 255, .2); --bs-btn-hover-bg: rgba(255, 255, 255, .08); --bs-btn-hover-border-color: rgba(255, 255, 255, .3); --bs-btn-hover-color: #fff; }
.sd-error-foot { margin: 0; font-size: .8rem; color: #64748B; }
.sd-error-foot a { color: #C4B5FD; }

/* ---------- Module motion ---------- */
@keyframes sd-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sd-fade-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes sd-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes sd-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes sd-float-sm { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sd-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(168, 85, 247, 0)); } 50% { filter: drop-shadow(0 0 28px rgba(168, 85, 247, .55)); } }
@keyframes sd-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
@keyframes sd-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@keyframes sd-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(3%, -2%, 0) scale(1.05); } }
@keyframes sd-row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sd-content > * { animation: sd-fade-up .45s cubic-bezier(.2, .8, .2, 1) both; }
.sd-content > :nth-child(2) { animation-delay: .05s; } .sd-content > :nth-child(3) { animation-delay: .1s; }
.sd-content > :nth-child(4) { animation-delay: .15s; } .sd-content > :nth-child(5) { animation-delay: .2s; } .sd-content > :nth-child(n+6) { animation-delay: .25s; }
.sd-stats > *, .row > [class*="col"] > .st-card, .row > [class*="col"] > .sd-alert-card { animation: sd-fade-up .5s cubic-bezier(.2, .8, .2, 1) both; }
.sd-stats > :nth-child(2), .row > :nth-child(2) > .st-card { animation-delay: .06s; } .sd-stats > :nth-child(3), .row > :nth-child(3) > .st-card { animation-delay: .12s; }
.sd-stats > :nth-child(4), .row > :nth-child(4) > .st-card { animation-delay: .18s; } .sd-stats > :nth-child(5), .row > :nth-child(5) > .st-card { animation-delay: .24s; }
.sd-stats > :nth-child(n+6), .row > :nth-child(n+6) > .st-card { animation-delay: .3s; }
.sd-panel .table > tbody > tr { animation: sd-row-in .35s ease both; }
.sd-panel .table > tbody > tr:nth-child(2) { animation-delay: .03s; } .sd-panel .table > tbody > tr:nth-child(3) { animation-delay: .06s; } .sd-panel .table > tbody > tr:nth-child(4) { animation-delay: .09s; }
.sd-panel .table > tbody > tr:nth-child(5) { animation-delay: .12s; } .sd-panel .table > tbody > tr:nth-child(n+6) { animation-delay: .15s; }
.sd-nav > li { animation: sd-fade-up .4s cubic-bezier(.2, .8, .2, 1) both; }
.sd-nav > li:nth-child(2) { animation-delay: .03s; } .sd-nav > li:nth-child(3) { animation-delay: .06s; } .sd-nav > li:nth-child(4) { animation-delay: .09s; }
.sd-nav > li:nth-child(5) { animation-delay: .12s; } .sd-nav > li:nth-child(6) { animation-delay: .15s; } .sd-nav > li:nth-child(7) { animation-delay: .18s; } .sd-nav > li:nth-child(n+8) { animation-delay: .21s; }
.sd-panel { transition: box-shadow .25s ease, border-color .25s ease; }
.sd-panel:hover { box-shadow: 0 10px 28px -20px rgba(11, 15, 36, .35); }
.sd-head-icon { animation: sd-pop .5s .05s cubic-bezier(.3, 1.5, .5, 1) both; }
.btn { transition: transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.btn:active { transform: scale(.97); }
td .sd-act { transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease; }
td .sd-act:hover { transform: translateY(-1px); }
.modal.fade .modal-dialog { transform: translateY(14px) scale(.98); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.modal.show .modal-dialog { transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}

/* =====================================================================
   Phase 2f — markets, tax, cleanup, activity, presence tiers, pager, watermark
   ===================================================================== */

/* ---------- Brand star watermark (bottom-right, behind everything) ---------- */
.sd-watermark {
    position: fixed; z-index: -1; pointer-events: none;
    inset-inline-end: -70px; bottom: -80px; width: min(46vw, 460px); aspect-ratio: 1;
    background: linear-gradient(135deg, #4F46E5, #7C3AED 55%, #A855F7);
    -webkit-mask: url("../brand/logo-icon.svg") center / contain no-repeat; mask: url("../brand/logo-icon.svg") center / contain no-repeat;
    opacity: .06; transform: rotate(-12deg);
    animation: sd-watermark-in 1.2s .2s ease both;
}
[dir="rtl"] .sd-watermark { transform: rotate(12deg) scaleX(-1); }
[data-bs-theme="dark"] .sd-watermark { background: #FFFFFF; opacity: .045; }
@keyframes sd-watermark-in { from { opacity: 0; } }
@media (max-width: 575.98px) { .sd-watermark { width: 260px; bottom: -50px; inset-inline-end: -50px; } }
@media print { .sd-watermark { display: none; } }

/* ---------- Pagination footer ---------- */
.sd-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1.15rem; border-top: 1px solid var(--sd-line); }
.sd-pager-info { font-size: .8125rem; color: var(--sd-muted); }
.sd-pager-info strong { color: var(--sd-ink); font-weight: 650; }
.sd-pagination .pagination { --bs-pagination-padding-x: .6rem; --bs-pagination-padding-y: .3rem; --bs-pagination-font-size: .8125rem; --bs-pagination-border-radius: 8px;
    --bs-pagination-color: var(--sd-ink-2); --bs-pagination-bg: var(--sd-surface); --bs-pagination-border-color: var(--sd-line-strong);
    --bs-pagination-hover-color: var(--brand-primary); --bs-pagination-hover-bg: var(--sd-tint); --bs-pagination-hover-border-color: var(--sd-line-strong);
    --bs-pagination-active-bg: var(--brand-primary); --bs-pagination-active-border-color: var(--brand-primary);
    --bs-pagination-disabled-bg: var(--sd-surface); --bs-pagination-disabled-color: var(--sd-line-strong); --bs-pagination-disabled-border-color: var(--sd-line);
    --bs-pagination-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent);
    gap: .3rem; }
.sd-pagination .page-link { border-radius: 8px !important; min-width: 32px; height: 32px; display: grid; place-items: center; font-weight: 600; transition: background-color .15s, color .15s, transform .15s; }
.sd-pagination .page-item:not(.disabled):not(.active) .page-link:hover { transform: translateY(-1px); }
.sd-pagination .page-item.active .page-link { box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--brand-primary) 80%, transparent); }
[dir="rtl"] .sd-flip { display: inline-block; transform: scaleX(-1); }
@media (max-width: 575.98px) { .sd-pager { justify-content: center; } .sd-pager-info { width: 100%; text-align: center; } }

/* ---------- Choice cards (radio as card) ---------- */
.sd-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .65rem; }
.sd-choice-item { position: relative; margin: 0; cursor: pointer; }
.sd-choice-item input { position: absolute; opacity: 0; pointer-events: none; }
.sd-choice-box { display: flex; align-items: flex-start; gap: .75rem; height: 100%; padding: .85rem 1rem; border: 1px solid var(--sd-line-strong); border-radius: 10px; background: var(--sd-surface); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.sd-choice-box > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: var(--sd-raised); color: var(--sd-muted); font-size: 1rem; transition: background-color .15s, color .15s; }
.sd-choice-box strong { display: block; font-size: .875rem; color: var(--sd-ink); }
.sd-choice-box small { display: block; color: var(--sd-muted); font-size: .75rem; line-height: 1.4; }
.sd-choice-item:hover .sd-choice-box { border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--sd-line-strong)); }
.sd-choice-item input:checked + .sd-choice-box { border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 5%, var(--sd-surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent); }
.sd-choice-item input:checked + .sd-choice-box > i { background: var(--brand-primary); color: #fff; }
.sd-choice-item input:focus-visible + .sd-choice-box { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* ---------- Markets ---------- */
.sd-commission { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 999px; font-weight: 700; font-size: .8125rem; font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, #0D9488 11%, transparent); color: #0F766E; }
.sd-commission.is-zero { background: var(--sd-raised); color: var(--sd-muted); }
[data-bs-theme="dark"] .sd-commission:not(.is-zero) { color: #5EEAD4; }

/* ---------- Callouts + meters ---------- */
.sd-callout { align-items: flex-start; }
.sd-callout > i { font-size: 1.15rem; color: var(--st-onhold); margin-top: .1rem; }
.sd-callout.is-danger { border-color: color-mix(in srgb, #DC2626 35%, transparent); background: color-mix(in srgb, #DC2626 7%, var(--sd-surface)); }
.sd-callout.is-danger > i { color: #DC2626; }
.sd-meter.is-danger span { background: linear-gradient(90deg, #F59E0B, #E11D48); }

/* ---------- Tax bill hero ---------- */
.sd-bill-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--sd-line); border-bottom: 1px solid var(--sd-line); }
.sd-bill-hero > div { background: var(--sd-surface); padding: 1rem 1.15rem; }
.sd-bill-hero span { display: block; font-size: .75rem; color: var(--sd-muted); font-weight: 500; }
.sd-bill-hero strong { display: block; font-size: 1.2rem; color: var(--sd-ink); font-weight: 750; letter-spacing: -.01em; }
.sd-bill-hero > div:first-child strong { color: var(--brand-primary); }
[data-bs-theme="dark"] .sd-bill-hero > div:first-child strong { color: #A5B4FC; }
@media (max-width: 575.98px) { .sd-bill-hero { grid-template-columns: 1fr; } }

/* ---------- Activity timeline ---------- */
.sd-activity { list-style: none; margin: 0; padding: .5rem 1.15rem .75rem; position: relative; }
.sd-activity-item { position: relative; display: flex; gap: .85rem; padding: .7rem 0; }
.sd-activity-item:not(:last-child)::before { content: ""; position: absolute; top: 2.4rem; bottom: -.3rem; inset-inline-start: 15px; width: 2px; background: var(--sd-line); }
.sd-activity-dot { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; font-size: .85rem;
    color: var(--c, var(--sd-muted)); background: color-mix(in srgb, var(--c, var(--sd-muted)) 12%, var(--sd-surface)); border: 1px solid color-mix(in srgb, var(--c, var(--sd-muted)) 25%, transparent); }
.sd-activity-body { min-width: 0; flex: 1; padding-top: .2rem; }
.sd-activity-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: .8125rem; }
.sd-activity-meta strong { color: var(--sd-ink); font-weight: 600; }
.sd-activity-meta time { color: var(--sd-muted); margin-inline-start: auto; white-space: nowrap; font-size: .75rem; }
.sd-activity-text { margin-top: .25rem; color: var(--sd-ink-2); font-size: .875rem; overflow-wrap: anywhere; }
.sd-activity .sd-empty { padding: 1.5rem 0; }
.sd-panel-tabs { margin-bottom: -.86rem; gap: 1.25rem; }
.sd-panel-tabs .nav-link { padding-bottom: .8rem; display: inline-flex; align-items: center; gap: .3rem; }

/* ---------- Presence tiers ---------- */
.tier-gold { --tier: #D4A017; --tier-2: #F7D774; }
.tier-silver { --tier: #8A94A6; --tier-2: #D7DDE6; }
.tier-bronze { --tier: #B4693A; --tier-2: #E7B48C; }
.tier-rising { --tier: #7C3AED; --tier-2: #C4B5FD; }
.sd-tier { display: inline-flex; align-items: center; gap: .3rem; color: var(--tier); font-size: .95em; line-height: 1; cursor: help; vertical-align: middle; }
.sd-tier i { filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--tier) 45%, transparent)); }
.sd-tier.tier-gold i { animation: sd-tier-shine 3.5s ease-in-out infinite; }
.sd-tier.has-label { padding: .2rem .55rem .2rem .45rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .01em;
    background: color-mix(in srgb, var(--tier) 13%, var(--sd-surface)); border: 1px solid color-mix(in srgb, var(--tier) 35%, transparent); }
@keyframes sd-tier-shine { 0%, 100% { filter: drop-shadow(0 0 0 transparent); transform: none; } 50% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tier) 80%, transparent)); transform: scale(1.12); } }

.sd-presence-medal { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; font-size: 1.5rem; color: #fff;
    background: radial-gradient(circle at 30% 25%, var(--tier-2), var(--tier) 70%); box-shadow: 0 8px 20px -8px var(--tier), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.sd-presence-hero { display: flex; align-items: center; gap: 1rem; }
.sd-presence-tier { font-size: 1.35rem; font-weight: 800; color: var(--tier); letter-spacing: -.01em; }
.sd-presence .sd-meter span, .sd-presence-banner .sd-meter span { background: linear-gradient(90deg, var(--tier), var(--tier-2)); }
.sd-presence { border-top: 3px solid var(--tier); }
.sd-tier-ladder { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.sd-tier-ladder li { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem .25rem; border-radius: 10px; border: 1px solid var(--sd-line); text-align: center; opacity: .65; transition: opacity .2s, transform .2s; }
.sd-tier-ladder li i { color: var(--tier); font-size: 1.1rem; }
.sd-tier-ladder li span { font-size: .75rem; font-weight: 700; color: var(--sd-ink); }
.sd-tier-ladder li small { font-size: .6875rem; color: var(--sd-muted); }
.sd-tier-ladder li.is-current { opacity: 1; border-color: var(--tier); background: color-mix(in srgb, var(--tier) 9%, var(--sd-surface)); transform: translateY(-2px); }

.sd-presence-banner { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding: .85rem 1.15rem; border-radius: 14px; text-decoration: none; color: inherit;
    background: linear-gradient(100deg, color-mix(in srgb, var(--tier) 14%, var(--sd-surface)), var(--sd-surface) 70%); border: 1px solid color-mix(in srgb, var(--tier) 30%, var(--sd-line));
    box-shadow: var(--sd-shadow-xs); transition: transform .25s ease, box-shadow .25s ease; }
.sd-presence-banner:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 14px 28px -18px var(--tier); }
.sd-presence-banner .sd-presence-medal { width: 44px; height: 44px; font-size: 1.25rem; }
.sd-presence-banner.tier-gold .sd-presence-medal { animation: sd-float-sm 4s ease-in-out infinite; }
.sd-presence-copy { display: flex; flex-direction: column; min-width: 0; color: var(--sd-muted); }
.sd-presence-title { font-weight: 750; color: var(--sd-ink); font-size: 1rem; }
.sd-presence-progress { flex: 1; max-width: 260px; margin-inline-start: auto; }
.sd-presence-ladder { display: flex; gap: .45rem; font-size: 1.05rem; }
.sd-presence-ladder i { color: var(--tier); opacity: .35; }
.sd-presence-ladder i.is-current { opacity: 1; transform: scale(1.2); }
@media (max-width: 767.98px) { .sd-presence-banner { flex-wrap: wrap; } .sd-presence-progress { order: 3; flex-basis: 100%; max-width: none; } .sd-presence-ladder { margin-inline-start: auto; } }
.sd-seg .sd-nav-badge { min-width: 18px; height: 18px; font-size: .65rem; padding: 0 5px; animation: none; color: #fff; }
.sd-switch-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--sd-line-strong); border-radius: 10px; cursor: pointer; background: var(--sd-surface); }
.sd-switch-card:has(:checked) { border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent); background: color-mix(in srgb, var(--brand-primary) 5%, var(--sd-surface)); }
.sd-switch-card strong { display: block; color: var(--sd-ink); font-size: .9rem; }
.sd-switch-card small { display: block; color: var(--sd-muted); font-size: .78rem; }
.sd-switch-card .form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.sd-nav-badge[hidden], .sd-fab-badge[hidden], .dot-badge[hidden] { display: none !important; }

/* Stats grid with fixed columns: .is-3 → 3 per row from md (admin dashboard), .is-4 → 4 per row from lg */
@media (min-width: 576px) { .sd-stats.is-3, .sd-stats.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .sd-stats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .sd-stats.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sd-stats.is-3 .sd-stat { padding: 1.2rem 1.25rem 1.1rem; }
.sd-stats.is-3 .sd-stat-icon { width: 48px; height: 48px; font-size: 1.35rem; }
.sd-stats.is-3 .sd-stat-value { font-size: 1.6rem; }
.sd-stats.is-3 .sd-stat-label { font-size: .85rem; }

/* ---------- PM dashboard hero ---------- */
.sd-hero { position: relative; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: stretch; margin-bottom: 1.5rem; padding: 1.75rem; border-radius: 18px; color: #fff; overflow: hidden; isolation: isolate;
    background: radial-gradient(120% 140% at 0% 0%, #4338CA 0%, #312E81 35%, #1E1B4B 70%, #0B0F24 100%); box-shadow: 0 24px 48px -28px rgba(49, 46, 129, .9); }
.sd-hero::before { content: ""; position: absolute; z-index: -1; inset-inline-end: -60px; top: -80px; width: 340px; aspect-ratio: 1; opacity: .14;
    background: #fff; -webkit-mask: url("../brand/logo-icon.svg") center / contain no-repeat; mask: url("../brand/logo-icon.svg") center / contain no-repeat; transform: rotate(14deg); animation: sd-float 9s ease-in-out infinite; }
.sd-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(40% 60% at 85% 100%, rgba(168, 85, 247, .35), transparent 70%); }
.sd-hero-main { flex: 1 1 380px; min-width: 0; }
.sd-hero-date { margin: 0 0 .35rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #A5B4FC; }
.sd-hero h1 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .35rem; }
.sd-hero-sub { color: #C7D2FE; margin: 0 0 1.25rem; max-width: 52ch; }
.sd-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.sd-hero .btn-light { --bs-btn-color: #312E81; font-weight: 700; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .6); }
.sd-btn-glass { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
.sd-btn-glass:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); }
.sd-wave { display: inline-block; transform-origin: 70% 70%; animation: sd-wave 2.4s ease-in-out 1s 2; }
@keyframes sd-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
.sd-hero-tier { flex: 0 1 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: 1.1rem 1.25rem; border-radius: 14px; text-align: center; text-decoration: none; color: #fff;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); transition: transform .25s ease, background-color .25s ease; }
.sd-hero-tier:hover { color: #fff; transform: translateY(-3px); background: rgba(255, 255, 255, .13); }
.sd-hero-tier .sd-presence-medal { width: 58px; height: 58px; font-size: 1.6rem; margin-bottom: .25rem; animation: sd-float-sm 4s ease-in-out infinite; }
.sd-hero-tier-name { font-weight: 800; font-size: 1.05rem; color: var(--tier-2); }
.sd-hero-tier-days, .sd-hero-tier-next { font-size: .78rem; color: #C7D2FE; }
.sd-hero-tier .sd-meter { width: 100%; flex: none; height: 7px; background: rgba(255, 255, 255, .15); margin-top: .35rem; }
.sd-hero-tier .sd-meter span { background: linear-gradient(90deg, var(--tier), var(--tier-2)); }
@media (max-width: 767.98px) { .sd-hero { padding: 1.25rem; } .sd-hero-tier { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; text-align: start; justify-content: flex-start; } .sd-hero-tier .sd-presence-medal { width: 44px; height: 44px; font-size: 1.2rem; margin: 0; } }
.sd-fee-alert { animation: sd-fade-up .5s ease both; }

.sd-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .85rem; }
.sd-section-title h2 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .5rem; color: var(--sd-ink); }
.sd-section-title h2 i { color: var(--brand-primary); }
.sd-section-title span { font-size: .78rem; color: var(--sd-muted); }

/* Recent orders list */
.sd-recent { list-style: none; margin: 0; padding: .35rem 0; }
.sd-recent-row { display: flex; align-items: center; gap: .85rem; padding: .7rem 1.15rem; text-decoration: none; color: inherit; transition: background-color .15s; }
.sd-recent-row:hover { background: var(--sd-hover); color: inherit; }
.sd-recent li + li .sd-recent-row { border-top: 1px solid var(--sd-line); }
.sd-recent-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.sd-recent-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sd-recent-main strong { color: var(--sd-ink); font-weight: 650; font-size: .875rem; }
.sd-recent-main small { color: var(--sd-muted); font-size: .75rem; }
.sd-recent time { font-size: .75rem; color: var(--sd-muted); min-width: 90px; text-align: end; }

/* =====================================================================
   Phase 2h — date picker, searchable selects, collapsed sidebar, misc
   ===================================================================== */

/* ---------- flatpickr ---------- */
.sd-date { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748B'%3e%3cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right .75rem center; background-size: 14px; padding-inline-end: 2.25rem; cursor: pointer; }
[dir="rtl"] .sd-date { background-position: left .75rem center; }
.sd-date[readonly] { background-color: var(--sd-surface); }
.flatpickr-calendar { font-family: var(--sd-font); border-radius: 14px; border: 1px solid var(--sd-line); box-shadow: var(--sd-shadow-lg); background: var(--sd-surface); width: 308px; padding: 6px; }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { display: none; }
.flatpickr-months { padding-bottom: 4px; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--sd-ink); fill: var(--sd-ink); font-weight: 700; }
.flatpickr-current-month { font-size: 1rem; }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--sd-surface); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--sd-muted); fill: var(--sd-muted); border-radius: 8px; top: 6px; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--brand-primary); }
span.flatpickr-weekday { color: var(--sd-muted); font-weight: 600; font-size: .75rem; }
.flatpickr-day { color: var(--sd-ink-2); border-radius: 9px; font-weight: 500; }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--sd-tint); border-color: transparent; color: var(--sd-tint-ink); }
.flatpickr-day.today { border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; box-shadow: 0 6px 14px -6px var(--brand-primary); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--sd-line-strong); }
.flatpickr-monthSelect-month { border-radius: 9px; color: var(--sd-ink-2); }
.flatpickr-monthSelect-month:hover { background: var(--sd-tint); }
.flatpickr-monthSelect-month.selected { background: var(--brand-primary) !important; color: #fff !important; }
.flatpickr-monthSelect-theme-light, .flatpickr-monthSelect-theme-dark { background: var(--sd-surface); }

/* ---------- Tom Select (search inside the dropdown) ---------- */
.ts-wrapper.form-select { position: relative; min-height: calc(1.5em + 1rem + 2px); border: 1px solid var(--sd-line-strong); border-radius: 8px; box-shadow: var(--sd-shadow-xs) !important; cursor: pointer;
    background-color: var(--sd-surface); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right .75rem center; background-size: 14px 10px; transition: border-color .15s, box-shadow .15s; }
[dir="rtl"] .ts-wrapper.form-select { background-position: left .75rem center; }
.ts-wrapper.form-select .ts-control { padding: .5rem 2.25rem .5rem .75rem; min-height: 100%; font-size: .875rem; color: var(--bs-body-color); cursor: pointer; display: flex; align-items: center; }
[dir="rtl"] .ts-wrapper.form-select .ts-control { padding: .5rem .75rem .5rem 2.25rem; }
.ts-wrapper.single .ts-control::after { display: none !important; }
.ts-wrapper.form-select.focus { border-color: color-mix(in srgb, var(--brand-primary) 60%, var(--sd-line-strong)); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-primary) 18%, transparent) !important; }
.ts-wrapper.form-select.is-invalid { border-color: var(--bs-form-invalid-border-color); }
.ts-wrapper.form-select.disabled { opacity: .6; background-color: var(--sd-raised); cursor: not-allowed; }
.ts-wrapper .ts-control > input { display: none !important; }   /* typing happens in the dropdown's own search box */
.ts-wrapper .ts-control .item { color: var(--sd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-dropdown { border: 1px solid var(--sd-line); border-radius: 12px; box-shadow: var(--sd-shadow-lg); background: var(--sd-surface); color: var(--sd-ink-2); margin-top: 6px; overflow: hidden; z-index: 1065; font-size: .875rem; animation: sd-fade-up .15s ease both; }
.ts-dropdown .dropdown-input-wrap { padding: .5rem; border-bottom: 1px solid var(--sd-line); position: relative; }
.ts-dropdown .dropdown-input { width: 100%; padding: .45rem .75rem .45rem 2rem; border: 1px solid var(--sd-line-strong); border-radius: 8px; background: var(--bs-body-bg) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394A3B8'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3e%3c/svg%3e") no-repeat .65rem center / 13px; color: var(--sd-ink); font-size: .85rem; outline: 0; }
[dir="rtl"] .ts-dropdown .dropdown-input { padding: .45rem 2rem .45rem .75rem; background-position: right .65rem center; }
.ts-dropdown .dropdown-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 15%, transparent); }
.ts-dropdown .ts-dropdown-content { max-height: 260px; padding: .3rem; }
.ts-dropdown .option { padding: .45rem .65rem; border-radius: 7px; color: var(--sd-ink-2); }
.ts-dropdown .option.active { background: var(--sd-tint); color: var(--sd-tint-ink); }
.ts-dropdown .option.selected { font-weight: 650; color: var(--brand-primary); }
[data-bs-theme="dark"] .ts-dropdown .option.selected { color: #A5B4FC; }
.ts-dropdown .no-results { padding: .75rem; color: var(--sd-muted); text-align: center; }
.ts-dropdown .highlight { background: color-mix(in srgb, #F59E0B 30%, transparent); border-radius: 3px; }

/* ---------- Image fallback ---------- */
img.is-placeholder { object-fit: cover; background: var(--sd-tint); }
.avatar.is-fallback img { display: none; }

/* ---------- Sidebar: caret on dropdown parents ---------- */
.sd-nav-toggle::after { display: none !important; }
.sd-nav-caret { margin-inline-start: auto; font-size: .75rem !important; width: auto !important; transition: transform .25s ease; opacity: .7; }
.sd-nav-toggle[aria-expanded="true"] .sd-nav-caret { transform: rotate(180deg); }

/* ---------- Sidebar collapse (desktop) ---------- */
.sd-sidebar-toggle { display: none; }
@media (min-width: 992px) {
    .sd-sidebar-toggle { display: inline-flex; margin-inline-end: .25rem; }
    .sd-sidebar { transition: width .28s cubic-bezier(.2, .8, .2, 1); }
    html.sd-mini .sd-sidebar { --sd-sidebar-w: 78px; width: 78px; }
    html.sd-mini .sd-brand { padding-inline: 0; justify-content: center; }
    html.sd-mini .sd-brand-full { display: none; }
    html.sd-mini .sd-brand-mini { display: block !important; height: 36px; width: 36px; }
    html.sd-mini .sd-nav { padding-inline: .6rem; }
    html.sd-mini .sd-nav-group { height: 1px; padding: 0; margin: .85rem .5rem; overflow: hidden; color: transparent; background: rgba(148, 163, 184, .15); }
    html.sd-mini .sd-nav-link { justify-content: center; padding-inline: 0; gap: 0; }
    html.sd-mini .sd-nav-link:hover { transform: none; }
    html.sd-mini .sd-nav-link > span:not(.sd-nav-badge), html.sd-mini .sd-nav-hint, html.sd-mini .sd-nav-caret { display: none !important; }
    html.sd-mini .sd-nav-link > i:first-child { font-size: 1.2rem; }
    html.sd-mini .sd-nav-badge { position: absolute; top: 4px; inset-inline-end: 8px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .6rem; }
    html.sd-mini .sd-sidebar-foot { display: none; }
    /* children open as a flyout to the side */
    html.sd-mini .sd-nav > li { position: relative; }
    html.sd-mini .sd-nav-sub { display: none !important; }
    html.sd-mini .sd-nav > li:hover > .sd-nav-sub, html.sd-mini .sd-nav > li:focus-within > .sd-nav-sub {
        display: block !important; position: absolute; top: 0; inset-inline-start: calc(100% + 6px); z-index: 1045; min-width: 210px; margin: 0; padding: .4rem;
        border: 1px solid rgba(148, 163, 184, .15); border-radius: 12px; background: #11163A; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); animation: sd-fade-up .15s ease both; }
    html.sd-mini .sd-nav > li:hover > .sd-nav-sub .sd-nav-link { justify-content: flex-start; padding: .45rem .7rem; }
    html.sd-mini .sd-nav > li:hover > .sd-nav-sub .sd-nav-link > span, html.sd-mini .sd-nav > li:focus-within > .sd-nav-sub .sd-nav-link > span { display: inline !important; }
    html.sd-mini .sd-sidebar .offcanvas-body { overflow: visible; }
    html.sd-mini .sd-sidebar { overflow: visible; z-index: 1035; }
    html.sd-mini .sd-nav > li:hover > .sd-nav-sub::before, html.sd-mini .sd-nav > li:focus-within > .sd-nav-sub::before {
        content: attr(data-label); display: block; padding: .35rem .7rem .45rem; margin-bottom: .2rem; border-bottom: 1px solid rgba(148, 163, 184, .15);
        font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A5B4FC; }
    html.sd-mini .sd-nav > li > .sd-nav-sub::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -10px; width: 10px; } /* hover bridge */
}
html.sd-no-anim .sd-sidebar { transition: none !important; }

.sd-brand-mini { display: none; }

/* ---------- Notify options (bell / email) ---------- */
.sd-notify-options { display: grid; gap: .5rem; }
.sd-notify-opt { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .65rem .85rem; border: 1px solid var(--sd-line-strong); border-radius: 10px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.sd-notify-opt:has(:checked) { border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent); background: color-mix(in srgb, var(--brand-primary) 5%, var(--sd-surface)); }
.sd-notify-opt .form-check-input { margin: 0; flex-shrink: 0; }
.sd-notify-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: var(--sd-raised); color: var(--sd-muted); transition: background-color .15s, color .15s; }
.sd-notify-opt:has(:checked) .sd-notify-icon { background: var(--brand-primary); color: #fff; }
.sd-notify-opt:has(:checked) .bi-bell-fill { animation: sd-ring-bell .6s ease; }
.sd-notify-opt strong { display: block; font-size: .875rem; color: var(--sd-ink); }
.sd-notify-opt small { display: block; font-size: .75rem; color: var(--sd-muted); }
@keyframes sd-ring-bell { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-6deg); } }

/* ---------- Developer page: brand hero card (matches the sidebar), darker photo overlay ---------- */
.dev-page { background: radial-gradient(1200px 500px at 50% -120px, color-mix(in srgb, var(--brand-accent) 14%, transparent), transparent 70%), var(--sd-canvas); }
.dev-hero { position: relative; overflow: hidden; isolation: isolate; margin-bottom: 2.5rem; padding: 2.5rem 1.5rem 2rem; border-radius: 24px; color: #E0E7FF;
    background: radial-gradient(70% 70% at 10% 0%, rgba(124, 58, 237, .55), transparent 65%), radial-gradient(60% 70% at 95% 100%, rgba(79, 70, 229, .45), transparent 60%), #0B0F24;
    box-shadow: 0 30px 60px -30px rgba(30, 27, 75, .9); }
.dev-hero::before { content: ""; position: absolute; z-index: -1; inset-inline-end: -80px; top: -60px; width: 320px; aspect-ratio: 1; opacity: .08; background: #fff;
    -webkit-mask: url("../brand/logo-icon.svg") center / contain no-repeat; mask: url("../brand/logo-icon.svg") center / contain no-repeat; transform: rotate(14deg); }
.dev-hero .dev-name { color: #fff; }
.dev-hero .dev-title { color: #A5B4FC; }
.dev-hero .dev-summary { color: #C7D2FE; }
.dev-hero .dev-chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; }
.dev-hero .dev-chip:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .3); }
.dev-hero .dev-chip i { color: #C4B5FD; }
.dev-hero .dev-skills li { background: rgba(255, 255, 255, .1); color: #E0E7FF; }
.dev-photo { box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 0 0 7px rgba(168, 85, 247, .7), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.dev-photo-wrap::after { background: linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .55) 100%); }
.dev-photo-wrap { animation: sd-pop .6s .1s cubic-bezier(.3, 1.5, .5, 1) both; }

/* =====================================================================
   Phase 2i — status colours, solid status cards, display font, sidebar
   ===================================================================== */

/* ---------- Display font (local, no CDN): Outfit for headings, numbers, cards, sidebar ---------- */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/outfit-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/outfit-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root { --sd-display: "Outfit", var(--sd-font); }
[lang="ur"] { --sd-display: var(--sd-font); }
h1, h2, h3, .h1, .h2, .h3, .sd-page-head h1, .sd-panel-head h2, .sd-stat-value, .sd-scard, .st-card, .sd-nav, .sd-topbar-title, .sd-hero h1, .sd-bill-hero strong, .dev-name { font-family: var(--sd-display); }
.sd-page-head h1 { letter-spacing: -.01em; font-weight: 700; }
.sd-panel-head h2 { font-weight: 650; letter-spacing: .005em; }

/* ---------- Order status colours (solid background, white text) ---------- */
:root, [data-bs-theme="dark"] {
    --st-ordered: #2f7acd; --st-reviewed: #f29000; --st-refunded: #10b66e; --st-delivered: #e04b28; --st-feedback: #2bc1f5;
    --st-completed: #2bc1f5; --st-onhold: #7837ad; --st-cancelled: #c61d48; --st-deleted: #626262; --st-scammed: #34c9c0; --st-scammers: #e4433f;
}
.st-scammers { --c: var(--st-scammers); }
.tone-card-tickets { --c: #4F46E5; }
.tone-card-active { --c: #0D9488; }
.status-pill { color: #fff !important; background: var(--c) !important; border: 0 !important; padding: .2rem .6rem .2rem .5rem; font-weight: 600; box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--c) 70%, transparent); }
.status-pill::before { background: rgba(255, 255, 255, .85) !important; }
.status-pill i { color: #fff; }
.status-dot::before { background: var(--c) !important; }

/* ---------- Admin dashboard status cards (old order, 4 per row) ---------- */
.sd-scards { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .sd-scards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.sd-scard:not([class*="st-"]):not([class*="tone-card-"]) { --c: var(--brand-primary); }
.sd-scard { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: .35rem; min-height: 118px; padding: 1.1rem 1.25rem; border-radius: 16px; overflow: hidden; isolation: isolate;
    color: #fff; text-decoration: none; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 100%, #fff 0%) 0%, color-mix(in srgb, var(--c) 78%, #000) 100%);
    box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--c) 90%, transparent), 0 2px 4px rgba(11, 15, 36, .06);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; animation: sd-fade-up .5s cubic-bezier(.2, .8, .2, 1) both; }
.sd-scard:nth-child(2) { animation-delay: .04s; } .sd-scard:nth-child(3) { animation-delay: .08s; } .sd-scard:nth-child(4) { animation-delay: .12s; }
.sd-scard:nth-child(5) { animation-delay: .16s; } .sd-scard:nth-child(6) { animation-delay: .2s; } .sd-scard:nth-child(7) { animation-delay: .24s; } .sd-scard:nth-child(n+8) { animation-delay: .28s; }
.sd-scard::before { content: ""; position: absolute; z-index: -1; width: 180px; height: 180px; border-radius: 50%; inset-inline-end: -60px; top: -80px; background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 70%); transition: transform .5s ease; }
.sd-scard::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; width: 45%; left: -70%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-18deg); transition: left .7s ease; }
.sd-scard:hover { color: #fff; transform: translateY(-6px) scale(1.015); box-shadow: 0 24px 40px -18px color-mix(in srgb, var(--c) 95%, transparent), 0 4px 10px rgba(11, 15, 36, .08); }
.sd-scard:hover::before { transform: scale(1.4) translate(-10px, 10px); }
.sd-scard:hover::after { left: 130%; }
.sd-scard-label { font-size: .9rem; font-weight: 600; opacity: .92; letter-spacing: .01em; }
.sd-scard-count { font-size: 1.5rem; font-weight: 750; line-height: 1; letter-spacing: -.02em; }
.sd-scard-icon { position: absolute; inset-inline-end: 1.1rem; bottom: .9rem; font-size: 2.1rem; opacity: .32; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
.sd-scard:hover .sd-scard-icon { transform: rotate(-10deg) scale(1.15); opacity: .55; }
.sd-scard-go { position: absolute; top: .9rem; inset-inline-end: 1rem; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: .8rem; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.sd-scard:hover .sd-scard-go { opacity: 1; transform: none; }
@media (max-width: 575.98px) { .sd-scard { min-height: 100px; padding: .9rem 1rem; } .sd-scard-icon { font-size: 1.6rem; } }

/* ---------- PM status cards: solid colour body, "Total X" footer (old layout) ---------- */
.st-card { background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 78%, #000)); border: 0; color: #fff; isolation: isolate;
    box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--c) 95%, transparent); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
.st-card::before { display: none; }
.st-card::after { content: ""; position: absolute; z-index: -1; width: 170px; height: 170px; border-radius: 50%; inset-inline-end: -60px; top: -70px; background: radial-gradient(circle, rgba(255, 255, 255, .25), transparent 70%); transition: transform .5s ease; }
.st-card:hover { color: #fff; transform: translateY(-6px); border-color: transparent; box-shadow: 0 24px 40px -18px color-mix(in srgb, var(--c) 95%, transparent); }
.st-card:hover::after { transform: scale(1.4); }
.st-card-head { order: 2; justify-content: center; padding: .7rem 1rem; margin-top: auto; background: rgba(0, 0, 0, .14); border-top: 1px solid rgba(255, 255, 255, .15); }
.st-card-name { color: #fff; font-size: 1rem; font-weight: 650; }
.st-card-name i { color: #fff; background: rgba(255, 255, 255, .2); width: 28px; height: 28px; }
.st-card-total { display: none; }
.st-card-grid { order: 1; padding: 1.2rem .5rem 1rem; }
.st-card-grid b, .st-card-grid b.zero { color: #fff; font-size: 1.7rem; font-weight: 700; }
.st-card-grid b.zero { opacity: .55; }
.st-card-grid small { color: rgba(255, 255, 255, .85); font-size: .78rem; font-weight: 500; }
.st-card-grid div + div { border-inline-start-color: rgba(255, 255, 255, .28); }
.sd-alert-card { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }

/* ---------- Panels: softer depth + hover ---------- */
.sd-panel { box-shadow: 0 1px 2px rgba(11, 15, 36, .04), 0 8px 24px -18px rgba(11, 15, 36, .25); }
.sd-panel:hover { box-shadow: 0 2px 4px rgba(11, 15, 36, .05), 0 18px 36px -22px rgba(11, 15, 36, .35); }
.sd-stat { box-shadow: 0 1px 2px rgba(11, 15, 36, .04), 0 10px 24px -18px rgba(11, 15, 36, .3); }

/* ---------- Sidebar: bolder, icon tiles ---------- */
.sd-nav-link { font-weight: 600; font-size: .9rem; letter-spacing: .005em; padding-block: .55rem; }
.sd-nav > li > .sd-nav-link > i:first-child { display: inline-grid; place-items: center; width: 32px !important; height: 32px; border-radius: 10px; background: rgba(148, 163, 184, .08); font-size: 1.02rem; transition: background-color .2s, color .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.sd-nav > li > .sd-nav-link:hover > i:first-child { background: rgba(167, 139, 250, .18); }
.sd-nav > li > .sd-nav-link.active > i:first-child { background: linear-gradient(135deg, #6366F1, #A855F7); color: #fff !important; box-shadow: 0 6px 14px -6px rgba(168, 85, 247, .9); }
.sd-nav-group { font-weight: 700; letter-spacing: .12em; font-size: .66rem; color: #8B95B5; }
.sd-nav-sub .sd-nav-link { font-weight: 550; font-size: .85rem; }
.sd-nav-sub .sd-nav-link.active { font-weight: 650; }
.sd-nav-sub .sd-nav-link:not(.active) > span::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgba(148, 163, 184, .45); margin-inline-end: .6rem; vertical-align: middle; transition: background-color .2s, transform .2s; }
.sd-nav-sub .sd-nav-link:hover > span::before { background: #C4B5FD; transform: scale(1.3); }
html.sd-mini .sd-nav > li > .sd-nav-link > i:first-child { width: 40px !important; height: 40px; }

/* ---------- PM dashboard: latest message from the team ---------- */
.sd-latest-msg { position: relative; display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--sd-surface);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, var(--sd-line)); box-shadow: 0 14px 30px -22px rgba(79, 70, 229, .7); overflow: hidden; animation: sd-fade-up .5s ease both; transition: opacity .3s, transform .3s; }
.sd-latest-msg::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(180deg, #6366F1, #A855F7); }
.sd-latest-msg.is-hiding { opacity: 0; transform: translateY(-8px) scale(.98); }
.sd-latest-msg-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, #6366F1, #A855F7); font-size: 1.2rem; animation: sd-ring-bell 1s .6s ease 2; }
.sd-latest-msg-img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--sd-line); flex-shrink: 0; }
.sd-latest-msg-body { flex: 1; min-width: 0; }
.sd-latest-msg-meta { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--sd-muted); margin-bottom: .2rem; }
.sd-latest-msg-meta .sd-note-new { margin: 0; }
.sd-latest-msg h2 { font-size: 1.05rem; margin: 0 0 .25rem; color: var(--sd-ink); }
.sd-latest-msg p { margin: 0 0 .35rem; color: var(--sd-ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.sd-latest-msg-hide { flex-shrink: 0; }
@media (max-width: 575.98px) { .sd-latest-msg { flex-wrap: wrap; } .sd-latest-msg-img { display: none; } .sd-latest-msg-hide { width: 100%; } .sd-latest-msg-hide .btn { width: 100%; } }
/* .sd-tbl-img { display: inline-grid; place-items: center; width: auto; height: 80px; border-radius: 10px; overflow: hidden; border: 1px solid var(--sd-line); background: var(--sd-raised); color: var(--sd-muted); transition: transform .2s ease, box-shadow .2s ease; } */
.sd-tbl-img img { width: 68px; height: 68px;vertical-align: middle;overflow-clip-margin: content-box;overflow: clip;}
a.sd-tbl-img:hover { transform: scale(1.06); box-shadow: 0 10px 20px -12px rgba(11, 15, 36, .6); }
th.sd-col-actions.text-end, td .sd-actions.justify-content-end { justify-content: flex-end !important; text-align: end; }
.sd-act-copy.is-copied, td .sd-act-copy.is-copied { background: #10b66e !important; border-color: #10b66e !important; color: #fff !important; }
.sd-act-copy.is-copied i { color: #fff !important; }

/* Phase 2i: order details + remarks */
.sd-panel-body > .sd-facts-2 { padding: 0; }
@media (min-width: 992px) {
  .sd-facts-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .sd-facts-2 > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
.sd-remark-text { white-space: pre-line; overflow-wrap: anywhere; }
.sd-facts dd.sd-remark-text { text-align: end; }
.sd-remark-form { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.15rem; border-top: 1px solid var(--sd-line); }
.sd-remark-form textarea { flex: 1; }
@media (max-width: 575.98px) { .sd-remark-form { flex-direction: column; align-items: stretch; } }
.sd-switch-card { padding: .85rem 1rem; border: 1px solid var(--sd-line); border-radius: 12px; background: var(--sd-raised); }
.sd-switch-card .form-check-input { margin-top: .3rem; }
.sd-notify-hint { display: inline-flex; align-items: center; }
/* Orders list: icon-only action buttons (labels stay as tooltips / screen-reader text) */
.sd-actions-compact { flex-wrap: nowrap; gap: .3rem; }
.sd-actions-compact .sd-act { width: 34px; height: 34px; padding: 0; justify-content: center; }
.sd-actions-compact .sd-act > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sd-actions-compact form { display: inline-flex; }
.sd-actions-compact { display: grid !important; grid-template-columns: repeat(2, 34px); justify-content: end; }
.sd-orders-pm { max-width: 230px; }
.sd-orders-pm .sd-email, .sd-orders-pm .small { overflow-wrap: anywhere; white-space: normal; }

/* =====================================================================
   Phase 3 — order details, gallery badges, remarks chat
   ===================================================================== */
.sd-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 992px) { .sd-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sd-gallery .sd-shot { position: relative; }
.sd-gallery .sd-shot-img { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; border: 1px solid var(--sd-line); background: linear-gradient(145deg, var(--sd-raised), color-mix(in srgb, var(--sd-raised) 70%, var(--brand-primary) 6%)); box-shadow: 0 1px 2px rgba(11, 15, 36, .05); transition: transform .25s ease, box-shadow .25s ease; }
.sd-gallery a.sd-shot-img:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(11, 15, 36, .45); }
.sd-gallery a.sd-shot-img:hover img { transform: scale(1.06); }
.sd-gallery .sd-shot-img.is-empty { display: flex; flex-direction: column; gap: .35rem; align-items: center; justify-content: center; border: 1.5px dashed var(--sd-line-strong); font-size: 1.6rem; }
.sd-gallery .sd-shot-img.is-empty span { font-size: .75rem; font-weight: 500; color: var(--sd-muted); }
.sd-shot-badge { position: absolute; top: .55rem; inset-inline-end: .55rem; z-index: 2; margin: 0 !important; padding: .22rem .6rem; border-radius: 999px; font-size: .72rem !important; font-weight: 600; letter-spacing: .01em; color: #fff !important; background: rgba(11, 15, 36, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); pointer-events: none; text-align: start !important; }
.sd-shot-zoom { position: absolute; bottom: .55rem; inset-inline-start: .55rem; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: .85rem; color: #fff; background: rgba(11, 15, 36, .55); opacity: 0; transform: translateY(4px); transition: .2s ease; }
.sd-gallery a.sd-shot-img:hover .sd-shot-zoom { opacity: 1; transform: none; }

.sd-od-keys { display: grid; grid-template-columns: 1fr; gap: .85rem; }
@media (min-width: 576px) { .sd-od-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sd-od-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sd-od-key { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--sd-line); background: var(--sd-raised); min-width: 0; transition: border-color .2s ease, box-shadow .2s ease; }
.sd-od-key:hover { border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--sd-line)); box-shadow: 0 10px 22px -18px rgba(11, 15, 36, .5); }
.sd-od-key-icon { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 1.1rem; color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.sd-od-key.is-status { background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 78%, #000)); border-color: transparent; color: #fff; box-shadow: 0 12px 24px -16px var(--c); }
.sd-od-key.is-status .sd-od-key-icon { color: #fff; background: rgba(255, 255, 255, .2); }
.sd-od-key.is-status .sd-od-label { color: rgba(255, 255, 255, .8); }
.sd-od-key.is-status .sd-od-value { color: #fff; }
.sd-od-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sd-muted); }
.sd-od-value { font-family: var(--sd-display); font-weight: 600; font-size: .98rem; color: var(--sd-ink); display: flex; align-items: center; gap: .35rem; min-width: 0; }
.sd-od-value > .text-truncate { min-width: 0; }
.sd-od-key > .min-w-0 { flex: 1; }
.sd-copy-mini { flex: 0 0 auto; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--sd-line); background: var(--sd-surface); color: var(--sd-muted); font-size: .78rem; cursor: pointer; transition: .15s ease; }
.sd-copy-mini:hover { color: var(--brand-primary); border-color: var(--brand-primary); }
.sd-copy-mini.is-copied { color: #fff; background: #10b66e; border-color: #10b66e; }
.sd-od-sub { display: flex; align-items: center; gap: .45rem; font-size: .8rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--sd-muted); margin: 0 0 .75rem; }
.sd-od-list { margin: 0; border: 1px solid var(--sd-line); border-radius: 14px; overflow: hidden; }
.sd-od-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--sd-line); min-width: 0; }
.sd-od-row:nth-child(even) { background: color-mix(in srgb, var(--sd-raised) 60%, transparent); }
.sd-od-row:last-child { border-bottom: 0; }
.sd-od-row dt { font-weight: 500; font-size: .84rem; color: var(--sd-muted); flex-shrink: 0; }
.sd-od-row dd { margin: 0; text-align: end; min-width: 0; color: var(--sd-ink-2); overflow-wrap: anywhere; }
.sd-od-row.is-block { flex-direction: column; align-items: stretch; gap: .3rem; }
.sd-od-row.is-block dd { text-align: start; }
.sd-od-none { color: var(--sd-line-strong); }
.sd-od-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; text-decoration: none; }
.sd-od-link:hover { text-decoration: underline; }

.sd-steps { list-style: none; margin: 0; padding: .35rem 0 0; position: relative; }
.sd-steps li { position: relative; display: flex; gap: .85rem; padding: 0 0 1.15rem; }
.sd-steps li:not(:last-child)::before { content: ""; position: absolute; top: 34px; bottom: 2px; inset-inline-start: 16px; width: 2px; background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 15%, transparent)); border-radius: 2px; }
.sd-step-dot { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: .85rem; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.sd-steps li.is-current .sd-step-dot { animation: sd-pulse-ring 2s infinite; }
@keyframes sd-pulse-ring { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 8%, transparent); } }
.sd-step-title { font-weight: 600; color: var(--sd-ink); display: flex; align-items: center; gap: .4rem; }
.sd-step-time { font-size: .8rem; color: var(--sd-muted); }
.sd-step-now { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .45rem; border-radius: 999px; color: #fff; background: var(--c); }

/* Remarks chat */
.sd-chat-body { max-height: 520px; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: .9rem; background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sd-line) 80%, transparent) 1px, transparent 0) 0 0 / 18px 18px, var(--sd-surface); scroll-behavior: smooth; }
.sd-chat-day { display: flex; align-items: center; gap: .75rem; color: var(--sd-muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.sd-chat-day::before, .sd-chat-day::after { content: ""; flex: 1; height: 1px; background: var(--sd-line); }
.sd-chat-day span { padding: .2rem .7rem; border-radius: 999px; background: var(--sd-raised); border: 1px solid var(--sd-line); }
.sd-chat-event { align-self: center; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; max-width: 92%; padding: .35rem .85rem; border-radius: 999px; font-size: .8rem; color: var(--sd-muted); background: var(--sd-raised); border: 1px solid var(--sd-line); }
.sd-chat-event strong { color: var(--sd-ink-2); font-weight: 600; }
.sd-chat-event time { opacity: .75; }
.sd-chat-event-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--brand-primary)); }
.sd-chat-status { display: inline-flex; align-items: center; padding: .05rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 600; color: #fff; background: var(--c, var(--brand-primary)); }
.sd-bub { display: flex; align-items: flex-end; gap: .6rem; max-width: 82%; }
.sd-bub .avatar { flex-shrink: 0; }
.sd-bub.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.sd-bub-main { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.sd-bub.is-mine .sd-bub-main { align-items: flex-end; }
.sd-bub-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .78rem; color: var(--sd-muted); }
.sd-bub-meta strong { color: var(--sd-ink); font-weight: 600; }
.sd-bub-bubble { padding: .7rem .95rem; border-radius: 16px; border-end-start-radius: 4px; background: var(--sd-raised); border: 1px solid var(--sd-line); color: var(--sd-ink); white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; box-shadow: 0 1px 2px rgba(11, 15, 36, .05); }
.sd-bub.is-staff:not(.is-mine) .sd-bub-bubble { background: color-mix(in srgb, var(--brand-primary) 7%, var(--sd-surface)); border-color: color-mix(in srgb, var(--brand-primary) 22%, var(--sd-line)); }
.sd-bub.is-mine .sd-bub-bubble { color: #fff; border: 0; border-radius: 16px; border-end-end-radius: 4px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, #7C3AED)); box-shadow: 0 8px 18px -12px var(--brand-primary); }
.sd-bub-time { font-size: .7rem; color: var(--sd-muted); }
.sd-chat-empty { margin: auto; padding: 2rem 1rem; text-align: center; color: var(--sd-muted); }
.sd-chat-empty-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: .6rem; border-radius: 18px; font-size: 1.5rem; color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.sd-chat-composer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; padding: .85rem 1rem .4rem; border-top: 1px solid var(--sd-line); background: var(--sd-surface); }
.sd-chat-composer textarea { flex: 1; min-height: 46px; max-height: 180px; resize: none; border-radius: 14px !important; padding: .7rem 1rem !important; }
.sd-chat-send { flex: 0 0 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 14px; color: #fff; font-size: 1.05rem; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, #7C3AED)); box-shadow: 0 8px 18px -10px var(--brand-primary); transition: transform .15s ease, box-shadow .15s ease; }
.sd-chat-send:hover { transform: translateY(-2px) rotate(-6deg); box-shadow: 0 12px 22px -10px var(--brand-primary); }
.sd-chat-hint { padding: 0 1rem .7rem; font-size: .72rem; color: var(--sd-muted); }
[dir="rtl"] .sd-flip { transform: scaleX(-1); }

/* Alerts: heading + description */
.sd-alert { --a: #2f7acd; display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.15rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--a) 30%, transparent); border-inline-start: 4px solid var(--a); background: color-mix(in srgb, var(--a) 7%, var(--sd-surface)); color: var(--sd-ink-2); }
.sd-alert.is-warning { --a: #f29000; } .sd-alert.is-danger { --a: #DC2626; } .sd-alert.is-success { --a: #10b66e; }
.sd-alert-icon { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 1.15rem; color: #fff; background: var(--a); box-shadow: 0 8px 16px -10px var(--a); }
.sd-alert-body { flex: 1; min-width: 0; }
.sd-alert-title { font-family: var(--sd-display); font-weight: 700; font-size: .98rem; color: var(--sd-ink); margin-bottom: .15rem; }
.sd-alert-text { font-size: .875rem; line-height: 1.55; color: var(--sd-muted); overflow-wrap: anywhere; }
.sd-alert-actions { flex-shrink: 0; align-self: center; display: flex; gap: .5rem; }
@media (max-width: 575.98px) { .sd-alert { flex-wrap: wrap; } .sd-alert-actions { width: 100%; } }

/* Filter footer: left area (quick picks) */
.sd-filter-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sd-filter-foot-start { margin-inline-end: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.sd-quick-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sd-muted); }
.sd-qp { --q: #0D9488; border: 1px solid color-mix(in srgb, var(--q) 35%, transparent); background: color-mix(in srgb, var(--q) 10%, var(--sd-surface)); color: color-mix(in srgb, var(--q) 85%, var(--sd-ink)); font-size: .8rem; font-weight: 600; padding: .4rem .8rem; border-radius: 999px; transition: .15s ease; }
.sd-qp:hover { background: color-mix(in srgb, var(--q) 18%, var(--sd-surface)); transform: translateY(-1px); }
.sd-qp.is-active { background: var(--q); color: #fff; border-color: var(--q); box-shadow: 0 6px 14px -8px var(--q); }
.sd-qp.qp-teal { --q: #0D9488; } .sd-qp.qp-amber { --q: #f29000; } .sd-qp.qp-orange { --q: #e04b28; } .sd-qp.qp-rose { --q: #c61d48; }

/* =====================================================================
   Phase 3 — roomier, modern form controls (inputs, selects, textareas)
   ===================================================================== */
.form-control:not(.form-control-sm):not(.form-control-lg), .form-select:not(.form-select-sm):not(.form-select-lg) {
    min-height: 46px; padding-top: .68rem; padding-bottom: .68rem; font-size: .925rem; border-radius: 12px; border-width: 1.5px;
    border-color: color-mix(in srgb, var(--sd-line-strong) 85%, transparent); background-color: var(--sd-surface);
    box-shadow: 0 1px 2px rgba(11, 15, 36, .04); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.form-control:not(.form-control-sm):not(.form-control-lg) { padding-inline: 1rem; }
.form-select:not(.form-select-sm):not(.form-select-lg) { padding-inline-start: 1rem; padding-inline-end: 2.5rem; background-position: right 1rem center; }
[dir="rtl"] .form-select:not(.form-select-sm):not(.form-select-lg) { background-position: left 1rem center; }
textarea.form-control:not(.form-control-sm) { min-height: 96px; line-height: 1.55; }
textarea.form-control[rows="1"] { min-height: 46px; }
.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--sd-line-strong)); }
.form-control:focus, .form-select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 14%, transparent); background-color: var(--sd-surface); }
.form-control::placeholder { color: color-mix(in srgb, var(--sd-muted) 75%, transparent); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--sd-raised); }
.form-label { font-weight: 600; font-size: .84rem; color: var(--sd-ink-2); margin-bottom: .45rem; }
.input-group > .form-control, .input-group > .form-select { border-radius: 12px; }
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { border-start-start-radius: 0; border-end-start-radius: 0; }
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group-text { border-width: 1.5px; border-radius: 12px; padding-inline: 1rem; font-weight: 500; }
.form-check-input { width: 1.15em; height: 1.15em; border-width: 1.5px; }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }
.ts-wrapper.form-select { min-height: 46px; border-width: 1.5px; border-radius: 12px; }
.ts-wrapper.form-select .ts-control { padding: .68rem 2.5rem .68rem 1rem; font-size: .925rem; }
[dir="rtl"] .ts-wrapper.form-select .ts-control { padding: .68rem 1rem .68rem 2.5rem; }
.ts-dropdown { border-radius: 12px !important; overflow: hidden; }
.sd-filter .form-label { font-size: .78rem; font-weight: 600; }
.sd-chat-composer textarea.form-control { min-height: 46px; }

/* Stats cards: more breathing room top/bottom, bigger icon + number */
.sd-stat { padding-top: 1.45rem !important; padding-bottom: 1.45rem !important; min-height: 112px; gap: 1rem; align-items: center; }
.sd-stat-icon { width: 50px; height: 50px; border-radius: 14px; font-size: 1.4rem; }
.sd-stat-value { font-size: 1.6rem; }
.sd-stat-label { font-size: .82rem; margin-top: .15rem; }
@media (max-width: 575.98px) { .sd-stat { padding-top: 1.1rem !important; padding-bottom: 1.1rem !important; min-height: 0; } }
.sd-foot-end { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; }
.sd-nav-sub .sd-nav-badge, .sd-nav-toggle .sd-nav-badge { margin-inline-start: auto; }
.sd-nav-toggle .sd-nav-badge + .sd-nav-caret { margin-inline-start: .4rem; }
.sd-nav-sub .sd-nav-link { display: flex; align-items: center; gap: .35rem; }

/* =====================================================================
   Phase 3 — inbox as posts (centred feed, reactions, comments)
   ===================================================================== */
.sd-feed-center, .sd-post-wrap { max-width: 760px; margin-inline: auto; width: 100%; }
.sd-post-wrap { display: flex; flex-direction: column; gap: 1.1rem; }
.sd-post-wrap > .sd-back { align-self: flex-start; }
.sd-seg-center { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; overflow-x: auto; }
.sd-inbox-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.5rem; min-height: 320px; width: 100%;
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 60%), var(--sd-surface); }
.sd-inbox-empty-icon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 1rem; border-radius: 24px; font-size: 2rem; color: #fff; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, #7C3AED)); box-shadow: 0 16px 30px -16px var(--brand-primary); animation: sd-float 4s ease-in-out infinite; }
@keyframes sd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.sd-note { border-radius: 18px; padding: 1.35rem 1.5rem 1.4rem; transition: box-shadow .2s ease, transform .2s ease; }
.sd-feed .sd-note:hover { box-shadow: 0 18px 36px -24px rgba(11, 15, 36, .35); transform: translateY(-2px); }
.sd-note-logo { width: 40px; height: 40px; border-radius: 12px; }
.sd-note-title a { color: inherit; text-decoration: none; }
.sd-note-title a:hover { color: var(--brand-primary); }
.sd-note .sd-note-figure { margin: 1rem 0 0; }
.sd-note .sd-note-figure img { border-radius: 14px; }
.sd-note.is-clamped .sd-note-body { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sd-note.is-clamped .sd-note-figure img { max-height: 280px; }
.sd-note-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--sd-line); }
.sd-note-reacts { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--sd-ink-2); }
.sd-react-stack { display: inline-flex; }
.sd-react-stack span { display: grid; place-items: center; width: 24px; height: 24px; margin-inline-start: -6px; border-radius: 50%; background: var(--sd-surface); border: 2px solid var(--sd-surface); box-shadow: 0 0 0 1px var(--sd-line); font-size: .78rem; }
.sd-react-stack span:first-child { margin-inline-start: 0; }
.sd-note-stat { display: inline-flex; align-items: center; gap: .3rem; font-size: .84rem; color: var(--sd-muted); }
.sd-note-stat.is-mine { color: var(--brand-primary); font-weight: 600; }

.sd-react-panel { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .85rem 1.1rem; }
.sd-react-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sd-muted); }
.sd-react-bar { display: flex; flex-wrap: wrap; gap: .45rem; }
.sd-react { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: 999px; border: 1.5px solid var(--sd-line); background: var(--sd-raised); color: var(--sd-ink-2); font-weight: 600; font-size: .85rem; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.sd-react:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--sd-line)); }
.sd-react-emoji { font-size: 1.15rem; line-height: 1; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.sd-react:hover .sd-react-emoji { transform: scale(1.25) rotate(-8deg); }
.sd-react.is-mine { border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 12%, var(--sd-surface)); color: var(--brand-primary); }
.sd-react.is-pop .sd-react-emoji { animation: sd-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sd-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.45); } 100% { transform: scale(1); } }
.sd-react.is-static { cursor: default; }

.sd-visibility { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600; padding: .25rem .65rem; border-radius: 999px; color: var(--sd-muted); background: var(--sd-raised); border: 1px solid var(--sd-line); }
.sd-visibility.is-public { color: #0D9488; background: color-mix(in srgb, #0D9488 9%, var(--sd-surface)); border-color: color-mix(in srgb, #0D9488 30%, transparent); }
.sd-cmt-composer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--sd-line); }
.sd-cmt-composer textarea { flex: 1; min-height: 44px !important; max-height: 180px; resize: none; border-radius: 22px !important; padding: .6rem 1rem !important; }
.sd-cmt-composer .sd-chat-send { flex-basis: 44px; height: 44px; border-radius: 50%; }
.sd-cmt-composer.is-reply { border: 0; padding: .1rem 1.15rem .9rem 4.4rem; }
[dir="rtl"] .sd-cmt-composer.is-reply { padding: .1rem 4.4rem .9rem 1.15rem; }
.sd-cmt-composer.is-reply .avatar { width: 30px; height: 30px; font-size: .7rem; }
.sd-cmt-list { display: flex; flex-direction: column; padding: .9rem 1.15rem 1.15rem; gap: .9rem; }
.sd-cmt { display: flex; gap: .65rem; align-items: flex-start; }
.sd-cmt.is-reply { margin-inline-start: 3.25rem; margin-top: -.35rem; }
.sd-cmt.is-reply .avatar { width: 30px; height: 30px; font-size: .7rem; }
.sd-cmt-main { min-width: 0; flex: 1; }
.sd-cmt-bubble { display: inline-block; max-width: 100%; padding: .6rem .9rem; border-radius: 4px 18px 18px 18px; background: var(--sd-raised); border: 1px solid var(--sd-line); }
[dir="rtl"] .sd-cmt-bubble { border-radius: 18px 4px 18px 18px; }
.sd-cmt.is-staff .sd-cmt-bubble { background: color-mix(in srgb, var(--brand-primary) 8%, var(--sd-surface)); border-color: color-mix(in srgb, var(--brand-primary) 25%, var(--sd-line)); }
.sd-cmt-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .82rem; }
.sd-cmt-head strong { color: var(--sd-ink); }
.sd-cmt-text { margin-top: .15rem; white-space: pre-line; overflow-wrap: anywhere; color: var(--sd-ink-2); line-height: 1.55; }
.sd-cmt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin: .3rem .5rem 0; font-size: .76rem; color: var(--sd-muted); }
.sd-cmt-link { border: 0; padding: 0; background: none; font-weight: 700; font-size: .76rem; color: var(--sd-muted); cursor: pointer; }
.sd-cmt-link:hover { color: var(--brand-primary); }
.sd-cmt-link.is-danger:hover { color: #DC2626; }
.sd-cmt:target .sd-cmt-bubble { animation: sd-flash 1.6s ease; }
@keyframes sd-flash { 0%, 40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 30%, transparent); } 100% { box-shadow: none; } }
.sd-comments-off { text-align: center; color: var(--sd-muted); font-size: .9rem; padding: .9rem; border: 1px dashed var(--sd-line-strong); border-radius: 14px; }
.sd-chip-stat { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--sd-ink-2); background: var(--sd-raised); border: 1px solid var(--sd-line); text-decoration: none; }
a.sd-chip-stat:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.sd-chip-stat.is-new { border-color: color-mix(in srgb, #E11D48 40%, transparent); }
.sd-chip-new { padding: .02rem .4rem; border-radius: 999px; font-size: .66rem; color: #fff; background: #E11D48; }
.form-switch { padding-inline-start: 3.1em; }
.form-switch .form-check-input { margin-inline-start: -3.1em; }
.status-pill { white-space: nowrap; }
.sd-actions-compact { grid-template-columns: repeat(2, 32px) !important; gap: .3rem !important; }
.sd-actions-compact .sd-act { width: 32px !important; height: 32px !important; }
@media (min-width: 1200px) { .sd-od-keys { grid-template-columns: 1.25fr 1.25fr 1fr 1fr; } }
.sd-inbox-empty { min-height: 300px !important; height: auto !important; flex: none !important; }
.sd-inbox-empty-icon i { color: #fff !important; font-size: 2rem !important; margin: 0 !important; opacity: 1 !important; }

/* =====================================================================
   Phase 3b — full-screen loader on form submit (star inside a spinning ring)
   ===================================================================== */
.sd-loader { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    background: color-mix(in srgb, #0B0F24 45%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.sd-loader.is-on { opacity: 1; visibility: visible; transition: opacity .2s ease .08s, visibility 0s; }
.sd-loader-ring { position: relative; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; background: var(--sd-surface, #fff); box-shadow: 0 24px 50px -18px rgba(11, 15, 36, .6); }
.sd-loader-spin { position: absolute; inset: 0; border-radius: 50%; padding: 5px;
    background: conic-gradient(from 0deg, transparent 0 20%, var(--brand-primary, #4F46E5) 55%, var(--brand-secondary, #7C3AED) 85%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: sd-loader-spin .9s linear infinite; }
.sd-loader-ring img, .sd-loader-ring > i { width: 46px; height: 46px; font-size: 2.4rem; color: var(--brand-primary, #4F46E5); animation: sd-loader-beat 1.4s ease-in-out infinite; }
.sd-loader-text { font-family: var(--sd-display, inherit); font-weight: 600; letter-spacing: .02em; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
@keyframes sd-loader-spin { to { transform: rotate(360deg); } }
@keyframes sd-loader-beat { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.08); } }
html.sd-loading, html.sd-loading body { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .sd-loader-spin { animation-duration: 2.4s; } .sd-loader-ring img { animation: none; } }

/* Order page: details card sits in an 8-column card now → key tiles 2 per row */
@media (min-width: 576px) { .sd-od-keys { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.sd-panel.h-100 > .sd-panel-body { flex: 1; }
.sd-pm-msgs { display: flex; flex-direction: column; }
.sd-pm-msg { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--sd-line); color: inherit; text-decoration: none; transition: background .15s ease; }
.sd-pm-msg:hover { background: var(--sd-hover); color: inherit; }
.sd-pm-msg:last-child { border-bottom: 0; }
@media (min-width: 1200px) { .sd-exp-keys { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.sd-exp-desc { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.65; padding: 1rem 1.15rem; border-radius: 14px; border: 1px solid var(--sd-line); background: var(--sd-raised); color: var(--sd-ink-2); }

/* =====================================================================
   Phase 3c — tables that stay tables on phones (horizontal scroll)
   ===================================================================== */
.sd-actions-row { display: flex !important; flex-wrap: nowrap; gap: .3rem; }
.sd-orders-table .sd-orders-pm { min-width: 180px; }
@media (max-width: 767.98px) {
    .sd-panel .table-responsive.sd-table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .sd-panel .table.sd-table-x { display: table; width: max-content; min-width: 100%; }
    .sd-panel .table.sd-table-x > thead { display: table-header-group; }
    .sd-panel .table.sd-table-x > tbody { display: table-row-group; }
    .sd-panel .table.sd-table-x > tbody > tr { display: table-row; position: static; padding: 0; flex-direction: initial; }
    .sd-panel .table.sd-table-x > thead > tr > th, .sd-panel .table.sd-table-x > tbody > tr > td { display: table-cell; padding: .7rem .8rem; border-bottom: 1px solid var(--sd-line); white-space: nowrap; }
    .sd-panel .table.sd-table-x > tbody > tr > td.text-end, .sd-panel .table.sd-table-x > thead > tr > th.text-end { text-align: end !important; }
    .sd-panel .table.sd-table-x > tbody > tr > td:has(> [data-check-row]) { position: static; }
    .sd-panel .table.sd-table-x .sd-actions { margin-top: 0; }
    .sd-panel .table.sd-table-x > tbody > tr > td:has(> .sd-empty) { white-space: normal; }
}
/* PM dashboard: presence card only, compact on phones */
.sd-presence-banner { margin-bottom: 0; }
div.sd-presence-banner:hover { transform: none; }
@media (max-width: 575.98px) {
    .sd-presence-banner { padding: .6rem .8rem; gap: .65rem; border-radius: 12px; }
    .sd-presence-banner .sd-presence-medal { width: 36px; height: 36px; font-size: 1rem; }
    .sd-presence-banner .sd-presence-title { font-size: .9rem; }
    .sd-presence-banner .small { font-size: .74rem; }
    .sd-presence-banner .sd-presence-ladder { display: none; }
    .sd-presence-banner .sd-presence-progress { margin-top: .1rem; }
}
.sd-orders-table td .sd-email { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-orders-table > :not(caption) > * > * { padding-inline: .65rem; }
@media (max-width: 767.98px) { .sd-presence-banner .sd-presence-copy { flex: 1 1 0; min-width: 0; } }
.form-control:disabled, .form-select:disabled { background-color: var(--sd-raised) !important; color: var(--sd-muted) !important; border-style: dashed !important; cursor: not-allowed; box-shadow: none !important; }

/* =====================================================================
   Phase 3d — every button: icon + text on a solid colour
   ===================================================================== */
.sd-act-copy { --a: #0E7490; }
.sd-act-view { --a: #4F46E5; } .sd-act-edit { --a: #D97706; } .sd-act-delete { --a: #DC2626; } .sd-act-login { --a: #0F766E; }
.sd-act-restore, .sd-act-approve { --a: #16A34A; } .sd-act-neutral { --a: #475569; }
[data-bs-theme="dark"] .sd-act-view { --a: #6366F1; } [data-bs-theme="dark"] .sd-act-edit { --a: #D97706; } [data-bs-theme="dark"] .sd-act-delete { --a: #E11D48; }
[data-bs-theme="dark"] .sd-act-login { --a: #0D9488; } [data-bs-theme="dark"] .sd-act-restore, [data-bs-theme="dark"] .sd-act-approve { --a: #16A34A; }
[data-bs-theme="dark"] .sd-act-neutral { --a: #64748B; } [data-bs-theme="dark"] .sd-act-copy { --a: #0891B2; }
.sd-act, td .sd-act, .sd-actions-compact .sd-act, .sd-actions-row .sd-act {
    width: auto !important; height: 32px !important; padding: 0 .7rem !important; gap: .35rem; justify-content: center;
    border-radius: 8px; border: 1px solid var(--a) !important; background: var(--a) !important; color: #fff !important;
    font-size: .78rem; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 10px -6px var(--a) !important;
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; }
.sd-act i, td .sd-act i { color: #fff !important; font-size: .9rem; }
.sd-act > span, td .sd-act > span { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; clip: auto !important; overflow: visible !important; }
.sd-act:hover, .sd-act:focus-visible, td .sd-act:hover, td .sd-act:focus-visible { color: #fff !important; filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 8px 16px -8px var(--a) !important; }
.sd-act:hover i, td .sd-act:hover i { color: #fff !important; }
.sd-act.is-copied { --a: #16A34A; }
.sd-act-lg { height: 40px !important; padding: 0 1rem !important; font-size: .875rem; border-radius: 10px; }
td .sd-actions, .sd-actions-compact, .sd-actions-row { display: flex !important; flex-wrap: wrap !important; gap: .3rem !important; }
td .sd-actions.justify-content-end { justify-content: flex-end; }
.sd-orders-table td.sd-col-actions .sd-actions { max-width: 172px; margin-inline-start: auto; }
/* other buttons: solid, never outline-only */
.btn-ghost { --bs-btn-bg: #E2E8F0; --bs-btn-border-color: #E2E8F0; --bs-btn-color: #1E293B; --bs-btn-hover-bg: #CBD5E1; --bs-btn-hover-border-color: #CBD5E1; --bs-btn-hover-color: #0F172A; --bs-btn-active-bg: #CBD5E1; }
[data-bs-theme="dark"] .btn-ghost { --bs-btn-bg: #334155; --bs-btn-border-color: #334155; --bs-btn-color: #F1F5F9; --bs-btn-hover-bg: #475569; --bs-btn-hover-border-color: #475569; --bs-btn-hover-color: #fff; }
.sd-topbar .btn-ghost, .btn-ghost.btn-icon, .auth-tools .btn-ghost { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; }
.btn-outline-primary { --bs-btn-bg: var(--brand-primary); --bs-btn-color: #fff; --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--brand-primary) 88%, #000); --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #fff; }
.btn-outline-secondary { --bs-btn-bg: #64748B; --bs-btn-color: #fff; --bs-btn-border-color: #64748B; --bs-btn-hover-bg: #475569; --bs-btn-hover-color: #fff; }
.btn-outline-danger { --bs-btn-bg: #DC2626; --bs-btn-color: #fff; --bs-btn-border-color: #DC2626; --bs-btn-hover-bg: #B91C1C; --bs-btn-hover-color: #fff; }
.btn-soft-danger { --bs-btn-bg: #DC2626; --bs-btn-color: #fff; --bs-btn-border-color: #DC2626; --bs-btn-hover-bg: #B91C1C; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #B91C1C; }
.sd-chat-send { flex: 0 0 auto !important; width: auto; padding: 0 1rem; gap: .4rem; display: inline-flex !important; align-items: center; font-weight: 600; font-size: .85rem; }
.sd-cmt-composer .sd-chat-send { border-radius: 22px; }
.sd-copy-mini { width: auto; padding: 0 .5rem; gap: .25rem; display: inline-flex; align-items: center; font-size: .7rem; font-weight: 600; background: #0E7490; border-color: #0E7490; color: #fff; }
.sd-copy-mini:hover { color: #fff; filter: brightness(1.1); border-color: #0E7490; }
.sd-note-remove .btn { box-shadow: 0 4px 10px -6px #DC2626; }
/* bigger order screenshot in the orders tables */
/* .sd-orders-table .sd-tbl-img { width: 76px; height: 76px; border-radius: 12px; } */
.sd-orders-table .sd-tbl-img.is-empty { font-size: 1.3rem; }
.sd-act.sd-act-copy { --a: #0E7490; } [data-bs-theme="dark"] .sd-act.sd-act-copy { --a: #0891B2; }
.sd-nav-badge.is-green { background: linear-gradient(135deg, #22C55E, #16A34A); animation: none; }
.sd-orders-table td.sd-col-actions { min-width: 158px; }
.sd-orders-table td.sd-col-actions .sd-actions { max-width: 158px; }
.sd-orders-table .sd-orders-pm { min-width: 0 !important; max-width: 200px; }
.sd-orders-table td .sd-email { max-width: 165px; }
.sd-orders-table td.sd-col-actions { min-width: 176px; }
.sd-orders-table td.sd-col-actions .sd-actions { max-width: 176px; }
.sd-orders-table .sd-orders-pm { max-width: 185px; }
.sd-orders-table td .sd-email { max-width: 150px; }
.sd-orders-table td .sd-email { min-width: 0 !important; max-width: 200px; }

/* =====================================================================
   Phase 3e — maintenance banner, system page, announcement popup
   ===================================================================== */
.sd-maint { display: flex; align-items: center; gap: .9rem; margin: 1rem 1.5rem 0; padding: .8rem 1.1rem; border-radius: 14px; color: #fff;
    background: linear-gradient(135deg, #f29000, #e04b28); box-shadow: 0 12px 26px -16px #e04b28; }
.sd-maint.is-soon { background: linear-gradient(135deg, #e04b28, #c61d48); animation: sd-maint-pulse 1.2s ease-in-out infinite; }
.sd-maint.is-admin { background: linear-gradient(135deg, #334155, #1E293B); box-shadow: 0 12px 26px -16px #0F172A; }
.sd-maint-icon { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .2); font-size: 1.2rem; }
.sd-maint strong { font-family: var(--sd-display); font-size: .98rem; }
.sd-maint .small { opacity: .9; }
@keyframes sd-maint-pulse { 50% { box-shadow: 0 0 0 6px rgba(198, 29, 72, .25); } }
@media (max-width: 575.98px) { .sd-maint { margin: .75rem .75rem 0; } }
.sd-sys-row { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border: 1px solid var(--sd-line); border-radius: 14px; background: var(--sd-raised); }
.btn-check:checked + .sd-qp { background: var(--q); color: #fff; border-color: var(--q); box-shadow: 0 6px 14px -8px var(--q); }
.sd-qp { cursor: pointer; margin: 0; }
/* Announcement popup */
.sd-announce .modal-content { border: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(11, 15, 36, .5); }
.sd-announce-item { --t: #2f7acd; }
.sd-announce-item.tone-success { --t: #10b66e; } .sd-announce-item.tone-warning { --t: #f29000; } .sd-announce-item.tone-danger { --t: #c61d48; }
.sd-announce-head { display: flex; align-items: center; justify-content: center; position: relative; padding: 2rem 1rem 1.2rem;
    background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--t) 30%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--t) 14%, var(--sd-surface)), var(--sd-surface)); }
.sd-announce-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; font-size: 2rem; color: #fff; background: linear-gradient(135deg, var(--t), color-mix(in srgb, var(--t) 70%, #000)); box-shadow: 0 16px 30px -14px var(--t); animation: sd-float 3.5s ease-in-out infinite; }
.sd-announce-step { position: absolute; top: .9rem; inset-inline-end: 1rem; font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--sd-raised); color: var(--sd-muted); }
.sd-announce-body { padding: .4rem 1.75rem 0; text-align: center; }
.sd-announce-text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.65; color: var(--sd-ink-2); max-height: 50vh; overflow-y: auto; }
.sd-announce-foot { display: flex; justify-content: center; padding: 1.25rem 1.5rem 1.6rem; }
.sd-announce-foot .btn { background: var(--t); border-color: var(--t); }
.sd-qp.qp-blue { --q: #2f7acd; }
.sd-announce-dot { --t: #2f7acd; flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--t); }
.sd-announce-dot.tone-success { --t: #10b66e; } .sd-announce-dot.tone-warning { --t: #f29000; } .sd-announce-dot.tone-danger { --t: #c61d48; }

/* Phase 3e — all action buttons on one line (d-flex gap-1), compact inside tables */
.sd-actions, td .sd-actions, .sd-actions-compact, .sd-actions-row { display: flex !important; flex-wrap: nowrap !important; gap: .25rem !important; align-items: center; }
.sd-actions > form { display: inline-flex; margin: 0; }
td .sd-act, .sd-actions-compact .sd-act, .sd-actions-row .sd-act { height: 30px !important; padding: 0 .55rem !important; font-size: .74rem; gap: .3rem; }
td .sd-act i { font-size: .82rem; }
.sd-orders-table td.sd-col-actions, .sd-orders-table td.sd-col-actions .sd-actions { min-width: 0 !important; max-width: none !important; }
td.sd-col-actions { width: 1%; white-space: nowrap; }
.sd-page-head .sd-actions, .sd-panel-head .sd-actions { flex-wrap: wrap !important; }

/* Phase 3g: remarks composer sits on top (newest first) */
.sd-chat .sd-chat-composer { border-top: 0; }
.sd-chat .sd-chat-hint { border-bottom: 1px solid var(--sd-line); }

/* Phase 3g: picture upload tiles (PM update order) */
.sd-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 992px) { .sd-upload-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .sd-upload-grid { grid-template-columns: 1fr; } }
.sd-upload-tile { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.sd-upload-tile .sd-shot { position: relative; }
.sd-upload-tile .form-control { font-size: .8rem; }

/* Phase 3h: password eye stays inside the field when there is an error */
.sd-pass-btn { inset-block-end: auto; height: 100%; max-height: 46px; }
.sd-pass > .invalid-feedback { position: static; }
.sd-pass.is-invalid + .invalid-feedback, .sd-pass:has(.is-invalid) + .invalid-feedback { display: block; }

/* Phase 3h: header icons — 🔔 order updates · ✉ inbox · 🎧 support, each with its own count */
.sd-tb-icon { position: relative; }
.sd-tb-icon .bi { font-size: 1.15rem; }
.sd-tb-badge { position: absolute; top: 1px; inset-inline-end: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center; color: #fff; background: #EF4444; box-shadow: 0 0 0 2px var(--sd-canvas); pointer-events: none; }
.sd-tb-badge[hidden] { display: none !important; }
.sd-tb-icon.is-inbox .sd-tb-badge { background: #2f7acd; }
.sd-tb-icon.is-support .sd-tb-badge { background: #10b66e; }
.sd-tb-icon.is-support .bi { color: #10b66e; }

/* Phase 3m: order pictures are shown whole (no crop, no zoom / lift effects) so they're clearly readable */
.sd-gallery .sd-shot-img { background: var(--sd-raised); box-shadow: none; transition: none; }
.sd-gallery .sd-shot-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none !important; transition: none !important; }
.sd-gallery a.sd-shot-img:hover { transform: none; box-shadow: none; border-color: var(--brand-primary); }
.sd-gallery a.sd-shot-img:hover img { transform: none !important; }
.sd-gallery .sd-shot-zoom { display: none; }
.sd-notes-scroll { max-height: 460px; overflow-y: auto; }
.sd-note-add { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; padding: 1rem 1.25rem; border-bottom: 1px solid var(--sd-line); }
.sd-note-add textarea { flex: 1 1 240px; min-height: 46px; resize: vertical; }
.sd-scam-check { padding: .75rem 1rem .75rem 2.5rem; border: 1px dashed color-mix(in srgb, #e4433f 45%, var(--sd-line)); border-radius: 12px; background: color-mix(in srgb, #e4433f 5%, transparent); }
[dir="rtl"] .sd-scam-check { padding: .75rem 2.5rem .75rem 1rem; }

/* Phase 3n: order pictures at their full height (nothing cropped) — click opens the carousel */
.sd-gallery { align-items: start; }
.sd-gallery .sd-shot-img:not(.is-empty) { aspect-ratio: auto; display: block; height: auto; cursor: zoom-in; overflow: hidden; }
.sd-gallery .sd-shot-img:not(.is-empty) img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
.sd-gallery .sd-shot-img.is-empty { aspect-ratio: 4 / 3; }

/* Lightbox carousel */
.sd-lightbox .modal-content { background: #0b0f24; color: #fff; border: 0; border-radius: 16px; overflow: hidden; }
.sd-lightbox .modal-header { border: 0; padding: .75rem 1rem; gap: .75rem; }
.sd-lightbox .btn-close { filter: invert(1) grayscale(1); opacity: .85; }
.sd-lightbox .carousel-item { text-align: center; }
.sd-lightbox .carousel-item img { max-width: 100%; max-height: calc(100vh - 170px); width: auto; height: auto; object-fit: contain; margin: 0 auto; display: block; }
.sd-lightbox .sd-lb-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: rgba(255, 255, 255, .14); }
.sd-lightbox .sd-lb-count { font-size: .8rem; opacity: .7; }
.sd-lightbox .carousel-control-prev, .sd-lightbox .carousel-control-next { width: 3.25rem; }
.sd-lightbox .carousel-control-prev-icon, .sd-lightbox .carousel-control-next-icon { width: 2.4rem; height: 2.4rem; border-radius: 50%; background-color: rgba(255, 255, 255, .18); background-size: 50%; }
.sd-lightbox .sd-lb-foot { display: flex; justify-content: center; padding: .6rem 1rem 1rem; }

/* Phase 3p: order notes as the old "Order Notes/Remarks" table */
.sd-notes-table .sd-note-text { white-space: pre-line !important; min-width: 14rem; max-width: 36rem; }
.sd-panel-body.sd-notes-scroll:has(.sd-notes-table) { padding: 0; }

/* Phase 3s: Password & 2FA — two switches, set-up pop-up, sign-in method choice */
.sd-2fa-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--sd-line); border-radius: 14px; background: var(--sd-raised); }
.sd-2fa-row + .sd-2fa-row { margin-top: .75rem; }
.sd-2fa-icon, .sd-2fa-choice-icon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)); }
.sd-switch-lg { padding-inline-start: 0; }
.sd-switch-lg .form-check-input { width: 3.1rem; height: 1.65rem; margin: 0; float: none; cursor: pointer; }
.sd-step { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-inline-end: .35rem; border-radius: 50%; font-size: .8rem; color: #fff; background: var(--brand-primary); }
.sd-2fa-choice { display: flex; align-items: center; gap: .9rem; padding: .95rem 1rem; border: 1px solid var(--sd-line); border-radius: 14px; background: var(--sd-raised); color: inherit; text-align: start; transition: border-color .15s ease, box-shadow .15s ease; }
.sd-2fa-choice:hover, .sd-2fa-choice:focus-visible { border-color: var(--brand-primary); box-shadow: 0 10px 22px -16px rgba(79, 70, 229, .7); }

/* Phase 3t: orders table image — the original square frame, picture zoomed OUT (whole screenshot visible, nothing cropped) */
.sd-orders-table .sd-tbl-img:not(.is-empty) { background: var(--brand-dark-secondary); cursor: zoom-in; }
/* .sd-orders-table .sd-tbl-img img { object-fit: contain; } */
[data-bs-theme="dark"] .sd-orders-table .sd-tbl-img:not(.is-empty) { background: var(--brand-dark-secondary); }

/* Phase 3t: sidebar counters sit right after the link title (the dropdown arrow stays at the end) */
.sd-nav-badge, .sd-nav-hint + .sd-nav-badge, .sd-nav-sub .sd-nav-badge, .sd-nav-toggle .sd-nav-badge { margin-inline-start: 0; }
.sd-nav-toggle .sd-nav-badge + .sd-nav-caret { margin-inline-start: auto; }

/* Phase 3t: bigger checkboxes in every table (row + select-all) */
.table input.form-check-input[type="checkbox"], .sd-check input.form-check-input[type="checkbox"] { width: 1.4rem; height: 1.4rem; margin-top: 0; border-width: 2px; cursor: pointer; vertical-align: middle; }
.table th.sd-check, .table td:has(> input.form-check-input[type="checkbox"]:only-child) { width: 3rem; }

/* Phase 3t: password field (with its eye) inside an input-group: square inner corners like any input-group */
.input-group > .sd-pass { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .sd-pass:not(:last-child) > .form-control { border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; }
.input-group > .sd-pass:not(:first-child) > .form-control { border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; }
.input-group > .sd-pass + .btn { border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; }

/* Phase 3u: page header = one Back button + one "Actions" dropdown (same size) */
.sd-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sd-head-actions > .btn, .sd-actions-menu > .btn { height: 40px; display: inline-flex; align-items: center; padding: 0 1rem; border-radius: 10px; font-size: .875rem; font-weight: 600; }
.sd-actions-menu .dropdown-menu { min-width: 240px; padding: .4rem; border-radius: 12px; border: 1px solid var(--sd-line); }
.sd-actions-menu .dropdown-menu > form, .sd-actions-menu .dropdown-menu > * > form { display: block; margin: 0; }
.sd-actions-menu .dropdown-menu .sd-act { display: flex !important; width: 100%; height: auto !important; justify-content: flex-start; gap: .65rem; padding: .6rem .75rem !important; margin: 0; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: var(--sd-ink-2) !important; font-size: .875rem !important; font-weight: 600; text-align: start; }
.sd-actions-menu .dropdown-menu .sd-act i { width: 1.1rem; text-align: center; color: var(--a) !important; font-size: 1rem; }
.sd-actions-menu .dropdown-menu .sd-act:hover, .sd-actions-menu .dropdown-menu .sd-act:focus-visible { background: color-mix(in srgb, var(--a) 10%, transparent) !important; color: var(--a) !important; }
.sd-actions-menu .dropdown-menu .sd-act-delete { color: var(--a) !important; }
.sd-actions-menu .dropdown-menu > .sd-act-delete:first-child, .sd-actions-menu .dropdown-menu form:has(.sd-act-delete) { border-top: 1px solid var(--sd-line); margin-top: .3rem; padding-top: .3rem; }
.sd-actions-menu .dropdown-menu form:first-child:has(.sd-act-delete) { border-top: 0; margin-top: 0; padding-top: 0; }
.sd-actions-menu .dropdown-menu form:has(.sd-act-delete) + form:has(.sd-act-delete) { border-top: 0; margin-top: 0; padding-top: 0; }

/* Phase 3u: sidebar sub-links — the little dot belongs to the title only, not to the counter */
.sd-nav-sub .sd-nav-link > .sd-nav-badge::before { content: none !important; display: none !important; }
.sd-nav-sub .sd-nav-link > .sd-nav-badge { flex: 0 0 auto; }
.sd-nav-sub .sd-nav-link { gap: .45rem; }
.sd-nav-sub .sd-nav-link > span:not(.sd-nav-badge) { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-nav-sub .sd-nav-hint { flex: 0 0 auto; margin-inline-start: 0; }
.sd-nav-sub .sd-nav-link { padding-inline: .5rem; font-size: .82rem; }
.sd-nav-sub .sd-nav-link:not(.active) > span:not(.sd-nav-badge)::before { margin-inline-end: .45rem; }
.sd-nav-sub { margin-inline-start: .95rem; padding-inline-start: .3rem; }
.sd-nav-sub .sd-nav-badge { min-width: 18px; height: 18px; padding: 0 5px; font-size: .64rem; }
.sd-nav-sub .sd-nav-link:not(.active) > span:not(.sd-nav-badge)::before { width: 4px; height: 4px; margin-inline-end: .4rem; }
.sd-nav-sub .sd-nav-link { gap: .35rem; letter-spacing: -.005em; }

/* Phase 3v: the page header (and its Actions menu) always sits above the cards below it */
.sd-page-head { position: relative; z-index: 40; }
.sd-actions-menu .dropdown-menu { z-index: 1070; }

/* ---------- Phase 3w: Health & Backups, buyers report ---------- */
.sd-ip-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border-radius: 999px; font-size: .8rem; border: 1px solid var(--sd-line-strong); background: var(--sd-raised); color: var(--sd-ink); }
.sd-ip-chip strong { color: var(--sd-muted); }
.sd-ip-chip.is-hot { border-color: color-mix(in srgb, #E11D48 45%, transparent); background: color-mix(in srgb, #E11D48 8%, var(--sd-surface)); }
.sd-ip-chip.is-hot strong { color: #E11D48; }
.sd-code-line { display: inline-block; max-width: 100%; overflow-x: auto; white-space: nowrap; padding: .35rem .6rem; border-radius: 8px; background: var(--sd-raised); border: 1px solid var(--sd-line); }
.sd-buyer-flag { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: color-mix(in srgb, #E11D48 12%, transparent); color: #E11D48; white-space: nowrap; }
.sd-buyer-flag.is-pending { background: color-mix(in srgb, #D97706 14%, transparent); color: #B45309; }
.sd-buyer-repeat { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: color-mix(in srgb, var(--brand-primary) 12%, transparent); color: var(--brand-primary); white-space: nowrap; }

/* ---------- Error logs ---------- */
.sd-log-levels { display: flex; flex-wrap: wrap; gap: .5rem; }
.sd-log-chip { --c: var(--sd-muted); display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--sd-line-strong); background: var(--sd-surface); color: var(--sd-ink); font-size: .85rem; font-weight: 600; text-decoration: none; text-transform: capitalize; }
.sd-log-chip strong { color: var(--c); }
.sd-log-chip.active { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--sd-surface)); }
.sd-log-chip.is-error, .sd-log-entry.is-error { --c: #E11D48; }
.sd-log-chip.is-warning, .sd-log-entry.is-warning { --c: #D97706; }
.sd-log-chip.is-info, .sd-log-entry.is-info { --c: #0284C7; }
.sd-log-chip.is-debug, .sd-log-entry.is-debug { --c: #64748B; }
.sd-log-list { display: flex; flex-direction: column; }
.sd-log-entry { border-bottom: 1px solid var(--sd-line); border-inline-start: 3px solid var(--c, var(--sd-line)); }
.sd-log-row { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; min-width: 0; }
.sd-log-level { flex: 0 0 auto; min-width: 4.5rem; text-align: center; padding: .1rem .5rem; border-radius: 6px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.sd-log-time { flex: 0 0 auto; font-size: .78rem; color: var(--sd-muted); }
.sd-log-msg { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; color: var(--sd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-log-details { padding: 0 1rem .9rem; }
.sd-log-details pre { margin: 0; max-height: 26rem; overflow: auto; padding: .85rem 1rem; border-radius: 10px; background: #0B0F24; color: #E2E8F0; font-size: .75rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 767.98px) {
    .sd-log-row { flex-wrap: wrap; row-gap: .35rem; }
    .sd-log-msg { flex-basis: 100%; order: 5; white-space: normal; }
}

/* ---------- Solid headset (Bootstrap Icons has no filled headset): <i class="bi bi-headset-solid"> ---------- */
.bi-headset-solid::before {
    content: "" !important;
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .8A7.2 7.2 0 0 0 .8 8v1.8h2.4V8a4.8 4.8 0 0 1 9.6 0v1.8h2.4V8A7.2 7.2 0 0 0 8 .8z'/%3E%3Crect x='.5' y='7.6' width='4.6' height='6.4' rx='1.6'/%3E%3Crect x='10.9' y='7.6' width='4.6' height='6.4' rx='1.6'/%3E%3Cpath d='M12.4 13.4h2v.3A2.3 2.3 0 0 1 12.1 16H9.6v-1.7h2.2a.6.6 0 0 0 .6-.6z'/%3E%3Crect x='6' y='14.2' width='4.6' height='1.8' rx='.9'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .8A7.2 7.2 0 0 0 .8 8v1.8h2.4V8a4.8 4.8 0 0 1 9.6 0v1.8h2.4V8A7.2 7.2 0 0 0 8 .8z'/%3E%3Crect x='.5' y='7.6' width='4.6' height='6.4' rx='1.6'/%3E%3Crect x='10.9' y='7.6' width='4.6' height='6.4' rx='1.6'/%3E%3Cpath d='M12.4 13.4h2v.3A2.3 2.3 0 0 1 12.1 16H9.6v-1.7h2.2a.6.6 0 0 0 .6-.6z'/%3E%3Crect x='6' y='14.2' width='4.6' height='1.8' rx='.9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =====================================================================
   Account themes: <html data-skin="classic | white | brand"> (users.ui_theme)
   Classic = the dark sidebar above (no overrides). Light / Dark mode still works on top of each.
   ===================================================================== */

/* ---------- White: light sidebar ---------- */
html[data-skin="white"] .sd-sidebar, html[data-skin="white"] .sd-sidebar.offcanvas-lg {
    --sb-ink: #334155; --sb-muted: #64748B; --sb-line: #E2E8F0;
    background: #FFFFFF !important; background-image: none !important;
    color: var(--sb-ink); border-inline-end: 1px solid var(--sb-line);
    --bs-offcanvas-bg: #FFFFFF; --bs-offcanvas-color: var(--sb-ink);
}
html[data-skin="white"] .sd-sidebar .offcanvas-body { scrollbar-color: #CBD5E1 transparent; }
html[data-skin="white"] .sd-nav-link:hover { background: #F1F5F9; color: #0F172A; }
html[data-skin="white"] .sd-nav-link:hover i:not(.sd-nav-hint) { color: var(--brand-primary); }
html[data-skin="white"] .sd-nav-link::after { background: linear-gradient(90deg, rgba(79, 70, 229, .10), rgba(79, 70, 229, 0)); }
/* active link: dark and a little bolder */
html[data-skin="white"] .sd-nav-link.active { background: #F1F5F9; color: #0B0F24; font-weight: 700; box-shadow: inset 0 0 0 1px #E2E8F0; }
html[data-skin="white"] .sd-nav-link.active i:not(.sd-nav-hint) { color: #0B0F24; }
html[data-skin="white"] .sd-nav-link.active::after { display: none; }
html[data-skin="white"] .sd-nav-link.active::before { background: #0B0F24; box-shadow: none; }
html[data-skin="white"] .sd-nav > li > .sd-nav-link.active > i:first-child { background: #0B0F24; color: #fff !important; box-shadow: 0 6px 14px -8px rgba(11, 15, 36, .7); }
html[data-skin="white"] .sd-nav > li > .sd-nav-link > i:first-child { background: #F1F5F9; }
html[data-skin="white"] .sd-nav > li > .sd-nav-link:hover > i:first-child { background: color-mix(in srgb, var(--brand-primary) 12%, #fff); }
html[data-skin="white"] .sd-nav-toggle.active { color: #0F172A; background: transparent; box-shadow: none; }
html[data-skin="white"] .sd-nav-sub .sd-nav-link:hover { color: #0B0F24; }
html[data-skin="white"] .sd-nav-sub .sd-nav-link.active { color: #0B0F24; font-weight: 700; background: #F1F5F9; }
html[data-skin="white"] .sd-nav-sub .sd-nav-link:not(.active) > span::before { background: #CBD5E1; }
html[data-skin="white"] .sd-nav-hint:hover { color: var(--brand-primary) !important; }
html[data-skin="white"] .sd-brand-full:not(.sd-brand-on-light) { display: none; }
html[data-skin="white"] .sd-brand-full.sd-brand-on-light { display: inline-block; }
html[data-skin="white"].sd-mini .sd-nav > li:hover > .sd-nav-sub, html[data-skin="white"].sd-mini .sd-nav > li:focus-within > .sd-nav-sub { background: #fff; border-color: #E2E8F0; box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .25); }
/* White in dark mode: a plain dark sidebar in the page colour (no navy glow) */
html[data-skin="white"][data-bs-theme="dark"] .sd-sidebar, html[data-skin="white"][data-bs-theme="dark"] .sd-sidebar.offcanvas-lg {
    --sb-ink: #CBD5E1; --sb-muted: #8B97AD; --sb-line: rgba(148, 163, 184, .14);
    background: var(--sd-surface) !important; --bs-offcanvas-bg: var(--sd-surface);
}
html[data-skin="white"][data-bs-theme="dark"] .sd-nav-link:hover { background: rgba(148, 163, 184, .08); color: #fff; }
html[data-skin="white"][data-bs-theme="dark"] .sd-nav-link.active { background: rgba(124, 58, 237, .18); color: #fff; box-shadow: none; }
html[data-skin="white"][data-bs-theme="dark"] .sd-nav-link.active i:not(.sd-nav-hint), html[data-skin="white"][data-bs-theme="dark"] .sd-nav-sub .sd-nav-link.active { color: #C4B5FD; }
html[data-skin="white"][data-bs-theme="dark"] .sd-nav > li > .sd-nav-link > i:first-child { background: rgba(148, 163, 184, .08); }
html[data-skin="white"][data-bs-theme="dark"] .sd-nav-link.active { font-weight: 700; }
html[data-skin="white"][data-bs-theme="dark"] .sd-nav-link.active::before { background: #fff; }
html[data-skin="white"][data-bs-theme="dark"] .sd-nav > li > .sd-nav-link.active > i:first-child { background: #fff; color: #0B0F24 !important; }
html[data-skin="white"][data-bs-theme="dark"] .sd-nav-sub .sd-nav-link.active { background: rgba(148, 163, 184, .1); color: #fff; }
html[data-skin="white"][data-bs-theme="dark"] .sd-nav-toggle.active { color: #fff; }
html[data-skin="white"][data-bs-theme="dark"] .sd-brand-full:not(.sd-brand-on-light) { display: inline-block; }
html[data-skin="white"][data-bs-theme="dark"] .sd-brand-full.sd-brand-on-light { display: none; }
html[data-skin="white"][data-bs-theme="dark"].sd-mini .sd-nav > li:hover > .sd-nav-sub { background: var(--sd-surface); border-color: rgba(148, 163, 184, .15); }
.sd-brand-full.sd-brand-on-light { display: none; }
html.sd-mini .sd-brand-full.sd-brand-on-light { display: none !important; }

/* ---------- White: dashboard boxes are white cards with the status colour as a bar along the bottom;
   on hover the box takes the light tint of its icon box ---------- */
/* admin + Support Admin status cards */
html[data-skin="white"] .sd-scard { background: var(--sd-surface); color: var(--sd-ink); border: 1px solid var(--sd-line); box-shadow: var(--sd-shadow-xs, 0 1px 2px rgba(11, 15, 36, .05)); }
html[data-skin="white"] .sd-scard::before { z-index: 0; inset-inline: 0; top: auto; bottom: 0; width: auto; height: 5px; border-radius: 0; background: var(--c); transition: none; }
html[data-skin="white"] .sd-scard::after { display: none; }
html[data-skin="white"] .sd-scard:hover { color: var(--sd-ink); background: color-mix(in srgb, var(--c) 12%, var(--sd-surface)); border-color: color-mix(in srgb, var(--c) 40%, var(--sd-line)); box-shadow: 0 18px 32px -18px color-mix(in srgb, var(--c) 70%, transparent); }
html[data-skin="white"] .sd-scard:hover .sd-scard-icon { background: color-mix(in srgb, var(--c) 22%, var(--sd-surface)); }
html[data-skin="white"] .sd-scard:hover::before { transform: none; }
html[data-skin="white"] .sd-scard-label { color: var(--sd-muted); opacity: 1; }
html[data-skin="white"] .sd-scard-count { color: var(--sd-ink); }
html[data-skin="white"] .sd-scard-icon { color: var(--c); opacity: .9; font-size: 1.35rem; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, transparent); }
html[data-skin="white"] .sd-scard:hover .sd-scard-icon { opacity: 1; }
html[data-skin="white"] .sd-scard-go { background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); }
/* PM status cards (Today / This month / Overall) */
html[data-skin="white"] .st-card { background: var(--sd-surface); color: var(--sd-ink); border: 1px solid var(--sd-line); }
html[data-skin="white"] .st-card::before { display: block; z-index: 1; inset-inline: 0; top: auto; bottom: 0; width: auto; height: 5px; background: var(--c); }
html[data-skin="white"] .st-card::after { display: none; }
html[data-skin="white"] .st-card:hover { color: var(--sd-ink); background: color-mix(in srgb, var(--c) 13%, var(--sd-surface)); border-color: color-mix(in srgb, var(--c) 40%, var(--sd-line)); box-shadow: 0 18px 32px -18px color-mix(in srgb, var(--c) 70%, transparent); }
html[data-skin="white"] .st-card:hover .st-card-head { background: color-mix(in srgb, var(--c) 18%, var(--sd-surface)); }
html[data-skin="white"] .st-card-grid { padding-top: 1rem; }
html[data-skin="white"] .st-card-head { padding-bottom: calc(.7rem + 5px); }
html[data-skin="white"] .st-card-head { background: color-mix(in srgb, var(--c) 6%, var(--sd-surface)); border-top: 1px solid var(--sd-line); }
html[data-skin="white"] .st-card-name { color: var(--sd-ink); }
html[data-skin="white"] .st-card-name i { color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }

html[data-skin="white"] .st-card-grid b { color: var(--sd-ink); }
html[data-skin="white"] .st-card-grid b.zero { color: var(--sd-line-strong); opacity: 1; }
html[data-skin="white"] .st-card-grid small { color: var(--sd-muted); }
html[data-skin="white"] .st-card-grid div + div { border-inline-start-color: var(--sd-line-strong); }
html[data-skin="white"] .st-card { box-shadow: var(--sd-shadow-xs); }
/* PM "Needs your attention" card */
html[data-skin="white"] .sd-alert-card { background: var(--sd-surface); color: var(--sd-ink); border: 1px solid var(--sd-line); border-bottom: 5px solid #7C3AED; box-shadow: var(--sd-shadow-xs); }
html[data-skin="white"] .sd-alert-card::after { display: none; }
html[data-skin="white"] .sd-alert-card:hover { background: color-mix(in srgb, #7C3AED 12%, var(--sd-surface)); box-shadow: 0 18px 32px -18px rgba(124, 58, 237, .55); }
html[data-skin="white"] .sd-alert-card:hover .sd-alert-split a { background: color-mix(in srgb, #7C3AED 6%, var(--sd-surface)); }
html[data-skin="white"] .sd-alert-card .sd-alert-icon { color: #7C3AED; background: color-mix(in srgb, #7C3AED 12%, transparent); box-shadow: none; }
html[data-skin="white"] .sd-alert-split a { background: var(--sd-raised); }
html[data-skin="white"] .sd-alert-split a:hover { background: color-mix(in srgb, #7C3AED 8%, var(--sd-raised)); }
html[data-skin="white"] .sd-alert-num { color: var(--sd-ink); }
html[data-skin="white"] .sd-alert-lbl { color: var(--sd-muted); opacity: 1; }
html[data-skin="white"] .sd-alert-foot { border-top-color: var(--sd-line); color: var(--sd-ink); }
html[data-skin="white"] .sd-alert-card .sd-hint { color: var(--sd-muted); }

/* ---------- Brand: indigo → violet sidebar ---------- */
html[data-skin="brand"] .sd-sidebar, html[data-skin="brand"] .sd-sidebar.offcanvas-lg {
    --sb-ink: rgba(255, 255, 255, .92); --sb-muted: rgba(237, 233, 254, .72); --sb-line: rgba(255, 255, 255, .16);
    background: #5B3FE6 !important;
    background-image: linear-gradient(180deg, #4F46E5 0%, #6D3FE9 55%, #7C3AED 100%) !important;
    --bs-offcanvas-bg: #5B3FE6;
}
html[data-skin="brand"] .sd-sidebar .offcanvas-body { scrollbar-color: rgba(255, 255, 255, .3) transparent; }
html[data-skin="brand"] .sd-brand::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); }
html[data-skin="brand"] .sd-nav-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
html[data-skin="brand"] .sd-nav-link:hover i:not(.sd-nav-hint) { color: #fff; }
html[data-skin="brand"] .sd-nav-link::after { background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)); }
html[data-skin="brand"] .sd-nav-link.active { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 24px -14px rgba(30, 27, 75, .8); }
html[data-skin="brand"] .sd-nav-link.active i:not(.sd-nav-hint) { color: #fff; }
html[data-skin="brand"] .sd-nav-link.active::before { background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .8); }
html[data-skin="brand"] .sd-nav > li > .sd-nav-link > i:first-child { background: rgba(255, 255, 255, .14); color: #fff; }
html[data-skin="brand"] .sd-nav > li > .sd-nav-link:hover > i:first-child { background: rgba(255, 255, 255, .24); }
html[data-skin="brand"] .sd-nav > li > .sd-nav-link.active > i:first-child { background: #fff; color: #5B3FE6 !important; box-shadow: 0 6px 14px -6px rgba(30, 27, 75, .6); }
html[data-skin="brand"] .sd-nav-sub .sd-nav-link.active { background: rgba(255, 255, 255, .18); }
html[data-skin="brand"] .sd-nav-sub .sd-nav-link:not(.active) > span::before { background: rgba(255, 255, 255, .5); }
html[data-skin="brand"] .sd-nav-sub .sd-nav-link:hover > span::before { background: #fff; }
html[data-skin="brand"] .sd-nav-hint:hover { color: #fff !important; }
html[data-skin="brand"] .sd-sidebar-foot { color: rgba(237, 233, 254, .7); }
html[data-skin="brand"].sd-mini .sd-nav > li:hover > .sd-nav-sub, html[data-skin="brand"].sd-mini .sd-nav > li:focus-within > .sd-nav-sub { background: #5B3FE6; border-color: rgba(255, 255, 255, .2); }
/* Brand in dark mode: the same gradient, deeper */
html[data-skin="brand"][data-bs-theme="dark"] .sd-sidebar, html[data-skin="brand"][data-bs-theme="dark"] .sd-sidebar.offcanvas-lg {
    background: #2E1F78 !important; background-image: linear-gradient(180deg, #312E81 0%, #3B1F8C 55%, #4C1D95 100%) !important; --bs-offcanvas-bg: #2E1F78;
}
html[data-skin="brand"][data-bs-theme="dark"] .sd-nav > li > .sd-nav-link.active > i:first-child { color: #4C1D95 !important; }
html[data-skin="brand"][data-bs-theme="dark"].sd-mini .sd-nav > li:hover > .sd-nav-sub { background: #34207F; }

/* ---------- Theme picker cards ---------- */
.sd-skin-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 575.98px) { .sd-skin-cards { grid-template-columns: 1fr; } }
.sd-skin-card { position: relative; display: flex; flex-direction: column; gap: .65rem; padding: .75rem; border: 2px solid var(--sd-line-strong); border-radius: 14px; cursor: pointer; background: var(--sd-surface); transition: border-color .15s, box-shadow .15s, transform .15s; }
.sd-skin-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--sd-line-strong)); }
.sd-skin-card:has(:checked) { border-color: var(--brand-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 16%, transparent); }
.sd-skin-card:has(:focus-visible) { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.sd-skin-tick { position: absolute; top: .55rem; inset-inline-end: .55rem; font-size: 1.15rem; color: var(--brand-primary); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.sd-skin-card:has(:checked) .sd-skin-tick { opacity: 1; transform: none; }
.sd-skin-text strong { display: block; color: var(--sd-ink); }
.sd-skin-text small { display: block; color: var(--sd-muted); font-size: .78rem; line-height: 1.35; }
.sd-skin-preview { display: flex; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--sd-line); background: #F4F5FA; }
.sd-skin-side { flex: 0 0 30%; display: flex; flex-direction: column; gap: 6px; padding: 12px 8px; background: #0B0F24; background-image: radial-gradient(120% 60% at 0% 0%, rgba(124, 58, 237, .35), transparent 60%); }
.sd-skin-side i { display: block; height: 7px; border-radius: 4px; background: rgba(203, 213, 225, .35); }
.sd-skin-side i.on { background: linear-gradient(90deg, #6366F1, #A855F7); }
.sd-skin-main { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 10px; }
.sd-skin-main b { display: block; height: 10px; width: 55%; border-radius: 4px; background: #CBD5E1; }
.sd-skin-row { display: flex; gap: 6px; }
.sd-skin-row em { flex: 1; height: 22px; border-radius: 6px; background: #fff; border: 1px solid #E2E8F0; }
.sd-skin-block { flex: 1; border-radius: 6px; background: #fff; border: 1px solid #E2E8F0; }
.sd-skin-preview.is-white .sd-skin-side { background: #fff; background-image: none; border-inline-end: 1px solid #E2E8F0; }
.sd-skin-preview.is-white .sd-skin-side i { background: #E2E8F0; }
.sd-skin-preview.is-white .sd-skin-side i.on { background: color-mix(in srgb, #4F46E5 22%, #fff); }
.sd-skin-preview.is-brand .sd-skin-side { background: linear-gradient(180deg, #4F46E5, #7C3AED); }
.sd-skin-preview.is-brand .sd-skin-side i { background: rgba(255, 255, 255, .35); }
.sd-skin-preview.is-brand .sd-skin-side i.on { background: #fff; }
[data-bs-theme="dark"] .sd-skin-preview { background: #0F1428; border-color: rgba(148, 163, 184, .15); }
[data-bs-theme="dark"] .sd-skin-row em, [data-bs-theme="dark"] .sd-skin-block { background: #171C33; border-color: rgba(148, 163, 184, .14); }
[data-bs-theme="dark"] .sd-skin-main b { background: #2A3350; }
/* little colour dot in the header menu */
.sd-skin-dot { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(148, 163, 184, .5); background: #0B0F24; }
.sd-skin-dot.is-white { background: #fff; }
.sd-skin-dot.is-brand { background: linear-gradient(135deg, #4F46E5, #7C3AED); border-color: transparent; }

/* ---------- Website fee: settle statement (earned − fee = paid to the PM) ---------- */
.sd-settle { display: flex; flex-direction: column; gap: .55rem; }
.sd-settle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sd-settle-row > span, .sd-settle-row > label { color: var(--sd-ink-2, var(--sd-ink)); font-weight: 500; }
.sd-settle-row > strong { font-size: 1.05rem; color: var(--sd-ink); white-space: nowrap; }
.sd-settle-row .form-control { max-width: 11rem; }
.sd-settle-row.is-total > span { font-weight: 700; color: var(--sd-ink); }
.sd-settle-row.is-total > strong { font-size: 1.4rem; font-weight: 800; color: var(--brand-primary); }
.sd-settle-row.is-total > strong.text-danger { color: #E11D48 !important; }

/* ---------- Website fee: the PM's statement page (hero + tiles + calculation + timeline) ---------- */
.sd-stmt { display: flex; flex-direction: column; gap: 1.25rem; }
.sd-stmt-hero { position: relative; overflow: hidden; padding: 1.5rem 1.6rem 1.4rem; border-radius: 20px; color: #fff; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary, #7C3AED)); box-shadow: 0 20px 40px -24px var(--brand-primary); }
.sd-stmt-hero::after { content: ""; position: absolute; inset-inline-end: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; }
.sd-stmt-hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.1rem; position: relative; z-index: 1; }
.sd-stmt-month, .sd-stmt-state { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: rgba(255, 255, 255, .16); }
.sd-stmt-state { background: rgba(255, 255, 255, .95); color: #15803D; }
.sd-stmt-hero-label { position: relative; z-index: 1; font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.sd-stmt-hero-amount { position: relative; z-index: 1; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; line-height: 1.1; margin: .2rem 0 .45rem; }
.sd-stmt-hero-amount.is-negative { color: #FECACA; }
.sd-stmt-hero-sub { position: relative; z-index: 1; font-size: .85rem; opacity: .85; }
.sd-stmt-hero-icon { position: absolute; inset-inline-end: 1.4rem; bottom: 1rem; font-size: 4.2rem; opacity: .16; }
.sd-stmt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sd-stmt-tile { --c: var(--brand-primary); display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.15rem; border: 1px solid var(--sd-line); border-radius: 16px; background: var(--sd-surface); }
.sd-stmt-tile.is-orders { --c: #0D9488; }
.sd-stmt-tile.is-earned { --c: #16A34A; }
.sd-stmt-tile.is-fee { --c: #E11D48; }
.sd-stmt-tile-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: .35rem; border-radius: 12px; font-size: 1.15rem; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--sd-surface)); }
.sd-stmt-tile-label { font-size: .82rem; font-weight: 500; color: var(--sd-muted); }
.sd-stmt-tile-value { font-size: 1.35rem; font-weight: 800; color: var(--sd-ink); }
.sd-stmt-tile.is-fee .sd-stmt-tile-value { color: var(--c); }
.sd-stmt-tile-foot { font-size: .75rem; color: var(--sd-muted); }
.sd-stmt-meter { height: 6px; margin-top: .3rem; border-radius: 999px; background: var(--sd-raised); overflow: hidden; }
.sd-stmt-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.sd-stmt-eq { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; }
.sd-stmt-eq > div:not(.sd-stmt-op) { flex: 1 1 140px; display: flex; flex-direction: column; gap: .2rem; padding: .8rem 1rem; border-radius: 12px; background: var(--sd-raised); }
.sd-stmt-eq > div > span { font-size: .78rem; color: var(--sd-muted); }
.sd-stmt-eq > div > strong { font-size: 1.1rem; font-weight: 700; color: var(--sd-ink); }
.sd-stmt-eq > div.is-total { background: color-mix(in srgb, var(--brand-primary) 10%, var(--sd-surface)); }
.sd-stmt-eq > div.is-total > strong { color: var(--brand-primary); font-weight: 800; }
.sd-stmt-op { display: grid; place-items: center; font-size: 1.3rem; font-weight: 700; color: var(--sd-muted); }
.sd-stmt-split { display: flex; height: 12px; margin-top: 1.2rem; border-radius: 999px; overflow: hidden; background: var(--sd-raised); }
.sd-stmt-split > .is-paid { background: #16A34A; }
.sd-stmt-split > .is-fee { background: #E11D48; }
.sd-stmt-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .55rem; font-size: .8rem; color: var(--sd-muted); }
.sd-stmt-legend i { display: inline-block; width: 10px; height: 10px; margin-inline-end: .35rem; border-radius: 3px; vertical-align: -1px; }
.sd-stmt-legend i.is-paid { background: #16A34A; }
.sd-stmt-legend i.is-fee { background: #E11D48; }
.sd-stmt-info { display: flex; gap: .5rem; margin: 1.1rem 0 0; padding: .7rem .9rem; border-radius: 10px; font-size: .85rem; color: var(--sd-muted); background: var(--sd-raised); }
.sd-stmt-note { display: flex; gap: .85rem; padding: 1rem 1.15rem; border: 1px solid var(--sd-line); border-inline-start: 4px solid var(--brand-primary); border-radius: 14px; background: var(--sd-surface); }
.sd-stmt-note-title { font-weight: 700; margin-bottom: .2rem; }
.sd-stmt-note-body { white-space: pre-line; color: var(--sd-ink); }
.sd-stmt-timeline { list-style: none; margin: 0; padding: 0; }
.sd-stmt-timeline > li { position: relative; display: flex; gap: .85rem; padding-bottom: 1.1rem; }
.sd-stmt-timeline > li:not(.is-last)::before { content: ""; position: absolute; inset-inline-start: 17px; top: 36px; bottom: 0; width: 2px; background: color-mix(in srgb, #16A34A 35%, var(--sd-line)); }
.sd-stmt-timeline > li > i { flex: 0 0 36px; display: grid; place-items: center; height: 36px; border-radius: 50%; color: #16A34A; background: color-mix(in srgb, #16A34A 12%, var(--sd-surface)); }
.sd-stmt-timeline > li > div { display: flex; flex-direction: column; padding-top: .2rem; }
.sd-stmt-timeline > li strong { font-weight: 600; }
.sd-stmt-timeline > li span { font-size: .82rem; color: var(--sd-muted); }
.sd-stmt-timeline > li.is-last { padding-bottom: 0; }
.sd-stmt.is-compact .sd-stmt-hero { padding: 1.25rem 1.35rem; }
@media (max-width: 767.98px) {
    .sd-stmt-tiles { grid-template-columns: 1fr; }
    .sd-stmt-op { width: 100%; padding: 0; font-size: 1rem; }
}

/* ---------- Android app: sidebar card, profile menu pill, "Android app" page ---------- */
.sd-side-app { display: flex; align-items: center; gap: .7rem; margin: auto .85rem .75rem; padding: .7rem .8rem; border: 1px solid var(--sb-line, rgba(148, 163, 184, .14)); border-radius: 14px; color: var(--sb-ink, #CBD5E1); text-decoration: none; background: linear-gradient(135deg, rgba(34, 197, 94, .12), rgba(79, 70, 229, .10)); transition: border-color .15s ease, transform .15s ease; }
.sd-side-app:hover { color: var(--sb-ink, #CBD5E1); border-color: rgba(34, 197, 94, .45); transform: translateY(-1px); }
.sd-side-app + .sd-sidebar-foot { margin-top: 0; }
.sd-side-app-icon { flex: 0 0 34px; display: grid; place-items: center; height: 34px; border-radius: 10px; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, #22C55E, #16A34A); box-shadow: 0 8px 16px -10px #16A34A; }
.sd-side-app-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sd-side-app-text strong { font-size: .84rem; font-weight: 700; white-space: nowrap; }
.sd-side-app-text small { font-size: .7rem; color: var(--sb-muted, #7C8AA5); }
.sd-side-app > .bi-chevron-right { margin-inline-start: auto; font-size: .75rem; color: var(--sb-muted, #7C8AA5); }
html.sd-mini .sd-side-app { display: none; }
.sd-app-pill { padding: .1rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700; color: #15803D; background: rgba(34, 197, 94, .14); }
.sd-app-pill.is-soon { color: #B45309; background: rgba(245, 158, 11, .16); }
.sd-side-app-soon { margin-inline-start: auto; padding: .12rem .45rem; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .02em; color: #FBBF24; background: rgba(245, 158, 11, .16); }
html[data-skin="white"] .sd-side-app-soon { color: #B45309; }
.sd-side-app.is-soon .sd-side-app-icon { background: linear-gradient(135deg, #64748B, #475569); box-shadow: none; }

.sd-app-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 2rem; padding: 2rem 2.1rem; border-radius: 22px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #7C3AED 0%, transparent 55%), linear-gradient(135deg, #0F172A, var(--brand-primary)); box-shadow: 0 24px 48px -28px var(--brand-primary); }
.sd-app-hero-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.sd-app-hero h2 { margin: .9rem 0 .5rem; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; color: #fff; }
.sd-app-hero p { margin: 0 0 1.4rem; max-width: 34rem; color: rgba(255, 255, 255, .82); }
.sd-app-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: rgba(255, 255, 255, .14); }
.sd-app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.sd-app-download { font-weight: 700; color: #0F172A; border-radius: 14px; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6); }
.sd-app-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; color: rgba(255, 255, 255, .8); }
.sd-app-meta i { margin-inline-end: .3rem; }
.sd-app-soon { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, .12); }
.sd-app-phone { flex: 0 0 150px; height: 270px; padding: 9px; border-radius: 28px; background: #0B0F24; border: 2px solid rgba(255, 255, 255, .25); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .7); transform: rotate(6deg); animation: sd-float 5s ease-in-out infinite; }
.sd-app-phone-screen { height: 100%; padding: 18px 12px; border-radius: 20px; background: linear-gradient(180deg, #F8FAFC, #EEF2FF); display: flex; flex-direction: column; gap: 7px; }
.sd-app-phone-logo { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--brand-primary), #7C3AED); }
.sd-app-phone-screen > span { height: 7px; border-radius: 4px; background: #CBD5E1; }
.sd-app-phone-screen > span.is-short { width: 60%; }
.sd-app-phone-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.sd-app-phone-cards i { height: 44px; border-radius: 9px; background: #fff; box-shadow: inset 0 -3px 0 #22C55E; }
.sd-app-phone-cards i:nth-child(2) { box-shadow: inset 0 -3px 0 var(--brand-primary); }
.sd-app-phone-cards i:nth-child(3) { box-shadow: inset 0 -3px 0 #F59E0B; }
.sd-app-phone-cards i:nth-child(4) { box-shadow: inset 0 -3px 0 #E11D48; }
.sd-app-notes { white-space: pre-line; }
.sd-app-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sd-app-steps > li { display: flex; gap: .9rem; }
.sd-app-steps > li > span { flex: 0 0 34px; display: grid; place-items: center; height: 34px; border-radius: 50%; font-weight: 800; color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 12%, var(--sd-surface)); }
.sd-app-steps strong { display: block; margin-bottom: .15rem; }
.sd-app-steps p { margin: 0; font-size: .88rem; color: var(--sd-muted); }
.sd-app-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.sd-app-facts li { display: flex; gap: .7rem; font-size: .9rem; }
.sd-app-facts i { color: var(--brand-primary); font-size: 1.05rem; }
@media (max-width: 767.98px) {
    .sd-app-hero { padding: 1.5rem; }
    .sd-app-phone { display: none; }
}

/* ---------- Account: tabs (scroll on phones) + signed-in devices ---------- */
@media (max-width: 767.98px) {
    .sd-seg-scroll { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .sd-seg-scroll::-webkit-scrollbar { display: none; }
    .sd-seg-scroll a { flex: 0 0 auto; white-space: nowrap; }
}
.sd-device { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--sd-line); }
.sd-device:first-of-type { border-top: 0; }
.sd-device-icon { flex: 0 0 38px; display: grid; place-items: center; height: 38px; border-radius: 11px; color: #16A34A; background: color-mix(in srgb, #16A34A 12%, var(--sd-surface)); }
.sd-device-empty { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-radius: 10px; font-size: .875rem; color: var(--sd-muted); background: var(--sd-raised); }