@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&display=swap');

:root {
    --bg: #f4f7fc;
    --bg-strong: #e6ecf6;
    --surface: #ffffff;
    --surface-2: #f7fafe;
    --surface-3: #ecf2fa;
    --ink: #0e1a33;
    --ink-2: #1d2c4d;
    --muted: #6a7693;
    --line: #d8e0ec;
    --line-strong: #c2cee0;
    --primary: #1d3a8b;
    --primary-soft: #e6efff;
    --gold: #2bb7f0;
    --coral: #d94a67;
    --blue: #2bb7f0;
    --sidebar: #0a1530;
    --sidebar-2: #142447;
    --radius: 8px;
    --shadow-sm: 0 8px 22px rgba(14, 26, 51, .08);
    --shadow-md: 0 18px 48px rgba(14, 26, 51, .13);
    --shadow-lg: 0 30px 90px rgba(14, 26, 51, .20);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background:
        linear-gradient(135deg, rgba(29, 58, 139, .10), transparent 34%),
        linear-gradient(315deg, rgba(43, 183, 240, .10), transparent 38%),
        linear-gradient(180deg, var(--bg), #eef2f7);
    color: var(--ink);
    font-family: Arial, "Noto Sans Hebrew", sans-serif;
    letter-spacing: 0;
    direction: inherit;
}

html[lang="he"] body,
html[lang="he"] button,
html[lang="he"] input,
html[lang="he"] select,
html[lang="he"] textarea {
    font-family: "Heebo", Arial, "Noto Sans Hebrew", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button,
a,
input,
select,
textarea {
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    padding: 28px 20px;
    background:
        radial-gradient(1100px 540px at 88% -12%, rgba(43, 183, 240, .26), transparent 60%),
        radial-gradient(900px 520px at -8% 110%, rgba(43, 183, 240, .22), transparent 58%),
        radial-gradient(800px 460px at 50% 50%, rgba(29, 58, 139, .12), transparent 65%),
        linear-gradient(160deg, #07112a 0%, #0f1d3f 48%, #0a1530 100%);
    position: relative;
    overflow-x: hidden;
}

.auth-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, black 35%, transparent 78%);
    mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, black 35%, transparent 78%);
    pointer-events: none;
}

.auth-shell {
    width: min(1180px, 100%);
    position: relative;
    z-index: 1;
}

.auth-shell .flash {
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(20, 28, 42, .78);
    color: #fff;
    backdrop-filter: blur(14px);
}

.auth-shell .flash-success {
    border-color: rgba(43, 183, 240, .55);
    color: #bfe2ff;
}

.auth-shell .flash-danger {
    border-color: rgba(255, 130, 150, .55);
    color: #ffc1cd;
}

.login-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 28px 32px 22px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .985), rgba(252, 253, 255, .96));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 30px 80px rgba(8, 12, 22, .55),
        0 12px 30px rgba(8, 12, 22, .35);
    overflow: hidden;
    isolation: isolate;
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, #3dc1f0 25%, var(--gold) 55%, var(--coral) 78%, var(--blue) 100%);
    z-index: 2;
}

.login-card__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.login-card__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
}

.login-card__blob--a {
    width: 360px;
    height: 360px;
    top: -120px;
    inset-inline-end: -80px;
    background: radial-gradient(circle, rgba(43, 183, 240, .55), transparent 70%);
}

.login-card__blob--b {
    width: 320px;
    height: 320px;
    bottom: -120px;
    inset-inline-start: -80px;
    background: radial-gradient(circle, rgba(43, 183, 240, .35), transparent 70%);
}

.login-card__blob--c {
    width: 220px;
    height: 220px;
    top: 40%;
    inset-inline-start: 42%;
    background: radial-gradient(circle, rgba(29, 58, 139, .22), transparent 70%);
}

.login-card__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(20, 28, 42, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 28, 42, .035) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black, transparent 80%);
}

.login-card > *:not(.login-card__bg) {
    position: relative;
    z-index: 1;
}

.login-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(20, 28, 42, .07);
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
}

.login-brand__logo {
    display: block;
    height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.auth-languages {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: rgba(20, 28, 42, .04);
    border: 1px solid rgba(20, 28, 42, .06);
    border-radius: 999px;
}

.auth-languages a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 800;
}

.auth-languages a.active {
    background: #fff;
    color: var(--primary);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 4px 10px rgba(29, 58, 139, .14);
}

.auth-languages a:not(.active):hover {
    color: var(--primary);
}

.login-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 8px 0 22px;
}

.login-form-side {
    display: grid;
    gap: 22px;
    max-width: 460px;
    width: 100%;
}

.login-intro {
    display: grid;
    gap: 10px;
}

.login-card h1 {
    margin: 2px 0 0;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.08;
    letter-spacing: -.01em;
    color: var(--ink);
}

.login-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
    font-size: 15px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--primary);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .12em;
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), transparent);
    border-radius: 2px;
}

.login-form {
    gap: 16px;
}

.login-form .field {
    display: grid;
    gap: 6px;
}

.login-form .field__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.login-form .field__hint {
    font-size: 12px;
    font-weight: 800;
    color: var(--primary);
    text-transform: none;
    letter-spacing: 0;
}

.login-form .field__hint:hover {
    text-decoration: underline;
}

.login-form .field__control {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(20, 28, 42, .04);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.login-form .field__control:hover {
    border-color: var(--line-strong);
}

.login-form .field__control:focus-within {
    border-color: var(--primary);
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(29, 58, 139, .14),
        0 1px 0 rgba(255, 255, 255, .9) inset;
}

.login-form .field__icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 46px;
    color: var(--muted);
    flex-shrink: 0;
}

.login-form .field__control:focus-within .field__icon {
    color: var(--primary);
}

.login-form .field__control input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 12px 6px;
    box-shadow: none;
    border-radius: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.login-form .field__control input::placeholder {
    color: #a4adba;
    font-weight: 500;
}

.login-form .field__control input:focus {
    box-shadow: none;
}

.login-form .field__toggle {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 46px;
    border: 0;
    background: transparent;
    color: var(--muted);
    flex-shrink: 0;
    padding: 0;
    min-height: 0;
}

.login-form .field__toggle:hover {
    color: var(--primary);
    background: rgba(29, 58, 139, .06);
}

.login-form .field__toggle .icon-eye-off {
    display: none;
}

.login-form .field__toggle.is-visible .icon-eye {
    display: none;
}

.login-form .field__toggle.is-visible .icon-eye-off {
    display: inline;
}

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-2);
    text-transform: none;
    letter-spacing: 0;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.checkbox > span {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--line-strong);
    background: #fff;
    transition: all .18s ease;
    flex-shrink: 0;
}

.checkbox input:checked + span {
    background: linear-gradient(135deg, var(--primary), #3dc1f0);
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(29, 58, 139, .25);
}

.checkbox input:checked + span::after {
    content: "";
    position: absolute;
    inset-inline-start: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox input:focus-visible + span {
    box-shadow: 0 0 0 4px rgba(29, 58, 139, .18);
}

.checkbox em {
    font-style: normal;
}

.login-secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.login-secure svg {
    color: var(--primary);
}

.login-submit {
    width: 100%;
    height: 50px;
    min-height: 50px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .01em;
    gap: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, #1e4dad 50%, #162b6b 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .25) inset,
        0 12px 28px rgba(29, 58, 139, .32);
    position: relative;
    overflow: hidden;
}

.login-submit::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .25) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .6s ease;
}

.login-submit:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .25) inset,
        0 18px 38px rgba(29, 58, 139, .38);
}

.login-submit:hover::after {
    transform: translateX(100%);
}

.login-submit__arrow {
    transition: transform .25s ease;
}

.rtl .login-submit__arrow {
    transform: scaleX(-1);
}

.login-submit:hover .login-submit__arrow {
    transform: translateX(3px);
}

.rtl .login-submit:hover .login-submit__arrow {
    transform: translateX(-3px) scaleX(-1);
}

.login-features {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.login-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 700;
}

.login-features li svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 6px;
    background: var(--primary-soft);
    color: var(--primary);
}

.login-preview-side {
    position: relative;
    display: grid;
    gap: 16px;
    align-content: center;
    padding: 26px;
    border-radius: 18px;
    background:
        radial-gradient(900px 400px at 100% 0%, rgba(43, 183, 240, .25), transparent 50%),
        radial-gradient(700px 360px at 0% 100%, rgba(29, 58, 139, .22), transparent 60%),
        linear-gradient(160deg, #0a1530 0%, #142447 60%, #07112a 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .08) inset,
        0 30px 60px rgba(8, 12, 22, .35);
    color: #e6edf6;
    overflow: hidden;
    min-height: 100%;
}

.login-preview-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
    pointer-events: none;
}

.login-preview-side > * {
    position: relative;
}

.login-preview-head {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: #cfe7e3;
    width: fit-content;
}

.live-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7ad6fd;
    box-shadow: 0 0 0 0 rgba(122, 214, 253, .55);
    animation: live-pulse 1.8s ease-out infinite;
}

@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(122, 214, 253, .55); }
    70% { box-shadow: 0 0 0 10px rgba(122, 214, 253, 0); }
    100% { box-shadow: 0 0 0 0 rgba(122, 214, 253, 0); }
}

.login-preview-tagline {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
    max-width: 36ch;
}

.device-mockup {
    display: grid;
    place-items: center;
    margin-top: 6px;
}

.device-mockup__bezel {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, #2c3548, #1c2336);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .08) inset,
        0 22px 50px rgba(0, 0, 0, .45);
}

.device-mockup__screen {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #0a0f18;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.device-mockup__stand {
    width: 80px;
    height: 12px;
    margin: -3px auto 0;
    background: linear-gradient(180deg, #2c3548, #161c2c);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}

.mock-stage {
    position: absolute;
    inset: 0;
    direction: ltr;
}

.mock-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 300px at 90% -10%, rgba(43, 183, 240, .55), transparent 60%),
        radial-gradient(500px 260px at 0% 110%, rgba(43, 183, 240, .42), transparent 60%),
        linear-gradient(135deg, #102a3f, #0a1726 60%, #122236);
}

.mock-logo {
    position: absolute;
    top: 10px;
    left: 12px;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

.mock-clock {
    position: absolute;
    top: 10px;
    right: 12px;
    text-align: right;
    color: #fff;
    line-height: 1;
}

.mock-clock strong {
    display: block;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .02em;
}

.mock-clock small {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    color: rgba(255, 255, 255, .7);
    letter-spacing: .04em;
}

.mock-hero {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 36px;
    display: grid;
    gap: 4px;
    color: #fff;
}

.mock-eyebrow {
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #ffd58c;
}

.mock-hero strong {
    font-size: 18px;
    line-height: 1.15;
    font-weight: 900;
    max-width: 80%;
}

.mock-media {
    position: absolute;
    right: 12px;
    bottom: 38px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(8, 14, 22, .55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
}

.mock-media__chip {
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mock-media__bars {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 20px;
}

.mock-media__bars i {
    display: block;
    width: 3px;
    background: linear-gradient(180deg, #7ad6fd, #1e4dad);
    border-radius: 2px;
    transform-origin: bottom;
    animation: mock-bars 1.4s ease-in-out infinite;
}

.mock-media__bars i:nth-child(1) { height: 60%; animation-delay: 0s; }
.mock-media__bars i:nth-child(2) { height: 90%; animation-delay: .15s; }
.mock-media__bars i:nth-child(3) { height: 50%; animation-delay: .3s; }
.mock-media__bars i:nth-child(4) { height: 75%; animation-delay: .45s; }
.mock-media__bars i:nth-child(5) { height: 40%; animation-delay: .6s; }

@keyframes mock-bars {
    0%, 100% { transform: scaleY(.5); }
    50% { transform: scaleY(1); }
}

.mock-ticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22px;
    background: linear-gradient(90deg, rgba(29, 58, 139, .92), rgba(30, 77, 173, .92));
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.mock-ticker span {
    display: inline-block;
    white-space: nowrap;
    padding-inline-start: 100%;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    animation: mock-ticker 14s linear infinite;
}

@keyframes mock-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

.login-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 6px;
}

.login-stats > div {
    display: grid;
    gap: 2px;
    padding: 12px 10px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    text-align: center;
}

.login-stats strong {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0;
}

.login-stats span {
    color: rgba(255, 255, 255, .65);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid rgba(20, 28, 42, .07);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.login-footer__sep {
    color: var(--line-strong);
}

.demo-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.demo-grid div,
.metric-card,
.panel,
.designer-panel {
    border: 1px solid rgba(203, 213, 223, .9);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .94);
}

.demo-grid div {
    padding: 16px;
    background: linear-gradient(180deg, #fff, var(--surface-2));
}

.demo-grid span,
.business-list span,
.metric-card span,
.media-card span,
.sidebar-user span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.app-page {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 100vh;
}

.mobile-menu-btn,
.mobile-backdrop {
    display: none;
}

.app-page.ltr {
    direction: ltr;
}

.app-page.rtl {
    direction: rtl;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 34%),
        linear-gradient(160deg, var(--sidebar), var(--sidebar-2));
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 26px;
    box-shadow: 16px 0 44px rgba(21, 25, 34, .18);
}

.nav {
    display: grid;
    gap: 8px;
}

.nav a {
    position: relative;
    padding: 13px 14px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .74);
    font-weight: 800;
}

.nav a.active,
.nav a:hover {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

.nav a.active::before {
    content: "";
    position: absolute;
    inset-block: 11px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 99px;
    background: var(--gold);
}

.sidebar-user {
    margin-top: auto;
    display: grid;
    gap: 7px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.lang-dropdown {
    position: relative;
    margin-bottom: 14px;
}

.lang-dropdown[open] .lang-dropdown__chevron {
    transform: rotate(180deg);
}

.lang-dropdown__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    list-style: none;
    transition: background .18s ease, border-color .18s ease;
}

.lang-dropdown__toggle::-webkit-details-marker,
.lang-dropdown__toggle::marker {
    display: none;
    content: '';
}

.lang-dropdown__toggle:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .22);
}

.lang-dropdown[open] .lang-dropdown__toggle {
    background: rgba(43, 183, 240, .14);
    border-color: rgba(43, 183, 240, .38);
}

.lang-dropdown__icon {
    color: var(--gold);
    font-size: 14px;
}

.lang-dropdown__current {
    flex: 1;
    text-align: start;
    color: #fff;
}

.lang-dropdown__chevron {
    font-size: 11px;
    opacity: .75;
    transition: transform .2s ease;
}

.lang-dropdown__menu {
    position: absolute;
    inset-inline: 0;
    bottom: calc(100% + 10px);
    display: grid;
    gap: 2px;
    padding: 8px;
    min-width: 220px;
    background: #fff;
    border: 1px solid rgba(20, 28, 42, .08);
    border-radius: 14px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 20px 50px rgba(8, 12, 22, .45);
    z-index: 30;
    animation: lang-dropdown-in .16s ease-out;
}

@keyframes lang-dropdown-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.lang-dropdown__menu .lang-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-2);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.lang-dropdown__menu .lang-dropdown__item:hover {
    background: var(--surface-3);
    color: var(--primary);
}

.lang-dropdown__menu .lang-dropdown__item.is-active {
    background: var(--primary-soft);
    color: var(--primary);
}

.lang-dropdown__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    padding: 0 7px;
    border-radius: 7px;
    background: linear-gradient(180deg, #2a4ba6, var(--primary));
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .25) inset,
        0 1px 2px rgba(8, 12, 22, .15);
}

.lang-dropdown__menu .lang-dropdown__item.is-active .lang-dropdown__code {
    background: linear-gradient(180deg, var(--gold), #1d9ed1);
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .35) inset,
        0 2px 6px rgba(43, 183, 240, .35);
}

.lang-dropdown__menu .lang-dropdown__name {
    flex: 1;
    text-align: start;
    color: inherit;
    font-weight: 700;
}

.lang-dropdown__check {
    color: var(--primary);
    font-size: 12px;
    flex-shrink: 0;
}

.sidebar-user > a {
    color: #a9d4ff;
    font-weight: 800;
}

.main-shell {
    padding: 34px;
    display: grid;
    gap: 24px;
    align-content: start;
}

.page-header,
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.page-header {
    padding: 6px 2px 2px;
}

.page-header h1 {
    margin: 6px 0 0;
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.08;
}

.panel {
    padding: 22px;
    box-shadow: var(--shadow-sm);
}

.panel h2 {
    margin: 0;
    font-size: 19px;
}

.compact-panel {
    min-height: 150px;
}

.grid {
    display: grid;
    gap: 18px;
}

.two-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card {
    position: relative;
    padding: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.metric-card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--gold));
}

.metric-card strong {
    display: block;
    margin-top: 10px;
    font-size: 38px;
    letter-spacing: 0;
}

.metric-card.ok::before {
    background: var(--primary);
}

.metric-card.warn::before {
    background: var(--coral);
}

.field-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

.stack-form {
    display: grid;
    gap: 14px;
}

label {
    display: grid;
    gap: 7px;
    color: var(--ink-2);
    font-weight: 800;
    font-size: 13px;
}

input,
select,
textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 13px;
    background: #fff;
    color: var(--ink);
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

textarea {
    resize: vertical;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    display: block;
    max-width: 100%;
    min-height: 44px;
    padding-inline: 12px;
    line-height: 1.2;
    direction: ltr;
    text-align: start;
    appearance: none;
    -webkit-appearance: none;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value {
    min-height: 1.2em;
    text-align: start;
}

.rich-text-field {
    gap: 8px;
}

.rich-text-field:not(.is-ready) .rich-text-toolbar,
.rich-text-field:not(.is-ready) .rich-text-editor {
    display: none;
}

.rich-text-field.is-ready .rich-text-source {
    display: none;
}

.rich-text-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, var(--surface-2));
}

.rich-text-toolbar button,
.rich-text-color {
    width: 36px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #fff;
    color: var(--ink);
    display: inline-grid;
    place-items: center;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.rich-text-toolbar button:hover,
.rich-text-color:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.rich-text-color {
    position: relative;
    overflow: hidden;
}

.rich-text-color input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.rich-text-color span {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-grid;
    place-items: center;
    background: var(--swatch);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.rich-text-editor {
    min-height: 136px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 13px;
    background: #fff;
    color: var(--ink);
    line-height: 1.55;
    font-weight: 600;
    outline: none;
    overflow: auto;
}

.rich-text-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
    pointer-events: none;
}

.rich-text-editor:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(29, 58, 139, .12);
}

.rich-text-field.is-invalid .rich-text-editor {
    border-color: var(--coral);
    box-shadow: 0 0 0 4px rgba(217, 74, 103, .12);
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--line-strong);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(29, 58, 139, .12);
}

.primary-btn,
.ghost-btn,
.danger-btn,
.template-chip,
.tool-grid button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 8px;
    border: 0;
    padding: 0 16px;
    font-weight: 900;
}

.primary-btn {
    background: linear-gradient(135deg, var(--primary), #1e4dad);
    color: #fff;
    box-shadow: 0 12px 26px rgba(29, 58, 139, .22);
}

.primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(29, 58, 139, .28);
}

.ghost-btn {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 6px 16px rgba(21, 25, 34, .05);
}

.ghost-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.danger-btn {
    background: rgba(217, 74, 103, .12);
    color: #a92a44;
}

.header-actions,
.row-actions,
.status-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.history-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, var(--surface-2));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.history-group .icon-btn {
    padding: 6px 9px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-2);
    display: inline-grid;
    place-items: center;
    line-height: 0;
}

.history-group .icon-btn:hover:not(:disabled) {
    background: var(--primary-soft);
    color: var(--primary);
}

.history-group .icon-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    font-weight: 800;
}

.pill.ok {
    color: var(--primary);
}

.pill.muted {
    color: var(--muted);
}

.flash {
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}

.flash-success {
    border-color: rgba(29, 58, 139, .35);
    color: var(--primary);
}

.flash-danger {
    border-color: rgba(217, 74, 103, .38);
    color: #a92a44;
}

.business-list {
    display: grid;
    gap: 10px;
}

.screen-filter-bar {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0 18px;
    padding: 12px;
    border: 1px solid rgba(203, 213, 223, .72);
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fafc, #fff);
}

.screen-filter-field {
    flex: 1 1 260px;
    min-width: min(100%, 220px);
    margin: 0;
}

.screen-filter-field > span {
    color: var(--ink);
}

.screen-filter-field select {
    min-height: 44px;
}

.screen-filter-reset {
    min-height: 44px;
    flex: 0 0 auto;
}

.screen-filter-summary {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.branch-tree {
    display: grid;
    gap: 12px;
}

.branch-city,
.branch-node {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.branch-city {
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.branch-node {
    margin: 10px 12px;
    background: #fff;
}

.branch-city > summary,
.branch-node > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    cursor: pointer;
}

.branch-city > summary {
    min-height: 52px;
}

.branch-node > summary {
    min-height: 46px;
}

.branch-city[open] > summary,
.branch-node[open] > summary {
    border-bottom: 1px solid rgba(203, 213, 223, .65);
}

.branch-tree .muted {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.branch-city > .business-list,
.branch-node > .business-list {
    padding: 10px 12px 12px;
}

.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, var(--surface-2));
}

.list-row:hover {
    border-color: var(--line-strong);
    box-shadow: 0 10px 24px rgba(21, 25, 34, .07);
}

.mini-status,
.counter {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    border: 1px solid var(--line);
}

.screen-dot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    overflow: visible;
}

.screen-dot::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--coral);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, .95),
        0 0 0 0 rgba(217, 74, 103, .42);
}

.screen-dot.online::before {
    background: #16a34a;
}

.screen-last-seen {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.data-table [data-last-seen] {
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
}

.table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 720px;
}

.data-table th,
.data-table td {
    padding: 15px 13px;
    text-align: start;
    border-bottom: 1px solid var(--line);
}

.data-table th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    background: var(--surface-2);
}

.data-table th:first-child {
    border-start-start-radius: 8px;
}

.data-table th:last-child {
    border-start-end-radius: 8px;
}

.data-table tr:hover td {
    background: rgba(29, 58, 139, .035);
}

code {
    direction: ltr;
    display: inline-block;
    padding: 5px 8px;
    border-radius: 6px;
    background: #edf2f4;
    color: #222936;
}

input[type="email"],
input[type="url"],
code {
    unicode-bidi: plaintext;
}

.big-number {
    display: block;
    margin-top: 20px;
    font-size: 52px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.form-row > *,
.grid > *,
.field-block,
.message-schedule-row > * {
    min-width: 0;
}

.toggle-line {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.toggle-line input,
.days-grid input {
    width: auto;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.days-grid label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.media-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.media-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 6px;
    background: #151922;
}

.media-thumb img,
.media-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.color-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dot);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--line);
}

.designer-root {
    display: grid;
    grid-template-columns: 300px minmax(460px, 1fr) 330px;
    gap: 18px;
    align-items: start;
}

.designer-panel,
.canvas-panel {
    min-height: 600px;
}

.designer-panel {
    position: sticky;
    top: 24px;
    padding: 18px;
    display: grid;
    gap: 16px;
    align-content: start;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(249, 251, 253, .96));
    box-shadow: var(--shadow-md);
}

.designer-panel-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(241, 245, 249, .86);
}

.designer-panel-tab {
    min-width: 0;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.15;
}

.designer-panel-tab:hover {
    color: var(--ink-2);
    background: rgba(255, 255, 255, .78);
}

.designer-panel-tab.is-active {
    border-color: rgba(43, 183, 240, .34);
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 6px 14px rgba(15, 23, 42, .08);
}

.designer-tab-panel {
    display: none;
    min-width: 0;
}

.designer-tab-panel.is-active {
    display: grid;
    gap: 14px;
    align-content: start;
}

.subhead {
    margin-top: 6px;
}

.template-picker,
.element-picker {
    display: grid;
    min-width: 0;
}

.template-picker__summary,
.element-picker__summary {
    cursor: default;
    list-style: none;
}

.template-picker__summary::-webkit-details-marker,
.element-picker__summary::-webkit-details-marker {
    display: none;
}

.template-picker__toggle,
.element-picker__toggle {
    display: none;
}

.template-picker__current {
    display: none;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.template-chip {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--accent), white 60%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent), white 90%), #fff);
    color: #162126;
    min-height: 112px;
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: space-between;
    align-items: stretch;
    justify-content: stretch;
    justify-items: stretch;
    gap: 9px;
    text-align: start;
    overflow: hidden;
}

.template-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--accent), transparent 78%);
}

.template-chip.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 78%);
}

.template-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent), #11151d 25%), color-mix(in srgb, var(--accent), white 18%));
    overflow: hidden;
}

.template-preview span {
    position: absolute;
    display: block;
    border-radius: 4px;
    background: rgba(255, 255, 255, .82);
}

.template-preview span:nth-child(1) {
    width: 28%;
    height: 18%;
    inset-inline-start: 8%;
    top: 12%;
}

.template-preview span:nth-child(2) {
    width: 44%;
    height: 46%;
    inset-inline-end: 8%;
    top: 22%;
    background: rgba(255, 255, 255, .42);
}

.template-preview span:nth-child(3) {
    width: 84%;
    height: 13%;
    inset-inline-start: 8%;
    bottom: 9%;
    background: rgba(17, 21, 29, .60);
}

.template-chip strong {
    position: relative;
    z-index: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.25;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.tool-grid button {
    background: linear-gradient(180deg, #fff, var(--surface-3));
    color: var(--ink-2);
    border: 1px solid var(--line);
    min-height: 46px;
}

.tool-grid button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.field-inline {
    margin-top: 4px;
}

.canvas-panel {
    position: relative;
    position: sticky;
    top: 24px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(45deg, rgba(21, 25, 34, .045) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(21, 25, 34, .045) 25%, transparent 25%),
        linear-gradient(180deg, #e7edf3, #f8fafc);
    background-size: 24px 24px, 24px 24px, auto;
    padding: 56px 20px 20px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .68), var(--shadow-sm);
    height: calc(100vh - 48px);
}

.canvas-toolbar {
    position: absolute;
    inset-inline: 16px;
    top: 14px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.canvas-toolbar span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(203, 213, 223, .72);
}

.wall-focus-controls {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: 4px;
    direction: ltr;
    min-height: 28px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(203, 213, 223, .72);
}

.wall-focus-controls button {
    min-width: 28px;
    height: 22px;
    padding: 0 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    line-height: 1;
    unicode-bidi: isolate;
    cursor: pointer;
}

.wall-focus-controls button.is-active {
    background: var(--accent);
    color: #ff5757;
}

.stage-frame {
    width: min(100%, 980px, calc((100vh - 124px) * 1920 / 1080));
}

.stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 1080;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    background: #102027;
    outline: 1px solid rgba(255, 255, 255, .76);
    container-type: inline-size;
}

.designer-root[data-display-mode="video_wall"] .stage-frame {
    width: min(100%, 1180px);
    direction: ltr;
}

.designer-root[data-display-mode="video_wall"][data-wall-columns="2"] .stage {
    aspect-ratio: 3840 / 1080;
}

.designer-root[data-display-mode="video_wall"][data-wall-columns="3"] .stage {
    aspect-ratio: 5760 / 1080;
}

.designer-root[data-display-mode="video_wall"][data-wall-columns="4"] .stage {
    aspect-ratio: 7680 / 1080;
}

.designer-root[data-display-mode="video_wall"]:not([data-wall-focus="all"]) .stage-frame {
    width: min(100%, 980px, calc((100vh - 124px) * 1920 / 1080));
    aspect-ratio: 1920 / 1080;
    overflow: hidden;
    border-radius: 10px;
}

.designer-root[data-display-mode="video_wall"]:not([data-wall-focus="all"]) .stage {
    width: calc(100% * var(--wall-columns, 1));
    height: 100%;
    aspect-ratio: auto;
    transform: translateX(calc(var(--wall-focus-offset, 0) * -100% / var(--wall-columns, 1)));
    transform-origin: left center;
}

.stage-wall-layer {
    position: absolute;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
}

.stage-wall-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .22), 0 0 18px rgba(43, 183, 240, .28);
}

.stage-wall-label {
    position: absolute;
    top: 8px;
    display: flex;
    justify-content: center;
    color: rgba(255, 255, 255, .94);
    font-size: 12px;
    font-weight: 900;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .46);
}

.stage-wall-label::before {
    content: "";
    position: absolute;
    top: -4px;
    width: max(54px, 42%);
    height: 24px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .52);
    z-index: -1;
}

.stage-guide-layer {
    position: absolute;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}

.stage-guide {
    position: absolute;
    display: block;
    background: rgba(43, 183, 240, .92);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .52),
        0 0 10px rgba(43, 183, 240, .34);
}

.stage-guide--vertical {
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
}

.stage-guide--horizontal {
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
}

.designer-root[data-orientation="portrait"] .stage-frame {
    width: min(100%, 430px, calc((100vh - 124px) * 1080 / 1920));
}

.designer-root[data-orientation="portrait"] .stage {
    aspect-ratio: 1080 / 1920;
}

/* Screen rotation indicator — a small label so the user remembers the layout will be rotated on the player. */
.designer-root[data-rotation="90"] .stage::before,
.designer-root[data-rotation="180"] .stage::before,
.designer-root[data-rotation="270"] .stage::before {
    content: attr(data-rotation-label);
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    z-index: 999;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    pointer-events: none;
}

.stage-item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2cqw;
    overflow: hidden;
    user-select: none;
    touch-action: none;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 0.42cqw;
    box-shadow: var(--element-shadow, none);
    cursor: grab;
}

.designer-root.is-capturing-preview .stage::before,
.designer-root.is-capturing-preview .stage-wall-layer,
.designer-root.is-capturing-preview .stage-guide-layer,
.designer-root.is-capturing-preview .resize-handle,
.designer-root.is-capturing-preview .stage-item.locked::after {
    display: none !important;
    content: none !important;
}

.designer-root.is-capturing-preview .stage {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.designer-root.is-capturing-preview .stage-item {
    border-color: transparent !important;
    box-shadow: var(--element-shadow, none) !important;
    outline: 0 !important;
    cursor: default !important;
}

.stage-item.selected {
    border-color: #fff;
    outline: 2px solid var(--gold);
    outline-offset: 0;
    box-shadow: var(--element-shadow, none), 0 0 0 2px var(--gold), 0 10px 30px rgba(0, 0, 0, .22);
}

.stage-item:active {
    cursor: grabbing;
}

.stage-item.locked {
    cursor: default;
}

.stage-item.locked:active {
    cursor: default;
}

.stage-item.locked .resize-handle {
    display: none;
}

.stage-item.locked::after {
    content: '';
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .72) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='9' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>") center/12px no-repeat;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
    pointer-events: none;
}

.stage-item.locked.selected::after {
    background-color: var(--gold, #d8a93b);
}

.stage-item .content {
    width: 100%;
    line-height: 1.15;
    word-break: break-word;
    white-space: pre-line;
}

.stage-item.type-shape {
    padding: 0;
}

.stage-item .shape-content {
    container-type: size;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    pointer-events: none;
}

.stage-item .shape-render {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: var(--shape-fill, #38bdf8);
    border: var(--shape-stroke-width, 0) var(--shape-border-style, solid) var(--shape-stroke, #ffffff);
    border-radius: var(--shape-radius, 0);
}

.stage-item .shape-render-svg {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.stage-item .shape-render-line {
    stroke: var(--shape-fill, #38bdf8);
}

.stage-item .shape-diagonal .shape-render-line {
    stroke-width: var(--shape-line-width, 6px);
    vector-effect: non-scaling-stroke;
}

.stage-item .shape-square .shape-render,
.stage-item .shape-circle .shape-render {
    width: min(100cqw, 100cqh);
    max-width: 100%;
    height: min(100cqw, 100cqh);
    max-height: 100%;
    aspect-ratio: 1;
}

.stage-item .shape-circle .shape-render {
    border-radius: 999px;
}

.stage-item .shape-line .shape-render {
    border: 0;
}

.stage-item .shape-line .shape-render:not(.shape-render-svg) {
    border-radius: 999px;
}

.stage-item .shape-diagonal .shape-render {
    border: 0;
}

.stage-item .shape-triangle .shape-render {
    border: 0;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.stage-item.type-ticker {
    padding-block: 8px;
    padding-inline: 0;
    white-space: nowrap;
}

.stage-item .ticker-content {
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    word-break: normal;
    white-space: nowrap;
}

.stage-item .messages-content {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .6em 1em;
    overflow: hidden;
}

.stage-item .messages-content-marquee {
    padding: 0;
    align-items: stretch;
}

.stage-item .messages-marquee-track {
    width: 100%;
    box-sizing: border-box;
}

.stage-item .message-slide {
    display: inline-block;
    line-height: 1.25;
    text-align: inherit;
    max-width: 100%;
}

.stage-item .message-slide.has-message-style {
    padding: .35em .9em;
    border-radius: .55em;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}

.stage-item .message-slide strong,
.stage-item .ticker-message strong {
    font-weight: 900;
}

.stage-item .message-slide em,
.stage-item .ticker-message em {
    font-style: italic;
}

.stage-item .message-slide u,
.stage-item .ticker-message u {
    text-decoration: underline;
}

.stage-item .ticker-message br {
    display: none;
}

.stage-item .icon-content {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.stage-item.type-iframe,
.stage-item.type-external_video { padding: 0; }
.stage-item .iframe-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}
.stage-item .iframe-content iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.stage-item .iframe-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    opacity: .55;
    font-style: italic;
}

.stage-item .external-video-content {
    background: #05070d;
}

.stage-item .html-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    pointer-events: none;
}

.stage-item.type-rss { padding: 0; }
.stage-item .rss-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: .8em 1em;
    box-sizing: border-box;
    text-align: start;
    pointer-events: none;
}
.stage-item .rss-status {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    opacity: .7;
}
.stage-item .rss-list {
    display: flex;
    flex-direction: column;
    gap: .55em;
    height: 100%;
    overflow: hidden;
}
.stage-item .rss-row {
    display: flex;
    gap: .65em;
    align-items: flex-start;
    padding-bottom: .45em;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.stage-item .rss-row img {
    flex: 0 0 2.4em;
    width: 2.4em;
    height: 2.4em;
    object-fit: cover;
    border-radius: .25em;
}
.stage-item .rss-row-body {
    display: flex;
    flex-direction: column;
    gap: .15em;
    min-width: 0;
}
.stage-item .rss-title {
    font-weight: 800;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.stage-item .rss-date {
    opacity: .6;
    font-size: .7em;
    font-weight: 700;
}
.stage-item .rss-card {
    display: flex;
    flex-direction: column;
    gap: .55em;
    height: 100%;
}
.stage-item .rss-card img {
    width: 100%;
    height: 50%;
    object-fit: cover;
    border-radius: .35em;
}
.stage-item .rss-card .rss-desc {
    margin: 0;
    font-size: .75em;
    line-height: 1.45;
    opacity: .85;
    flex: 1;
    overflow: hidden;
}
.stage-item .rss-ticker {
    display: inline-block;
    white-space: nowrap;
}
.stage-item .rss-list-rotate {
    justify-content: center;
}
.stage-item .rss-list-rotate .rss-row {
    border-bottom: 0;
    padding-bottom: 0;
}
.stage-item .rss-transition-fade {
    animation: rssEditorIn .45s ease-out both;
}
.stage-item .rss-transition-slide-up {
    animation: rssEditorSlideUp .55s cubic-bezier(.22, .61, .36, 1) both;
}
.stage-item .rss-transition-slide-side {
    animation: rssEditorSlideSide .55s cubic-bezier(.22, .61, .36, 1) both;
}

.stage-item.type-calendar { padding: 0; }
.stage-item .calendar-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: .8em 1em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: .65em;
    text-align: start;
    pointer-events: none;
}
.calendar-heading {
    display: flex;
    align-items: center;
    gap: .45em;
    min-height: 1.35em;
    font-size: .88em;
    opacity: .9;
}
.calendar-heading-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}
.calendar-heading-text strong,
.calendar-heading-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-heading-text small {
    font-size: .72em;
    opacity: .68;
}
.calendar-source-dot {
    --calendar-color: #38bdf8;
    flex: 0 0 .72em;
    width: .72em;
    height: .72em;
    border-radius: 999px;
    background: var(--calendar-color);
    box-shadow: 0 0 0 .18em rgba(56, 189, 248, .16);
}
.calendar-list {
    display: flex;
    flex-direction: column;
    gap: .48em;
    min-height: 0;
    overflow: hidden;
}
.calendar-row {
    display: grid;
    grid-template-columns: minmax(3.8em, max-content) minmax(0, 1fr);
    gap: .65em;
    align-items: start;
    padding-bottom: .48em;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.calendar-time {
    font-size: .72em;
    font-weight: 900;
    opacity: .82;
    white-space: nowrap;
}
.calendar-row-body {
    display: flex;
    flex-direction: column;
    gap: .16em;
    min-width: 0;
}
.calendar-row-body strong {
    line-height: 1.18;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.calendar-row-body small,
.calendar-row-body p {
    margin: 0;
    font-size: .72em;
    line-height: 1.35;
    opacity: .68;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.calendar-status {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    opacity: .7;
}
.calendar-grid {
    display: grid;
    gap: .32em;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}
.calendar-grid-week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-grid-month {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
}
.calendar-day-cell {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .28em;
    padding: .38em;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(15, 23, 42, .2);
    overflow: hidden;
}
.calendar-day-cell.is-today {
    border-color: var(--calendar-color, #38bdf8);
    background: rgba(56, 189, 248, .12);
}
.calendar-day-cell.is-muted {
    opacity: .45;
}
.calendar-day-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .25em;
    min-width: 0;
    line-height: 1;
}
.calendar-day-label span {
    font-size: .58em;
    opacity: .68;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-day-label strong {
    font-size: .78em;
    font-weight: 900;
}
.calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: .2em;
    min-height: 0;
    overflow: hidden;
}
.calendar-day-event {
    --calendar-color: #38bdf8;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .25em;
    align-items: center;
    min-width: 0;
    padding: .2em .3em;
    border-inline-start: .2em solid var(--calendar-color);
    background: rgba(255, 255, 255, .1);
    font-size: .56em;
    line-height: 1.1;
}
.calendar-day-event span {
    font-weight: 900;
    opacity: .72;
    white-space: nowrap;
}
.calendar-day-event strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-day-event.is-all-day {
    grid-template-columns: minmax(0, 1fr);
}
.calendar-day-more {
    font-size: .56em;
    opacity: .72;
}

.integration-summary {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    margin-bottom: 14px;
}
.integration-summary span,
.calendar-source-row small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.integration-summary strong {
    font-size: 14px;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(148, 163, 184, .16);
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}
.status-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}
.status-pill.online {
    background: rgba(16, 185, 129, .12);
    color: #047857;
}
.status-pill.offline {
    background: rgba(239, 68, 68, .10);
    color: #b91c1c;
}
.field-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-weight: 900;
}
.calendar-source-list {
    display: grid;
    gap: 8px;
}
.calendar-source-row {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.calendar-source-row > span:last-child {
    display: grid;
    gap: 2px;
}
.stage-item .rss-transition-zoom {
    animation: rssEditorZoom .5s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes rssEditorIn {
    from { opacity: 0; transform: translateY(6%); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes rssEditorSlideUp {
    from { opacity: 0; transform: translateY(28%); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes rssEditorSlideSide {
    from { opacity: 0; transform: translateX(28%); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes rssEditorZoom {
    from { opacity: 0; transform: scale(.9); }
    to { opacity: 1; transform: scale(1); }
}

.stage-item.type-carousel { padding: 0; }
.stage-item .carousel-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    line-height: normal;
    white-space: normal;
}
.stage-item .carousel-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    color: rgba(255, 255, 255, .72);
    font-size: .9em;
    text-align: center;
}
.stage-item .carousel-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--carousel-visible-count, 1), minmax(0, 1fr));
    gap: var(--carousel-gap, 6px);
    animation: carouselEditorFade .5s ease-out both;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.stage-item .carousel-slide img {
    width: 100%;
    height: 100%;
    min-width: 0;
    display: block;
    border-radius: var(--carousel-radius, 0);
}
.stage-item .carousel-fit-cover img { object-fit: cover; }
.stage-item .carousel-fit-contain img { object-fit: contain; }
.stage-item .carousel-fit-fill img { object-fit: fill; }
.stage-item .carousel-transition-slide.carousel-direction-rtl .carousel-slide { animation-name: carouselEditorSlideRtl; }
.stage-item .carousel-transition-slide.carousel-direction-ltr .carousel-slide { animation-name: carouselEditorSlideLtr; }
.stage-item .carousel-transition-slide.carousel-direction-ttb .carousel-slide { animation-name: carouselEditorSlideTtb; }
.stage-item .carousel-transition-slide.carousel-direction-btt .carousel-slide { animation-name: carouselEditorSlideBtt; }
.stage-item .carousel-transition-none .carousel-slide { animation: none; }
.stage-item .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1.8em;
    height: 1.8em;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, .36);
    color: #fff;
    font-size: .9em;
    font-weight: 900;
    line-height: 1;
}
.stage-item .carousel-arrow-prev { left: .7em; }
.stage-item .carousel-arrow-next { right: .7em; }
.stage-item .carousel-dots {
    position: absolute;
    left: 50%;
    bottom: .7em;
    transform: translateX(-50%);
    display: flex;
    gap: .35em;
    align-items: center;
    justify-content: center;
    padding: .25em .45em;
    border-radius: 999px;
    background: rgba(0, 0, 0, .28);
}
.stage-item .carousel-dot {
    width: .42em;
    height: .42em;
    border-radius: 999px;
    background: rgba(255, 255, 255, .52);
}
.stage-item .carousel-dot.is-active {
    width: .95em;
    background: #fff;
}
@keyframes carouselEditorFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes carouselEditorSlideRtl {
    from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes carouselEditorSlideLtr {
    from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes carouselEditorSlideTtb {
    from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes carouselEditorSlideBtt {
    from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
.carousel-media-field {
    display: grid;
    gap: 8px;
}
.carousel-media-field__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}
.carousel-media-field__count {
    min-width: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.carousel-media-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-3);
}
.carousel-media-picker__empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px 6px;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
}
.carousel-media-thumb {
    position: relative;
    display: grid;
    grid-template-rows: 64px auto;
    gap: 4px;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    text-align: start;
    overflow: hidden;
}
.carousel-media-thumb:hover {
    border-color: var(--line-strong);
    transform: translateY(-1px);
}
.carousel-media-thumb.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(31, 157, 138, .18);
}
.carousel-media-thumb__img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-size: cover;
    background-position: center;
    background-color: #f1f5f9;
}
.carousel-media-thumb__name {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    color: var(--ink-2);
    line-height: 1.25;
}
.carousel-media-thumb__check {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .55);
    color: #fff;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.carousel-media-thumb.is-selected .carousel-media-thumb__check {
    opacity: 1;
    transform: scale(1);
    background: var(--primary);
}

.stage-item.type-tv_channels {
    padding: 0;
}

.stage-item .tv-channel-preview {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #05070d;
}

.stage-item .tv-channel-preview img {
    width: min(48%, 220px);
    height: min(48%, 160px);
    object-fit: contain;
    opacity: .9;
}

.stage-item .tv-channel-preview__overlay {
    position: absolute;
    inset-inline: 1em;
    bottom: 1em;
    display: flex;
    flex-direction: column;
    gap: .25em;
    padding: .55em .75em;
    border-radius: .55em;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    line-height: 1.15;
}

.stage-item .tv-channel-preview__overlay strong {
    font-size: 1.05em;
}

.stage-item .tv-channel-preview__overlay span {
    font-size: .76em;
    opacity: .74;
}

.tv-channel-row {
    align-items: stretch;
    gap: 14px;
}

.tv-channel-form {
    flex: 1;
    min-width: 0;
}

.tv-channel-fields {
    flex: 1;
}

.tv-channel-logo {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: #101827;
    color: #fff;
    font-weight: 800;
    overflow: hidden;
}

.tv-channel-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tv-channel-delete {
    align-self: end;
}

.tv-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 20px;
}

.tv-admin-create-panel,
.tv-category-panel,
.tv-library-panel {
    min-width: 0;
}

.tv-create-form,
.tv-channel-edit-form {
    display: grid;
    gap: 14px;
}

.tv-category-create {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 16px;
}

.tv-category-list {
    display: grid;
    gap: 8px;
}

.tv-category-row {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, var(--surface-2));
}

.tv-category-edit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px auto;
    gap: 8px;
    align-items: center;
}

.tv-category-edit input {
    min-height: 36px;
    padding-block: 0;
}

.tv-category-row__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.tv-library-head {
    align-items: center;
}

.tv-library-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.tv-channel-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(160px, .8fr) minmax(140px, .7fr);
    gap: 10px;
    margin-bottom: 14px;
}

.tv-channel-card-list {
    display: grid;
    gap: 10px;
}

.tv-channel-card {
    min-width: 0;
    border: 1px solid rgba(203, 213, 223, .74);
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #f9fbfd);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
    overflow: hidden;
}

.tv-channel-card:hover,
.tv-channel-card[open] {
    border-color: rgba(29, 58, 139, .28);
    box-shadow: 0 10px 24px rgba(8, 12, 22, .07);
}

.tv-channel-card.is-disabled {
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.tv-channel-card__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    cursor: pointer;
    list-style: none;
}

.tv-channel-card__summary::-webkit-details-marker {
    display: none;
}

.tv-channel-card__main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.tv-channel-card__main strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-channel-card__main span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.tv-channel-card__main code {
    display: block;
    min-width: 0;
    color: var(--ink-2);
    font-size: 11px;
    direction: ltr;
    unicode-bidi: plaintext;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-channel-card__badges {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.tv-channel-card__chevron {
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    display: inline-grid;
    place-items: center;
}

.tv-channel-card__chevron::before {
    content: "";
    width: 8px;
    height: 8px;
    border-inline-end: 2px solid var(--muted);
    border-block-end: 2px solid var(--muted);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease;
}

.tv-channel-card[open] .tv-channel-card__chevron::before {
    transform: translateY(2px) rotate(225deg);
}

.tv-channel-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    border-top: 1px solid var(--line);
    background: rgba(248, 250, 252, .72);
}

.tv-channel-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tv-channel-card__actions .checkbox-row {
    margin-inline-end: auto;
}

.mini-status.online {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

@media (max-width: 1080px) {
    .tv-admin-grid,
    .tv-channel-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .tv-category-create {
        grid-template-columns: minmax(0, 1fr) 86px;
    }

    .tv-category-create .primary-btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .tv-category-create {
        grid-template-columns: minmax(0, 1fr);
    }

    .tv-channel-card__summary {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .tv-channel-card__badges {
        grid-column: 2 / -1;
        justify-self: start;
    }

    .tv-channel-card__body,
    .tv-category-edit {
        grid-template-columns: minmax(0, 1fr);
    }

    .tv-channel-card__actions,
    .tv-channel-delete,
    .tv-channel-delete .danger-btn {
        width: 100%;
    }

    .tv-channel-card__actions .primary-btn,
    .tv-channel-card__actions .ghost-btn {
        flex: 1 1 140px;
    }
}

.icon-picker {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    background: var(--surface-3);
    border: 1px solid var(--line);
}
.icon-picker__source {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--line);
    align-self: start;
}
.icon-picker__source-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    cursor: pointer;
}
.icon-picker__source-btn.is-active {
    background: var(--primary);
    color: #fff;
}
.icon-picker__search {
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 13px;
}
.icon-picker__categories {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.icon-picker__cat {
    appearance: none;
    border: 1px solid transparent;
    background: var(--surface);
    border-radius: 8px;
    font-size: 16px;
    line-height: 1;
    padding: 6px 9px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .12s ease, background .12s ease;
}
.icon-picker__cat.is-active {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.icon-picker__cat:hover {
    border-color: var(--primary);
}
.icon-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 3px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--line);
    scrollbar-width: thin;
}
.icon-picker__chip {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
    padding: 6px 0;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
    display: grid;
    place-items: center;
    min-height: 32px;
}
.icon-picker__chip:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    transform: scale(1.15);
}
.icon-picker__chip--fa {
    color: var(--ink-2);
    font-size: 16px;
}
.icon-picker__chip--fa:hover {
    color: var(--primary);
}

.inspector-warning {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #fff8e7, #fceec1);
    border: 1px solid #f1c95c;
    border-radius: 10px;
    color: #6b4f0a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.inspector-warning__icon {
    font-size: 16px;
    line-height: 1;
}

.code-textarea {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    tab-size: 2;
}

.stage-item .ticker-track {
    display: inline-block;
    flex: 0 0 auto;
    width: max-content;
    min-width: 100%;
    padding-inline: 1.2em;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}
.stage-item .ticker-track-cycle {
    --ticker-start: 0px;
    --ticker-end: -100%;
    padding-inline: 0;
    white-space: nowrap;
}
.stage-item .ticker-content-cycle {
    direction: ltr;
    justify-content: flex-start;
}
.stage-item .ticker-cycle {
    display: inline-block;
    padding-inline: 1.2em;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.stage-item .ticker-direction-ttb,
.stage-item .ticker-direction-btt {
    white-space: normal;
    align-items: stretch;
    justify-content: center;
    text-align: center;
}

.stage-item .ticker-direction-ttb .ticker-track,
.stage-item .ticker-direction-btt .ticker-track {
    min-width: 0;
    min-height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stage-item .ticker-message {
    display: inline-block;
    margin-inline: .45em;
    line-height: inherit;
    white-space: nowrap;
}

.stage-item .ticker-message.has-message-style {
    min-height: 1.65em;
    padding: .16em .72em;
    border-radius: .42em;
    line-height: 1.1;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .14);
}

.stage-item .ticker-direction-ttb .ticker-track,
.stage-item .ticker-direction-btt .ticker-track {
    flex-direction: column;
    gap: .45em;
}

.stage-item .ticker-direction-ttb .messages-marquee-track,
.stage-item .ticker-direction-btt .messages-marquee-track {
    padding: 0 !important;
}

.stage-item .ticker-direction-ttb .ticker-message,
.stage-item .ticker-direction-btt .ticker-message {
    margin-inline: 0;
    white-space: normal;
}

.ticker-direction-rtl .ticker-track {
    animation-name: tickerMoveRightToLeft;
}

.ticker-direction-ltr .ticker-track {
    animation-name: tickerMoveLeftToRight;
}

.ticker-direction-ttb .ticker-track {
    animation-name: tickerMoveTopToBottom;
}

.ticker-direction-btt .ticker-track {
    animation-name: tickerMoveBottomToTop;
}

@keyframes tickerMoveRightToLeft {
    from {
        transform: translateX(var(--ticker-start, 100%));
    }
    to {
        transform: translateX(var(--ticker-end, -100%));
    }
}

@keyframes tickerMoveLeftToRight {
    from {
        transform: translateX(var(--ticker-start, -100%));
    }
    to {
        transform: translateX(var(--ticker-end, 100%));
    }
}

@keyframes tickerMoveTopToBottom {
    from {
        transform: translateY(var(--ticker-start, -100%));
    }
    to {
        transform: translateY(var(--ticker-end, 100%));
    }
}

@keyframes tickerMoveBottomToTop {
    from {
        transform: translateY(var(--ticker-start, 100%));
    }
    to {
        transform: translateY(var(--ticker-end, -100%));
    }
}

.stage-item.type-playlist,
.stage-item.type-image,
.stage-item.type-video {
    padding: 0;
}

.stage-item img,
.stage-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.resize-handle {
    position: absolute;
    left: 4px;
    bottom: 4px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 0 0 2px var(--gold);
    cursor: nwse-resize;
}

.inspector-form {
    display: grid;
    gap: 16px;
}

.inspector-form [hidden] {
    display: none !important;
}

.inspector-panel[data-state="empty"] .inspector-form,
.inspector-panel[data-state="active"] .empty-inspector {
    display: none !important;
}

.inspector-panel[data-state="empty"] .empty-inspector,
.inspector-panel[data-state="active"] .inspector-form {
    display: grid !important;
}

.inspector-section {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 14px 12px;
    margin: 0;
    background: linear-gradient(180deg, #ffffff, var(--surface-2));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
    display: grid;
    gap: 10px;
    min-width: 0;
}

.inspector-form .toggle-line {
    position: relative;
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 5px 10px;
    border: 1px solid rgba(148, 163, 184, .26);
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, rgba(248, 250, 252, .92));
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .86) inset;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.inspector-form .toggle-line:hover {
    border-color: rgba(29, 58, 139, .28);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}

.inspector-form .toggle-line:has(input[type="checkbox"]:checked) {
    border-color: rgba(43, 183, 240, .34);
    background: linear-gradient(180deg, #fff, rgba(232, 246, 252, .82));
    color: var(--ink);
}

.inspector-form .toggle-line input[type="checkbox"] {
    position: relative;
    width: 27px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, .56);
    border-radius: 999px;
    background: #d7dee8;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .16);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.inspector-form .toggle-line input[type="checkbox"]::before {
    content: "";
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .24);
    transition: transform .18s ease;
}

.inspector-form .toggle-line input[type="checkbox"]:checked {
    border-color: rgba(29, 58, 139, .30);
    background: linear-gradient(135deg, var(--primary), #2bb7f0);
    box-shadow: 0 5px 13px rgba(29, 58, 139, .24);
}

.inspector-form .toggle-line input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

.rtl .inspector-form .toggle-line input[type="checkbox"]:checked::before {
    transform: translateX(-12px);
}

.inspector-form .toggle-line input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 4px rgba(29, 58, 139, .14),
        0 5px 13px rgba(29, 58, 139, .18);
}

.inspector-form .toggle-line:has(input[type="checkbox"]:disabled) {
    opacity: .58;
    cursor: not-allowed;
}

.inspector-form .toggle-line input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.inspector-section.designer-tab-panel:not(.is-active) {
    display: none;
}

.inspector-section__title {
    justify-self: start;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 999px;
}

.appearance-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.appearance-actions .ghost-btn {
    width: 100%;
    justify-content: center;
}

.style-preset-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.style-preset-custom {
    display: grid;
    gap: 8px;
    padding-top: 2px;
}

.appearance-subtitle {
    display: block;
    margin-top: 2px;
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.style-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.style-preset-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.style-preset-actions .ghost-btn {
    width: 100%;
    justify-content: center;
    min-height: 34px;
    font-size: 12px;
}

.style-preset-grid button {
    min-width: 0;
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid rgba(148, 163, 184, .36);
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, rgba(248, 250, 252, .92));
    color: var(--ink-2);
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
}

.style-preset-grid button:hover {
    border-color: rgba(29, 58, 139, .35);
    color: var(--ink);
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}

.style-preset-grid button.is-active {
    border-color: rgba(29, 58, 139, .46);
    background: linear-gradient(180deg, rgba(232, 246, 252, .96), #fff);
    color: var(--primary);
    box-shadow: 0 0 0 3px rgba(43, 183, 240, .12);
}

.style-preset-grid button:disabled,
.style-preset-actions .ghost-btn:disabled {
    opacity: .48;
    cursor: not-allowed;
    box-shadow: none;
}

.empty-inspector {
    min-height: 200px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 24px 18px;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    color: var(--muted);
    background:
        radial-gradient(140px 80px at 50% 20%, rgba(43, 183, 240, .10), transparent 70%),
        var(--surface-2);
    text-align: center;
}

.empty-inspector__icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #2bb7f0);
    color: #fff;
    box-shadow: 0 8px 22px rgba(29, 58, 139, .30);
}

.empty-inspector strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
}

.empty-inspector__hint {
    font-size: 12px;
    line-height: 1.5;
    max-width: 240px;
}

.save-status {
    min-width: 74px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.precision-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.precision-grid input {
    padding-inline: 8px;
}

@media (max-width: 1180px) {
    .designer-root {
        grid-template-columns: 1fr;
    }

    .designer-panel,
    .canvas-panel {
        min-height: auto;
        position: static;
    }

    .canvas-panel {
        height: auto;
        min-height: 560px;
    }

    .template-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

@media (max-width: 900px) {
    .app-page {
        grid-template-columns: 1fr;
    }

    .mobile-menu-btn {
        position: fixed;
        inset-block-start: 14px;
        inset-inline-start: 14px;
        z-index: 80;
        display: inline-grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 12px;
        background: linear-gradient(180deg, rgba(20, 34, 70, .96), rgba(8, 16, 38, .94));
        color: #fff;
        box-shadow: var(--shadow-md);
    }

    .mobile-menu-btn__icon-wrap {
        position: relative;
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
    }

    .mobile-menu-btn__icon {
        grid-area: 1 / 1;
        font-size: 18px;
        line-height: 1;
        transition: transform .18s ease, opacity .18s ease;
    }

    .mobile-menu-btn__icon--close {
        opacity: 0;
        transform: scale(.72) rotate(-90deg);
    }

    body.mobile-nav-open .mobile-menu-btn__icon--menu {
        opacity: 0;
        transform: scale(.72) rotate(90deg);
    }

    body.mobile-nav-open .mobile-menu-btn__icon--close {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    .mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(17, 21, 29, .48);
        backdrop-filter: blur(2px);
    }

    body.mobile-nav-open .mobile-backdrop {
        display: block;
    }

    .sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 90;
        width: min(84vw, 320px);
        height: 100vh;
        transform: translateX(-110%);
        transition: transform .22s ease;
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
    }

    .rtl .sidebar {
        transform: translateX(110%);
    }

    body.mobile-nav-open .sidebar {
        transform: translateX(0);
    }

    .main-shell {
        padding: 76px 14px 18px;
    }

    .two-cols,
    .metric-grid {
        grid-template-columns: 1fr;
    }

    .login-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .login-form-side {
        max-width: 100%;
    }

    .login-preview-side {
        order: -1;
        padding: 22px;
    }

    .page-header {
        align-items: stretch;
        flex-direction: column;
        text-align: start;
    }
    .page-header > div:first-child {
        text-align: start;
    }
    .page-header .eyebrow {
        justify-self: start;
    }

    .designer-root {
        gap: 14px;
    }

    .tools-panel {
        order: 1;
    }

    .canvas-panel {
        order: 2;
        min-height: 0;
        height: auto;
        padding: 54px 12px 16px;
        overflow-x: auto;
        place-items: start center;
    }

    .inspector-panel {
        order: 3;
    }

    .stage-frame {
        width: min(100%, calc((100vh - 170px) * 1920 / 1080));
        min-width: 720px;
    }

    .designer-root[data-orientation="portrait"] .stage-frame {
        width: min(100%, 420px);
        min-width: min(420px, 88vw);
    }

    .canvas-toolbar {
        position: sticky;
        inset-inline: 0;
        width: 100%;
        padding-inline: 2px;
    }
}

@media (max-width: 560px) {
    .form-row,
    .demo-grid {
        grid-template-columns: 1fr;
    }

    .days-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .login-card {
        padding: 22px 20px 18px;
    }

    .login-topbar {
        margin-bottom: 18px;
        padding-bottom: 16px;
    }


    .login-stats strong {
        font-size: 16px;
    }

    .template-grid,
    .tool-grid {
        grid-template-columns: 1fr;
    }

    .canvas-panel {
        margin-inline: -6px;
        border-radius: 0;
    }

    .stage-frame {
        min-width: 680px;
    }

    .designer-root[data-orientation="portrait"] .stage-frame {
        min-width: min(390px, 86vw);
    }

    .precision-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   PREMIUM APP THEME — same look & feel as the auth/login card
   ============================================================ */

.app-page {
    background:
        radial-gradient(1000px 460px at 100% -10%, rgba(43, 183, 240, .08), transparent 60%),
        radial-gradient(900px 420px at 0% 110%, rgba(43, 183, 240, .07), transparent 60%),
        linear-gradient(180deg, #f1f5fa 0%, #e9eef5 100%);
}

/* ----- Sidebar ----- */
.sidebar {
    padding: 26px 22px;
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(43, 183, 240, .18), transparent 55%),
        radial-gradient(360px 200px at 0% 100%, rgba(29, 58, 139, .14), transparent 55%),
        linear-gradient(180deg, #0a1530 0%, #142447 60%, #07112a 100%);
    border-inline-end: 1px solid rgba(255, 255, 255, .06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .04) inset,
        20px 0 60px rgba(8, 12, 22, .35);
    isolation: isolate;
}

.sidebar-glow {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

.sidebar > *:not(.sidebar-glow) {
    position: relative;
    z-index: 1;
}

.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #eef4fc);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 14px 32px rgba(8, 14, 30, .45),
        0 0 0 1px rgba(43, 183, 240, .18);
}

.brand-logo {
    display: block;
    height: 38px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.nav {
    display: grid;
    gap: 4px;
}

.nav a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 11px 14px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .7);
    font-weight: 700;
    font-size: 14px;
    border: 1px solid transparent;
}

.nav a:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.nav a.active {
    background: linear-gradient(135deg, rgba(43, 183, 240, .18), rgba(29, 58, 139, .12));
    color: #fff;
    border-color: rgba(43, 183, 240, .25);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset;
}

.nav a.active::before {
    content: "";
    position: absolute;
    inset-block: 10px;
    inset-inline-start: -1px;
    width: 3px;
    border-radius: 99px;
    background: linear-gradient(180deg, #7ad6fd, var(--gold));
    box-shadow: 0 0 12px rgba(122, 214, 253, .55);
}

.sidebar-user {
    margin-top: auto;
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-user strong {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.sidebar-user span {
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    direction: ltr;
    unicode-bidi: plaintext;
}

.sidebar-user a {
    margin-top: 4px;
    color: #a9d4ff;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.sidebar-user a:hover {
    color: #d4ecff;
}

/* ----- Main shell ----- */
.main-shell {
    padding: 36px;
    gap: 22px;
}

.page-header {
    padding: 4px 2px 6px;
    align-items: end;
}

.page-header > div:first-child {
    display: grid;
    gap: 8px;
}

.page-header h1 {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--ink);
}

/* ----- Pills (status indicators) ----- */
.pill {
    padding: 9px 14px;
    background: linear-gradient(180deg, #fff, var(--surface-2));
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 4px 14px rgba(8, 12, 22, .05);
    font-size: 13px;
    font-weight: 800;
}

.pill b {
    font-weight: 900;
    margin-inline-end: 4px;
}

.pill.ok {
    color: var(--primary);
    border-color: rgba(29, 58, 139, .25);
    background: linear-gradient(180deg, #fff, #e8f6f3);
}

.pill.ok::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7ad6fd;
    box-shadow: 0 0 0 3px rgba(122, 214, 253, .2);
}

.pill.muted {
    color: var(--muted);
}

/* ----- Panel (cards) ----- */
.panel {
    position: relative;
    padding: 22px;
    border: 1px solid rgba(203, 213, 223, .55);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 253, .96));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 4px 14px rgba(8, 12, 22, .04),
        0 12px 32px rgba(8, 12, 22, .06);
    overflow: hidden;
    isolation: isolate;
}

.panel::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, #3dc1f0 35%, var(--gold) 75%);
    opacity: .9;
    z-index: 1;
    pointer-events: none;
}

.panel-head {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(203, 213, 223, .5);
}

.panel-head h2 {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.01em;
    color: var(--ink);
}

.panel-head a {
    color: var(--primary);
    font-weight: 800;
    font-size: 13px;
}

.panel-head a:hover {
    text-decoration: underline;
}

.panel-head a.primary-btn,
.panel-head a.danger-btn {
    color: #fff;
    font-size: 14px;
}

.panel-head a.primary-btn:hover,
.panel-head a.danger-btn:hover {
    text-decoration: none;
}

.panel-head .counter,
.panel-head [data-status-updated],
.panel-head > span:not(.counter):not(.mini-status) {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.compact-panel {
    min-height: 160px;
}

.big-number {
    margin-top: 22px;
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ink);
    background: linear-gradient(180deg, var(--ink), var(--ink-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----- Metric cards ----- */
.metric-card {
    position: relative;
    padding: 22px;
    border: 1px solid rgba(203, 213, 223, .55);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f7fafc);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 6px 18px rgba(8, 12, 22, .05),
        0 14px 36px rgba(8, 12, 22, .07);
    overflow: hidden;
}

.metric-card::before {
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--gold));
}

.metric-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.metric-card strong {
    margin-top: 12px;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--ink);
    background: linear-gradient(180deg, var(--ink), var(--ink-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.metric-card.ok::before {
    background: linear-gradient(90deg, var(--primary), #7ad6fd);
}

.metric-card.ok strong {
    background: linear-gradient(180deg, var(--primary), #1e4dad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.metric-card.warn::before {
    background: linear-gradient(90deg, var(--coral), #f08aa0);
}

.metric-card.warn strong {
    background: linear-gradient(180deg, #c43d59, #d94a67);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----- Forms (admin/business panels) ----- */
.stack-form input,
.stack-form select,
.stack-form textarea,
.inspector-form input,
.inspector-form select,
.inspector-form textarea {
    height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 1px 2px rgba(20, 28, 42, .04);
    font-weight: 600;
}

.stack-form [hidden] {
    display: none !important;
}

.stack-form textarea,
.inspector-form textarea {
    height: auto;
    min-height: 100px;
    padding-top: 12px;
}

.inspector-form select[multiple] {
    height: auto;
    min-height: 128px;
}

.stack-form input:focus,
.stack-form select:focus,
.stack-form textarea:focus,
.inspector-form input:focus,
.inspector-form select:focus,
.inspector-form textarea:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 4px rgba(29, 58, 139, .14),
        0 1px 0 rgba(255, 255, 255, .9) inset;
}

label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ----- Buttons ----- */
.primary-btn {
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, #1e4dad 50%, #162b6b 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .25) inset,
        0 10px 22px rgba(29, 58, 139, .28);
    position: relative;
    overflow: hidden;
}

.primary-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .25) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .55s ease;
}

.primary-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .25) inset,
        0 16px 32px rgba(29, 58, 139, .34);
}

.primary-btn:hover::after {
    transform: translateX(100%);
}

.ghost-btn {
    height: 40px;
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, var(--surface-2));
    color: var(--ink);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 4px 12px rgba(8, 12, 22, .04);
}

.ghost-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 6px 16px rgba(29, 58, 139, .14);
}

.danger-btn {
    height: 40px;
    min-height: 40px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #fff1f4);
    border: 1px solid rgba(217, 74, 103, .28);
    color: #a92a44;
}

.danger-btn:hover {
    background: linear-gradient(180deg, #fff5f7, #ffe4ea);
    border-color: rgba(217, 74, 103, .5);
}

/* ----- Lists & rows ----- */
.business-list .list-row {
    padding: 14px 16px;
    border: 1px solid rgba(203, 213, 223, .55);
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #f9fbfd);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.business-list .list-row:hover {
    border-color: rgba(29, 58, 139, .35);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 10px 24px rgba(8, 12, 22, .08);
    transform: translateY(-1px);
}

.business-list .list-row > div:first-child {
    display: grid;
    gap: 4px;
}

.business-list .list-row > .screen-row-main,
.screen-row-main {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 0 1 auto;
}

.screen-row-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 0 1 auto;
}

.screen-preview-thumb {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 148px;
    aspect-ratio: 16 / 9;
    flex: 0 0 148px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(203, 213, 223, .78);
    background:
        linear-gradient(135deg, rgba(29, 58, 139, .08), rgba(31, 157, 138, .1)),
        #f7fafc;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.screen-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.screen-preview-thumb.is-empty {
    border-style: dashed;
}

.data-table .screen-preview-thumb {
    width: 92px;
    flex-basis: 92px;
}

.business-list .list-row strong {
    font-size: 14px;
    font-weight: 900;
    color: var(--ink);
}

.business-list .list-row span {
    font-size: 12px;
    color: var(--muted);
}

.business-list .list-row .screen-preview-thumb,
.business-list .list-row .screen-preview-thumb span {
    font-size: 10px;
    color: var(--muted);
}

.business-list .list-row code {
    background: rgba(29, 58, 139, .08);
    color: var(--primary);
    border: 1px solid rgba(29, 58, 139, .18);
    font-size: 11px;
    padding: 3px 7px;
}

.message-row.is-editing {
    border-color: rgba(29, 58, 139, .58);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 0 0 3px rgba(29, 58, 139, .12);
}

.message-row .message-schedule {
    line-height: 1.55;
    max-width: 42rem;
}

.message-row .row-actions {
    margin-inline-start: auto;
    flex-wrap: nowrap;
}

.message-row .ghost-btn {
    min-height: 34px;
    padding-inline: 12px;
    border-radius: 8px;
    font-size: 12px;
}

.message-row .color-dot {
    flex: 0 0 auto;
}

/* ----- Mini status pill ----- */
.mini-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff, #f7fafc);
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.mini-status.is-active,
.mini-status.online {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.counter {
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(29, 58, 139, .08);
    border: 1px solid rgba(29, 58, 139, .2);
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
}

/* ----- Screen status indicator ----- */
.screen-dot {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

.screen-dot.online {
    color: #137a3a;
}

.screen-dot.online::before {
    background: #16a34a;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, .95),
        0 0 0 0 rgba(22, 163, 74, .42);
    animation: status-pulse-green 1.65s ease-out infinite;
}

.screen-dot:not(.online) {
    color: #a92a44;
}

.screen-dot:not(.online)::before {
    background: var(--coral);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, .95),
        0 0 0 0 rgba(217, 74, 103, .42);
    animation: status-pulse-red 2s ease-out infinite;
}

@keyframes status-pulse-green {
    0% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 0 rgba(22, 163, 74, .42); }
    72% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 7px rgba(22, 163, 74, 0); }
    100% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 0 rgba(22, 163, 74, 0); }
}

@keyframes status-pulse-red {
    0% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 0 rgba(217, 74, 103, .42); }
    72% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 7px rgba(217, 74, 103, 0); }
    100% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95), 0 0 0 0 rgba(217, 74, 103, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .screen-dot::before {
        animation: none !important;
    }
}

/* ----- Data table ----- */
.data-table {
    border-radius: 12px;
    overflow: hidden;
}

.data-table th {
    padding: 14px 14px;
    background: linear-gradient(180deg, #f7fafc, #eef2f7);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.data-table td {
    padding: 16px 14px;
    border-bottom: 1px solid rgba(220, 227, 235, .65);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.data-table tr:hover td {
    background: linear-gradient(90deg, rgba(29, 58, 139, .04), rgba(29, 58, 139, .015));
}

.data-table code {
    background: rgba(29, 58, 139, .08);
    color: var(--primary);
    border: 1px solid rgba(29, 58, 139, .18);
    font-size: 11.5px;
    font-weight: 700;
}

/* ----- Flash messages ----- */
.flash {
    border-radius: 12px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, var(--surface-2));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 8px 22px rgba(8, 12, 22, .06);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.flash::before {
    content: "";
    width: 6px;
    height: 26px;
    border-radius: 4px;
    background: var(--primary);
    flex-shrink: 0;
}

.flash-success {
    border-color: rgba(29, 58, 139, .35);
    background: linear-gradient(180deg, #f0faf7, #e6f5f1);
    color: var(--primary);
}

.flash-success::before {
    background: linear-gradient(180deg, var(--primary), #7ad6fd);
}

.flash-danger {
    border-color: rgba(217, 74, 103, .38);
    background: linear-gradient(180deg, #fff5f7, #ffe9ee);
    color: #a92a44;
}

.flash-danger::before {
    background: linear-gradient(180deg, var(--coral), #f08aa0);
}

/* ----- Mobile menu button ----- */
.mobile-menu-btn {
    background: rgba(20, 28, 42, .9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(8, 12, 22, .25);
}

/* ----- Designer panels (editor) ----- */
.designer-panel,
.canvas-panel {
    border-radius: 16px;
    border: 1px solid rgba(203, 213, 223, .55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 6px 18px rgba(8, 12, 22, .05);
}

.designer-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 253, .96));
    padding: 18px;
}

.tool-grid button {
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, var(--surface-3));
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-weight: 800;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.tool-grid button:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 6px 14px rgba(29, 58, 139, .12);
}

.empty-inspector {
    border-radius: 12px;
    background: linear-gradient(180deg, var(--surface-2), #fff);
    border: 1px dashed var(--line-strong);
}

/* ----- Header actions/save status ----- */
.save-status {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.save-status[data-state="saved"] {
    color: var(--primary);
}

.save-status[data-state="saving"] {
    color: var(--gold);
}

/* ----- Media cards ----- */
.media-card {
    border-radius: 12px;
    border: 1px solid rgba(203, 213, 223, .55);
    background: linear-gradient(180deg, #fff, #f9fbfd);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 6px 16px rgba(8, 12, 22, .05);
    transition: transform .18s ease, box-shadow .18s ease;
}

.media-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 12px 26px rgba(8, 12, 22, .1);
}

/* ============================================================
   DROPZONE — premium file uploader
   ============================================================ */

.upload-form {
    gap: 18px;
}

.upload-form .primary-btn {
    gap: 10px;
    align-self: stretch;
}

.upload-form .primary-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    filter: saturate(.7);
}

.upload-form .primary-btn:disabled::after {
    display: none;
}

.dropzone {
    position: relative;
    border: 2px dashed rgba(29, 58, 139, .28);
    border-radius: 14px;
    padding: 32px 22px;
    background:
        radial-gradient(420px 200px at 50% 0%, rgba(43, 183, 240, .07), transparent 60%),
        linear-gradient(180deg, #fff, var(--surface-2));
    transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
    text-align: center;
    isolation: isolate;
    overflow: hidden;
}

.dropzone:hover {
    border-color: rgba(29, 58, 139, .55);
    background:
        radial-gradient(420px 200px at 50% 0%, rgba(43, 183, 240, .12), transparent 60%),
        linear-gradient(180deg, #fff, #f3faf8);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(8, 12, 22, .08);
}

.dropzone.is-dragover {
    border-color: var(--primary);
    background:
        radial-gradient(520px 240px at 50% 0%, rgba(43, 183, 240, .22), transparent 60%),
        linear-gradient(180deg, #fff, #e9f6f3);
    box-shadow:
        0 0 0 6px rgba(29, 58, 139, .1),
        0 18px 40px rgba(8, 12, 22, .1);
}

[data-dropzone-input] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.dropzone-empty {
    display: grid;
    gap: 10px;
    place-items: center;
}

.dropzone-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-soft), #fff);
    border: 1px solid rgba(29, 58, 139, .22);
    color: var(--primary);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 8px 18px rgba(29, 58, 139, .14);
    margin-bottom: 4px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.dropzone:hover .dropzone-icon,
.dropzone.is-dragover .dropzone-icon {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 14px 26px rgba(29, 58, 139, .22);
}

.dropzone-empty strong {
    font-size: 16px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.005em;
    text-transform: none;
}

.dropzone-empty > span {
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.dropzone-browse {
    margin-top: 8px;
    height: 36px;
    min-height: 36px;
    padding: 0 18px;
    font-size: 13px;
}

.dropzone-file {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: start;
}

.dropzone-thumb {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background-color: #0a0f18;
    background-size: cover;
    background-position: center;
    color: rgba(255, 255, 255, .55);
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(8, 12, 22, .14);
}

.dropzone-thumb[style*="background-image"] .dropzone-thumb-fallback,
.dropzone-thumb.is-video .dropzone-thumb-fallback {
    display: none;
}

.dropzone-thumb.is-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(50% 50% at 50% 50%, rgba(29, 58, 139, .5), transparent 70%),
        linear-gradient(135deg, #14202e, #1f3242);
}

.dropzone-thumb.is-video::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 14px;
    border-color: transparent transparent transparent #fff;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
}

.rtl .dropzone-thumb.is-video::before {
    border-width: 9px 14px 9px 0;
    border-color: transparent #fff transparent transparent;
}

.dropzone-meta {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 4px;
}

.dropzone-meta strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropzone-meta span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.dropzone-clear {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    flex-shrink: 0;
    padding: 0;
    min-height: 0;
}

.dropzone-clear:hover {
    color: #a92a44;
    border-color: rgba(217, 74, 103, .45);
    background: #fff5f7;
}

/* ----- Empty state (library) ----- */
.empty-state {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 36px 22px;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--surface-2), #fff);
    text-align: center;
}

.empty-state-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid rgba(29, 58, 139, .18);
    margin-bottom: 4px;
}

.empty-state strong {
    font-size: 15px;
    font-weight: 900;
    color: var(--ink);
}

.empty-state > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    max-width: 36ch;
}

/* ----- Media card refinements ----- */
.media-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.media-card {
    padding: 12px;
    gap: 6px;
}

.media-card strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-card > span {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
}

.template-media-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.template-media-card__actions .inline-form {
    margin: 0;
}

.media-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, .03) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, .03) 25%, transparent 25%),
        #0a0f18;
    background-size: 14px 14px, 14px 14px, auto;
}

.media-badge {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(8, 12, 22, .72);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .14);
}

/* ============================================================
   PLAYLIST FORM — sectioned, chips, toggle switch, weekdays
   ============================================================ */

.playlists-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 22px;
}

.playlist-form-panel {
    align-self: start;
}

.playlist-form {
    display: grid;
    gap: 22px;
}

.form-section {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(203, 213, 223, .55);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 253, .82));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.form-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(203, 213, 223, .55);
}

.form-section-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.005em;
    text-transform: none;
}

.form-section-num {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), #3dc1f0);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 6px 14px rgba(29, 58, 139, .3);
}

.field-block {
    display: grid;
    gap: 7px;
}

.field-block > span:not(.chip-text):not(.chip-dot):not(.toggle-track):not(.toggle-thumb):not(.toggle-label) {
    font-size: 12px;
    font-weight: 900;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.field-label-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    gap: 10px;
}

.field-label-row small {
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    background: rgba(29, 58, 139, .08);
    border: 1px solid rgba(29, 58, 139, .18);
    padding: 2px 8px;
    border-radius: 999px;
}

.form-hint {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, var(--surface-2));
    border: 1px dashed var(--line-strong);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
}

.form-hint.warn {
    background: linear-gradient(180deg, #fffaf3, #fff5e8);
    border-color: rgba(43, 183, 240, .35);
    color: #8a6418;
}

/* ----- Toggle switch ----- */
.toggle-switch {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, var(--surface-2));
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.toggle-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.toggle-track {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--line-strong);
    transition: background .2s ease, box-shadow .2s ease;
}

.toggle-thumb {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(8, 12, 22, .25);
    transition: transform .2s ease;
}

.toggle-switch input:checked + .toggle-track {
    background: linear-gradient(135deg, var(--primary), #3dc1f0);
    box-shadow: 0 4px 12px rgba(29, 58, 139, .25);
}

.toggle-switch input:checked + .toggle-track .toggle-thumb {
    transform: translateX(16px);
}

.rtl .toggle-switch input:checked + .toggle-track .toggle-thumb {
    transform: translateX(-16px);
}

.toggle-switch input:focus-visible + .toggle-track {
    box-shadow: 0 0 0 4px rgba(29, 58, 139, .18);
}

.toggle-label {
    display: grid !important;
    gap: 1px !important;
    flex: 1;
}

.toggle-label strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
}

.toggle-label em {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0;
}

/* ----- Chip select (screens) ----- */
.chip-select {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
}

.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    transition: all .18s ease;
}

.chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-strong);
    transition: background .18s ease, box-shadow .18s ease;
}

.chip:hover {
    border-color: var(--line-strong);
    background: var(--surface-2);
}

.chip:has(input:checked) {
    border-color: var(--primary);
    background: linear-gradient(180deg, #f0faf7, #e0f3ee);
    color: var(--primary);
    box-shadow: 0 6px 16px rgba(29, 58, 139, .14);
}

.chip:has(input:checked) .chip-dot {
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(29, 58, 139, .18);
}

.chip:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(29, 58, 139, .2);
}

/* ----- Media chip grid ----- */
.media-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    padding: 4px;
}

.playlist-media-folders {
    display: grid;
    gap: 10px;
}

.playlist-media-folder {
    border: 1px solid rgba(203, 213, 223, .72);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    overflow: hidden;
}

.playlist-media-folder > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px;
    cursor: pointer;
}

.playlist-media-folder[open] > summary {
    border-bottom: 1px solid rgba(203, 213, 223, .65);
}

.playlist-media-folder__name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.playlist-media-folder__name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-media-folder__icon {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(29, 58, 139, .08);
    color: var(--primary);
    flex: 0 0 auto;
}

.playlist-media-folder__count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.playlist-media-folder__grid {
    max-height: 300px;
    padding: 12px;
}

.media-chip {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 6px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    background: #fff;
    cursor: pointer;
    transition: all .18s ease;
    text-transform: none;
    letter-spacing: 0;
}

.media-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.media-chip:hover {
    border-color: var(--line-strong);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(8, 12, 22, .08);
}

.media-chip:has(input:checked) {
    border-color: var(--primary);
    background: linear-gradient(180deg, #f0faf7, #e0f3ee);
    box-shadow: 0 8px 20px rgba(29, 58, 139, .18);
}

.media-chip-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, .03) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, .03) 25%, transparent 25%),
        #0a0f18;
    background-size: 12px 12px, 12px 12px, auto;
}

.media-chip-thumb img,
.media-chip-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-chip-kind {
    position: absolute;
    top: 5px;
    inset-inline-end: 5px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(8, 12, 22, .72);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.media-chip-tick {
    position: absolute;
    top: 6px;
    inset-inline-start: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    border: 1.5px solid rgba(20, 28, 42, .15);
    display: grid;
    place-items: center;
    color: transparent;
    transition: all .18s ease;
    backdrop-filter: blur(6px);
}

.media-chip:has(input:checked) .media-chip-tick {
    background: linear-gradient(135deg, var(--primary), #3dc1f0);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 10px rgba(29, 58, 139, .35);
}

.media-chip-name {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px 2px;
}

/* ----- Weekday picker ----- */
.weekday-picker {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.weekday {
    position: relative;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.weekday input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.weekday > span {
    display: grid;
    place-items: center;
    height: 42px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 900;
    transition: all .18s ease;
}

.weekday:hover > span {
    border-color: var(--line-strong);
    background: var(--surface-2);
}

.weekday:has(input:checked) > span {
    background: linear-gradient(135deg, var(--primary), #3dc1f0);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(29, 58, 139, .28);
}

.weekday:has(input:focus-visible) > span {
    box-shadow: 0 0 0 3px rgba(29, 58, 139, .2);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.form-actions .primary-btn {
    min-width: 180px;
    gap: 10px;
}

/* ----- Playlist list / card ----- */
.playlist-list {
    display: grid;
    gap: 10px;
}

.playlist-card {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid rgba(203, 213, 223, .6);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #f9fbfd);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 4px 12px rgba(8, 12, 22, .04);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    overflow: hidden;
}

.playlist-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 14px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--primary), #3dc1f0);
}

.rtl .playlist-card::before {
    border-radius: 4px 0 0 4px;
}

.playlist-card.is-disabled::before {
    background: linear-gradient(180deg, var(--line-strong), var(--line));
}

.playlist-card:hover {
    border-color: rgba(29, 58, 139, .35);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 12px 28px rgba(8, 12, 22, .08);
}

.playlist-card.is-disabled {
    opacity: .76;
}

.playlist-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.playlist-card__head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.playlist-card__head strong {
    font-size: 15px;
    font-weight: 900;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-card__sub {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    flex-shrink: 0;
}

.status-chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.status-chip.ok {
    background: rgba(29, 58, 139, .1);
    color: var(--primary);
    border: 1px solid rgba(29, 58, 139, .25);
}

.status-chip.ok .status-chip__dot {
    background: #7ad6fd;
    box-shadow: 0 0 0 3px rgba(122, 214, 253, .25);
}

.status-chip.off {
    background: rgba(108, 117, 132, .1);
    color: var(--muted);
    border: 1px solid var(--line);
}

.status-chip.off .status-chip__dot {
    background: var(--line-strong);
}

.playlist-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 700;
}

.meta-item svg {
    color: var(--muted);
    flex-shrink: 0;
}

.playlist-card__days {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.day-pip {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.day-pip.on {
    background: linear-gradient(135deg, rgba(29, 58, 139, .12), rgba(43, 183, 240, .14));
    border-color: rgba(29, 58, 139, .3);
    color: var(--primary);
}

@media (max-width: 900px) {
    .playlists-grid {
        grid-template-columns: 1fr;
    }

    .form-section {
        padding: 14px;
    }

    .weekday > span {
        height: 38px;
        font-size: 12px;
    }

    .media-chip-grid {
        max-height: 280px;
    }
}

/* ============================================================
   BG PICKER — solid palette + gradient builder
   ============================================================ */

.bg-picker-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.bg-picker-label-text {
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bg-picker {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.bg-picker-raw {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.bg-picker-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 42px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, var(--surface-2));
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: start;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 1px 2px rgba(20, 28, 42, .04);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.rtl .bg-picker-trigger {
    padding: 4px 4px 4px 10px;
}

.bg-picker-trigger:hover {
    border-color: var(--line-strong);
}

.bg-picker.is-open .bg-picker-trigger {
    border-color: var(--primary);
    box-shadow:
        0 0 0 4px rgba(29, 58, 139, .14),
        0 1px 0 rgba(255, 255, 255, .9) inset;
}

.bg-picker-preview {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid rgba(20, 28, 42, .12);
    background:
        linear-gradient(45deg, #d3d8df 25%, transparent 25%),
        linear-gradient(-45deg, #d3d8df 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d3d8df 75%),
        linear-gradient(-45deg, transparent 75%, #d3d8df 75%) #fff;
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
    box-shadow: 0 2px 4px rgba(8, 12, 22, .08);
}

.bg-picker-value {
    display: block;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
    unicode-bidi: plaintext;
    text-align: start;
}

.bg-picker-chevron {
    color: var(--muted);
    flex-shrink: 0;
    transition: transform .18s ease;
}

.bg-picker.is-open .bg-picker-chevron {
    transform: rotate(180deg);
}

.bg-picker-popover {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: min(320px, calc(100vw - 24px));
    padding: 14px;
    border: 1px solid rgba(203, 213, 223, .7);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #fafbfd);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 18px 48px rgba(8, 12, 22, .18),
        0 8px 24px rgba(8, 12, 22, .1);
    display: grid;
    gap: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bg-picker-popover[hidden] {
    display: none;
}

.bg-picker-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    background: rgba(20, 28, 42, .04);
    border: 1px solid rgba(20, 28, 42, .06);
    border-radius: 10px;
}

.bg-picker-tabs.has-image {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bg-picker-tabs button {
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 800;
    border-radius: 8px;
    padding: 0;
    min-height: 0;
    cursor: pointer;
}

.bg-picker-tabs button.is-active {
    background: #fff;
    color: var(--primary);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 4px 10px rgba(29, 58, 139, .14);
}

.bg-picker-pane {
    display: grid;
    gap: 10px;
}

.bg-picker-pane[hidden] {
    display: none;
}

.bg-picker-section-label {
    font-size: 10.5px;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.bg-picker-swatches {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
}

.bg-picker-gradients {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.bg-picker-swatch {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 8px;
    cursor: pointer;
    box-shadow:
        0 0 0 1px rgba(20, 28, 42, .12),
        0 2px 5px rgba(8, 12, 22, .08);
    transition: transform .15s ease, box-shadow .15s ease;
}

.bg-picker-gradients .bg-picker-swatch {
    aspect-ratio: 16 / 10;
}

.bg-picker-swatch:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px var(--primary),
        0 6px 14px rgba(29, 58, 139, .18);
}

.bg-picker-swatch.is-active {
    border-color: #fff;
    box-shadow:
        0 0 0 2px var(--primary),
        0 6px 14px rgba(29, 58, 139, .22);
}

.bg-picker-swatch.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/14px no-repeat;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}

.bg-picker-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.bg-picker-color-input {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid var(--line);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(8, 12, 22, .08);
}

.bg-picker-color-input input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    box-shadow: none;
    opacity: 0;
}

.bg-picker-color-thumb {
    position: absolute;
    inset: 0;
    background: var(--thumb-color, linear-gradient(135deg, #1d3a8b, #3dc1f0));
    pointer-events: none;
}

.bg-picker-color-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 0%, transparent 45%, rgba(255, 255, 255, .25) 50%, transparent 55%, transparent 100%);
}

.bg-picker-hex {
    flex: 1;
    min-width: 0;
    height: 38px !important;
    padding: 8px 12px !important;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    direction: ltr;
}

.bg-picker-stops {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bg-picker-stop {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, var(--surface-2));
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.bg-picker-stop input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: 0;
    padding: 0;
}

.bg-picker-stop-thumb {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(20, 28, 42, .15);
    background: var(--stop-color, #1d3a8b);
    box-shadow: 0 2px 4px rgba(8, 12, 22, .1);
}

.bg-picker-stop em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bg-picker-directions {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
}

.bg-picker-directions button {
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, var(--surface-2));
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 900;
    padding: 0;
    min-height: 0;
    cursor: pointer;
    transition: all .15s ease;
}

.bg-picker-directions button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.bg-picker-directions button.is-active {
    background: linear-gradient(135deg, var(--primary), #3dc1f0);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(29, 58, 139, .25);
}

.bg-picker-image-upload {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 8px 10px;
    border: 1px dashed rgba(29, 58, 139, .34);
    border-radius: 10px;
    background: rgba(29, 58, 139, .05);
    color: var(--ink);
    cursor: pointer;
    text-align: start;
    transition: border-color .18s ease, background .18s ease;
}

.bg-picker-image-upload:hover {
    border-color: var(--primary);
    background: rgba(29, 58, 139, .08);
}

.bg-picker-image-upload:disabled {
    cursor: wait;
    opacity: .72;
}

.bg-picker-image-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(8, 12, 22, .1);
}

.bg-picker-image-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.bg-picker-image-copy strong {
    font-size: 12.5px;
    font-weight: 900;
}

.bg-picker-image-copy em,
.bg-picker-upload-status {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.bg-picker-upload-status {
    min-height: 14px;
}

.bg-picker-upload-status.is-error {
    color: var(--coral);
}

.bg-picker-footer {
    display: flex;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px dashed rgba(203, 213, 223, .6);
}

.bg-picker-clear,
.bg-picker-done {
    height: 38px;
    min-height: 0;
    font-size: 12.5px;
    padding: 0 12px;
}

.bg-picker-done {
    flex: 1;
}

@media (max-width: 720px) {
    .bg-picker-popover {
        width: min(280px, 88vw);
    }

    .bg-picker-swatches {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .bg-picker-gradients {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ============================================================
   WEATHER WIDGET — icon + temp + city/condition
   ============================================================ */

.weather-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
    line-height: 1.05;
}

.weather-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.4em;
    color: currentColor;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}

.weather-main {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
    min-width: 0;
}

.weather-temp {
    font-size: 1.05em;
    font-weight: 900;
    letter-spacing: -.01em;
}

.weather-sub {
    font-size: 0.42em;
    font-weight: 700;
    opacity: .82;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .25em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16em;
}

.rtl .weather-main,
[dir="rtl"] .weather-main {
    align-items: flex-end;
}

/* ----- Style: Minimal — just icon + temp ----- */
.weather-style-minimal {
    gap: 0.3em;
}

.weather-style-minimal .weather-sub {
    display: none;
}

/* ----- Style: Card — vertical, prominent icon ----- */
.weather-style-card {
    flex-direction: column;
    gap: 0.15em;
    padding: 0.4em 0.6em;
    border-radius: 0.5em;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    text-align: center;
}

.weather-style-card .weather-icon {
    font-size: 2.2em;
}

.weather-style-card .weather-main {
    align-items: center;
}

.weather-style-card .weather-temp {
    font-size: 1.2em;
}

/* ----- Style: Detailed — high/low temp range ----- */
.weather-range {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    font-size: 0.5em;
    font-weight: 700;
    margin-top: .2em;
    opacity: .9;
}

.weather-range b {
    font-weight: 900;
    color: currentColor;
}

.weather-range i {
    font-style: normal;
    opacity: .65;
}

/* ----- Style: Glass — frosted background ----- */
.weather-style-glass {
    padding: 0.4em 0.7em;
    border-radius: 0.6em;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

/* ----- Forecast mode (multi-day) ----- */
.weather-mode-forecast {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25em;
}

.weather-fc-head {
    font-size: 0.45em;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .85;
}

.weather-forecast {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.25em;
    width: 100%;
    direction: ltr;
}

.weather-fc-day {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.15em;
    padding: 0.35em 0.15em;
    border-radius: 0.35em;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    text-align: center;
}

.weather-fc-day:first-child {
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 10px rgba(0, 0, 0, .15);
}

.weather-fc-name {
    font-size: 0.4em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .85;
}

.weather-fc-day .weather-icon {
    font-size: 1.1em;
}

.weather-fc-range {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
    font-size: 0.4em;
}

.weather-fc-range b {
    font-weight: 900;
}

.weather-fc-range i {
    font-style: normal;
    opacity: .55;
}

/* Glass + forecast combo */
.weather-style-glass.weather-mode-forecast {
    padding: 0.5em;
}

.weather-content {
    --weather-icon-scale: 1.2;
    --weather-icon-color: currentColor;
    --weather-detail-bg: rgba(255, 255, 255, .12);
}

.weather-current {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    width: 100%;
    min-width: 0;
}

.weather-icon {
    width: 1em;
    height: 1em;
    font-size: calc(1.35em * var(--weather-icon-scale));
    color: var(--weather-icon-color);
}

.weather-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    overflow: visible;
}

.weather-icon-color-text .weather-icon {
    color: currentColor;
}

.weather-icon-style-colorful .weather-icon {
    color: var(--weather-icon-color);
}

.weather-icon-pos-after .weather-current {
    flex-direction: row;
}

.weather-icon-pos-top .weather-current,
.weather-layout-stacked .weather-current {
    flex-direction: column;
    text-align: center;
}

.weather-icon-pos-bottom .weather-current {
    flex-direction: column;
    text-align: center;
}

.weather-icon-pos-top .weather-main,
.weather-icon-pos-bottom .weather-main,
.weather-layout-stacked .weather-main {
    align-items: center;
}

.weather-main {
    gap: .18em;
}

.weather-primary {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: .22em;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
}

.weather-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-item-city,
.weather-item-condition {
    font-size: .46em;
    font-weight: 800;
    opacity: .86;
}

.weather-separator {
    font-size: .44em;
    font-weight: 900;
    opacity: .62;
}

.weather-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .24em;
    flex-wrap: wrap;
    max-width: 100%;
    margin-top: .2em;
}

.weather-detail {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    padding: .18em .42em;
    border-radius: 999px;
    background: var(--weather-detail-bg);
    font-size: .34em;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
}

.weather-layout-compact .weather-current {
    gap: .32em;
}

.weather-layout-hero .weather-current {
    gap: .6em;
}

.weather-layout-hero .weather-temp {
    font-size: 1.75em;
}

.weather-layout-hero .weather-item-city,
.weather-layout-hero .weather-item-condition {
    font-size: .5em;
}

.weather-layout-strip.weather-mode-current .weather-current {
    justify-content: space-between;
    gap: .8em;
}

.weather-layout-strip .weather-primary,
.weather-layout-strip .weather-details {
    justify-content: flex-start;
}

.weather-layout-strip .weather-main {
    flex: 1;
}

.weather-style-card .weather-current,
.weather-style-glass .weather-current {
    min-height: 100%;
}

.weather-style-card .weather-icon {
    font-size: calc(1.8em * var(--weather-icon-scale));
}

.weather-temp {
    letter-spacing: 0;
}

.weather-state-loading .weather-detail-loading,
.weather-state-error .weather-detail-error {
    opacity: .76;
}

.weather-fc-rain {
    font-size: .34em;
    font-weight: 800;
    opacity: .78;
    white-space: nowrap;
}

.weather-fc-cond {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .32em;
    font-weight: 800;
    opacity: .72;
}

.weather-days-5 .weather-forecast {
    gap: .2em;
}

.weather-days-7 .weather-forecast {
    gap: .14em;
}

.weather-days-5 .weather-fc-day {
    padding-inline: .12em;
}

.weather-days-7 .weather-fc-day {
    gap: .12em;
    padding: .28em .1em;
}

.weather-days-5 .weather-fc-name,
.weather-days-7 .weather-fc-name {
    font-size: .34em;
}

.weather-days-5 .weather-fc-day .weather-icon {
    font-size: .98em;
}

.weather-days-7 .weather-fc-day .weather-icon {
    font-size: .88em;
}

.weather-days-5 .weather-fc-range,
.weather-days-7 .weather-fc-range,
.weather-days-5 .weather-fc-rain,
.weather-days-7 .weather-fc-rain,
.weather-days-5 .weather-fc-cond,
.weather-days-7 .weather-fc-cond {
    font-size: .3em;
}

.weather-layout-strip.weather-mode-forecast .weather-forecast {
    gap: .18em;
}

.weather-layout-strip.weather-mode-forecast .weather-fc-day {
    flex-direction: row;
    justify-content: center;
    gap: .25em;
    padding-inline: .28em;
}

.weather-icon svg,
.weather-icon svg * {
    transform-box: fill-box;
    transform-origin: center;
}

.weather-icon.is-animated {
    will-change: transform;
}

.weather-icon.is-animated .weather-sun-core {
    animation: weatherSunPulse 3.8s ease-in-out infinite;
    animation-delay: var(--weather-icon-delay, 0ms);
}

.weather-icon.is-animated .weather-sun-rays {
    animation: weatherSunSpin 16s linear infinite;
    animation-delay: var(--weather-icon-delay, 0ms);
}

.weather-icon.is-animated .weather-moon {
    animation: weatherMoonFloat 4.8s ease-in-out infinite;
    animation-delay: var(--weather-icon-delay, 0ms);
}

.weather-icon.is-animated .weather-cloud {
    animation: weatherCloudDrift 4.8s ease-in-out infinite;
    animation-delay: var(--weather-icon-delay, 0ms);
}

.weather-icon.is-animated .weather-rain-drop {
    animation: weatherRainDrop 1.15s cubic-bezier(.4, 0, .2, 1) infinite;
    animation-delay: var(--weather-icon-delay, 0ms);
}

.weather-icon.is-animated .weather-rain-drop:nth-of-type(2) {
    animation-delay: calc(var(--weather-icon-delay, 0ms) + 140ms);
}

.weather-icon.is-animated .weather-rain-drop:nth-of-type(3) {
    animation-delay: calc(var(--weather-icon-delay, 0ms) + 280ms);
}

.weather-icon.is-animated .weather-snow circle {
    animation: weatherSnowFall 2.4s ease-in-out infinite;
    animation-delay: var(--weather-icon-delay, 0ms);
}

.weather-icon.is-animated .weather-snow circle:nth-child(2n) {
    animation-delay: calc(var(--weather-icon-delay, 0ms) + 320ms);
}

.weather-icon.is-animated .weather-fog line {
    animation: weatherFogDrift 3.8s ease-in-out infinite;
    animation-delay: var(--weather-icon-delay, 0ms);
}

.weather-icon.is-animated .weather-fog line:nth-child(2) {
    animation-delay: calc(var(--weather-icon-delay, 0ms) + 260ms);
}

.weather-icon.is-animated .weather-bolt {
    animation: weatherFlash 1.9s steps(2, end) infinite;
    animation-delay: var(--weather-icon-delay, 0ms);
}

.weather-mode-forecast .weather-icon.is-animated .weather-sun-rays {
    animation-duration: 22s;
}

.weather-mode-forecast .weather-icon.is-animated .weather-cloud {
    animation-duration: 5.6s;
}

.weather-days-7 .weather-icon.is-animated .weather-rain-drop,
.weather-days-7 .weather-icon.is-animated .weather-snow circle,
.weather-days-7 .weather-icon.is-animated .weather-fog line {
    animation-duration: 1.45s;
}

@media (prefers-reduced-motion: reduce) {
    .weather-icon.is-animated,
    .weather-icon.is-animated * {
        animation: none !important;
        transform: none !important;
    }
}

@keyframes weatherSunSpin {
    to { transform: rotate(360deg); }
}

@keyframes weatherSunPulse {
    0%, 100% { transform: scale(1); opacity: .94; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes weatherMoonFloat {
    0%, 100% { transform: translateY(0); opacity: .9; }
    50% { transform: translateY(-.9px); opacity: 1; }
}

@keyframes weatherCloudDrift {
    0%, 100% { transform: translateX(-.6px); }
    50% { transform: translateX(.9px); }
}

@keyframes weatherRainDrop {
    0% { transform: translateY(-1.2px); opacity: 0; }
    45% { opacity: 1; }
    100% { transform: translateY(2.3px); opacity: 0; }
}

@keyframes weatherSnowFall {
    0%, 100% { transform: translateY(-.8px); opacity: .58; }
    50% { transform: translateY(1.1px); opacity: 1; }
}

@keyframes weatherFogDrift {
    0%, 100% { transform: translateX(-1px); opacity: .55; }
    50% { transform: translateX(1.2px); opacity: .95; }
}

@keyframes weatherFlash {
    0%, 65%, 100% { opacity: .55; }
    70%, 82% { opacity: 1; }
}

/* ============================================================
   MOBILE / TOUCH IMPROVEMENTS
   ============================================================ */

/* Mobile top bar — hidden on desktop */
.mobile-topbar {
    display: none;
}

/* Safe areas for iOS notched devices */
@supports (padding: max(0px)) {
    body.app-page .sidebar {
        padding-top: max(26px, env(safe-area-inset-top));
        padding-bottom: max(22px, env(safe-area-inset-bottom));
    }
    body.app-page .main-shell {
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }
    body.auth-page {
        padding-top: max(28px, env(safe-area-inset-top));
        padding-bottom: max(28px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 900px) {
    .mobile-topbar {
        position: fixed;
        top: 0;
        inset-inline: 0;
        z-index: 80;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        padding-top: max(10px, env(safe-area-inset-top));
        padding-inline-start: max(14px, env(safe-area-inset-left));
        padding-inline-end: max(14px, env(safe-area-inset-right));
        background: linear-gradient(180deg, #0a1530 0%, rgba(10, 21, 48, .92) 100%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 6px 22px rgba(8, 14, 30, .25);
        height: calc(58px + env(safe-area-inset-top));
        box-sizing: border-box;
    }

    .mobile-topbar__brand {
        display: inline-flex;
        align-items: center;
        margin-inline-start: auto;
        padding: 5px 10px;
        border-radius: 10px;
        background: linear-gradient(180deg, #ffffff, #eef4fc);
        box-shadow: 0 2px 10px rgba(8, 14, 30, .35);
    }
    .mobile-topbar__logo {
        height: 26px;
        width: auto;
        max-width: 130px;
        display: block;
        object-fit: contain;
    }

    /* Make the existing mobile-menu-btn sit inside the topbar (not floating) */
    .mobile-topbar .mobile-menu-btn {
        position: static;
        inset: auto;
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 12px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .055)),
            rgba(255, 255, 255, .04);
        color: #fff;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, .14) inset,
            0 8px 18px rgba(3, 9, 24, .18);
        transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    .mobile-topbar .mobile-menu-btn:hover,
    .mobile-topbar .mobile-menu-btn:active {
        border-color: rgba(122, 214, 253, .36);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .08)),
            rgba(43, 183, 240, .10);
    }

    .mobile-topbar .mobile-menu-btn:active {
        transform: translateY(1px) scale(.98);
    }

    .mobile-topbar .mobile-menu-btn:focus-visible {
        outline: 0;
        box-shadow:
            0 0 0 3px rgba(122, 214, 253, .28),
            0 1px 0 rgba(255, 255, 255, .14) inset,
            0 8px 18px rgba(3, 9, 24, .18);
    }

    body.mobile-nav-open .mobile-topbar .mobile-menu-btn {
        border-color: rgba(122, 214, 253, .50);
        background:
            linear-gradient(135deg, rgba(43, 183, 240, .24), rgba(255, 255, 255, .10)),
            rgba(255, 255, 255, .06);
        box-shadow:
            0 0 0 1px rgba(122, 214, 253, .10) inset,
            0 8px 22px rgba(43, 183, 240, .16);
    }

    /* Standalone floating menu button no longer needed (replaced by topbar) */
    body.app-page > .mobile-menu-btn {
        display: none;
    }

    /* Push main content below the topbar */
    .main-shell {
        padding-top: calc(76px + env(safe-area-inset-top));
    }
    .canvas-panel {
        padding-top: calc(72px + env(safe-area-inset-top));
    }
}

/* Better touch scrolling */
.canvas-panel,
.designer-panel,
.icon-picker__grid,
.bg-picker-popover {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 720px) {
    /* Prevent iOS zoom-on-focus by ensuring input font-size >= 16px */
    .stack-form input,
    .stack-form select,
    .stack-form textarea,
    .inspector-form input,
    .inspector-form select,
    .inspector-form textarea,
    .field-inline input,
    .field-inline select,
    .bg-picker-hex,
    .icon-picker__search {
        font-size: 16px;
    }

    /* Larger touch targets */
    .primary-btn,
    .ghost-btn,
    .danger-btn,
    .stack-form button,
    .tool-grid button,
    .nav a {
        min-height: 44px;
    }

    .nav a {
        padding-block: 12px;
    }

    /* Page header stacks fully */
    .page-header {
        gap: 12px;
        padding-block: 0;
    }
    .page-header > div:first-child {
        gap: 4px;
    }
    .page-header h1 {
        font-size: clamp(20px, 6vw, 28px);
        line-height: 1.15;
    }
    .page-header .eyebrow {
        margin: 0;
    }
    .header-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }
    .header-actions > * {
        flex-shrink: 0;
    }
    /* Lone primary action goes full-width for big tap target */
    .header-actions > .primary-btn:only-child,
    .header-actions > .ghost-btn:only-child {
        width: 100%;
        justify-content: center;
        padding-block: 14px;
    }

    /* Forms */
    .grid.two-cols {
        gap: 16px;
    }
    .panel {
        padding: 16px;
    }
    .screen-filter-bar {
        align-items: stretch;
    }
    .screen-filter-field,
    .screen-filter-reset,
    .screen-filter-summary {
        width: 100%;
    }
    .screen-filter-summary {
        justify-content: center;
    }
    .branch-city > summary,
    .branch-node > summary {
        align-items: start;
        flex-direction: column;
    }
    .form-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .stack-form {
        gap: 14px;
    }

    /* Days picker — 4 cols already from 560px breakpoint, ensure ok */
    .days-grid label {
        min-height: 40px;
        align-content: center;
    }

    /* Editor — collapsible templates/elements and thumb-friendly palette */
    .template-picker,
    .element-picker {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: linear-gradient(180deg, #fff, var(--surface-2));
        overflow: hidden;
    }

    .template-picker__summary,
    .element-picker__summary {
        min-height: 46px;
        margin: 0;
        padding: 0 12px;
        border-bottom: 0;
        cursor: pointer;
    }

    .template-picker[open] > .template-picker__summary,
    .element-picker[open] > .element-picker__summary {
        border-bottom: 1px solid rgba(203, 213, 223, .62);
    }

    .template-picker__current {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        max-width: 46%;
        margin-inline-start: auto;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .template-picker__current[hidden] {
        display: none;
    }

    .template-picker__toggle,
    .element-picker__toggle {
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        flex-shrink: 0;
    }

    .template-picker__toggle::before,
    .element-picker__toggle::before {
        content: "";
        width: 8px;
        height: 8px;
        border-inline-end: 2px solid var(--muted);
        border-block-end: 2px solid var(--muted);
        transform: translateY(-2px) rotate(45deg);
        transition: transform .18s ease;
    }

    .template-picker[open] .template-picker__toggle::before,
    .element-picker[open] .element-picker__toggle::before {
        transform: translateY(2px) rotate(225deg);
    }

    .template-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        gap: 8px;
        padding: 10px;
    }

    .template-card-grid .template-chip {
        min-height: 102px;
        padding: 8px;
        gap: 7px;
    }

    .template-card-grid .template-preview {
        border-radius: 5px;
    }

    .template-card-grid .template-chip strong {
        font-size: 12.5px;
        line-height: 1.2;
    }

    .tool-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .element-picker .tool-grid {
        padding: 10px;
    }

    .tool-grid button {
        padding: 13px 10px;
        font-size: 14px;
        font-weight: 800;
    }

    /* Editor canvas — fit screen, allow gentle h-scroll */
    .canvas-panel {
        padding: 60px 8px 14px;
        margin-inline: -8px;
        border-radius: 0;
        overflow-x: auto;
    }
    .canvas-toolbar {
        padding-inline: 12px;
    }
    .designer-root {
        gap: 12px;
    }
    .designer-panel {
        padding: 14px;
    }

    /* Stage shrinks to viewport instead of forcing 720px scroll */
    .stage-frame {
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
    }
    .designer-root[data-orientation="landscape"] .stage-frame {
        aspect-ratio: 16 / 9;
        height: auto;
    }
    .designer-root[data-orientation="portrait"] .stage-frame {
        aspect-ratio: 9 / 16;
        max-width: min(360px, 84vw);
        height: auto;
    }

    /* Inspector form — tighter */
    .inspector-form {
        gap: 14px;
    }
    .inspector-section {
        padding: 12px;
        gap: 10px;
    }
    .precision-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }

    /* Icon picker — fewer cols on phones */
    .icon-picker__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        max-height: 240px;
    }
    .icon-picker__chip {
        font-size: 22px;
        min-height: 40px;
    }
    .icon-picker__cat {
        min-height: 36px;
    }

    /* Background picker popover — anchored modal on phones */
    .bg-picker-popover {
        position: fixed !important;
        inset: auto 12px 12px 12px !important;
        top: auto !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 14px;
        box-shadow: 0 -10px 40px rgba(8, 12, 22, .35);
        animation: bgPickerSlideUp .22s ease-out both;
    }
    .bg-picker-swatches {
        grid-template-columns: repeat(8, 1fr);
    }
    .bg-picker-directions {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Sidebar drawer — wider on small screens */
    .sidebar {
        width: min(85vw, 340px);
    }

    /* Status pills row on dashboard — wraps */
    .status-pills {
        gap: 8px;
    }
    .pill {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* List rows — better stacking */
    .list-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    .screen-row-main {
        width: 100%;
        justify-content: space-between;
    }
    .screen-preview-thumb {
        width: 112px;
        flex-basis: 112px;
    }
    .row-actions {
        margin-inline-start: auto;
    }

    /* Login card */
    .login-card {
        padding: 18px 16px;
    }
    .login-topbar {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 12px;
    }
    .auth-languages {
        align-self: flex-start;
    }
    .login-brand {
        align-self: center;
    }
    .login-brand__logo {
        height: 38px;
    }
    .login-grid {
        gap: 22px;
    }
    .login-preview-side {
        display: none;
    }
    .login-features {
        font-size: 13px;
    }
}

@keyframes bgPickerSlideUp {
    from { transform: translateY(20%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 480px) {
    /* Even tighter on small phones */
    .tool-grid {
        grid-template-columns: 1fr 1fr;
    }
    .icon-picker__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .days-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .main-shell {
        padding: 64px 10px 14px;
    }
    .canvas-panel {
        padding: 56px 6px 12px;
        margin-inline: -10px;
    }
    .panel {
        padding: 14px;
    }
    .page-header h1 {
        font-size: clamp(20px, 5vw, 26px);
    }
}

/* Admin client management — toolbar, business rows, tabs */
.toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: stretch;
    flex-wrap: wrap;
}

.toolbar-input,
.toolbar-select {
    flex: 1 1 160px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    color: inherit;
}

.toolbar-input:focus,
.toolbar-select:focus {
    outline: none;
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(31, 157, 138, .18);
}

.business-row {
    flex-wrap: wrap;
    gap: 10px 16px;
}

.business-row.is-suspended {
    background: linear-gradient(180deg, #fff7ec, #fff2dc);
    border-color: #f1c889;
}

.business-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 220px;
}

.business-row-title {
    color: inherit;
    text-decoration: none;
}

.business-row-title:hover strong {
    text-decoration: underline;
}

.business-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
}

.business-row-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.business-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.business-row-actions .ghost-btn,
.business-row-actions .danger-btn {
    padding: 6px 10px;
    font-size: 12px;
    min-height: 30px;
}

.inline-form {
    display: inline;
    margin: 0;
}

.mini-status.is-suspended {
    background: #fff2dc;
    color: #8a4b00;
    border-color: #f1c889;
}

.empty-state {
    color: var(--muted);
    text-align: center;
    padding: 18px 8px;
    margin: 0;
}

/* Admin business detail tabs */
.tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 16px 0 12px;
    border-bottom: 1px solid var(--line);
}

.tab {
    border: none;
    background: transparent;
    padding: 10px 14px;
    font: inherit;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tab:hover {
    color: var(--text);
}

.tab.is-active {
    color: var(--text);
    border-bottom-color: var(--line-strong, #1f9d8a);
    font-weight: 700;
}

.tab-count {
    font-size: 11px;
    background: var(--surface-2);
    color: var(--muted);
    padding: 1px 7px;
    border-radius: 999px;
}

.tab-panel {
    display: none;
}

.tab-panel.is-active {
    display: block;
}

.tab-panel > * + * {
    margin-top: 20px;
}

.grid.four-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.kv-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 18px;
    margin: 0;
}

.kv-grid dt {
    color: var(--muted);
    font-weight: 600;
}

.kv-grid dd {
    margin: 0;
}

.swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--line);
    vertical-align: middle;
    margin-inline-end: 6px;
}

.metric-label {
    color: var(--muted);
    font-size: 12px;
}

.metric-value {
    font-size: 22px;
    font-weight: 800;
    display: block;
    margin-top: 4px;
}

.cell-clamp {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Billing — pricing form + live calc */
.billing-amount {
    font-weight: 700;
    color: var(--text);
}

.mrr-banner {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #f0fbf6, #e7f5ee);
    border: 1px solid #c8e6d4;
    border-radius: 8px;
    margin-bottom: 12px;
}

.mrr-banner .metric-value {
    font-size: 22px;
    font-weight: 800;
    color: #06743c;
}

.live-calc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 16px;
    background: var(--surface-2);
    padding: 12px 14px;
    border-radius: 8px;
    margin: 8px 0 4px;
}

.live-calc > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.live-calc span {
    color: var(--muted);
    font-size: 12px;
}

.live-calc strong {
    font-weight: 800;
    font-size: 15px;
}

.live-calc-total strong {
    font-size: 18px;
    color: var(--text);
}

.grid.three-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.billing-form input[type="number"],
.billing-form select {
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
}

.billing-form input[type="number"]:disabled {
    background: var(--surface-2);
    color: var(--muted);
    cursor: not-allowed;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    margin: 4px 0;
}

.checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Admin business detail — CRUD rows */
.row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.row-actions .ghost-btn,
.row-actions .danger-btn,
.row-actions .primary-btn {
    padding: 5px 10px;
    font-size: 12px;
    min-height: 28px;
}

.inline-edit-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
}

.inline-edit-row input[type="text"],
.inline-edit-row input[type="email"],
.inline-edit-row input[type="number"],
.inline-edit-row select {
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    font: inherit;
    flex: 1 1 120px;
    min-width: 0;
}

.inline-edit-row .ghost-btn,
.inline-edit-row .primary-btn {
    padding: 4px 10px;
    font-size: 12px;
    min-height: 30px;
}

.screen-devices-row td {
    padding-top: 0;
    background: rgba(248, 250, 252, .72);
}

.screen-outputs {
    display: grid;
    gap: 10px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--line);
}

.screen-outputs > strong {
    color: var(--ink);
    font-size: 13px;
}

.screen-outputs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.screen-output-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 10px;
}

.screen-output-card label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.screen-output-card input {
    min-width: 0;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    font: inherit;
}

.screen-devices {
    display: grid;
    gap: 10px;
    padding: 10px 0 2px;
}

.screen-devices > strong {
    color: var(--ink);
    font-size: 13px;
}

.screen-devices__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.screen-device-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 10px 12px;
}

.screen-device-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.screen-device-card dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 5px 10px;
    margin: 0;
    font-size: 12px;
}

.screen-device-card dt {
    color: var(--muted);
}

.screen-device-card dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-user-edit-row {
    align-items: flex-start;
}

.operator-business-picker {
    flex: 1 1 100%;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
}

.operator-business-picker[hidden] {
    display: none;
}

.operator-business-picker__title {
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-2);
}

.operator-business-picker__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px 12px;
}

.operator-business-option {
    margin: 0;
}

.inline-create-form input[type="text"],
.inline-create-form input[type="email"],
.inline-create-form select {
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
}

.muted-note {
    color: var(--muted);
    font-size: 12px;
}

.admin-mode-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(180deg, #fff7ec, #fff2dc);
    border: 1px solid #f1c889;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #8a4b00;
    font-weight: 700;
}

.admin-mode-banner .ghost-btn {
    border-color: #f1c889;
    background: #fff;
    color: #8a4b00;
}

.scope-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 16px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border: 1px solid var(--line);
    border-radius: 12px;
}

/* ----- Page header with embedded scope row ----- */
.page-header--with-scope {
    flex-wrap: wrap;
    align-items: end;
    row-gap: 14px;
}

.page-header__title {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.page-header__scope {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.page-header__scope-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.page-header__scope .scope-select-wrap {
    flex-wrap: nowrap;
    gap: 8px;
}

.page-header__scope .scope-select {
    min-width: 220px;
}

.page-header__scope .scope-select-status {
    white-space: nowrap;
    flex-shrink: 0;
}

.page-header__scope .scope-bar__reset {
    flex-shrink: 0;
}

.page-header__scope .scope-copy {
    padding-top: 0;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.page-header__scope .scope-copy__label {
    flex: 0 0 auto;
}

.page-header__scope .scope-copy__control {
    min-width: 220px;
}

.page-header__scope .scope-bar__hint {
    flex: 1 0 100%;
    margin: 0;
}

@media (max-width: 980px) {
    .page-header__scope {
        flex-direction: column;
        align-items: stretch;
    }
    .page-header__scope-main {
        width: 100%;
    }
    .page-header__scope .scope-select-wrap {
        flex: 1 1 auto;
        flex-wrap: wrap;
    }
    .page-header__scope .scope-copy,
    .page-header__scope .scope-copy__control {
        width: 100%;
    }
    .page-header__scope .scope-copy {
        flex-wrap: wrap;
    }
}

.scope-bar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.scope-bar__label {
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: .02em;
    color: var(--ink-2);
    opacity: .82;
}

.scope-bar__reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #fecaca;
    background: #fff;
    color: #b91c1c;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s ease;
}

.scope-bar__reset:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}

.scope-bar__reset svg {
    flex-shrink: 0;
}

.scope-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.scope-select-icon {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #1f9d8a);
    pointer-events: none;
}

.scope-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 240px;
    padding-block: 10px;
    padding-inline-start: 38px;
    padding-inline-end: 36px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
    line-height: 1.2;
}

.scope-select:hover {
    border-color: var(--line-strong);
}

.scope-select:focus-visible {
    outline: none;
    border-color: var(--primary, #1f9d8a);
    box-shadow: 0 0 0 3px rgba(31, 157, 138, .2);
}

.scope-select-caret {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    color: var(--ink-2);
    opacity: .7;
    pointer-events: none;
}

.scope-select-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    line-height: 1;
}

.scope-select-status--dedicated {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

.scope-select-status--default {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.scope-select-status--overlay {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.designer-root[data-editor-mode="overlay"] .template-grid button,
.designer-root[data-editor-mode="overlay"] .tool-grid button {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.4);
}

.designer-root[data-editor-mode="overlay"] .field-inline:has([data-layout-orientation]),
.designer-root[data-editor-mode="overlay"] .bg-picker-field {
    display: none;
}

.designer-root[data-editor-mode="overlay"] .stage-item {
    cursor: default;
}

.designer-root[data-editor-mode="overlay"] .stage-item .resize-handle {
    display: none;
}

.scope-select-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.scope-copy {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.scope-copy__label {
    flex: 0 0 100%;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 800;
    opacity: .82;
}

.scope-copy__control {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: min(320px, 100%);
}

.scope-copy__icon {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--muted);
    pointer-events: none;
}

.scope-copy__select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 40px;
    padding-block: 9px;
    padding-inline-start: 36px;
    padding-inline-end: 30px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.scope-copy__select:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29, 58, 139, .14);
}

.scope-copy__button {
    min-height: 40px;
    gap: 7px;
}

.scope-copy__button:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.scope-bar__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

.scope-bar__hint--default {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.scope-bar__hint--overlay {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    flex-wrap: wrap;
    gap: 12px;
}

.scope-bar__hint--overlay .scope-bar__hint-icon {
    color: #fff;
    background: #f97316;
}

.scope-bar__hint--warn {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.scope-bar__hint--warn .scope-bar__hint-icon {
    color: #fff;
    background: #dc2626;
    font-family: inherit;
    font-style: normal;
}

.scope-bar__hint-action {
    margin-inline-start: auto;
    padding-block: 4px;
}

.scope-bar__hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: currentColor;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-style: italic;
    font-family: Georgia, serif;
}

.scope-bar__hint--default .scope-bar__hint-icon {
    color: #fff;
    background: #3b82f6;
}

@media (max-width: 640px) {
    .scope-select {
        min-width: 0;
        width: 100%;
    }
    .scope-select-wrap {
        width: 100%;
    }
    .scope-copy,
    .scope-copy__control,
    .scope-copy__button {
        width: 100%;
    }
}

.playlist-card__actions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
}

.font-picker-field {
    display: grid;
    gap: 6px;
}

.font-picker-label-text {
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.font-picker {
    position: relative;
}

.font-picker-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 42px;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, var(--surface-2));
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: start;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 1px 2px rgba(20, 28, 42, .04);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.font-picker-trigger:hover {
    border-color: var(--line-strong);
}

.font-picker.is-open .font-picker-trigger {
    border-color: var(--primary);
    box-shadow:
        0 0 0 4px rgba(29, 58, 139, .14),
        0 1px 0 rgba(255, 255, 255, .9) inset;
}

.font-picker-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.font-picker-chevron {
    flex-shrink: 0;
    color: var(--ink-2);
    transition: transform .18s ease;
}

.font-picker.is-open .font-picker-chevron {
    transform: rotate(180deg);
}

.font-picker-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(8, 12, 22, .18);
    max-height: 340px;
    grid-template-rows: auto 1fr;
}

.font-picker-search {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 13px;
    box-sizing: border-box;
}

.font-picker-search:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29, 58, 139, .14);
}

.font-picker-list {
    display: grid;
    gap: 2px;
    overflow-y: auto;
    padding-inline-end: 4px;
}

.font-picker-option {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font-size: 18px;
    text-align: start;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.font-picker-option:hover {
    background: var(--surface-2);
    border-color: var(--line);
}

.font-picker-option.is-active {
    background: rgba(29, 58, 139, .08);
    border-color: var(--primary);
    color: var(--primary);
}

/* Disable accidental tap-highlight on action elements */
@media (hover: none) {
    button,
    a,
    .emoji-chip,
    .icon-picker__chip,
    .bg-picker-swatch {
        -webkit-tap-highlight-color: rgba(43, 183, 240, .25);
    }
}

/* Media library: folder sidebar + per-card actions */
.media-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 768px) {
    .media-layout {
        grid-template-columns: 1fr;
    }
}

.media-folders {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: visible;
    position: sticky;
    top: 20px;
    z-index: 40;
}

.media-folders__head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, var(--surface-2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.media-folders__head h2 {
    margin: 0;
    font-size: 14px;
    color: var(--ink);
}

.media-folders__new-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}

.media-folders__new-btn:hover {
    background: var(--primary-soft);
    border-color: color-mix(in srgb, var(--primary), transparent 70%);
}

.media-folders__list {
    list-style: none;
    margin: 0;
    padding: 6px;
}

.media-folders__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    transition: background-color .12s, color .12s;
}

.media-folders__list a:hover {
    background: var(--surface-2);
}

.media-folders__list a.is-active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}

.media-folders__count {
    font-size: 12px;
    color: var(--muted);
    background: var(--surface-2);
    padding: 1px 8px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}

.media-folders__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-folders__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-folders__icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex: 0 0 22px;
    background: var(--surface-2);
    color: var(--primary);
}

.media-folders__name--system .media-folders__icon {
    color: var(--ink-2);
}

.media-folders__list a.is-active .media-folders__icon {
    background: #fff;
    color: var(--primary);
}

.media-folders__indent {
    width: 12px;
    height: 16px;
    flex: 0 0 12px;
    border-inline-start: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    border-end-start-radius: 5px;
    opacity: .72;
}

.media-folders__row {
    position: relative;
}

.media-folders__row:focus-within {
    z-index: 60;
}

.media-folders__actions-btn {
    position: absolute;
    top: 50%;
    inset-inline-end: 6px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: var(--surface);
    color: var(--muted);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .12s, color .12s, background-color .12s;
}

.media-folders__row:hover .media-folders__actions-btn,
.media-folders__row:focus-within .media-folders__actions-btn {
    opacity: 1;
}

.media-folders__actions-btn:hover {
    background: var(--surface-3);
    color: var(--ink);
}

.media-folders__menu {
    position: absolute;
    top: calc(100% - 4px);
    inset-inline-end: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    min-width: 170px;
    padding: 4px;
    z-index: 80;
}

.media-folders__menu button {
    display: block;
    width: 100%;
    text-align: start;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
}

.media-folders__menu button:hover {
    background: var(--surface-2);
}

.media-folders__menu button.danger {
    color: var(--coral);
}

.media-folders__menu button.danger:hover {
    background: rgba(217, 74, 103, .1);
}

/* Make room for the actions button on the link itself */
.media-folders__row > a {
    padding-inline-end: 32px;
}

.media-folders__list a.is-active .media-folders__count {
    background: rgba(255, 255, 255, .7);
    color: var(--primary);
}

body.folder-dialog-open {
    overflow: hidden;
}

.folder-dialog[hidden] {
    display: none;
}

.folder-dialog {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 18px;
}

.folder-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 21, 48, .48);
    backdrop-filter: blur(4px);
}

.folder-dialog__panel {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: min(720px, calc(100vh - 28px));
    overflow: auto;
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.folder-dialog__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.folder-dialog__badge {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
}

.folder-dialog__head h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}

.folder-dialog__close {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
}

.folder-dialog__close:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.folder-dialog__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, .75fr);
    gap: 14px;
    align-items: start;
}

.folder-dialog__fields {
    display: grid;
    gap: 12px;
}

.folder-dialog__field {
    display: grid;
    gap: 6px;
}

.folder-dialog__field > span,
.folder-dialog__preview-label {
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 800;
}

.folder-dialog__field input,
.folder-dialog__field select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.folder-dialog__field input:focus,
.folder-dialog__field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 84%);
}

.move-dialog__body {
    grid-template-columns: minmax(0, 1fr) minmax(210px, .72fr);
}

.move-dialog__hint {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.move-dialog__target {
    align-self: stretch;
    align-content: start;
}

.move-dialog__target-value {
    display: block;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.move-dialog__target-value.is-next {
    border-color: color-mix(in srgb, var(--primary), transparent 72%);
    background: var(--primary-soft);
    color: var(--primary);
}

.folder-dialog__preview {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
}

.folder-dialog__crumbs {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    min-height: 28px;
}

.folder-dialog__crumb {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.folder-dialog__crumb.is-new {
    border-color: color-mix(in srgb, var(--primary), transparent 66%);
    background: var(--primary-soft);
    color: var(--primary);
}

.folder-dialog__crumb.is-empty {
    color: var(--muted);
    font-weight: 700;
}

.folder-dialog__crumb-separator {
    color: var(--muted);
    font-weight: 800;
}

.folder-dialog__tree-preview {
    display: grid;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
}

.folder-dialog__tree-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 5px 8px;
    padding-inline-start: calc(8px + (var(--depth, 0) * 18px));
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 700;
}

.folder-dialog__tree-row.is-new {
    border-color: color-mix(in srgb, var(--primary), transparent 70%);
    background: #fff;
    color: var(--primary);
}

.folder-dialog__tree-row.is-pending {
    color: var(--muted);
    font-weight: 600;
}

.folder-dialog__tree-icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 6px;
    background: #fff;
    color: currentColor;
}

.folder-dialog__tree-row span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
    flex-wrap: wrap;
}

.folder-dialog__actions .primary-btn,
.folder-dialog__actions .ghost-btn {
    min-height: 40px;
}

@media (max-width: 640px) {
    .folder-dialog {
        align-items: end;
        padding: 0;
    }

    .folder-dialog__panel {
        width: 100%;
        max-height: calc(100vh - 34px);
        border-radius: 8px 8px 0 0;
        border-inline: 0;
        border-bottom: 0;
    }

    .folder-dialog__body {
        grid-template-columns: 1fr;
    }

    .folder-dialog__actions {
        justify-content: stretch;
    }

    .folder-dialog__actions .primary-btn,
    .folder-dialog__actions .ghost-btn {
        flex: 1 1 150px;
    }
}

.media-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.page-header__chip {
    display: inline-block;
    margin-inline-start: 12px;
    padding: 4px 12px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    vertical-align: middle;
}

.media-card {
    position: relative;
}

.media-card__menu-btn {
    position: absolute;
    top: 20px;
    inset-inline-end: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(14, 26, 51, .75);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s, background-color .12s;
    z-index: 3;
}

.media-card:hover .media-card__menu-btn,
.media-card:focus-within .media-card__menu-btn {
    opacity: 1;
}

.media-card__menu-btn:hover {
    background: rgba(14, 26, 51, .95);
}

.media-card__menu {
    position: absolute;
    top: 56px;
    inset-inline-end: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    min-width: 170px;
    padding: 4px;
    z-index: 10;
}

.media-card__menu button {
    display: block;
    width: 100%;
    text-align: start;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
}

.media-card__menu button:hover {
    background: var(--surface-2);
}

.media-card__menu button.danger {
    color: var(--coral);
}

.media-card__menu button.danger:hover {
    background: rgba(217, 74, 103, .1);
}

.media-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
}

.media-card__folder {
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: 4px;
}

.message-folder-layout .media-main {
    gap: 18px;
}

.folder-target-dialog__panel {
    width: min(760px, 100%);
}

.folder-target-dialog [data-message-folder-target-name] {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.message-folder-target-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 18px;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
}

.message-advanced-targets {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
}

.message-advanced-targets > summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.message-advanced-targets > summary::-webkit-details-marker {
    display: none;
}

.message-advanced-targets > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .6;
    transition: transform .16s ease;
}

.message-advanced-targets[open] > summary::after {
    transform: rotate(225deg);
}

.message-advanced-targets > summary span {
    display: grid;
    gap: 3px;
}

.message-advanced-targets > summary strong {
    font-size: 14px;
}

.message-advanced-targets > summary small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.message-advanced-targets .message-targets-field {
    border-top: 1px solid var(--border);
    padding: 14px;
}

.message-schedule-grid {
    border-top: 1px solid var(--border);
    display: grid;
    gap: 12px;
    padding: 14px;
}

.message-schedule-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

@media (max-width: 720px) {
    .message-schedule-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .message-schedule-grid,
    .message-schedule-row,
    .message-schedule-row .field-block {
        width: 100%;
        max-width: 100%;
    }

    .message-schedule-row input[type="date"],
    .message-schedule-row input[type="time"],
    .message-schedule-row input[type="datetime-local"],
    .message-schedule-row input[type="month"] {
        font-size: 16px;
    }
}

.message-targets-grid {
    display: grid;
    gap: 12px;
}

.message-targets-box {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
    padding: 12px;
}

.message-targets-box__head,
.message-target-folder summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.message-targets-box__head {
    margin-bottom: 10px;
}

.message-targets-box__head small,
.message-target-folder summary small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.message-screen-targets {
    display: grid;
    gap: 8px;
    max-height: 320px;
    overflow: auto;
    padding-inline-end: 3px;
}

.message-target-folder {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.message-target-folder summary {
    cursor: pointer;
    padding: 10px 12px;
    font-weight: 900;
}

.message-target-folder .chip-select {
    padding: 0 10px 10px;
}

.message-row__folder,
.message-row__meta {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Cities & branches admin: inline add-form + simple-list */
.panel > form.inline-form:has(input[type="text"]) {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin: 4px 0 16px;
}

.panel > form.inline-form:has(input[type="text"]) input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font: inherit;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}

.panel > form.inline-form:has(input[type="text"]) input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 85%);
}

.panel > form.inline-form:has(input[type="text"]) .primary-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

ul.simple-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

ul.simple-list > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    transition: background-color .12s;
}

ul.simple-list > li:last-child {
    border-bottom: none;
}

ul.simple-list > li:hover {
    background: var(--surface-2);
}

ul.simple-list > li > span:first-child {
    font-weight: 600;
    color: var(--ink);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ul.simple-list > li.muted {
    color: var(--muted);
    justify-content: center;
    font-size: 13px;
    font-style: italic;
}

ul.simple-list .danger-btn {
    padding: 6px 12px;
    font-size: 12px;
    min-height: 30px;
    opacity: .5;
    transition: opacity .12s;
}

ul.simple-list > li:hover .danger-btn,
ul.simple-list .danger-btn:focus-visible {
    opacity: 1;
}

/* Editor mobile containment overrides */
@media (max-width: 900px) {
    .page-header--with-scope,
    .page-header--with-scope .page-header__title,
    .page-header--with-scope .header-actions,
    .page-header__scope,
    .page-header__scope-main,
    .page-header__scope .scope-select-wrap,
    .page-header__scope .scope-copy,
    .page-header__scope .scope-copy__control,
    .designer-root,
    .designer-root > *,
    .canvas-panel,
    .stage-frame,
    .inspector-panel {
        min-width: 0;
        max-width: 100%;
    }

    .page-header--with-scope {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .page-header--with-scope .header-actions {
        justify-content: stretch;
    }

    .page-header--with-scope .header-actions > .history-group {
        flex: 0 0 auto;
        justify-content: center;
    }

    .page-header--with-scope .header-actions > .ghost-btn,
    .page-header--with-scope .header-actions > .primary-btn {
        flex: 1 1 150px;
        min-width: 0;
        text-align: center;
        white-space: normal;
    }

    .page-header__scope {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        align-items: stretch;
        gap: 12px;
        overflow: visible;
    }

    .page-header__scope-main,
    .page-header__scope .scope-select-wrap,
    .page-header__scope .scope-copy {
        width: 100%;
    }

    .page-header__scope-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .page-header__scope .scope-select-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .page-header__scope .scope-select,
    .page-header__scope .scope-copy__select {
        min-width: 0;
        max-width: 100%;
    }

    .page-header__scope .scope-select-icon,
    .page-header__scope .scope-select-caret {
        top: 22px;
    }

    .page-header__scope .scope-select-status,
    .page-header__scope .scope-bar__reset {
        justify-self: start;
        max-width: 100%;
        white-space: normal;
    }

    .page-header__scope .scope-copy {
        align-items: stretch;
        padding-top: 10px;
        border-top: 1px dashed var(--line);
    }

    .page-header__scope .scope-copy__label {
        flex: 1 0 100%;
    }

    .scope-bar__hint {
        flex-wrap: wrap;
        min-width: 0;
    }

    .scope-bar__hint-action {
        margin-inline-start: 0;
    }

    .scope-bar__hint--overlay {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .scope-bar__hint--overlay .scope-bar__hint-action {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .designer-root {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .designer-panel,
    .canvas-panel {
        width: 100%;
    }

    .canvas-panel {
        overflow-x: hidden;
        place-items: center;
    }

    .canvas-toolbar {
        max-width: 100%;
        overflow: hidden;
    }

    .canvas-toolbar span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .stage-frame {
        width: 100%;
        min-width: 0 !important;
    }

    .designer-root[data-orientation="landscape"] .stage-frame {
        width: min(100%, calc((100dvh - 170px) * 1920 / 1080));
    }

    .designer-root[data-orientation="portrait"] .stage-frame {
        width: min(100%, 420px, calc((100dvh - 170px) * 1080 / 1920));
        min-width: 0 !important;
    }
}

@media (max-width: 640px) {
    .page-header--with-scope {
        gap: 10px;
    }

    .page-header--with-scope h1 {
        font-size: clamp(22px, 7vw, 28px);
    }

    .page-header--with-scope .eyebrow {
        font-size: 12px;
        line-height: 1.35;
    }

    .page-header--with-scope .header-actions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: stretch;
    }

    .page-header--with-scope .header-actions > .history-group {
        min-height: 44px;
    }

    .page-header--with-scope .header-actions > .save-status {
        align-self: center;
        min-width: 0;
    }

    .page-header--with-scope .header-actions > .ghost-btn,
    .page-header--with-scope .header-actions > .primary-btn,
    .scope-copy__button,
    .scope-bar__hint-action {
        grid-column: 1 / -1;
        width: 100%;
    }

    .page-header__scope .scope-copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .canvas-panel {
        padding-inline: 8px;
    }

    .designer-root[data-orientation="portrait"] .stage-frame {
        width: min(100%, 84vw);
    }
}