:root {
    color-scheme: light;
    --color-ink: #17212f;
    --color-muted: #526176;
    --color-subtle: #667085;
    --color-primary: #3656c7;
    --color-primary-dark: #2946a9;
    --color-primary-soft: #e8edff;
    --color-primary-button: #3656c7;
    --color-primary-button-text: #ffffff;
    --color-background: #f5f7fb;
    --color-surface: #ffffff;
    --color-surface-alt: #f8f9fc;
    --color-input: #ffffff;
    --color-border: #dce2ec;
    --color-border-strong: #c5cedc;
    --color-divider: #e8ecf2;
    --color-success: #247e61;
    --color-success-soft: #e5f6ef;
    --color-danger: #b83f48;
    --color-danger-soft: #ffebed;
    --color-danger-button-text: #ffffff;
    --color-warning: #94600e;
    --color-warning-soft: #fff3d9;
    --color-violet: #7050bd;
    --color-ring-track: #e5eaf1;
    --color-overlay: rgba(23, 33, 47, .38);
    --tone-blue-bg: #e8edff;
    --tone-blue-fg: #3656c7;
    --tone-violet-bg: #eee9ff;
    --tone-violet-fg: #7050bd;
    --tone-amber-bg: #fff1d2;
    --tone-amber-fg: #94600e;
    --tone-green-bg: #e5f6ef;
    --tone-green-fg: #247e61;
    --focus-ring: rgba(71, 103, 232, .48);
    --primary-shadow: rgba(71, 103, 232, .2);
    --shadow-soft: 0 8px 24px rgba(36, 52, 84, .07);
    --shadow-float: 0 16px 40px rgba(36, 52, 84, .16);
    --font-body: "DM Sans", sans-serif;
    --font-display: "Manrope", sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --sidebar-width: 254px;
    --topbar-height: 76px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-ink: #f4f7fb;
    --color-muted: #b4c0d0;
    --color-subtle: #98a6b9;
    --color-primary: #a0b0ff;
    --color-primary-dark: #b3c0ff;
    --color-primary-soft: #27365d;
    --color-primary-button: #8499ff;
    --color-primary-button-text: #111a2b;
    --color-background: #111927;
    --color-surface: #182332;
    --color-surface-alt: #202d3e;
    --color-input: #121c2a;
    --color-border: #304054;
    --color-border-strong: #46566d;
    --color-divider: #2b394c;
    --color-success: #69d5ac;
    --color-success-soft: #1d413c;
    --color-danger: #ff9b9f;
    --color-danger-soft: #482c37;
    --color-danger-button-text: #24151b;
    --color-warning: #f2c272;
    --color-warning-soft: #4b3c27;
    --color-violet: #c0a7ff;
    --color-ring-track: #34445a;
    --color-overlay: rgba(4, 8, 15, .62);
    --tone-blue-bg: #27365d;
    --tone-blue-fg: #a0b0ff;
    --tone-violet-bg: #3b315d;
    --tone-violet-fg: #c0a7ff;
    --tone-amber-bg: #4b3c27;
    --tone-amber-fg: #f2c272;
    --tone-green-bg: #1d413c;
    --tone-green-fg: #69d5ac;
    --focus-ring: rgba(160, 176, 255, .65);
    --primary-shadow: rgba(0, 0, 0, .28);
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, .18);
    --shadow-float: 0 16px 40px rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; overflow-x: hidden; }
html { background: var(--color-background); }
body {
    margin: 0;
    color: var(--color-ink);
    background: var(--color-background);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    transition: background-color .2s ease, color .2s ease;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
::placeholder { color: var(--color-subtle); opacity: 1; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    background: var(--color-surface);
    border-inline-end: 1px solid var(--color-border);
    display: flex;
    flex: 0 0 var(--sidebar-width);
    flex-direction: column;
    min-height: 100vh;
    padding: 24px 14px 18px;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-width);
    z-index: 1040;
}
.sidebar-header { align-items: center; display: flex; justify-content: space-between; padding: 0 12px 31px; }
.brand { align-items: center; display: inline-flex; gap: 10px; }
.brand-logo { display: block; height: 32px; max-width: 100%; object-fit: contain; object-position: left center; width: 190px; }
.brand-logo-dark { display: none; }
html[data-theme="dark"] .brand-logo-light { display: none; }
html[data-theme="dark"] .brand-logo-dark { display: block; }
.brand-mark { align-items: center; background: var(--color-primary-button); border-radius: 9px; color: var(--color-primary-button-text); display: inline-flex; font-family: var(--font-display); font-size: 18px; font-weight: 800; height: 32px; justify-content: center; letter-spacing: -.08em; width: 32px; }
.brand-name { color: var(--color-ink); font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: .08em; }
.sidebar-nav { flex: 1; overflow-y: auto; }
.nav-section { margin-bottom: 25px; }
.nav-section-label { color: var(--color-subtle); font-size: 14px; font-weight: 700; letter-spacing: .1em; margin: 0 12px 8px; text-transform: uppercase; }
.nav-link, .nav-group-toggle { align-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--color-muted); display: flex; font-size: 16px; font-weight: 600; gap: 12px; margin: 2px 0; min-height: 40px; padding: 9px 12px; transition: background .2s ease, color .2s ease, transform .2s ease; width: 100%; }
.nav-link i, .nav-group-toggle i:first-child { color: var(--color-subtle); font-size: 17px; width: 17px; }
.nav-link:hover, .nav-group-toggle:hover { background: var(--color-surface-alt); color: var(--color-primary); }
.nav-link:hover { transform: translateX(2px); }
.nav-link.active { background: var(--color-primary-soft); color: var(--color-primary); }
.nav-link.active i { color: var(--color-primary); }
.nav-group-toggle { justify-content: space-between; }
.nav-group-toggle > span { align-items: center; display: flex; gap: 12px; }
.nav-group-toggle > i { color: var(--color-subtle); font-size: 12px; transition: transform .2s ease; }
.nav-group-toggle[aria-expanded="false"] > i { transform: rotate(-90deg); }
.nav-group { padding: 2px 0; padding-inline-start: 29px; }
.nav-group .nav-link { font-size: 15px; min-height: 34px; padding: 6px 12px; }
.sidebar-footer { border-top: 1px solid var(--color-border); padding: 17px 4px 0; }
.sidebar-help { align-items: center; background: var(--color-surface-alt); border-radius: 10px; display: flex; gap: 9px; padding: 11px 9px; }
.help-icon { align-items: center; background: var(--color-primary-soft); border-radius: 8px; color: var(--color-primary); display: inline-flex; flex: 0 0 29px; height: 29px; justify-content: center; }
.sidebar-help div { display: flex; flex: 1; flex-direction: column; gap: 1px; }
.sidebar-help strong { font-size: 15px; }
.sidebar-help small { color: var(--color-muted); font-size: 14px; }
.sidebar-help > i { color: var(--color-subtle); font-size: 14px; }
.app-main { margin-inline-start: var(--sidebar-width); min-width: 0; width: calc(100% - var(--sidebar-width)); }

.topbar { align-items: center; background: var(--color-surface); border-bottom: 1px solid var(--color-border); display: flex; height: var(--topbar-height); justify-content: space-between; padding: 0 42px; position: relative; z-index: 10; }
.topbar-start, .topbar-actions { align-items: center; display: flex; }
.topbar-context { display: flex; flex-direction: column; gap: 1px; margin-inline-start: 16px; }
.context-label { color: var(--color-subtle); font-size: 14px; }
.context-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.icon-button { align-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--color-muted); display: inline-flex; height: 36px; justify-content: center; padding: 0; transition: background .2s ease, color .2s ease; width: 36px; }
.icon-button:hover { background: var(--color-background); color: var(--color-primary); }
.sidebar-trigger { display: none; }
.client-switcher { align-items: center; background: transparent; border: 0; color: var(--color-ink); display: flex; gap: 10px; padding: 4px 7px; text-align: start; }
.client-avatar, .user-avatar { align-items: center; background: var(--color-primary-soft); border-radius: 50%; color: var(--color-primary); display: inline-flex; flex: 0 0 34px; font-size: 14px; font-weight: 700; height: 34px; justify-content: center; }
.client-avatar.small { flex-basis: 27px; font-size: 14px; height: 27px; }
.client-info, .user-copy { display: flex; flex-direction: column; gap: 0; }
.client-info small, .user-copy small { color: var(--color-subtle); font-size: 14px; line-height: 1.2; }
.client-info strong { font-size: 15px; font-weight: 700; }
.client-switcher > i, .user-trigger > i { color: var(--color-subtle); font-size: 14px; margin-inline-start: 3px; }
.topbar-divider { background: var(--color-border); height: 27px; margin: 0 16px; width: 1px; }
.notification-button { position: relative; }
.notification-button i { font-size: 18px; }
.notification-dot { background: var(--color-primary); border: 2px solid var(--color-surface); border-radius: 50%; height: 7px; inset-block-start: 7px; inset-inline-end: 7px; position: absolute; width: 7px; }
.user-trigger { align-items: center; background: transparent; border: 0; color: var(--color-ink); display: flex; gap: 9px; margin-inline-start: 8px; padding: 3px 0; padding-inline-start: 7px; text-align: start; }
.user-avatar { background: var(--color-warning-soft); color: var(--color-warning); }
.user-copy strong { font-size: 15px; line-height: 1.3; }
.user-dropdown { --bs-dropdown-bg: var(--color-surface); --bs-dropdown-color: var(--color-ink); --bs-dropdown-link-color: var(--color-ink); --bs-dropdown-link-hover-bg: var(--color-background); --bs-dropdown-border-color: var(--color-border); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: var(--shadow-float); margin-top: 8px !important; min-width: 240px; padding: 6px; }
.user-dropdown .dropdown-item { border-radius: 6px; color: var(--color-ink); font-size: 15px; padding: 9px 10px; }
.user-dropdown .dropdown-item:hover, .user-dropdown .dropdown-item:focus { background: var(--color-background); color: var(--color-ink); }
.user-dropdown .dropdown-item.text-danger { color: var(--color-danger) !important; }
.user-dropdown .dropdown-divider { border-top-color: var(--color-divider); }
.user-dropdown .dropdown-item i { margin-inline-end: 8px; }
.appearance-menu { border-top: 1px solid var(--color-divider); margin-top: 5px; padding: 10px 4px 4px; }
.appearance-label { color: var(--color-subtle); display: block; font-size: 14px; font-weight: 700; margin: 0 6px 6px; }
.appearance-options { display: grid; gap: 3px; grid-template-columns: repeat(3, 1fr); }
.theme-option { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 7px; color: var(--color-muted); display: flex; flex-direction: column; font-size: 14px; gap: 3px; padding: 7px 3px; }
.theme-option i { font-size: 16px; }
.theme-option:hover, .theme-option[aria-checked="true"] { background: var(--color-primary-soft); border-color: var(--color-border); color: var(--color-primary); }

.content-area { margin: 0 auto; max-width: 1450px; padding: 38px 42px 56px; }
.page-header { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 30px; }
.eyebrow { color: var(--color-primary); font-size: 14px; font-weight: 700; letter-spacing: .1em; margin: 0 0 8px; text-transform: uppercase; }
.page-header h1 { font-family: var(--font-display); font-size: 32px; letter-spacing: -.04em; line-height: 1.2; margin: 0 0 8px; }
.page-description { color: var(--color-muted); margin: 0; }
.page-actions { display: flex; gap: 10px; }
.button { align-items: center; border: 1px solid transparent; border-radius: 8px; display: inline-flex; font-size: 16px; font-weight: 700; gap: 8px; justify-content: center; min-height: 42px; padding: 9px 15px; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--color-primary-button); box-shadow: 0 5px 12px var(--primary-shadow); color: var(--color-primary-button-text); }
.button-primary:hover { background: var(--color-primary-dark); color: var(--color-primary-button-text); }
.button-secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-ink); }
.button-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.button-danger { background: var(--color-danger); color: var(--color-danger-button-text); }
.button-icon { min-width: 42px; padding: 9px; }
.button-block { width: 100%; }
.button:disabled { background: var(--color-surface-alt); color: var(--color-subtle); opacity: 1; transform: none; }
.button.is-loading { cursor: wait; }

.metric-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }
.metric-card, .standard-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.metric-card { min-height: 171px; padding: 20px; }
.metric-top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; }
.metric-icon, .quick-icon { align-items: center; border-radius: 9px; display: inline-flex; height: 37px; justify-content: center; width: 37px; }
.metric-icon i, .quick-icon i { font-size: 17px; }
.metric-menu { color: var(--color-subtle); }
.metric-card p { color: var(--color-muted); font-size: 15px; margin: 0 0 4px; }
.metric-card > strong { display: block; font-family: var(--font-display); font-size: 30px; letter-spacing: -.04em; line-height: 1.2; }
.metric-change { align-items: center; display: flex; font-size: 14px; font-weight: 700; gap: 3px; margin-top: 10px; }
.metric-change.positive { color: var(--color-success); }
.metric-change.neutral { color: var(--color-warning); }
.metric-change em { color: var(--color-muted); font-size: 14px; font-style: normal; font-weight: 400; margin-inline-start: 3px; }
.tone-blue { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }.tone-violet { background: var(--tone-violet-bg); color: var(--tone-violet-fg); }.tone-amber { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }.tone-green { background: var(--tone-green-bg); color: var(--tone-green-fg); }

.dashboard-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); margin-bottom: 20px; }
.standard-card { padding: 24px; }
.card-heading { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 22px; }
.card-heading h2 { font-family: var(--font-display); font-size: 18px; letter-spacing: -.02em; margin: 0 0 4px; }
.card-heading p { color: var(--color-muted); font-size: 14px; margin: 0; }
.text-action, .device-link { color: var(--color-primary); font-size: 14px; font-weight: 700; white-space: nowrap; }
.text-action i { font-size: 14px; margin-inline-start: 3px; }
.activity-list { display: flex; flex-direction: column; }
.activity-item { align-items: center; border-top: 1px solid var(--color-divider); display: flex; gap: 12px; min-height: 59px; padding: 10px 0; }
.activity-item:first-child { border-top: 0; }
.activity-icon { align-items: center; border-radius: 9px; display: inline-flex; flex: 0 0 33px; height: 33px; justify-content: center; }
.activity-icon i { font-size: 15px; }
.activity-interaction { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }.activity-campaign { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }.activity-support { background: var(--color-danger-soft); color: var(--color-danger); }.activity-started { background: var(--tone-violet-bg); color: var(--tone-violet-fg); }.activity-finished { background: var(--color-success-soft); color: var(--color-success); }
.activity-copy { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }.activity-copy strong { font-size: 15px; }.activity-copy span, .activity-item time { color: var(--color-muted); font-size: 14px; }.activity-item time { white-space: nowrap; }
.device-overview { align-items: center; display: flex; gap: 25px; justify-content: center; margin: 22px 0 27px; }
.health-ring { align-items: center; background: conic-gradient(var(--color-success) var(--health), var(--color-ring-track) 0); border-radius: 50%; display: flex; height: 125px; justify-content: center; position: relative; width: 125px; }
.health-84 { --health: 84%; }
.health-ring::after { background: var(--color-surface); border-radius: 50%; content: ""; height: 95px; position: absolute; width: 95px; }
.health-ring > div { align-items: center; display: flex; flex-direction: column; position: relative; text-align: center; z-index: 1; }
.health-ring strong { font-family: var(--font-display); font-size: 22px; letter-spacing: -.04em; }.health-ring span { color: var(--color-muted); font-size: 14px; }
.device-legend { display: flex; flex: 1; flex-direction: column; gap: 13px; }.legend-row { align-items: center; display: flex; font-size: 15px; justify-content: space-between; }.legend-row > span { align-items: center; color: var(--color-muted); display: flex; gap: 7px; }.legend-row strong { font-size: 15px; }.legend-dot { border-radius: 50%; height: 8px; width: 8px; }.legend-dot.success { background: var(--color-success); }.legend-dot.danger { background: var(--color-danger); }.legend-dot.neutral { background: var(--color-subtle); }.device-link { border-top: 1px solid var(--color-border); display: block; padding-top: 17px; }.device-link i { float: right; }
.quick-card { padding-bottom: 20px; }.quick-links { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }.quick-links a { align-items: center; background: var(--color-surface-alt); border: 1px solid transparent; border-radius: 10px; display: flex; gap: 11px; min-width: 0; padding: 13px; transition: border .2s ease, background .2s ease; }.quick-links a:hover { background: var(--color-surface); border-color: var(--color-border); }.quick-links a > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }.quick-links strong { font-size: 15px; }.quick-links small { color: var(--color-muted); font-size: 14px; margin-top: 2px; }.quick-links > a > i { color: var(--color-subtle); font-size: 14px; }

.client-popover { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 11px; box-shadow: var(--shadow-float); padding: 9px; position: fixed; right: 188px; top: 65px; width: 250px; z-index: 1050; }.client-popover[hidden] { display: none; }.client-popover form { margin: 0; }.popover-label { color: var(--color-subtle); font-size: 14px; font-weight: 700; letter-spacing: .08em; margin: 4px 8px 7px; text-transform: uppercase; }.client-option { align-items: center; background: transparent; border: 0; border-radius: 7px; color: var(--color-ink); display: flex; font-size: 15px; gap: 9px; padding: 8px; text-align: left; width: 100%; }.client-option:hover { background: var(--color-background); }.client-option i { color: var(--color-primary); margin-left: auto; }
.empty-state-card { align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: flex; flex-direction: column; margin: 35px auto; max-width: 560px; padding: 55px 30px; text-align: center; }.empty-state-icon { align-items: center; background: var(--color-primary-soft); border-radius: 50%; color: var(--color-primary); display: flex; font-size: 24px; height: 58px; justify-content: center; margin-bottom: 18px; width: 58px; }.empty-state-card h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 8px; }.empty-state-card p { color: var(--color-muted); font-size: 15px; margin: 0 0 23px; max-width: 430px; }
.breadcrumbs { align-items: center; color: var(--color-muted); display: flex; font-size: 14px; gap: 7px; margin-bottom: 22px; }.breadcrumbs i { color: var(--color-subtle); font-size: 14px; }.breadcrumbs span { color: var(--color-ink); font-weight: 600; }
.status-badge { align-items: center; border-radius: 20px; display: inline-flex; font-size: 14px; font-weight: 700; gap: 5px; padding: 5px 8px; }.status-success { background: var(--color-success-soft); color: var(--color-success); }.status-danger { background: var(--color-danger-soft); color: var(--color-danger); }.status-neutral { background: var(--color-surface-alt); color: var(--color-muted); }.status-dot { background: currentColor; border-radius: 50%; height: 6px; width: 6px; }

.listing-toolbar { align-items: center; display: flex; gap: 10px; justify-content: space-between; }.search-field { position: relative; }.search-field i { color: var(--color-subtle); left: 11px; position: absolute; top: 12px; }.search-field input { background: var(--color-input); border: 1px solid var(--color-border-strong); border-radius: 8px; color: var(--color-ink); font-size: 16px; min-height: 42px; padding: 8px 12px 8px 32px; }.search-field input:focus { border-color: var(--color-primary); outline: 0; }.field-group { display: flex; flex-direction: column; gap: 7px; }.field-group label { color: var(--color-ink); font-size: 15px; font-weight: 700; }.form-control, .form-select { background-color: var(--color-input); border-color: var(--color-border-strong); border-radius: 8px; color: var(--color-ink); font-size: 16px; min-height: 42px; }.form-control:focus, .form-select:focus { background-color: var(--color-input); border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(71, 103, 232, .18); color: var(--color-ink); }.field-error { color: var(--color-danger); font-size: 14px; }.required-mark { color: var(--color-danger); margin-left: 3px; }.inline-alert { align-items: center; border-radius: 8px; display: flex; font-size: 15px; gap: 8px; padding: 10px 12px; }.inline-alert-info { background: var(--color-primary-soft); color: var(--color-primary); }
.listing-heading { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 19px; }.listing-heading h2 { font-family: var(--font-display); font-size: 18px; margin: 0 0 4px; }.listing-heading p { color: var(--color-muted); font-size: 14px; margin: 0; }.listing-table { margin-top: 20px; }.listing-table table { border-collapse: collapse; min-width: 620px; width: 100%; }.listing-table th, .listing-table td { border-bottom: 1px solid var(--color-border); font-size: 14px; padding: 12px 10px; text-align: left; }.listing-table th { color: var(--color-muted); font-size: 14px; text-transform: uppercase; }.listing-empty { align-items: center; color: var(--color-muted); display: flex; flex-direction: column; gap: 5px; padding: 45px 20px; text-align: center; }.listing-empty i { color: var(--color-subtle); font-size: 27px; margin-bottom: 5px; }.listing-empty strong { color: var(--color-ink); font-size: 15px; }.listing-empty span { font-size: 14px; }.listing-pagination { align-items: center; border-top: 1px solid var(--color-border); color: var(--color-muted); display: flex; font-size: 14px; gap: 12px; justify-content: flex-end; margin-top: 17px; padding-top: 14px; }.listing-pagination .icon-button { height: 30px; width: 30px; }

.auth-shell { background: var(--color-background); }.login-page { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; overflow: hidden; padding: 42px 20px 25px; position: relative; }.login-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-float); max-width: 438px; padding: 37px 43px 31px; position: relative; width: 100%; z-index: 1; }.login-brand { margin-bottom: 40px; }.login-heading { margin-bottom: 22px; }.login-heading .eyebrow { margin-bottom: 11px; }.login-heading h1 { font-family: var(--font-display); font-size: 30px; letter-spacing: -.05em; margin: 0 0 7px; }.login-heading p { color: var(--color-muted); font-size: 16px; margin: 0; }.demo-notice { align-items: flex-start; background: var(--color-primary-soft); border: 1px solid var(--color-border); border-radius: 9px; color: var(--color-primary); display: flex; font-size: 15px; gap: 10px; margin-bottom: 25px; padding: 11px 12px; }.demo-notice i { font-size: 16px; margin-top: 1px; }.demo-notice div { display: flex; flex-direction: column; gap: 2px; }.demo-notice strong { font-size: 15px; }.demo-notice span { color: var(--color-muted); font-size: 14px; }.login-form { display: flex; flex-direction: column; gap: 18px; }.login-form .field-group { gap: 7px; }.login-form label { font-size: 15px; font-weight: 700; }.field-label-row { align-items: center; display: flex; justify-content: space-between; }.field-label-row a, .login-footer a { color: var(--color-primary); font-size: 14px; font-weight: 700; }.input-with-icon { position: relative; }.input-with-icon > i { color: var(--color-subtle); left: 12px; position: absolute; top: 13px; }.input-with-icon input { background: var(--color-input); border: 1px solid var(--color-border-strong); border-radius: 8px; color: var(--color-ink); font-size: 16px; min-height: 46px; padding: 9px 38px; width: 100%; }.input-with-icon input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(71, 103, 232, .18); outline: none; }.password-toggle { background: transparent; border: 0; color: var(--color-subtle); padding: 4px; position: absolute; right: 9px; top: 8px; }.check-control { align-items: center; color: var(--color-muted); cursor: pointer; display: flex; font-size: 15px; gap: 8px; }.check-control input { height: 1px; opacity: 0; position: absolute; width: 1px; }.check-box { align-items: center; border: 1px solid var(--color-border-strong); border-radius: 4px; color: var(--color-primary-button-text); display: inline-flex; height: 18px; justify-content: center; width: 18px; }.check-box i { display: none; font-size: 14px; }.check-control input:checked + .check-box { background: var(--color-primary-button); border-color: var(--color-primary-button); }.check-control input:checked + .check-box i { display: block; }.login-footer { color: var(--color-muted); font-size: 14px; margin: 25px 0 0; text-align: center; }.auth-footer { bottom: 20px; color: var(--color-subtle); display: flex; font-size: 14px; justify-content: space-between; max-width: 438px; position: absolute; width: calc(100% - 40px); }.login-decoration { border: 1px solid rgba(71, 103, 232, .16); border-radius: 50%; height: 360px; position: absolute; width: 360px; }.decoration-one { left: -180px; top: 15%; }.decoration-two { bottom: -230px; right: -130px; }

.check-control input:focus-visible + .check-box { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.remember-session-control { display: flex; flex-direction: column; gap: 8px; margin-top: -3px; }.remember-session-control .check-control { align-items: center; color: var(--color-ink); display: inline-flex; font-size: 14px; gap: 9px; }.remember-session-control .check-control input { height: 1px; opacity: 0; position: absolute; width: 1px; }.remember-session-control .check-box { border: 1px solid var(--color-border-strong); border-radius: 4px; display: inline-block; flex: 0 0 auto; height: 18px; position: relative; width: 18px; }.remember-session-control .check-control input:checked + .check-box { background: var(--color-primary); border-color: var(--color-primary); }.remember-session-control .check-control input:checked + .check-box::after { border-bottom: 2px solid #fff; border-right: 2px solid #fff; content: ''; height: 9px; left: 5px; position: absolute; top: 2px; transform: rotate(45deg); width: 5px; }.remember-session-control .check-control input:focus-visible + .check-box { outline: 3px solid var(--focus-ring); outline-offset: 2px; }.remember-session-warning { align-items: flex-start; background: var(--color-warning-soft); border: 1px solid color-mix(in srgb, var(--color-warning) 35%, var(--color-border)); border-radius: 8px; color: var(--color-ink); display: flex; font-size: 13px; gap: 8px; line-height: 1.4; margin: 0; padding: 9px 10px; }.remember-session-warning i { color: var(--color-warning); flex: 0 0 auto; }.remember-session-warning[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media (max-width: 1100px) { .topbar { padding: 0 28px; }.content-area { padding: 32px 28px 45px; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.client-popover { right: 160px; } }
@media (max-width: 800px) { :root { --sidebar-width: 254px; }.sidebar { box-shadow: var(--shadow-float); transform: translateX(-100%); transition: transform .25s ease; }.sidebar.is-open { transform: translateX(0); }.app-backdrop { background: var(--color-overlay); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .25s ease; z-index: 1030; }.app-backdrop.is-visible { opacity: 1; pointer-events: auto; }.app-main { margin-left: 0; width: 100%; }.sidebar-trigger { display: inline-flex; }.topbar { height: 66px; padding: 0 18px; }.topbar-context { margin-left: 7px; }.topbar-actions { gap: 4px; }.client-switcher { padding: 3px; }.client-info, .topbar-divider, .user-copy, .user-trigger > i { display: none; }.client-switcher > i { margin-left: 0; }.user-trigger { margin-left: 2px; padding-left: 4px; }.client-popover { right: 86px; top: 57px; }.content-area { padding: 28px 18px 40px; }.page-header { align-items: flex-start; flex-direction: column; gap: 20px; }.page-header h1 { font-size: 30px; }.page-actions { width: 100%; }.page-actions .button { flex: 1; }.dashboard-grid { grid-template-columns: 1fr; }.quick-links { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .metric-grid { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.metric-card { min-height: 155px; padding: 14px; }.metric-top { margin-bottom: 14px; }.metric-card > strong { font-size: 26px; }.metric-card p { font-size: 14px; min-height: 42px; }.metric-change { align-items: flex-start; flex-wrap: wrap; }.metric-change em { flex-basis: 100%; margin-left: 0; }.standard-card { padding: 18px 15px; }.card-heading { margin-bottom: 16px; }.activity-item { align-items: flex-start; }.activity-copy span { line-height: 1.35; }.device-overview { gap: 17px; }.health-ring { height: 104px; width: 104px; }.health-ring::after { height: 80px; width: 80px; }.health-ring strong { font-size: 19px; }.device-legend { gap: 10px; }.topbar-context { display: none; }.client-popover { right: 52px; }.login-page { padding: 25px 15px 60px; }.login-panel { padding: 29px 22px 25px; }.login-brand { margin-bottom: 31px; }.auth-footer { align-items: center; bottom: 17px; flex-direction: column; gap: 3px; }.login-decoration { display: none; }.appearance-options { grid-template-columns: 1fr; }.theme-option { flex-direction: row; gap: 8px; justify-content: flex-start; padding: 8px; text-align: left; } }
.language-menu { position: relative; }
.language-trigger { align-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--color-ink); display: inline-flex; gap: 5px; min-height: 36px; padding: 4px 7px; }
.language-trigger:hover, .language-trigger[aria-expanded="true"] { background: var(--color-background); color: var(--color-primary); }
.language-trigger:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.language-trigger > .bi-translate { font-size: 17px; }
.language-trigger > .bi-chevron-down { color: var(--color-subtle); font-size: 12px; margin-inline-start: 1px; }
.language-code { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.language-dropdown { --bs-dropdown-bg: var(--color-surface); --bs-dropdown-color: var(--color-ink); --bs-dropdown-border-color: var(--color-border); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 11px; box-shadow: var(--shadow-float); margin-top: 8px !important; max-width: calc(100vw - 24px); min-width: 184px; padding: 9px; }
.language-dropdown .popover-label { margin-bottom: 7px; }
.language-option { align-items: center; background: transparent; border: 0; border-radius: 7px; color: var(--color-ink); display: flex; font-size: 15px; gap: 9px; min-height: 40px; padding: 8px; text-align: start; width: 100%; }
.language-option:hover, .language-option:focus, .language-option[aria-pressed="true"] { background: var(--color-background); color: var(--color-ink); }
.language-option:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -2px; }
.language-option i { color: var(--color-primary); margin-inline-start: auto; }
.device-link i { float: none; margin-inline-start: .35rem; }
.client-option, .user-trigger { text-align: start; }
.search-field i { inset-inline-start: 11px; left: auto; right: auto; }
.search-field input { padding-inline-start: 32px; }
.input-with-icon > i { inset-inline-start: 12px; left: auto; right: auto; }
.password-toggle { inset-inline-end: 9px; left: auto; right: auto; }
.listing-table th, .listing-table td { text-align: start; }

html[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--color-border); inset: 0 0 0 auto; }
html[dir="rtl"] .app-main { margin-left: 0; margin-right: var(--sidebar-width); margin-inline-start: 0; margin-inline-end: var(--sidebar-width); }
html[dir="rtl"] .nav-group { padding-left: 0; padding-right: 29px; padding-inline-start: 0; padding-inline-end: 29px; }
html[dir="rtl"] .nav-link:hover { transform: translateX(-2px); }
html[dir="rtl"] .topbar-context { margin-left: 0; margin-right: 16px; margin-inline-start: 16px; margin-inline-end: 0; }
html[dir="rtl"] .user-trigger { margin-left: 0; margin-right: 8px; padding-left: 0; padding-right: 7px; }
html[dir="rtl"] .client-switcher > i, html[dir="rtl"] .user-trigger > i { margin-left: 0; margin-right: 3px; }
html[dir="rtl"] .client-popover { left: 188px; right: auto; inset-inline-start: 188px; inset-inline-end: auto; }
html[dir="rtl"] .notification-dot { left: 7px; right: auto; }
html[dir="rtl"] .search-field input { padding-left: 12px; padding-right: 32px; }
html[dir="rtl"] .input-with-icon > i { left: auto; right: 12px; }
html[dir="rtl"] .password-toggle { left: 9px; right: auto; }
html[dir="rtl"] .bi-arrow-left, html[dir="rtl"] .bi-arrow-right, html[dir="rtl"] .bi-arrow-up-right, html[dir="rtl"] .bi-chevron-left, html[dir="rtl"] .bi-chevron-right { transform: scaleX(-1); }

@media (max-width: 800px) {
    html[dir="rtl"] .app-main { margin-right: 0; margin-inline-end: 0; }
    html[dir="rtl"] .sidebar { transform: translateX(100%); }
    html[dir="rtl"] .sidebar.is-open { transform: translateX(0); }
    html[dir="rtl"] .client-popover { left: 86px; right: auto; inset-inline-start: 86px; inset-inline-end: auto; }
}

@media (max-width: 500px) {
    .language-trigger { padding-inline: 5px; }
    .language-dropdown { min-width: 180px; }
}

.error-panel { text-align: center; }
.error-panel .login-brand { justify-content: center; }
.error-status { color: var(--color-primary); font-family: var(--font-display); font-size: clamp(52px, 12vw, 88px); font-weight: 800; letter-spacing: -.08em; line-height: 1; margin: 0 0 18px; }
.error-reference { color: var(--color-muted); font-size: 12px; margin: 24px 0 0; overflow-wrap: anywhere; }
.error-reference code { color: var(--color-ink); }

.clients-page-header { align-items: flex-start; }
.clients-list-card { min-width: 0; padding: 24px; }
.clients-list-heading { margin-bottom: 20px; }.clients-list-heading h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 4px; }.clients-list-heading p { color: var(--color-muted); font-size: 14px; margin: 0; }
.clients-filter-bar { align-items: center; border-bottom: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 10px; margin: 0 -24px 20px; padding: 0 24px 20px; }
.clients-search-field { flex: 1 1 280px; min-width: 0; position: relative; }.clients-search-field i { color: var(--color-subtle); inset-inline-start: 12px; position: absolute; top: 13px; }.clients-search-field input { background: var(--color-input); border: 1px solid var(--color-border-strong); border-radius: 8px; color: var(--color-ink); font-size: 16px; min-height: 42px; padding: 8px 12px 8px 34px; width: 100%; }.clients-search-field input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(71, 103, 232, .18); outline: 0; }
.clients-filter-group { min-width: 145px; }.clients-page-size { min-width: 112px; }.clients-filter-group .form-select { width: 100%; }.clients-clear-filter { color: var(--color-primary); font-size: 14px; font-weight: 700; padding: 9px 2px; white-space: nowrap; }
.clients-table-wrapper { overflow-x: auto; }.clients-table { border-collapse: collapse; min-width: 760px; width: 100%; }.clients-table th, .clients-table td { border-bottom: 1px solid var(--color-border); padding: 13px 10px; text-align: start; vertical-align: middle; }.clients-table th { color: var(--color-muted); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.clients-table td { color: var(--color-ink); font-size: 15px; }.clients-table tbody tr:last-child td { border-bottom: 0; }
.client-identity { align-items: center; display: inline-flex; gap: 10px; min-width: 0; }.client-identity > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.client-identity > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }.client-identity > div > span { color: var(--color-muted); font-size: 14px; }
.entity-logo { align-items: center; background: var(--color-primary-soft); border-radius: 10px; color: var(--color-primary); display: inline-flex; flex: 0 0 auto; font-weight: 700; justify-content: center; overflow: hidden; }.entity-logo-small { font-size: 13px; height: 34px; width: 34px; }.entity-logo-medium { font-size: 19px; height: 72px; width: 72px; }.entity-logo-large { border-radius: 14px; font-size: 26px; height: 94px; width: 94px; }.entity-logo img { height: 100%; object-fit: cover; width: 100%; }
.client-actions { align-items: center; display: flex; gap: 4px; justify-content: flex-end; }.client-actions form { display: contents; }.client-action-button { font-size: 14px; gap: 6px; min-height: 34px; padding: 6px 9px; }.client-actions .icon-button { color: var(--color-muted); }.client-actions .icon-button:hover { color: var(--color-primary); }.client-actions .client-delete-action:hover { color: var(--color-danger); }.button-danger-outline { color: var(--color-danger); }.button-danger-outline:hover { border-color: var(--color-danger); color: var(--color-danger); }.clients-card-list { display: none; }.clients-empty { margin: 20px 0 0; padding: 55px 20px; }.client-success-notice { display: none; }
.listing-pagination { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }.pagination-summary { color: var(--color-muted); font-size: 14px; }.pagination-links { align-items: center; display: flex; gap: 4px; }.pagination-number, .pagination-current { align-items: center; border-radius: 7px; display: inline-flex; font-size: 14px; height: 30px; justify-content: center; min-width: 30px; padding: 0 7px; }.pagination-number { color: var(--color-muted); }.pagination-number:hover, .pagination-current { background: var(--color-primary-soft); color: var(--color-primary); }.pagination-links .icon-button { height: 30px; width: 30px; }
.client-form { display: flex; flex-direction: column; gap: 20px; }.client-form-section { min-width: 0; padding: 24px; }.client-form-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.client-field-wide { grid-column: span 2; }.field-help { color: var(--color-muted); font-size: 13px; line-height: 1.4; }.client-form .field-error { display: block; }.client-form input[aria-invalid="true"], .client-form select[aria-invalid="true"] { border-color: var(--color-danger); }.client-form-actions { display: flex; gap: 10px; justify-content: flex-end; }.client-status-field { align-self: start; }.field-label { color: var(--color-ink); font-size: 15px; font-weight: 700; }.switch-control { align-items: center; color: var(--color-ink); cursor: pointer; display: inline-flex; gap: 9px; margin-top: 2px; }.switch-control input { height: 1px; opacity: 0; position: absolute; width: 1px; }.switch-track { background: var(--color-border-strong); border-radius: 20px; display: inline-flex; height: 24px; padding: 3px; transition: background .2s ease; width: 42px; }.switch-track span { background: var(--color-surface); border-radius: 50%; display: block; height: 18px; transition: transform .2s ease; width: 18px; }.switch-control input:checked + .switch-track { background: var(--color-primary); }.switch-control input:checked + .switch-track span { transform: translateX(18px); }.switch-control input:focus-visible + .switch-track { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.client-detail-header { align-items: center; }.client-detail-title { align-items: center; display: flex; gap: 18px; min-width: 0; }.client-detail-heading-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }.client-detail-heading-row h1 { margin-bottom: 0; }.client-detail-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); margin-bottom: 20px; }.client-detail-card { min-width: 0; padding: 24px; }.client-detail-list { display: grid; gap: 17px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }.client-detail-list > div { min-width: 0; }.client-detail-list dt { color: var(--color-muted); font-size: 14px; margin-bottom: 4px; }.client-detail-list dd { font-size: 15px; margin: 0; overflow-wrap: anywhere; }.client-detail-list dd a { color: var(--color-primary); }.client-detail-status-form { border-top: 1px solid var(--color-border); margin-top: 22px; padding-top: 18px; }.relationships-card { padding: 24px; }.relationship-grid { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); }.relationship-card { align-items: center; background: var(--color-surface-alt); border: 1px solid transparent; border-radius: 10px; color: var(--color-ink); display: flex; gap: 10px; min-width: 0; padding: 13px; }.relationship-card:hover { border-color: var(--color-border); color: var(--color-primary); }.relationship-card > i:first-child { color: var(--color-primary); font-size: 18px; }.relationship-card > span { display: flex; flex: 1; flex-direction: column; font-size: 14px; min-width: 0; }.relationship-card > span strong { font-family: var(--font-display); font-size: 22px; }.relationship-card > i:last-child { color: var(--color-subtle); font-size: 13px; }

@media (max-width: 900px) { .client-detail-grid { grid-template-columns: 1fr; }.relationship-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .clients-page-header { align-items: flex-start; }.clients-list-card { padding: 18px 15px; }.clients-filter-bar { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-inline: -15px; padding-inline: 15px; }.clients-search-field { grid-column: 1 / -1; }.clients-filter-group { min-width: 0; }.clients-filter-bar > .button { justify-content: center; }.clients-clear-filter { align-self: center; }.clients-table-wrapper { display: none; }.clients-card-list { display: grid; gap: 10px; }.client-mobile-card { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 10px; padding: 15px; }.client-mobile-card-header { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; }.client-mobile-card-header .status-badge { flex: 0 0 auto; }.client-mobile-details { border-top: 1px solid var(--color-border); display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 15px 0 0; padding-top: 12px; }.client-mobile-details dt { color: var(--color-muted); font-size: 13px; margin-bottom: 3px; }.client-mobile-details dd { font-size: 14px; margin: 0; overflow-wrap: anywhere; }.client-mobile-actions { justify-content: stretch; margin-top: 14px; }.client-mobile-actions .button { flex: 1; font-size: 14px; min-width: 0; padding-inline: 8px; }.client-form-section, .relationships-card, .client-detail-card { padding: 18px 15px; }.client-form-grid { gap: 16px; }.client-detail-header { align-items: flex-start; flex-direction: column; }.client-detail-title { align-items: flex-start; }.client-detail-title .breadcrumbs { margin-bottom: 12px; }.client-detail-title .page-description { overflow-wrap: anywhere; }.relationship-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .client-form-grid, .client-detail-list { grid-template-columns: 1fr; }.client-field-wide { grid-column: auto; }.client-form-actions { flex-direction: column-reverse; }.client-form-actions .button { width: 100%; }.client-detail-title { gap: 12px; }.entity-logo-large { height: 72px; width: 72px; }.client-detail-heading-row h1 { font-size: 26px; }.relationship-grid { grid-template-columns: 1fr; }.pagination-summary { flex-basis: 100%; }.pagination-links { justify-content: space-between; width: 100%; } }
html[dir="rtl"] .switch-control input:checked + .switch-track span { transform: translateX(-18px); }

.users-page-header { align-items: flex-start; }.users-list-card { min-width: 0; padding: 24px; }.users-list-heading { margin-bottom: 20px; }.users-list-heading h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 4px; }.users-list-heading p { color: var(--color-muted); font-size: 14px; margin: 0; }.users-filter-bar { align-items: center; border-bottom: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 10px; margin: 0 -24px 20px; padding: 0 24px 20px; }.users-search-field { flex: 1 1 240px; min-width: 0; position: relative; }.users-search-field i { color: var(--color-subtle); inset-inline-start: 12px; position: absolute; top: 13px; }.users-search-field input { background: var(--color-input); border: 1px solid var(--color-border-strong); border-radius: 8px; color: var(--color-ink); font-size: 16px; min-height: 42px; padding: 8px 12px 8px 34px; width: 100%; }.users-filter-group { min-width: 135px; }.users-page-size { min-width: 92px; }.users-filter-group .form-select { width: 100%; }.users-clear-filter { color: var(--color-primary); font-size: 14px; font-weight: 700; padding: 9px 2px; white-space: nowrap; }.users-table-wrapper { overflow-x: auto; }.users-table { border-collapse: collapse; min-width: 920px; width: 100%; }.users-table th, .users-table td { border-bottom: 1px solid var(--color-border); padding: 13px 10px; text-align: start; vertical-align: middle; }.users-table th { color: var(--color-muted); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.users-table td { color: var(--color-ink); font-size: 14px; }.users-table tbody tr:last-child td { border-bottom: 0; }.users-identity { align-items: center; display: inline-flex; gap: 10px; min-width: 0; }.users-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.users-identity > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }.users-identity > div > span { color: var(--color-muted); font-size: 13px; overflow-wrap: anywhere; }.users-avatar { align-items: center; background: var(--color-primary-soft); border-radius: 50%; color: var(--color-primary); display: inline-flex; flex: 0 0 36px; font-size: 13px; font-weight: 800; height: 36px; justify-content: center; }.users-avatar-large { flex-basis: 58px; font-size: 20px; height: 58px; }.role-badge { background: var(--color-primary-soft); border-radius: 20px; color: var(--color-primary); display: inline-flex; font-size: 13px; font-weight: 700; padding: 5px 9px; white-space: nowrap; }.users-client-summary { display: block; max-width: 230px; overflow-wrap: anywhere; }.users-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }.user-action-button { font-size: 13px; gap: 5px; min-height: 34px; padding: 6px 8px; }.users-card-list { display: none; }.users-empty { margin: 20px 0 0; }.user-form { max-width: 860px; }.user-form-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.user-field-wide { grid-column: 1 / -1; }.user-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }.user-form-note { align-items: flex-start; background: var(--color-primary-soft); border: 1px solid var(--color-border); border-radius: 9px; color: var(--color-muted); display: flex; gap: 9px; margin-top: 20px; padding: 11px 12px; }.user-form-note i { color: var(--color-primary); }.users-client-select { min-height: 140px; }.users-association-field { border: 1px solid var(--color-border); border-radius: 9px; padding: 16px; }.users-association-field legend { color: var(--color-ink); float: none; font-size: 15px; font-weight: 700; margin: 0; width: auto; }.users-client-checks { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }.users-client-check { align-items: center; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-ink); cursor: pointer; display: flex; gap: 8px; padding: 10px; }.users-client-check input { accent-color: var(--color-primary); }.users-detail-title { align-items: center; display: flex; gap: 14px; min-width: 0; }.users-heading-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }.users-heading-row h1 { margin-bottom: 0; }.user-detail-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); }.user-detail-card { min-width: 0; padding: 24px; }.user-detail-list { display: grid; gap: 17px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }.user-detail-list > div { min-width: 0; }.user-detail-list dt { color: var(--color-muted); font-size: 14px; margin-bottom: 4px; }.user-detail-list dd { font-size: 15px; margin: 0; overflow-wrap: anywhere; }.user-associated-clients { display: grid; gap: 9px; }.user-client-card { align-items: center; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 9px; display: flex; gap: 10px; min-width: 0; padding: 10px; }.user-client-card > div { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }.user-client-card strong { overflow-wrap: anywhere; }.user-client-card form { margin-inline-start: auto; }.user-client-empty { padding: 25px 10px; }.user-add-client { align-items: center; border-top: 1px solid var(--color-border); display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; }.user-add-client .form-select { min-width: 0; }.invitations-filter-bar { justify-content: flex-start; }.invitations-table { min-width: 1120px; }.invitation-actions { justify-content: flex-start; min-width: 270px; }.invitation-mobile-card .user-mobile-header > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }.invitation-mobile-card .user-mobile-header strong { overflow-wrap: anywhere; }.invitation-summary { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 9px; display: grid; gap: 12px; margin-bottom: 20px; padding: 14px; }.invitation-summary p { display: flex; flex-direction: column; gap: 3px; margin: 0; }.invitation-summary strong { color: var(--color-muted); font-size: 13px; }.invitation-summary span { overflow-wrap: anywhere; }.invitation-accept-page { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 30px 15px; }.invitation-panel { max-width: 560px; width: 100%; }.invitation-panel .login-brand { align-items: center; display: inline-flex; gap: 9px; margin-bottom: 30px; }.invitation-panel .brand-name { color: var(--color-ink); font-family: var(--font-display); font-size: 19px; font-weight: 800; }

@media (max-width: 900px) { .user-detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .users-list-card, .user-detail-card { padding: 18px 15px; }.users-filter-bar { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-inline: -15px; padding-inline: 15px; }.users-search-field { grid-column: 1 / -1; }.users-filter-group { min-width: 0; }.users-filter-bar > .button { justify-content: center; }.users-clear-filter { align-self: center; }.users-table-wrapper { display: none; }.users-card-list { display: grid; gap: 10px; }.user-mobile-card { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 10px; padding: 15px; }.user-mobile-header { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; }.user-mobile-header .status-badge { flex: 0 0 auto; }.user-mobile-details { border-top: 1px solid var(--color-border); display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 15px 0 0; padding-top: 12px; }.user-mobile-details dt { color: var(--color-muted); font-size: 13px; margin-bottom: 3px; }.user-mobile-details dd { font-size: 14px; margin: 0; overflow-wrap: anywhere; }.user-mobile-actions { justify-content: stretch; margin-top: 14px; }.user-mobile-actions .button { flex: 1 1 auto; min-width: 0; }.user-form-grid { gap: 16px; }.user-form, .user-form-grid { grid-template-columns: 1fr; }.user-field-wide { grid-column: auto; }.users-client-checks { grid-template-columns: 1fr; }.user-form-actions { flex-direction: column-reverse; }.user-form-actions .button { width: 100%; }.users-detail-title { align-items: flex-start; }.users-detail-title h1 { font-size: 28px; }.users-page-header .page-actions { width: 100%; }.users-page-header .page-actions .button { flex: 1; }.user-add-client { align-items: stretch; flex-direction: column; }.user-add-client .button { width: 100%; } }
html[dir="rtl"] .clients-search-field input { padding-inline-start: 34px; }

.inline-alert-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.client-logo-field .logo-upload-control { max-width: 620px; width: 100%; }
.logo-dropzone { align-items: stretch; aspect-ratio: 2 / 1; background: var(--color-surface-alt); border: 2px dashed var(--color-border-strong); border-radius: 14px; display: flex; flex-direction: column; justify-content: center; min-height: 0; overflow: hidden; padding: 16px; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.logo-dropzone:hover, .logo-dropzone:focus-visible { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(71, 103, 232, .14); outline: 0; }
.logo-dropzone.is-dragging { background: var(--color-primary-soft); border-color: var(--color-primary); }
.logo-dropzone.is-processing { cursor: wait; }
.logo-preview { align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; display: none; flex: 1 1 auto; justify-content: center; min-height: 0; overflow: hidden; width: 100%; }
.logo-preview img { display: block; height: 100%; object-fit: contain; width: 100%; }
.logo-placeholder { align-items: center; color: var(--color-subtle); display: flex; font-size: 30px; justify-content: center; }
.logo-empty-content, .logo-processing-content { align-items: center; color: var(--color-muted); display: flex; flex: 1 1 auto; flex-direction: column; gap: 7px; justify-content: center; min-height: 0; text-align: center; }
.logo-empty-content > i { color: var(--color-primary); font-size: 30px; }
.logo-empty-content strong, .logo-processing-content strong { color: var(--color-ink); font-size: 15px; }
.logo-empty-content span { font-size: 13px; line-height: 1.35; }
.logo-empty-content .button { font-size: 14px; margin-top: 3px; min-height: 36px; padding: 7px 11px; }
.logo-processing-content { display: none; }
.logo-processing-spinner { border: 3px solid var(--color-border-strong); border-radius: 50%; border-top-color: var(--color-primary); height: 26px; width: 26px; animation: logo-upload-spin .8s linear infinite; }
@keyframes logo-upload-spin { to { transform: rotate(360deg); } }
.logo-upload-control[data-image-state="filled"] .logo-preview, .logo-upload-control[data-image-state="processing"][data-image-previous-state="filled"] .logo-preview { display: flex; }
.logo-upload-control[data-image-state="filled"] .logo-empty-content, .logo-upload-control[data-image-state="processing"] .logo-empty-content { display: none; }
.logo-upload-control[data-image-state="processing"] .logo-processing-content { display: flex; flex: 0 0 auto; min-height: 28px; }
.logo-upload-control[data-image-state="filled"] .logo-filled-actions { display: flex; }
.logo-upload-control[data-image-state="empty"] .logo-filled-actions, .logo-upload-control[data-image-state="processing"] .logo-filled-actions { display: none; }
.logo-file-input { display: none; }
.logo-upload-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 9px; min-width: 0; }
.logo-filled-actions { align-items: center; display: none; flex-wrap: wrap; gap: 8px; }
.logo-resolution { color: var(--color-muted); font-size: 13px; line-height: 1.4; }
.logo-client-error { flex-basis: 100%; }

@media (max-width: 560px) {
    .logo-dropzone { padding: 12px; }
    .logo-empty-content > i { font-size: 25px; }
    .logo-empty-content strong, .logo-processing-content strong { font-size: 14px; }
    .logo-empty-content span { font-size: 12px; }
    .logo-empty-content .button, .logo-filled-actions .button { font-size: 13px; min-height: 34px; padding: 6px 9px; }
    .logo-upload-meta { align-items: flex-start; flex-direction: column; }
    .logo-filled-actions { width: 100%; }
.logo-filled-actions .button { flex: 1 1 auto; }

.danger-zone-card { align-items: center; border-color: var(--color-danger); display: flex; gap: 20px; justify-content: space-between; margin-top: 20px; padding: 20px 24px; }.danger-zone-card h2 { color: var(--color-danger); font-family: var(--font-display); font-size: 18px; margin: 0 0 4px; }.danger-zone-card p { color: var(--color-muted); font-size: 14px; margin: 0; }.auth-back-link { color: var(--color-primary); display: block; font-size: 14px; font-weight: 700; margin-top: 18px; text-align: center; }
.security-card { align-items: center; display: flex; gap: 20px; justify-content: space-between; margin-top: 20px; padding: 20px 24px; }.security-card h2 { font-family: var(--font-display); font-size: 18px; margin: 0 0 4px; }.security-card p:not(.eyebrow) { color: var(--color-muted); font-size: 14px; margin: 0; }.security-card .eyebrow { margin-bottom: 5px; }
@media (max-width: 560px) { .danger-zone-card, .security-card { align-items: stretch; flex-direction: column; padding: 18px 15px; }.danger-zone-card .button, .security-card .button { width: 100%; } }
}
 .password-field { position: relative; width: 100%; }
 .password-field > input { box-sizing: border-box; padding-inline-end: 48px; width: 100%; }
 .password-toggle { align-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--color-ink); display: inline-flex; height: 40px; justify-content: center; left: auto; line-height: 1; padding: 0; right: 9px; top: 50%; transform: translateY(-50%); width: 40px; z-index: 1; }
 .password-toggle > i { font-size: 20px; }
 .password-toggle:hover { background: transparent; color: var(--color-ink); }
  .password-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.screen-templates-page-header { align-items: flex-start; }
.screen-templates-list-card { min-width: 0; padding: 24px; }
.screen-templates-list-heading { margin-bottom: 20px; }.screen-templates-list-heading h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 4px; }.screen-templates-list-heading p { color: var(--color-muted); font-size: 14px; margin: 0; }
.screen-templates-filter-bar { align-items: center; border-bottom: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 10px; margin: 0 -24px 20px; padding: 0 24px 20px; }.screen-templates-search-field { flex: 1 1 280px; min-width: 0; position: relative; }.screen-templates-search-field i { color: var(--color-subtle); inset-inline-start: 12px; position: absolute; top: 13px; }.screen-templates-search-field input { background: var(--color-input); border: 1px solid var(--color-border-strong); border-radius: 8px; color: var(--color-ink); font-size: 16px; min-height: 42px; padding: 8px 12px 8px 34px; width: 100%; }.screen-templates-search-field input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(71, 103, 232, .18); outline: 0; }.screen-templates-filter-group { min-width: 145px; }.screen-templates-page-size { min-width: 112px; }.screen-templates-filter-group .form-select { width: 100%; }.screen-templates-clear-filter { color: var(--color-primary); font-size: 14px; font-weight: 700; padding: 9px 2px; white-space: nowrap; }
.screen-templates-table-wrapper { overflow-x: auto; }.screen-templates-table { border-collapse: collapse; min-width: 760px; width: 100%; }.screen-templates-table th, .screen-templates-table td { border-bottom: 1px solid var(--color-border); padding: 13px 10px; text-align: start; vertical-align: middle; }.screen-templates-table th { color: var(--color-muted); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.screen-templates-table td { color: var(--color-ink); font-size: 14px; }.screen-templates-table tbody tr:last-child td { border-bottom: 0; }.screen-templates-table code, .screen-template-mobile-card code, .screen-template-detail-list code { background: var(--color-surface-alt); border-radius: 5px; color: var(--color-primary); font-size: 13px; padding: 3px 6px; }
.screen-templates-actions { align-items: center; display: flex; gap: 4px; justify-content: flex-end; }.screen-templates-actions form { display: contents; }.screen-template-action-button { font-size: 14px; gap: 6px; min-height: 34px; padding: 6px 9px; }.screen-template-action-button:hover { color: var(--color-primary); }.screen-template-action-button.button-danger-outline:hover { color: var(--color-danger); }.screen-templates-card-list { display: none; }.screen-templates-empty { margin: 20px 0 0; padding: 55px 20px; }.screen-templates-success-notice { display: none; }
.screen-template-form .client-form-section { min-width: 0; }.screen-template-status-field { align-self: start; }.screen-template-heading-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }.screen-template-heading-row h1 { margin-bottom: 0; }.screen-template-detail-card { min-width: 0; padding: 24px; }.screen-template-detail-list { display: grid; gap: 17px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }.screen-template-detail-list > div { min-width: 0; }.screen-template-detail-list dt { color: var(--color-muted); font-size: 14px; margin-bottom: 4px; }.screen-template-detail-list dd { font-size: 15px; margin: 0; overflow-wrap: anywhere; }

@media (max-width: 800px) {
    .screen-templates-list-card { padding: 18px 15px; }.screen-templates-filter-bar { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-inline: -15px; padding-inline: 15px; }.screen-templates-search-field { grid-column: 1 / -1; }.screen-templates-filter-group { min-width: 0; }.screen-templates-filter-bar > .button { justify-content: center; }.screen-templates-clear-filter { align-self: center; }.screen-templates-table-wrapper { display: none; }.screen-templates-card-list { display: grid; gap: 10px; }.screen-template-mobile-card { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 10px; padding: 15px; }.screen-template-mobile-header { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; }.screen-template-mobile-header > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }.screen-template-mobile-header strong { overflow-wrap: anywhere; }.screen-template-mobile-header .status-badge { flex: 0 0 auto; }.screen-template-mobile-details { border-top: 1px solid var(--color-border); display: grid; gap: 10px; margin: 15px 0 0; padding-top: 12px; }.screen-template-mobile-details dt { color: var(--color-muted); font-size: 13px; margin-bottom: 3px; }.screen-template-mobile-details dd { font-size: 14px; margin: 0; overflow-wrap: anywhere; }.screen-template-mobile-actions { justify-content: stretch; margin-top: 14px; }.screen-template-mobile-actions .button { flex: 1 1 auto; min-width: 0; }.screen-template-detail-card { padding: 18px 15px; }
}

@media (max-width: 560px) {
    .screen-template-detail-list { grid-template-columns: 1fr; }.screen-templates-page-header .page-actions { width: 100%; }.screen-templates-page-header .page-actions .button { flex: 1; }.screen-template-heading-row h1 { font-size: 26px; }
}
 html[dir="rtl"] .password-toggle { left: 9px; right: auto; }

.advertisers-page-header { align-items: flex-start; }
.advertisers-list-card { min-width: 0; padding: 24px; }
.advertisers-table { min-width: 900px; }
.advertisers-filter-bar .clients-filter-group { min-width: 145px; }
.advertiser-mobile-card .client-mobile-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.advertiser-form .readonly-field { align-items: center; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-ink); display: flex; gap: 9px; min-height: 42px; padding: 8px 12px; }
.advertiser-form .readonly-field i { color: var(--color-primary); }
.advertiser-form textarea.form-control { min-height: 112px; resize: vertical; }
.advertiser-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.advertiser-detail-grid .detail-wide { grid-column: 1 / -1; }

.resources-page-header { align-items: flex-start; }
.resources-list-card { min-width: 0; padding: 24px; }
.resources-table { min-width: 980px; }
.resources-filter-bar .clients-filter-group { min-width: 145px; }
.resource-identity { align-items: center; display: flex; gap: 10px; min-width: 0; }
.resource-identity > strong, .resource-identity > div { min-width: 0; overflow-wrap: anywhere; }
.resource-identity > div { display: grid; gap: 2px; }
.resource-identity > div span { color: var(--color-muted); font-size: 13px; }
.resource-preview { align-items: center; background: var(--color-primary-soft); border: 1px solid var(--color-border); border-radius: 9px; color: var(--color-primary); display: inline-flex; flex: 0 0 auto; height: 44px; justify-content: center; overflow: hidden; text-decoration: none; width: 62px; }
.resource-preview img { height: 100%; object-fit: cover; width: 100%; }
.resource-preview-video { background: var(--color-ink); color: #fff; font-size: 22px; }
.resource-form .readonly-field { align-items: center; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-ink); display: flex; gap: 9px; min-height: 42px; padding: 8px 12px; }
.resource-form .readonly-field i { color: var(--color-primary); }
.resource-preview-panel { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 12px; display: grid; gap: 14px; padding: 14px; }
.resource-preview-frame { align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 9px; display: flex; justify-content: center; min-height: 260px; overflow: hidden; }
.resource-preview-frame img, .resource-preview-frame video { display: block; max-height: 520px; max-width: 100%; object-fit: contain; width: 100%; }
.resource-preview-frame video { background: #111827; }
.resource-preview-placeholder { align-items: center; color: var(--color-muted); display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 260px; padding: 24px; text-align: center; }
.resource-preview-placeholder i { color: var(--color-primary); font-size: 34px; }
.resource-preview-meta { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resource-preview-meta > div { display: grid; gap: 3px; min-width: 0; }
.resource-preview-meta span { color: var(--color-muted); font-size: 12px; }
.resource-preview-meta strong { overflow-wrap: anywhere; }
.resource-dimension-warning { align-items: flex-start; background: var(--color-danger-soft); border: 1px solid var(--color-danger); border-radius: 8px; color: var(--color-ink); display: flex; font-size: 13px; gap: 8px; padding: 9px 10px; }
.resource-dimension-warning[hidden] { display: none; }
.resource-dimension-warning i { color: var(--color-danger); flex: 0 0 auto; }
.resource-detail-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }
.resource-preview-card { align-items: center; display: flex; justify-content: center; min-height: 320px; overflow: hidden; padding: 18px; }
.resource-preview-card img, .resource-preview-card video { max-height: 560px; max-width: 100%; object-fit: contain; width: 100%; }
.settings-page-header { align-items: flex-start; }
.settings-form { max-width: 900px; }

@media (max-width: 800px) {
    .resources-list-card { padding: 18px 15px; }
    .resources-filter-bar { margin-inline: -15px; padding-inline: 15px; }
    .resources-table-wrapper { display: none; }
    .resource-mobile-card { min-width: 0; }
    .resource-detail-grid { grid-template-columns: 1fr; }
    .resource-preview-meta { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
    .advertisers-list-card { padding: 18px 15px; }
    .advertisers-filter-bar { margin-inline: -15px; padding-inline: 15px; }
    .advertisers-table-wrapper { display: none; }
}

@media (max-width: 560px) {
    .advertiser-mobile-card .client-mobile-details, .advertiser-detail-grid { grid-template-columns: 1fr; }
    .advertiser-detail-grid .detail-wide { grid-column: auto; }
}

.sites-page-header { align-items: flex-start; }
.sites-list-card { min-width: 0; padding: 24px; }
.sites-table { min-width: 980px; }
.site-identity { align-items: center; display: inline-flex; gap: 10px; min-width: 0; }
.site-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-icon { align-items: center; background: var(--color-primary-soft); border-radius: 10px; color: var(--color-primary); display: inline-flex; flex: 0 0 auto; height: 34px; justify-content: center; width: 34px; }
.site-icon-large { font-size: 24px; height: 64px; width: 64px; }
.sites-table td > span, .sites-table td > small, .sites-table td small { display: block; }
.sites-table td small { color: var(--color-muted); font-size: 13px; margin-top: 3px; }
.site-mobile-card .client-mobile-details dd { display: flex; flex-direction: column; gap: 3px; }
.site-mobile-card .client-mobile-details dd small { color: var(--color-muted); font-size: 13px; }
.site-form .readonly-field { align-items: center; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-ink); display: flex; gap: 9px; min-height: 42px; padding: 8px 12px; }
.site-form .readonly-field i { color: var(--color-primary); }
.site-form textarea.form-control { min-height: 90px; resize: vertical; }
.site-location-section { overflow: visible; }
.site-search-row { align-items: end; display: flex; gap: 10px; margin-bottom: 14px; }
.site-search-row .field-group { flex: 1 1 auto; }
.site-geocode-results { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: var(--shadow-soft); display: grid; gap: 2px; margin-bottom: 8px; max-height: 260px; overflow-y: auto; padding: 5px; }
.site-geocode-results[hidden] { display: none; }
.site-geocode-result { align-items: flex-start; background: transparent; border: 0; border-radius: 7px; color: var(--color-ink); cursor: pointer; display: flex; gap: 9px; padding: 10px; text-align: start; width: 100%; }
.site-geocode-result:hover, .site-geocode-result:focus-visible, .site-geocode-result.is-active { background: var(--color-primary-soft); color: var(--color-primary); outline: 0; }
.site-geocode-result i { flex: 0 0 auto; margin-top: 2px; }
.site-geocode-result span { font-size: 14px; line-height: 1.4; }
.site-geocode-empty { color: var(--color-muted); font-size: 14px; margin: 0; padding: 10px; }
.site-geocode-error { color: var(--color-danger); }
.site-geocode-loading::before { animation: site-geocode-spin .8s linear infinite; border: 2px solid var(--color-border); border-right-color: var(--color-primary); border-radius: 50%; content: ''; display: inline-block; height: 12px; margin-inline-end: 8px; vertical-align: -1px; width: 12px; }
.site-geocode-attribution { display: block; margin: -2px 0 18px; }
.site-geocode-attribution a { color: var(--color-primary); }
@keyframes site-geocode-spin { to { transform: rotate(360deg); } }
.site-location-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.1fr); }
.site-address-fields { align-content: start; display: grid; gap: 16px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-address-fields .client-field-wide { grid-column: 1 / -1; }
.site-map-panel { min-width: 0; }
.site-map { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 12px; height: 410px; min-height: 280px; overflow: hidden; width: 100%; }
.site-map-hint { color: var(--color-muted); font-size: 13px; line-height: 1.4; margin: 9px 0 0; }
.site-detail-header { align-items: center; }
.site-detail-heading-row { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; }
.site-detail-heading-row > div { min-width: 0; }
.site-detail-heading-row h1 { margin-bottom: 0; }
.site-detail-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .site-location-layout { grid-template-columns: 1fr; }
    .site-map { height: 360px; }
}

@media (max-width: 800px) {
    .sites-list-card { padding: 18px 15px; }
    .sites-filter-bar { margin-inline: -15px; padding-inline: 15px; }
    .sites-table-wrapper { display: none; }
    .site-detail-header { align-items: flex-start; flex-direction: column; }
    .site-detail-header .page-actions { width: 100%; }
    .site-detail-header .page-actions .button { flex: 1; }
    .site-map { height: 320px; }
}

@media (max-width: 560px) {
    .site-search-row { align-items: stretch; flex-direction: column; }
    .site-address-fields, .site-detail-grid { grid-template-columns: 1fr; }
    .site-address-fields .client-field-wide { grid-column: auto; }
    .site-map { height: 280px; }
    .site-detail-heading-row { align-items: flex-start; }
    .site-icon-large { height: 52px; width: 52px; }
}

.kiosks-page-header { align-items: flex-start; }.kiosks-list-card { min-width: 0; padding: 24px; }.kiosks-list-heading { margin-bottom: 20px; }.kiosks-list-heading h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 4px; }.kiosks-list-heading p { color: var(--color-muted); font-size: 14px; margin: 0; }.kiosks-filter-bar .clients-filter-group { min-width: 145px; }.kiosks-filter-bar .clients-page-size { min-width: 112px; }.kiosks-table { min-width: 1100px; }.kiosks-table code, .kiosk-detail-list code { background: var(--color-surface-alt); border-radius: 5px; color: var(--color-primary); font-size: 13px; padding: 3px 6px; }.kiosk-identity { align-items: center; display: inline-flex; gap: 10px; min-width: 0; }.kiosk-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.kiosk-icon { align-items: center; background: var(--color-primary-soft); border-radius: 10px; color: var(--color-primary); display: inline-flex; flex: 0 0 auto; height: 34px; justify-content: center; width: 34px; }.kiosk-icon-large { font-size: 24px; height: 64px; width: 64px; }.kiosks-card-list { display: none; }.kiosks-empty { margin: 20px 0 0; padding: 55px 20px; }.kiosks-success-notice { display: none; }.kiosk-form .readonly-field { align-items: center; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-ink); display: flex; gap: 9px; min-height: 42px; padding: 8px 12px; }.kiosk-form .readonly-field i { color: var(--color-primary); }.kiosk-status-field { align-self: start; }.kiosk-detail-header { align-items: center; }.kiosk-detail-heading-row { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; }.kiosk-detail-heading-row > div { min-width: 0; }.kiosk-detail-heading-row h1 { margin-bottom: 0; }.kiosk-detail-card { min-width: 0; padding: 24px; }.kiosk-detail-list { display: grid; gap: 17px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }.kiosk-detail-list > div { min-width: 0; }.kiosk-detail-list dt { color: var(--color-muted); font-size: 14px; margin-bottom: 4px; }.kiosk-detail-list dd { font-size: 15px; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 800px) { .kiosks-list-card { padding: 18px 15px; }.kiosks-filter-bar { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-inline: -15px; padding-inline: 15px; }.kiosks-filter-bar .clients-search-field { grid-column: 1 / -1; }.kiosks-filter-bar .clients-filter-group { min-width: 0; }.kiosks-filter-bar > .button { justify-content: center; }.kiosks-table-wrapper { display: none; }.kiosks-card-list { display: grid; gap: 10px; }.kiosk-mobile-card { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 10px; padding: 15px; }.kiosk-mobile-card .client-mobile-details dd { overflow-wrap: anywhere; }.kiosk-detail-header { align-items: flex-start; flex-direction: column; }.kiosk-detail-header .page-actions { width: 100%; }.kiosk-detail-header .page-actions .button { flex: 1; }.kiosk-detail-card { padding: 18px 15px; } }
@media (max-width: 560px) { .kiosk-detail-list { grid-template-columns: 1fr; }.kiosk-detail-heading-row { align-items: flex-start; }.kiosk-icon-large { height: 52px; width: 52px; } }

.schedules-page-header { align-items: flex-start; }
.schedules-list-card, .schedule-form-section, .schedule-editor-card, .schedule-detail-card, .schedule-readonly-card { min-width: 0; padding: 24px; }
.schedules-list-heading { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 20px; }
.schedules-list-heading h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 4px; }
.schedules-list-heading p { color: var(--color-muted); font-size: 14px; margin: 0; }
.schedule-client-context { align-items: center; background: var(--color-primary-soft); border-radius: 999px; color: var(--color-primary); display: inline-flex; flex: 0 0 auto; font-size: 14px; font-weight: 700; gap: 7px; padding: 7px 11px; }
.schedules-filter-bar .clients-filter-group { min-width: 145px; }
.schedules-filter-bar .schedules-page-size { min-width: 112px; }
.schedules-table-wrapper { overflow-x: auto; }
.schedules-table { border-collapse: collapse; min-width: 820px; width: 100%; }
.schedules-table th, .schedules-table td { border-bottom: 1px solid var(--color-border); font-size: 14px; padding: 13px 10px; text-align: start; vertical-align: middle; }
.schedules-table th { color: var(--color-muted); font-size: 13px; text-transform: uppercase; }
.schedule-identity { align-items: center; display: inline-flex; gap: 10px; min-width: 0; }
.schedule-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-icon { align-items: center; background: var(--color-primary-soft); border-radius: 10px; color: var(--color-primary); display: inline-flex; flex: 0 0 auto; height: 34px; justify-content: center; width: 34px; }
.schedule-icon-large { font-size: 24px; height: 64px; width: 64px; }
.schedule-actions { align-items: center; display: flex; gap: 6px; justify-content: flex-end; }
.schedule-actions form { display: contents; }
.schedule-actions .button { min-height: 36px; }
.schedules-card-list { display: none; }
.schedules-empty { gap: 10px; margin-top: 20px; }
.schedule-form { display: grid; gap: 20px; }
.schedule-form-fields { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.6fr) minmax(210px, 1fr); }
.schedule-status-field { align-self: start; }
.schedule-status-field .field-help { display: block; }
.schedule-editor-card .card-heading { align-items: center; }
.schedule-total { background: var(--color-primary-soft); border-radius: 999px; color: var(--color-primary); font-size: 14px; font-weight: 700; padding: 7px 11px; white-space: nowrap; }
.schedule-toolbar { align-items: center; border-bottom: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 10px; margin: 0 -24px 18px; padding: 0 24px 18px; }
.schedule-drag-hint { color: var(--color-muted); font-size: 14px; margin-inline-start: auto; }
.schedule-days { display: grid; gap: 12px; }
.schedule-day-row { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.schedule-day-header { align-items: center; background: var(--color-surface-alt); display: flex; justify-content: space-between; gap: 12px; padding: 13px 14px; }
.schedule-day-toggle { align-items: center; background: transparent; border: 0; color: var(--color-ink); cursor: pointer; display: inline-flex; flex: 1 1 auto; font: inherit; gap: 10px; justify-content: space-between; min-width: 0; padding: 0; text-align: start; }
.schedule-day-toggle:focus-visible { border-radius: 6px; outline: 3px solid color-mix(in srgb, var(--color-primary) 28%, transparent); outline-offset: 3px; }
.schedule-day-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.schedule-day-chevron { color: var(--color-muted); transition: transform .18s ease; }
.schedule-day-row.is-open .schedule-day-chevron { transform: rotate(180deg); }
.schedule-day-count { color: var(--color-muted); font-size: 13px; }
.schedule-day-body { padding: 14px; }
.schedule-day-body[hidden] { display: none; }
.schedule-slot-grid { direction: ltr; display: grid; gap: 5px; grid-template-columns: repeat(12, minmax(0, 1fr)); user-select: none; }
.schedule-slot { align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 7px; color: var(--color-ink); cursor: pointer; display: flex; font-size: 12px; font-weight: 700; height: 40px; justify-content: center; padding: 0; transition: background .12s ease, border-color .12s ease, color .12s ease, transform .08s ease; }
.schedule-slot:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
.schedule-slot:active { transform: scale(.94); }
.schedule-slot.is-selected { background: var(--color-primary-button); border-color: var(--color-primary-button); color: var(--color-primary-button-text); }
.schedule-day-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.schedule-day-actions .button { font-size: 14px; min-height: 36px; padding: 6px 10px; }
.schedule-copy-button { color: var(--color-primary); }
.schedule-form-actions { display: flex; gap: 10px; justify-content: flex-end; }
.schedule-detail-header { align-items: center; }
.schedule-detail-heading-row { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; }
.schedule-detail-heading-row > div { min-width: 0; }
.schedule-detail-heading-row h1 { margin-bottom: 7px; }
.schedule-detail-list { display: grid; gap: 17px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.schedule-detail-list > div { border-bottom: 1px solid var(--color-border); padding-bottom: 12px; }
.schedule-detail-list dt, .schedule-readonly-day span { color: var(--color-muted); font-size: 13px; }
.schedule-detail-list dd { font-size: 15px; font-weight: 700; margin: 4px 0 0; }
.schedule-readonly-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schedule-readonly-day { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 10px; padding: 13px; }
.schedule-readonly-day > div { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.schedule-readonly-day strong { font-size: 15px; }
.schedule-readonly-day p { color: var(--color-muted); font-size: 13px; margin: 9px 0 0; overflow-wrap: anywhere; }
.schedule-copy-modal { align-items: center; background: var(--color-overlay); display: flex; inset: 0; justify-content: center; padding: 18px; position: fixed; z-index: 1100; }
.schedule-copy-modal[hidden] { display: none; }
.schedule-copy-dialog { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-float); max-height: min(680px, 90vh); max-width: 460px; overflow: hidden; width: 100%; }
.schedule-copy-header, .schedule-copy-footer { align-items: center; display: flex; gap: 12px; justify-content: space-between; padding: 16px 20px; }
.schedule-copy-header { border-bottom: 1px solid var(--color-border); }
.schedule-copy-header h2 { font-family: var(--font-display); font-size: 18px; margin: 0; }
.schedule-copy-body { max-height: 55vh; overflow-y: auto; padding: 17px 20px; }
.schedule-copy-body p { color: var(--color-muted); font-size: 14px; margin: 0 0 13px; }
.schedule-copy-options { display: grid; gap: 8px; }
.schedule-copy-option { align-items: center; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-ink); cursor: pointer; display: flex; gap: 10px; padding: 11px 12px; }
.schedule-copy-option:has(input:checked), .schedule-copy-option.is-checked { background: var(--color-primary-soft); border-color: var(--color-primary); }
.schedule-copy-option input { accent-color: var(--color-primary-button); height: 18px; width: 18px; }
.schedule-copy-footer { border-top: 1px solid var(--color-border); justify-content: flex-end; }

@media (max-width: 991px) { .schedule-slot-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 800px) { .schedules-list-card, .schedule-form-section, .schedule-editor-card, .schedule-detail-card, .schedule-readonly-card { padding: 18px 15px; }.schedules-list-heading { flex-direction: column; }.schedules-filter-bar { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-inline: -15px; padding-inline: 15px; }.schedules-filter-bar .clients-search-field { grid-column: 1 / -1; }.schedules-filter-bar .clients-filter-group { min-width: 0; }.schedules-table-wrapper { display: none; }.schedules-card-list { display: grid; gap: 10px; }.schedule-mobile-card { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 10px; padding: 15px; }.schedule-mobile-heading { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; }.schedule-mobile-details { border-top: 1px solid var(--color-border); display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 15px 0 0; padding-top: 12px; }.schedule-mobile-details dt { color: var(--color-muted); font-size: 13px; margin-bottom: 3px; }.schedule-mobile-details dd { font-size: 14px; margin: 0; overflow-wrap: anywhere; }.schedule-mobile-actions { display: flex; gap: 8px; margin-top: 14px; }.schedule-mobile-actions .button { flex: 1; font-size: 14px; min-width: 0; padding-inline: 8px; }.schedule-toolbar { margin-inline: -15px; padding-inline: 15px; }.schedule-form-fields { grid-template-columns: 1fr; }.schedule-drag-hint { margin-inline-start: 0; width: 100%; }.schedule-detail-header { align-items: flex-start; flex-direction: column; }.schedule-detail-header .page-actions { width: 100%; }.schedule-detail-header .page-actions .button { flex: 1; }.schedule-readonly-grid { grid-template-columns: 1fr; } }
@media (max-width: 575px) { .schedule-slot-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }.schedule-day-actions .button { flex: 1 1 calc(50% - 8px); }.schedule-form-actions { flex-direction: column-reverse; }.schedule-form-actions .button { width: 100%; }.schedule-total { font-size: 13px; }.schedule-detail-heading-row { align-items: flex-start; }.schedule-icon-large { height: 52px; width: 52px; } }
@media (max-width: 400px) { .schedule-slot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kiosks-table { min-width: 1320px; }
.kiosk-assistant-section { border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); }

.campaigns-page-header, .campaigns-form-header, .campaign-resources-header { align-items: flex-start; }
.campaigns-list-card { min-width: 0; padding: 24px; }
.campaigns-table { min-width: 980px; }
.campaigns-filter-bar .clients-filter-group { min-width: 145px; }
.campaign-identity { align-items: center; display: inline-flex; gap: 10px; min-width: 0; }
.campaign-identity strong { overflow-wrap: anywhere; }
.campaign-icon { align-items: center; background: var(--tone-amber-bg); border-radius: 10px; color: var(--tone-amber-fg); display: inline-flex; flex: 0 0 auto; height: 34px; justify-content: center; width: 34px; }
.campaigns-table td > span, .campaigns-table td > small { display: block; }
.campaigns-table td small { color: var(--color-muted); font-size: 13px; margin-top: 3px; }
.campaign-tabs { border-bottom: 1px solid var(--color-border); display: flex; gap: 4px; margin: 0 0 20px; overflow-x: auto; padding: 0 2px; }
.campaign-tab { align-items: center; border-bottom: 2px solid transparent; color: var(--color-muted); display: inline-flex; flex: 0 0 auto; gap: 6px; min-height: 44px; padding: 8px 12px; text-decoration: none; }
.campaign-tab:hover, .campaign-tab:focus-visible { color: var(--color-primary); }
.campaign-tab.is-active { border-bottom-color: var(--color-primary); color: var(--color-primary); font-weight: 700; }
.campaign-tab.is-disabled { cursor: not-allowed; opacity: .58; }
.campaign-tab small { background: var(--color-surface-alt); border-radius: 999px; font-size: 10px; padding: 2px 6px; }
.campaign-form .readonly-field, .campaign-detail-card .readonly-field { align-items: center; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-ink); display: flex; gap: 9px; min-height: 42px; padding: 8px 12px; }
.campaign-form .readonly-field i { color: var(--color-primary); }
.campaign-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campaign-summary-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.campaign-summary-list li { align-items: center; border-bottom: 1px solid var(--color-border); display: flex; gap: 10px; min-width: 0; padding: 9px 0; }
.campaign-summary-list li > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.campaign-summary-list li strong { overflow-wrap: anywhere; }
.campaign-summary-list li small { color: var(--color-muted); }
.campaign-summary-list .status-badge { margin-inline-start: auto; }
.campaign-position { align-items: center; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 7px; color: var(--color-muted); display: inline-flex; flex: 0 0 auto; font-size: 13px; font-weight: 700; height: 28px; justify-content: center; width: 28px; }
.campaign-resource-workspace { display: grid; gap: 20px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.campaign-resource-panel { min-width: 0; padding: 24px; }
.campaign-resource-filter { position: relative; }
.campaign-resource-filter i { color: var(--color-subtle); inset-inline-start: 12px; position: absolute; top: 13px; }
.campaign-resource-filter input { background: var(--color-input); border: 1px solid var(--color-border-strong); border-radius: 8px; color: var(--color-ink); font-size: 16px; min-height: 42px; padding: 8px 12px 8px 34px; width: 100%; }
.campaign-resource-type-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.campaign-resource-type-filter .button.is-active { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
.campaign-available-list, .campaign-playlist-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.campaign-resource-option { align-items: center; border: 1px solid var(--color-border); border-radius: 10px; display: flex; gap: 10px; min-width: 0; padding: 10px; }
.campaign-resource-option[hidden] { display: none; }
.campaign-resource-copy, .campaign-playlist-copy { display: grid; gap: 2px; min-width: 0; }
.campaign-resource-copy strong, .campaign-playlist-copy strong { overflow-wrap: anywhere; }
.campaign-resource-copy small, .campaign-playlist-copy small { color: var(--color-muted); }
.campaign-resource-option .button { flex: 0 0 auto; margin-inline-start: auto; }
.campaign-device-filters { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(150px, .55fr); margin-bottom: 14px; }
.campaign-device-list { display: grid; gap: 10px; }
.campaign-device-option, .campaign-device-item { align-items: center; border: 1px solid var(--color-border); border-radius: 10px; display: flex; gap: 10px; min-width: 0; padding: 10px; }
.campaign-device-item.is-disabled { background: var(--color-danger-soft); }
.campaign-device-icon { align-items: center; background: var(--color-primary-soft); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-primary); display: inline-flex; flex: 0 0 auto; height: 42px; justify-content: center; width: 42px; }
.campaign-device-copy { display: grid; gap: 2px; min-width: 0; }
.campaign-device-copy strong { overflow-wrap: anywhere; }
.campaign-device-copy small { color: var(--color-muted); }
.campaign-device-option .status-badge, .campaign-device-item .status-badge { margin-inline-start: auto; }
.campaign-device-option .button { flex: 0 0 auto; }
.campaign-device-item .icon-button { flex: 0 0 auto; }
.campaign-device-empty { padding: 28px 12px; }
.campaign-resource-thumbnail { align-items: center; background: var(--color-primary-soft); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-primary); display: inline-flex; flex: 0 0 auto; height: 42px; justify-content: center; width: 50px; }
.campaign-resource-thumbnail img { height: 100%; object-fit: cover; width: 100%; }
.campaign-resource-thumbnail-demo { background: var(--color-warning-soft); color: var(--color-warning); }
.campaign-resource-thumbnail-video { background: var(--color-ink); color: #fff; }
.campaign-resource-count { align-items: center; background: var(--color-primary-soft); border-radius: 999px; color: var(--color-primary); display: inline-flex; font-size: 13px; font-weight: 700; height: 28px; justify-content: center; min-width: 28px; padding: 0 8px; }
.campaign-device-selector { min-width: 0; padding: 24px; }
.campaign-device-selector-heading .card-heading { align-items: flex-start; gap: 20px; }
.campaign-device-selection-summary { align-items: center; display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px 10px; justify-content: flex-end; }
.campaign-device-selection-summary strong { color: var(--color-primary); font-size: 24px; line-height: 1; }
.campaign-device-selection-summary span { color: var(--color-muted); font-size: 14px; font-weight: 600; }
.campaign-site-groups { display: grid; gap: 10px; margin-top: 22px; }
.campaign-site-group { border: 1px solid var(--color-border); border-radius: 12px; min-width: 0; overflow: hidden; }
.campaign-site-header { align-items: center; background: var(--color-surface-soft); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto auto; min-height: 64px; padding: 10px 14px; }
.campaign-site-toggle { align-items: center; background: transparent; border: 0; color: var(--color-ink); cursor: pointer; display: flex; font: inherit; gap: 10px; min-width: 0; padding: 8px 4px; text-align: start; }
.campaign-site-toggle i { color: var(--color-primary); font-size: 14px; transition: transform .18s ease; }
.campaign-site-toggle[aria-expanded="true"] i { transform: rotate(90deg); }
.campaign-site-name { font-weight: 700; overflow-wrap: anywhere; }
.campaign-site-scope { align-items: center; display: inline-flex; min-height: 44px; }
.campaign-site-scope select { min-width: 150px; }
.campaign-site-select { align-items: center; cursor: pointer; display: inline-flex; min-height: 44px; padding: 7px; }
.campaign-site-select input, .campaign-kiosk-row input { accent-color: var(--color-primary); block-size: 18px; cursor: pointer; inline-size: 18px; margin: 0; }
.campaign-site-select input:disabled, .campaign-kiosk-row input:disabled { cursor: not-allowed; }
.campaign-site-count { background: var(--color-primary-soft); border-radius: 999px; color: var(--color-primary); font-size: 13px; font-weight: 700; min-width: 48px; padding: 6px 9px; text-align: center; }
.campaign-site-kiosks { border-top: 1px solid var(--color-border); display: grid; gap: 8px; padding: 12px 14px; }
.campaign-kiosk-row { align-items: center; border: 1px solid var(--color-border); border-radius: 9px; cursor: pointer; display: flex; gap: 11px; min-height: 48px; padding: 8px 10px; transition: background-color .18s ease, border-color .18s ease; }
.campaign-kiosk-row:hover { background: var(--color-primary-soft); border-color: var(--color-border-strong); }
.campaign-kiosk-row:has(input:focus-visible), .campaign-site-select:has(input:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.campaign-kiosk-row.is-disabled { background: var(--color-danger-soft); border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-border)); }
.campaign-kiosk-copy { display: grid; gap: 3px; min-width: 0; }
.campaign-kiosk-copy strong { overflow-wrap: anywhere; }
.campaign-kiosk-copy small { align-items: center; color: var(--color-danger); display: inline-flex; font-size: 12px; gap: 5px; }
.campaign-kiosk-copy small .status-dot { background: currentColor; }
.campaign-site-empty { color: var(--color-muted); margin: 4px; padding: 8px; }
.campaign-playlist-list { counter-reset: campaign-position; }
.campaign-playlist-item { align-items: center; border: 1px solid var(--color-border); border-radius: 10px; display: grid; gap: 9px; grid-template-columns: auto auto minmax(100px, 1fr) minmax(90px, .55fr) minmax(135px, .8fr) auto; min-width: 0; padding: 10px; }
.campaign-playlist-item.is-disabled { background: var(--color-danger-soft); border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border)); }
.campaign-playlist-item .campaign-resource-thumbnail { height: 38px; width: 44px; }
.campaign-duration-field, .campaign-transition-field { display: grid; gap: 4px; min-width: 0; }
.campaign-duration-field > span, .campaign-transition-field > span { color: var(--color-muted); font-size: 11px; }
.campaign-duration-field input, .campaign-transition-field select { min-width: 0; width: 100%; }
.campaign-duration-field strong { font-size: 14px; min-height: 38px; padding-top: 9px; }
.campaign-item-actions { display: flex; gap: 3px; }
.campaign-item-actions .icon-button { height: 32px; width: 32px; }
.campaign-remove-resource { color: var(--color-danger); }
.campaign-resource-empty, .campaign-playlist-empty { padding: 28px 12px; }
.campaign-resource-actions { margin-top: 20px; }

@media (max-width: 1000px) { .campaign-resource-workspace { grid-template-columns: 1fr; }.campaign-playlist-item { grid-template-columns: auto auto minmax(0, 1fr) auto; }.campaign-duration-field, .campaign-transition-field { grid-column: span 2; }.campaign-item-actions { grid-column: 4; grid-row: 1; } }
@media (max-width: 800px) { .campaigns-list-card, .campaign-resource-panel { padding: 18px 15px; }.campaigns-filter-bar { margin-inline: -15px; padding-inline: 15px; }.campaigns-table-wrapper { display: none; }.campaign-mobile-card { min-width: 0; }.campaign-detail-grid { grid-template-columns: 1fr; }.campaign-tabs { margin-inline: -2px; }.campaign-playlist-item { align-items: start; grid-template-columns: auto auto minmax(0, 1fr) auto; }.campaign-playlist-copy { padding-top: 5px; }.campaign-duration-field, .campaign-transition-field { grid-column: 1 / -1; }.campaign-item-actions { grid-column: 4; grid-row: 1; flex-wrap: wrap; }.campaign-item-actions .icon-button { height: 30px; width: 30px; }.campaign-resource-option { align-items: flex-start; }.campaign-resource-option .button { align-self: center; }.campaign-device-filters { grid-template-columns: 1fr; }.campaign-device-option, .campaign-device-item { align-items: flex-start; flex-wrap: wrap; }.campaign-device-option .status-badge, .campaign-device-item .status-badge { margin-inline-start: 0; }.campaign-device-option .button { margin-inline-start: auto; }.campaign-device-item .icon-button { margin-inline-start: auto; }.campaign-resource-actions { flex-direction: column-reverse; }.campaign-resource-actions .button { width: 100%; } }
@media (max-width: 800px) { .campaign-device-selector { padding: 18px 15px; }.campaign-device-selector-heading .card-heading { display: grid; gap: 16px; }.campaign-device-selection-summary { justify-content: flex-start; }.campaign-site-header { grid-template-columns: minmax(0, 1fr) auto; }.campaign-site-count { grid-column: 1 / -1; justify-self: start; }.campaign-site-kiosks { padding: 10px; }.campaign-kiosk-row { min-height: 52px; padding: 9px 8px; } }
[dir="rtl"] .campaign-site-toggle[aria-expanded="true"] i { transform: rotate(-90deg); }

/* Authentication surface: a focused, branded entry point rather than a generic form card. */
.auth-shell { background: var(--color-background); color: var(--color-ink); }
.login-page { background: radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 34%), radial-gradient(circle at 90% 88%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 31%); isolation: isolate; justify-content: flex-start; min-height: 100svh; padding: clamp(28px, 7vh, 76px) 20px 78px; }
.login-page::before { background-image: linear-gradient(color-mix(in srgb, var(--color-primary) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 8%, transparent) 1px, transparent 1px); background-size: 44px 44px; content: ''; inset: 0; mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%); opacity: .38; pointer-events: none; position: absolute; z-index: -2; }
.login-panel { background: color-mix(in srgb, var(--color-surface) 92%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border)); border-radius: 26px; box-shadow: 0 30px 90px color-mix(in srgb, var(--color-ink) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-surface) 50%, transparent) inset; max-width: 474px; margin-top: clamp(12px, 2vh, 28px); overflow: hidden; padding: 44px clamp(25px, 5vw, 54px) 43px; }
.login-panel::before { background: linear-gradient(90deg, transparent, var(--color-primary), #52a6ff, transparent); content: ''; height: 2px; inset: 0 14% auto; opacity: .85; position: absolute; }
.login-decoration { border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent); border-radius: 50%; filter: blur(.2px); opacity: .55; pointer-events: none; position: absolute; z-index: -1; }
.decoration-one { height: 330px; left: -140px; top: 12%; width: 330px; }
.decoration-two { bottom: 7%; height: 220px; right: -80px; width: 220px; }
.auth-logo { align-items: center; display: flex; justify-content: center; margin: 0 auto 38px; min-height: 38px; }
.login-panel .auth-logo > img[data-brand-logo] { align-self: center; box-sizing: border-box; display: block; flex: 0 1 260px; height: auto !important; max-width: 100% !important; object-fit: contain; width: 260px !important; }
.login-panel .auth-logo > img[data-brand-logo][hidden] { display: none !important; }
.login-heading { margin-bottom: 30px; text-align: center; }
.login-heading h1 { font-size: clamp(29px, 4vw, 37px); letter-spacing: -.055em; line-height: 1.08; margin: 0 0 12px; }
.login-heading p { font-size: 15px; line-height: 1.6; margin: 0 auto; max-width: 330px; }
.login-form { gap: 21px; }
.login-form .field-group { gap: 8px; }
.login-form label { font-size: 13px; letter-spacing: .055em; text-transform: uppercase; }
.field-label-row a { font-size: 13px; }
.input-with-icon input { background: color-mix(in srgb, var(--color-input) 82%, var(--color-primary-soft)); border-color: color-mix(in srgb, var(--color-primary) 17%, var(--color-border-strong)); border-radius: 13px; min-height: 54px; padding-inline: 44px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.input-with-icon input:hover { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border-strong)); }
.input-with-icon input:focus { background: var(--color-input); border-color: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 16%, transparent); outline: 0; }
.input-with-icon > i { top: 17px; }
.password-toggle { border-radius: 9px; color: var(--color-muted); height: 42px; inset-block-start: 50%; inset-inline-end: 8px; transition: background .2s ease, color .2s ease; touch-action: manipulation; }
.password-toggle:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.password-toggle:focus-visible { outline-offset: 1px; }
.button-primary.button-block { background: linear-gradient(110deg, var(--color-primary-button), color-mix(in srgb, var(--color-primary-button) 68%, #63b3ff)); border: 0; border-radius: 13px; box-shadow: 0 12px 24px color-mix(in srgb, var(--color-primary) 24%, transparent); min-height: 54px; margin-top: 4px; }
.button-primary.button-block:hover { background: linear-gradient(110deg, var(--color-primary-dark), var(--color-primary-button)); transform: translateY(-1px); }
.inline-alert-danger { background: var(--color-danger-soft); border: 1px solid color-mix(in srgb, var(--color-danger) 20%, var(--color-border)); color: var(--color-danger); }
.auth-footer { color: var(--color-muted); font-size: 12px; letter-spacing: .02em; }
.auth-back-link { margin-top: 28px; }
html[dir="rtl"] .login-heading { text-align: center; }

@media (max-width: 500px) {
    .login-page { padding: 22px 14px 66px; }
    .login-panel { border-radius: 22px; margin-top: 4px; padding: 34px 20px 29px; }
    .auth-logo { margin-bottom: 31px; }
    .login-panel .auth-logo > img[data-brand-logo] { width: 260px !important; }
    .login-heading { margin-bottom: 26px; }
    .login-heading h1 { font-size: 29px; }
    .login-heading p { font-size: 14px; }
}

.turnstile-field { align-items: center; display: flex; flex-direction: column; gap: 7px; min-width: 0; width: 100%; }
.turnstile-widget { display: flex; justify-content: center; max-width: 100%; min-height: 65px; overflow: hidden; width: 100%; }
.turnstile-widget iframe { max-width: 100%; }
.turnstile-field .field-error { align-self: stretch; }