:root {
    --bg: #f7f4ed;
    --panel: #ffffff;
    --panel-soft: #fbfaf7;
    --text: #25221d;
    --muted: #756f64;
    --line: #e8dfd1;
    --primary: #8b5e22;
    --primary-strong: #704719;
    --success: #0f7b4f;
    --danger: #b3261e;
    --warning: #9a6700;
    --info: #265f99;
    --shadow: 0 16px 40px rgba(45, 35, 20, 0.08);
    --radius: 18px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
    font-size: 15px;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.app-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.brand {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-strong);
    white-space: nowrap;
}

.main-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.main-nav a {
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--panel-soft);
    border: 1px solid transparent;
}

.main-nav a:hover { border-color: var(--line); }

.user-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.page-shell {
    width: min(1280px, calc(100% - 28px));
    margin: 22px auto 40px;
}

.page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 8px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
.muted { color: var(--muted); }

.card, .login-card, .sub-card, .feature-card, .choice-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card { padding: 22px; }
.narrow-card { max-width: 680px; }
.login-wrap {
    min-height: calc(100vh - 120px);
    display: grid;
    place-items: center;
}
.login-card {
    width: min(440px, 100%);
    padding: 30px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 16px;
}
.feature-card, .choice-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    min-height: 130px;
}
.feature-card:hover, .choice-card:hover { border-color: var(--primary); }
.feature-title, .choice-title { font-size: 18px; font-weight: 700; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 16px;
}
.form-grid.one-col { grid-template-columns: 1fr; }
.full-row { grid-column: 1 / -1; }
label span:first-child { display: block; margin-bottom: 6px; color: var(--muted); }
input[type="text"], input[type="password"], input[type="email"], input:not([type]), select, textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
    color: var(--text);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: 3px solid rgba(139, 94, 34, 0.18);
    border-color: var(--primary);
}

.check-row, .radio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.35;
}
.check-row input, .radio-row input { width: 18px; height: 18px; }
.check-row small { display: block; color: var(--muted); }
.align-end { align-self: end; min-height: 42px; }

.split-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 16px;
    margin-top: 18px;
}
.sub-card { padding: 18px; box-shadow: none; }
.check-list { display: grid; gap: 10px; }
.point-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 16px;
}
.permission-group {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    display: grid;
    gap: 8px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.primary-button, .secondary-button, .link-button {
    border: 0;
    border-radius: 999px;
    min-height: 40px;
    padding: 9px 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.primary-button {
    background: var(--primary);
    color: #fff;
}
.primary-button:hover { background: var(--primary-strong); }
.secondary-button {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--text);
}
.secondary-button.small { min-height: 32px; padding: 6px 12px; }
.secondary-button.tiny { min-height: 26px; padding: 3px 9px; font-size: 13px; }
.media-order-actions { margin-top: 6px; gap: 4px; }
.link-button {
    background: transparent;
    color: var(--primary-strong);
    padding: 4px 0;
}

.table-card { padding: 0; overflow: hidden; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--panel-soft); color: var(--muted); font-weight: 600; }
.text-right { text-align: right; }

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid var(--line);
    margin: 2px 4px 2px 0;
}
.status-pill.ok { color: var(--success); border-color: rgba(15, 123, 79, 0.24); background: rgba(15, 123, 79, 0.06); }
.status-pill.off { color: var(--muted); background: #f4f1ea; }
.status-pill.warn { color: var(--warning); border-color: rgba(154, 103, 0, 0.24); background: rgba(154, 103, 0, 0.06); }
.status-pill.info { color: var(--info); border-color: rgba(38, 95, 153, 0.24); background: rgba(38, 95, 153, 0.06); }

.validation-summary, .field-validation { color: var(--danger); }
.validation-summary ul { margin: 0 0 12px 18px; }
.field-validation { font-size: 13px; margin-top: 4px; display: block; }

.toast {
    position: fixed;
    top: 74px;
    right: 18px;
    z-index: 20;
    max-width: min(420px, calc(100% - 36px));
    padding: 14px 16px;
    border-radius: 14px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    background: #fff;
}
.toast-success { border-color: rgba(15, 123, 79, 0.3); color: var(--success); }
.toast-error { border-color: rgba(179, 38, 30, 0.3); color: var(--danger); }
.toast.hide { display: none; }

@media (max-width: 760px) {
    .app-header { align-items: flex-start; flex-direction: column; padding: 12px 14px; }
    .main-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .user-box { width: 100%; justify-content: space-between; }
    .page-shell { width: calc(100% - 20px); margin-top: 14px; }
    .page-title-row { flex-direction: column; }
    .card { padding: 16px; }
    .login-card { padding: 22px; }
    .point-row { grid-template-columns: 1fr; }
    .toast { top: auto; bottom: 14px; right: 10px; }
}

.strong-text { font-weight: 700; }
.no-margin { margin: 0; }
.filter-card { margin-bottom: 16px; box-shadow: none; }
.compact-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); align-items: end; }
.section-title {
    margin: 22px 0 12px;
    padding-top: 4px;
    color: var(--primary-strong);
    font-weight: 700;
    border-top: 1px solid var(--line);
}
.section-title:first-of-type { margin-top: 0; border-top: 0; }
.preview-box {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--panel-soft);
    color: var(--muted);
}
.preview-box span { color: var(--text); font-weight: 700; }
.status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.status-actions form { margin: 0; }
.code-textarea {
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 13px;
    line-height: 1.45;
}
.variable-card { margin-top: 16px; }
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag-list span {
    display: inline-flex;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--muted);
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 13px;
}
.action-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.section-gap { margin-top: 24px; }
.ticket-print-shell {
    display: flex;
    justify-content: center;
    margin: 16px 0 22px;
}
.print-ticket-card {
    width: min(420px, 100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--shadow);
    text-align: center;
}
.ticket-header {
    letter-spacing: 0.08em;
    color: var(--primary-strong);
    font-size: 14px;
}
.ticket-campaign {
    margin-top: 6px;
    color: var(--muted);
}
.ticket-main-no {
    margin: 16px 0;
    font-size: clamp(34px, 8vw, 54px);
    line-height: 1;
    color: var(--primary-strong);
    font-weight: 800;
}
.ticket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 10px;
    margin: 16px 0;
    text-align: left;
}
.ticket-grid div {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    background: var(--panel-soft);
}
.ticket-grid span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 3px;
}
.ticket-qr-wrap {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: 12px;
    word-break: break-all;
}
.ticket-qr {
    width: 176px;
    height: 176px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px;
    background: #fff;
}
.reprint-card { max-width: 900px; margin: 0 auto; }
.reprint-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 18px;
}

@media print {
    body { background: #fff; }
    .app-header, .no-print, .toast { display: none !important; }
    .page-shell { width: 100%; margin: 0; }
    .ticket-print-shell { margin: 0; display: block; }
    .print-ticket-card {
        width: 88mm;
        min-height: 120mm;
        box-shadow: none;
        border: 1px solid #222;
        border-radius: 0;
        margin: 0 auto;
    }
    .ticket-main-no { font-size: 42px; }
}

@media (max-width: 760px) {
    .reprint-form { grid-template-columns: 1fr; }
}

.draw-result-text {
    display: inline-flex;
    margin: 8px auto 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--primary-strong);
    font-weight: 700;
}
.draw-prize-name {
    margin: 8px 0 12px;
    font-size: clamp(20px, 5vw, 30px);
    color: var(--primary-strong);
    font-weight: 800;
}

.fortune-name {
    margin: 8px 0 14px;
    font-size: clamp(20px, 5vw, 30px);
    color: var(--primary-strong);
    font-weight: 800;
}
.fortune-content-block {
    margin: 12px 0;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    background: var(--panel-soft);
}
.fortune-content-block h3 {
    margin-bottom: 8px;
    color: var(--primary-strong);
}
.fortune-content-block div {
    line-height: 1.55;
    color: var(--text);
}

.report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 14px;
    margin: 0 0 18px;
}
.report-kpi-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 6px;
}
.report-kpi-card span { color: var(--muted); }
.report-kpi-card strong {
    font-size: clamp(24px, 4vw, 36px);
    color: var(--primary-strong);
    line-height: 1;
}
.report-kpi-card.warn strong { color: var(--warning); }
.report-grid {
    display: grid;
    gap: 18px;
}
.report-section-heading {
    padding: 16px 18px 0;
}
.report-section-heading h2 {
    margin: 0 0 10px;
    font-size: 18px;
    color: var(--primary-strong);
}
.export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.primary-button.small {
    min-height: 32px;
    padding: 6px 12px;
}
.inline-deliver-form {
    display: grid;
    gap: 8px;
    min-width: 220px;
}
.inline-deliver-form input {
    min-height: 36px;
    padding: 8px 10px;
}

.inline-info-card {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--panel-soft);
}

.inline-info-card strong {
    color: var(--text);
    font-size: 1.02rem;
}

.toast-like {
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.toast-like.warn {
    color: var(--warning);
    border-color: rgba(154, 103, 0, 0.24);
    background: rgba(154, 103, 0, 0.06);
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Self-service operation screens */
.kiosk-title-row {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.kiosk-card {
    margin-left: auto;
    margin-right: auto;
    padding: clamp(22px, 4vw, 34px);
}
.kiosk-current-campaign {
    margin-bottom: 24px;
}
.kiosk-operation-form {
    display: grid;
    gap: 18px;
}
.kiosk-operation-form.is-submitting {
    opacity: 0.8;
    pointer-events: none;
}
.kiosk-scan-field {
    display: grid;
    gap: 8px;
}
.kiosk-scan-field span:first-child {
    font-size: 16px;
    color: var(--muted);
}
.kiosk-input {
    min-height: 64px !important;
    border-radius: 18px !important;
    padding: 14px 18px !important;
    font-size: clamp(22px, 4vw, 34px) !important;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-align: center;
}
.kiosk-input::placeholder {
    font-size: clamp(16px, 2.5vw, 22px);
    font-weight: 500;
    letter-spacing: 0;
    text-align: center;
}
.kiosk-actions {
    justify-content: center;
}
.kiosk-actions .primary-button,
.kiosk-actions .secondary-button {
    min-height: 48px;
    padding: 12px 22px;
}

@media (max-width: 760px) {
    .kiosk-card { padding: 18px; }
    .kiosk-input { min-height: 58px !important; }
}

/* Public kiosk screens: no admin header/menu, large touch targets for visitors */
.kiosk-body {
    min-height: 100vh;
    background: var(--bg);
}

.kiosk-shell {
    width: min(1180px, calc(100% - 28px));
    margin: 32px auto 48px;
}

.kiosk-select-page {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
}

.kiosk-select-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

.kiosk-select-header h1 {
    font-size: clamp(30px, 5vw, 52px);
    margin-bottom: 10px;
}

.kiosk-point-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 18px;
}

.kiosk-point-card {
    margin: 0;
}

.kiosk-point-button {
    width: 100%;
    min-height: 180px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--panel);
    box-shadow: var(--shadow);
    padding: 24px;
    color: var(--text);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    text-align: left;
}

.kiosk-point-button:hover,
.kiosk-point-button:focus {
    border-color: var(--primary);
    outline: 3px solid rgba(139, 94, 34, 0.15);
}

.kiosk-point-button strong {
    font-size: clamp(22px, 3vw, 32px);
}

.kiosk-point-type {
    color: var(--primary-strong);
    font-weight: 700;
}

.kiosk-title-row h1 {
    font-size: clamp(32px, 5vw, 52px);
}

.kiosk-card {
    max-width: 760px;
}

.kiosk-input {
    min-height: 58px !important;
    font-size: clamp(22px, 4vw, 34px) !important;
    letter-spacing: 0.04em;
}

.kiosk-actions .primary-button,
.kiosk-actions .secondary-button {
    min-height: 52px;
    padding-inline: 22px;
    font-size: 17px;
}

.kiosk-current-campaign strong {
    font-size: 18px;
}

/* Patch: manual issue form + public fortune QR sheet */
.kiosk-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 14px;
}

.kiosk-form-grid label {
    display: grid;
    gap: 8px;
}

.kiosk-form-grid input {
    min-height: 52px;
    font-size: 18px;
    border-radius: 16px;
}

.fortune-reading-shell .print-ticket-card,
.public-fortune-card {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.public-fortune-page {
    display: grid;
    gap: 22px;
}

.public-fortune-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
}

.public-fortune-header h1 {
    font-size: clamp(36px, 6vw, 72px);
    margin: 6px 0;
}

.public-fortune-header h2 {
    font-size: clamp(24px, 4vw, 42px);
    margin: 0;
}

.public-fortune-card {
    display: grid;
    gap: 22px;
    font-size: clamp(18px, 2.4vw, 24px);
    line-height: 1.75;
}

.public-fortune-card h3 {
    margin-bottom: 8px;
    font-size: clamp(22px, 3vw, 30px);
}

.fortune-readable-text {
    white-space: pre-line;
}

.fortune-qr-sheet {
    display: grid;
    gap: 16px;
}

.fortune-qr-sheet-title {
    text-align: center;
    margin: 8px 0 4px;
}

.fortune-qr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.fortune-qr-card {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: 10px;
    text-align: center;
    display: grid;
    gap: 6px;
    align-content: start;
}

.fortune-qr-card img {
    width: 98px;
    height: 98px;
    margin: 0 auto;
}

.fortune-qr-number {
    font-weight: 800;
    font-size: 18px;
}

.fortune-qr-name {
    font-size: 12px;
    line-height: 1.35;
}

.fortune-qr-print-page {
    display: grid;
    gap: 16px;
}

.fortune-qr-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 14px;
}

.fortune-qr-page-link {
    min-width: 38px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.fortune-qr-page-link.is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.fortune-qr-page-link.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

@media screen {
    .fortune-qr-print-page {
        display: none;
    }

    .fortune-qr-print-page.is-active {
        display: grid;
    }
}

@media print {
    .fortune-qr-sheet {
        gap: 0;
    }

    .fortune-qr-print-page {
        display: grid !important;
        gap: 10px;
        break-after: page;
        page-break-after: always;
    }

    .fortune-qr-print-page:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .fortune-qr-sheet-title {
        margin: 0 0 8px;
    }

    .fortune-qr-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }

    .fortune-qr-card {
        box-shadow: none;
        border-color: #222;
        padding: 8px;
    }

    .fortune-qr-card img {
        width: 88px;
        height: 88px;
    }
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
}
.login-logo {
    max-width: 160px;
    max-height: 72px;
    object-fit: contain;
    display: block;
    margin: 0 0 16px;
}
.setting-preview {
    display: grid;
    gap: 8px;
    align-content: start;
    color: var(--muted);
}
.setting-preview img {
    max-width: 220px;
    max-height: 90px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}
.setting-preview.small-preview img {
    width: 64px;
    height: 64px;
}
.setting-custom-form {
    border: 1px dashed var(--line);
    border-radius: 16px;
    padding: 16px;
    background: var(--panel-soft);
}
.setting-value-cell {
    max-width: 340px;
    word-break: break-word;
    color: var(--muted);
}

/* Patch 14 - đồng bộ logo và cỡ chữ cho UI khách */
:root {
    --font-base: 16px;
    --font-small: 0.92rem;
    --font-title: clamp(28px, 4vw, 42px);
    --font-subtitle: clamp(22px, 3vw, 30px);
    --font-readable: clamp(17px, 2vw, 20px);
}

body {
    font-size: var(--font-base);
    line-height: 1.55;
}

h1 { font-size: var(--font-title); line-height: 1.15; }
h2 { font-size: var(--font-subtitle); line-height: 1.2; }
h3 { font-size: 1.18rem; line-height: 1.3; }
.muted { font-size: var(--font-small); }

.app-header { min-height: 64px; }
.brand { font-size: 1.1rem; }
.brand-logo {
    width: auto;
    max-width: 150px;
    height: 38px;
    border-radius: 0;
}

.kiosk-header {
    width: min(1180px, calc(100% - 28px));
    margin: 20px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kiosk-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
}

.kiosk-brand-logo {
    width: auto;
    max-width: min(260px, 70vw);
    max-height: 74px;
    object-fit: contain;
    display: block;
}

.kiosk-brand-name {
    color: var(--primary-strong);
    font-weight: 800;
    font-size: clamp(22px, 3vw, 32px);
}

.kiosk-shell {
    margin-top: 20px;
}

.kiosk-title-row h1,
.kiosk-select-header h1 {
    font-size: var(--font-title);
}

.kiosk-title-row,
.kiosk-select-header,
.public-fortune-header {
    text-align: center;
}

.kiosk-title-row p,
.kiosk-select-header p {
    font-size: 1rem;
}

.kiosk-current-campaign strong {
    font-size: 1.05rem;
}

.kiosk-input {
    font-size: clamp(20px, 3vw, 28px) !important;
}

.kiosk-input::placeholder {
    font-size: clamp(16px, 2.2vw, 22px);
}

.kiosk-form-grid input {
    font-size: 1rem;
}

.public-fortune-header h1 {
    font-size: clamp(38px, 5vw, 56px);
    line-height: 1.1;
}

.public-fortune-header h2 {
    font-size: var(--font-subtitle);
    line-height: 1.2;
}

.public-fortune-card {
    font-size: var(--font-readable);
    line-height: 1.8;
}

.public-fortune-card h3 {
    font-size: clamp(22px, 2.5vw, 28px);
}

.fortune-readable-text {
    letter-spacing: 0;
}

.print-ticket-card,
.fortune-reading-shell .print-ticket-card,
.public-fortune-card {
    max-width: 860px;
}

.ticket-header { font-size: 0.95rem; }
.ticket-campaign { font-size: 0.95rem; }
.ticket-main-no { font-size: clamp(34px, 5vw, 48px); }
.draw-prize-name,
.fortune-name { font-size: clamp(22px, 3vw, 30px); }
.fortune-content-block { font-size: var(--font-readable); line-height: 1.8; }

.kiosk-result-note {
    max-width: 860px;
    margin: 0 auto;
}

@media (max-width: 760px) {
    .app-header { min-height: 58px; }
    .brand-logo { height: 34px; max-width: 128px; }
    .kiosk-header { margin-top: 14px; }
    .kiosk-brand-logo { max-height: 58px; max-width: min(220px, 76vw); }
    .kiosk-shell { width: min(100% - 20px, 100%); margin-top: 14px; }
    .kiosk-card { max-width: 100%; }
    .public-fortune-card { font-size: 1rem; line-height: 1.75; }
    .public-fortune-header h1 { font-size: 38px; }
}

@media print {
    .kiosk-header { display: none !important; }
}

/* Patch 15 - UI khách gọn sạch, logo không có khung nền riêng */
.kiosk-header,
.kiosk-brand,
.kiosk-brand-logo,
.brand-logo,
.login-logo {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.kiosk-brand-logo,
.brand-logo,
.login-logo {
    mix-blend-mode: multiply;
}

.kiosk-title-row h1,
.kiosk-select-header h1,
.page-title-row h1 {
    letter-spacing: 0;
}

.kiosk-card .muted,
.kiosk-select-header .muted,
.kiosk-title-row .muted {
    line-height: 1.4;
}

.kiosk-current-campaign {
    margin-bottom: 18px;
}

.kiosk-result-note {
    display: none !important;
}

@media print {
    .kiosk-brand-logo,
    .brand-logo,
    .login-logo {
        mix-blend-mode: normal;
    }
}

.translation-editor {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    overflow: hidden;
}

.translation-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
}

.translation-tab {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    font: inherit;
}

.translation-tab.active {
    border-color: var(--primary);
    color: var(--primary-strong);
    background: #fff7ed;
}

.translation-panel {
    display: none;
    padding: 16px;
}

.translation-panel.active {
    display: block;
}

.form-grid.no-gap {
    gap: 14px;
}

.public-language-switcher {
    display: flex;
    justify-content: flex-end;
    margin: 0 auto 16px;
    max-width: 860px;
}

.public-language-switcher label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
}

.public-language-switcher select {
    width: auto;
    min-width: 150px;
}

@media (max-width: 760px) {
    .translation-tabs {
        gap: 6px;
        padding: 10px;
    }

    .translation-tab {
        flex: 1 1 auto;
        padding: 8px 10px;
    }

    .translation-panel {
        padding: 12px;
    }

    .public-language-switcher {
        justify-content: stretch;
    }

    .public-language-switcher label,
    .public-language-switcher select {
        width: 100%;
    }
}

/* Patch V1.0.2 - public multilingual selector and responsive kiosk cleanup */
.kiosk-language-bar {
    width: min(1180px, calc(100% - 28px));
    margin: 10px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kiosk-language-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
}

.kiosk-language-select span {
    margin: 0;
    line-height: 1.2;
}

.kiosk-language-select select {
    width: auto;
    min-width: 84px;
    min-height: 40px;
    border-radius: 12px;
    padding: 8px 34px 8px 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.kiosk-body .page-title-row,
.kiosk-body .form-actions {
    flex-wrap: wrap;
}

.kiosk-card,
.public-fortune-card,
.ticket-print-shell {
    width: 100%;
}

.kiosk-operation-form,
.kiosk-form-grid,
.public-fortune-card {
    min-width: 0;
}

.kiosk-form-grid > label,
.kiosk-scan-field,
.public-fortune-card section {
    min-width: 0;
}

.kiosk-input {
    width: 100%;
    max-width: 100%;
}

.public-fortune-page {
    width: 100%;
}

.public-fortune-card {
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .kiosk-language-bar {
        width: min(100% - 20px, 100%);
        margin-top: 8px;
    }

    .kiosk-language-select {
        width: 100%;
    }

    .kiosk-language-select select {
        flex: 0 0 auto;
        min-width: 92px;
    }

    .kiosk-title-row {
        margin-bottom: 14px;
    }

    .kiosk-title-row h1,
    .kiosk-select-header h1 {
        font-size: clamp(28px, 9vw, 38px);
    }

    .kiosk-card {
        padding: 18px 14px;
        border-radius: 18px;
    }

    .kiosk-form-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    }

    .kiosk-actions {
        width: 100%;
    }

    .kiosk-actions .primary-button,
    .kiosk-actions .secondary-button {
        flex: 1 1 140px;
        justify-content: center;
        text-align: center;
    }

    .public-fortune-header h1 {
        font-size: clamp(30px, 10vw, 38px);
    }

    .public-fortune-header h2 {
        font-size: clamp(18px, 6vw, 24px);
    }

    .public-fortune-card {
        padding: 16px 14px;
        border-radius: 16px;
    }
}


/* Patch V1.0.3 - public kiosk text visibility and responsive normalization */
.kiosk-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.kiosk-header {
    width: min(1040px, calc(100% - 32px));
    margin-top: clamp(12px, 2.2vh, 22px);
}

.kiosk-brand {
    min-height: auto;
}

.kiosk-brand-logo {
    max-height: clamp(54px, 7vh, 76px);
    max-width: min(260px, 72vw);
}

.kiosk-language-bar {
    width: min(1040px, calc(100% - 32px));
    margin-top: 8px;
}

.kiosk-language-select {
    gap: 10px;
}

.kiosk-language-select select {
    min-width: 86px;
    font-weight: 700;
}

.kiosk-shell {
    flex: 1 1 auto;
    width: min(960px, calc(100% - 32px));
    margin: clamp(22px, 5vh, 58px) auto 36px;
}

.kiosk-title-row {
    max-width: 960px;
    margin-bottom: clamp(16px, 2.5vh, 24px);
}

.kiosk-title-row h1,
.kiosk-select-header h1 {
    font-size: clamp(28px, 4vw, 44px);
    margin-bottom: 0;
}

.narrow-card.kiosk-card,
.kiosk-card {
    width: 100%;
    max-width: 960px;
    padding: clamp(22px, 3vw, 34px);
    border-radius: 18px;
}

.kiosk-current-campaign {
    margin-bottom: clamp(18px, 2.5vh, 26px);
    padding: 16px 18px;
}

.kiosk-operation-form {
    gap: clamp(18px, 3vh, 28px);
}

.kiosk-scan-field {
    gap: 10px;
}

.kiosk-scan-field span:first-child,
.kiosk-form-grid label > span:first-child {
    min-height: 1.25em;
}

.kiosk-input {
    min-height: clamp(64px, 8vh, 76px) !important;
    font-size: clamp(20px, 2.8vw, 30px) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.kiosk-input::placeholder {
    font-size: clamp(15px, 1.8vw, 20px);
}

.kiosk-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: clamp(14px, 2vw, 18px);
}

.kiosk-form-grid input {
    min-height: 54px;
}

.kiosk-actions {
    justify-content: center;
    gap: 12px;
    margin-top: clamp(4px, 1.2vh, 12px);
}

.kiosk-actions .primary-button,
.kiosk-actions .secondary-button {
    min-width: 128px;
    min-height: 52px;
    padding-inline: 22px;
    font-size: 16px;
    white-space: nowrap;
}

.kiosk-select-page {
    min-height: auto;
    justify-content: flex-start;
}

.kiosk-point-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.translation-tab {
    min-width: 52px;
    text-align: center;
    font-weight: 700;
}

@media (max-width: 760px) {
    .kiosk-header,
    .kiosk-language-bar,
    .kiosk-shell {
        width: min(100% - 20px, 100%);
    }

    .kiosk-header {
        margin-top: 12px;
    }

    .kiosk-brand-logo {
        max-height: 56px;
    }

    .kiosk-language-bar {
        margin-top: 6px;
    }

    .kiosk-language-select {
        justify-content: center;
    }

    .kiosk-shell {
        margin-top: 20px;
        margin-bottom: 24px;
    }

    .kiosk-title-row {
        margin-bottom: 14px;
    }

    .kiosk-title-row h1,
    .kiosk-select-header h1 {
        font-size: clamp(26px, 8vw, 36px);
    }

    .narrow-card.kiosk-card,
    .kiosk-card {
        padding: 18px 14px;
        border-radius: 16px;
    }

    .kiosk-current-campaign {
        padding: 14px;
        margin-bottom: 16px;
    }

    .kiosk-operation-form {
        gap: 16px;
    }

    .kiosk-input {
        min-height: 58px !important;
        font-size: clamp(18px, 6vw, 24px) !important;
    }

    .kiosk-form-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
        gap: 12px;
    }

    .kiosk-actions {
        margin-top: 4px;
    }

    .kiosk-actions .primary-button,
    .kiosk-actions .secondary-button {
        flex: 1 1 128px;
        min-width: 0;
        min-height: 48px;
        padding-inline: 14px;
    }
}


/* Patch V1.0.4 - fortune public display and device-specific responsive content */
.fortune-print-toolbar {
    width: min(960px, 100%);
    margin: 0 auto 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.fortune-print-toolbar .form-actions {
    justify-content: flex-end;
}

.fortune-reading-shell {
    align-items: flex-start;
}

.fortune-reading-shell .print-ticket-card {
    width: min(760px, 100%);
    max-width: 760px;
}

.public-fortune-page {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    gap: 18px;
}

.public-fortune-header {
    width: 100%;
    max-width: 860px;
}

.fortune-reading-title {
    margin: 0 0 8px;
    color: var(--text);
    letter-spacing: 0;
}

.public-fortune-card,
.fortune-reading-shell .print-ticket-card,
.fortune-content-block {
    overflow-wrap: break-word;
    word-break: normal;
}

.public-fortune-card {
    box-shadow: var(--shadow);
}

.public-fortune-card section + section {
    margin-top: 2px;
}

.fortune-readable-text,
.fortune-content-block div {
    white-space: pre-line;
    text-align: left;
}

@media (min-width: 1025px) {
    .public-fortune-page {
        max-width: 860px;
    }

    .public-fortune-header h1 {
        font-size: clamp(34px, 3.2vw, 46px);
    }

    .public-fortune-header h2 {
        font-size: clamp(22px, 2.2vw, 30px);
    }

    .public-fortune-card {
        padding: 26px 30px;
        font-size: 18px;
        line-height: 1.85;
        border-radius: 18px;
    }

    .public-fortune-card h3 {
        font-size: 23px;
        margin-bottom: 10px;
    }

    .fortune-reading-shell .print-ticket-card {
        padding: 28px 32px;
    }

    .fortune-content-block {
        padding: 16px 18px;
    }

    .fortune-content-block div {
        font-size: 18px;
        line-height: 1.8;
    }
}

@media (min-width: 761px) and (max-width: 1024px) {
    .public-fortune-page,
    .public-fortune-header,
    .fortune-print-toolbar {
        max-width: 720px;
    }

    .public-fortune-header h1 {
        font-size: clamp(30px, 4vw, 40px);
    }

    .public-fortune-header h2 {
        font-size: clamp(20px, 3vw, 28px);
    }

    .public-fortune-card {
        padding: 22px 24px;
        font-size: 17px;
        line-height: 1.82;
        border-radius: 18px;
    }

    .public-fortune-card h3 {
        font-size: 22px;
    }

    .fortune-reading-shell .print-ticket-card {
        width: min(720px, 100%);
        padding: 24px;
    }

    .fortune-content-block div {
        font-size: 17px;
        line-height: 1.78;
    }
}

@media (max-width: 760px) {
    .fortune-print-toolbar {
        width: 100%;
        margin-bottom: 12px;
        justify-content: center;
    }

    .fortune-print-toolbar .form-actions {
        width: 100%;
        justify-content: center;
    }

    .public-fortune-page {
        max-width: none;
        gap: 14px;
    }

    .public-fortune-header {
        max-width: none;
        padding: 0 2px;
    }

    .public-fortune-header h1 {
        font-size: clamp(26px, 7.8vw, 34px);
        line-height: 1.15;
        margin-bottom: 6px;
    }

    .public-fortune-header h2 {
        font-size: clamp(18px, 5.8vw, 22px);
        line-height: 1.2;
    }

    .public-fortune-card {
        width: 100%;
        padding: 16px 14px;
        font-size: 16px;
        line-height: 1.78;
        border-radius: 16px;
        box-shadow: none;
    }

    .public-fortune-card h3 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .fortune-readable-text {
        overflow-wrap: break-word;
    }

    .fortune-reading-shell .print-ticket-card {
        width: 100%;
        max-width: none;
        padding: 16px 14px;
        border-radius: 16px;
        box-shadow: none;
    }

    .fortune-content-block {
        padding: 12px;
        border-radius: 14px;
    }

    .fortune-content-block h3 {
        font-size: 20px;
    }

    .fortune-content-block div {
        font-size: 16px;
        line-height: 1.75;
    }

    .ticket-main-no {
        font-size: clamp(30px, 9vw, 40px);
    }
}

@media (max-width: 420px) {
    .public-fortune-card {
        padding: 14px 12px;
        line-height: 1.72;
    }

    .public-fortune-card h3,
    .fortune-content-block h3 {
        font-size: 19px;
    }

    .fortune-content-block div,
    .public-fortune-card {
        font-size: 15.5px;
    }

    .fortune-print-toolbar .primary-button,
    .fortune-print-toolbar .secondary-button {
        flex: 1 1 120px;
        min-width: 0;
    }
}

/* Patch V1.0.5 - bright logo-based theme, unified typography, full-site responsive normalization */
:root {
    color-scheme: light;
    --bg: #f3fff6;
    --panel: #ffffff;
    --panel-soft: #f8fffa;
    --text: #123423;
    --muted: #627568;
    --line: #d7efdd;
    --border: var(--line);
    --primary: #20a94f;
    --primary-strong: #087638;
    --primary-soft: #e9ffef;
    --secondary: #1e6fd1;
    --secondary-soft: #eaf3ff;
    --accent: #f58220;
    --accent-soft: #fff1e2;
    --sun: #ffd42a;
    --success: #0f8a48;
    --danger: #c3312a;
    --warning: #a96b00;
    --info: #2269b7;
    --shadow: 0 18px 45px rgba(14, 92, 46, 0.09);
    --shadow-soft: 0 10px 26px rgba(14, 92, 46, 0.07);
    --radius: 18px;
    --page-max: 1280px;
    --page-gutter: clamp(10px, 2.2vw, 28px);
    --card-pad: clamp(16px, 2.2vw, 24px);
    --field-min: clamp(220px, 28vw, 340px);
    --card-min: clamp(230px, 27vw, 300px);
    --app-font: "Inter", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
    min-height: 100%;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea,
table {
    font-family: var(--app-font);
}

body {
    color: var(--text);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 212, 42, 0.28), transparent 30vw),
        radial-gradient(circle at 88% 8%, rgba(30, 111, 209, 0.14), transparent 26vw),
        linear-gradient(180deg, #f8fff9 0%, var(--bg) 46%, #ffffff 100%);
    font-size: 1rem;
    line-height: 1.58;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

h1,
h2,
h3,
.feature-title,
.choice-title,
.section-title,
.kiosk-brand-name {
    font-family: var(--app-font);
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(1.65rem, 2.6vw, 2.35rem);
    line-height: 1.16;
    font-weight: 650;
}

h2 {
    font-size: clamp(1.28rem, 2vw, 1.75rem);
    line-height: 1.2;
    font-weight: 650;
}

h3 {
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    line-height: 1.28;
    font-weight: 650;
}

.muted,
label span:first-child,
th {
    color: var(--muted);
}

.app-header {
    min-height: 68px;
    flex-wrap: wrap;
    gap: clamp(10px, 1.6vw, 18px);
    padding: clamp(10px, 1.45vw, 16px) clamp(14px, 2.4vw, 30px);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(248, 255, 250, 0.94)),
        linear-gradient(90deg, rgba(32, 169, 79, 0.12), rgba(30, 111, 209, 0.08), rgba(245, 130, 32, 0.08));
    border-bottom-color: rgba(32, 169, 79, 0.18);
    box-shadow: 0 8px 24px rgba(8, 118, 56, 0.055);
}

.brand {
    flex: 0 0 auto;
    min-width: 0;
    color: var(--primary-strong);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 650;
}

.brand-logo {
    height: clamp(34px, 4vw, 42px);
    max-width: min(190px, 42vw);
    object-fit: contain;
}

.main-nav {
    flex: 1 1 520px;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.main-nav a {
    padding: 8px 12px;
    border-color: rgba(32, 169, 79, 0.12);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text);
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
    border-color: rgba(32, 169, 79, 0.34);
    background: var(--primary-soft);
    color: var(--primary-strong);
    transform: translateY(-1px);
}

.user-box {
    flex: 0 1 auto;
    min-width: 0;
}

.page-shell,
.kiosk-shell {
    width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
}

.page-shell {
    margin-top: clamp(16px, 2.5vw, 26px);
    margin-bottom: clamp(28px, 5vw, 52px);
}

.page-title-row {
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
}

.card,
.login-card,
.sub-card,
.feature-card,
.choice-card,
.print-ticket-card,
.kiosk-point-button,
.public-fortune-card,
.report-kpi-card,
.translation-editor {
    border-color: var(--line);
    box-shadow: var(--shadow-soft);
}

.card {
    padding: var(--card-pad);
}

.card,
.login-card,
.sub-card,
.feature-card,
.choice-card,
.public-fortune-card,
.print-ticket-card,
.kiosk-point-button {
    background: linear-gradient(180deg, #ffffff 0%, #fcfffd 100%);
}

.login-wrap {
    min-height: calc(100vh - 110px);
    padding: var(--page-gutter) 0;
}

.login-card {
    width: min(460px, calc(100vw - (var(--page-gutter) * 2)));
    padding: clamp(22px, 3vw, 34px);
}

.login-logo {
    max-width: min(190px, 70vw);
    max-height: 82px;
}

.cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr));
    gap: clamp(12px, 1.8vw, 18px);
}

.feature-card,
.choice-card {
    min-height: 124px;
    padding: clamp(16px, 2vw, 22px);
    border-top: 3px solid rgba(32, 169, 79, 0.22);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.feature-card:hover,
.choice-card:hover,
.feature-card:focus-visible,
.choice-card:focus-visible {
    border-color: rgba(32, 169, 79, 0.48);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.feature-title,
.choice-title {
    color: var(--primary-strong);
    font-size: clamp(1.05rem, 1.5vw, 1.18rem);
    font-weight: 650;
}

.form-grid,
.compact-grid,
.split-panels,
.permission-grid,
.report-kpi-grid,
.ticket-grid,
.kiosk-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--field-min), 100%), 1fr));
}

.form-grid.one-col {
    grid-template-columns: 1fr;
}

.form-grid > *,
.compact-grid > *,
.split-panels > *,
.permission-grid > *,
.cards-grid > *,
.kiosk-form-grid > *,
.page-title-row > *,
.user-box > * {
    min-width: 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input:not([type]),
select,
textarea {
    min-height: 44px;
    border-color: var(--line);
    border-radius: 13px;
    background: #ffffff;
    color: var(--text);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    outline: 3px solid rgba(32, 169, 79, 0.18);
    box-shadow: 0 0 0 1px rgba(32, 169, 79, 0.08);
}

.check-row,
.radio-row {
    align-items: flex-start;
}

.form-actions {
    gap: 10px;
}

.primary-button,
.secondary-button,
.link-button,
.translation-tab {
    font-weight: 600;
}

.primary-button {
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, #35bf61 100%);
    box-shadow: 0 10px 22px rgba(32, 169, 79, 0.18);
}

.primary-button:hover,
.primary-button:focus-visible {
    background: linear-gradient(135deg, var(--primary-strong) 0%, var(--primary) 100%);
}

.secondary-button {
    background: #ffffff;
    border-color: var(--line);
}

.secondary-button:hover,
.secondary-button:focus-visible {
    border-color: rgba(30, 111, 209, 0.28);
    background: var(--secondary-soft);
    color: #174f96;
}

.link-button {
    color: var(--primary-strong);
}

.table-card {
    border-radius: var(--radius);
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

table {
    width: 100%;
    min-width: max(760px, 100%);
    font-size: 0.96rem;
}

th {
    background: linear-gradient(180deg, #f4fff6 0%, #ecfff1 100%);
    font-weight: 650;
}

th,
td {
    padding: 13px 15px;
}

.status-pill {
    font-weight: 600;
}

.status-pill.ok {
    color: var(--success);
    border-color: rgba(15, 138, 72, 0.26);
    background: rgba(32, 169, 79, 0.08);
}

.status-pill.info {
    color: var(--info);
    border-color: rgba(30, 111, 209, 0.24);
    background: var(--secondary-soft);
}

.status-pill.warn {
    color: var(--warning);
    border-color: rgba(245, 130, 32, 0.28);
    background: var(--accent-soft);
}

.section-title {
    color: var(--primary-strong);
    border-top-color: var(--line);
    font-weight: 650;
}

.preview-box,
.setting-custom-form,
.translation-tabs,
.fortune-content-block,
.ticket-grid div,
.inline-info-card {
    background: var(--panel-soft);
}

.translation-tab.active {
    color: var(--primary-strong);
    border-color: rgba(32, 169, 79, 0.46);
    background: linear-gradient(180deg, #ffffff 0%, var(--primary-soft) 100%);
}

.toast {
    top: clamp(72px, 8vw, 88px);
    border-color: rgba(32, 169, 79, 0.18);
    box-shadow: var(--shadow);
}

.toast-success {
    color: var(--success);
    border-color: rgba(32, 169, 79, 0.32);
    background: #fbfffc;
}

.toast-error {
    color: var(--danger);
    border-color: rgba(195, 49, 42, 0.28);
    background: #fffdfd;
}

.kiosk-body {
    background:
        radial-gradient(circle at 14% 0%, rgba(255, 212, 42, 0.28), transparent 34vw),
        radial-gradient(circle at 86% 10%, rgba(30, 111, 209, 0.13), transparent 32vw),
        linear-gradient(180deg, #f9fffa 0%, #f1fff5 52%, #ffffff 100%);
}

.kiosk-header,
.kiosk-language-bar,
.kiosk-shell {
    width: min(1040px, calc(100% - (var(--page-gutter) * 2)));
}

.kiosk-brand-logo {
    max-height: clamp(56px, 7vh, 78px);
    max-width: min(280px, 76vw);
}

.kiosk-language-select select {
    border-color: rgba(32, 169, 79, 0.24);
    color: var(--primary-strong);
    background-color: #ffffff;
}

.kiosk-card,
.narrow-card.kiosk-card {
    width: 100%;
    max-width: 960px;
    padding: clamp(18px, 3vw, 34px);
}

.kiosk-input {
    border-color: rgba(32, 169, 79, 0.26) !important;
    background: #ffffff !important;
    color: var(--text) !important;
    font-weight: 600;
}

.kiosk-actions .primary-button,
.kiosk-actions .secondary-button,
.kiosk-point-button {
    touch-action: manipulation;
}

.kiosk-point-button {
    min-height: clamp(138px, 18vw, 180px);
    border-color: rgba(32, 169, 79, 0.18);
}

.kiosk-point-button:hover,
.kiosk-point-button:focus-visible {
    border-color: rgba(32, 169, 79, 0.48);
    outline-color: rgba(32, 169, 79, 0.18);
}

.public-fortune-page,
.public-fortune-header,
.public-fortune-card,
.fortune-print-toolbar {
    max-width: min(860px, 100%);
}

.public-fortune-card {
    line-height: 1.82;
}

@media (max-width: 980px) {
    .app-header {
        align-items: center;
    }

    .main-nav {
        order: 3;
        flex: 1 0 100%;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 0 6px;
    }

    .user-box {
        margin-left: auto;
    }
}

@media (max-width: 760px) {
    :root {
        --page-gutter: 10px;
        --card-pad: 15px;
        --field-min: 210px;
        --card-min: 210px;
    }

    body {
        font-size: 0.98rem;
    }

    .app-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        min-height: 0;
        padding: 10px var(--page-gutter);
    }

    .brand {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .brand-logo {
        height: 36px;
        max-width: min(170px, 72vw);
    }

    .main-nav {
        order: 2;
        flex: 0 0 auto;
        width: 100%;
        gap: 6px;
        padding-bottom: 6px;
    }

    .main-nav a {
        padding: 7px 10px;
        font-size: 0.94rem;
    }

    .user-box {
        order: 3;
        width: 100%;
        margin-left: 0;
        justify-content: center;
        text-align: center;
        gap: 8px 12px;
    }

    .page-shell {
        width: calc(100% - (var(--page-gutter) * 2));
        margin-top: 14px;
    }

    .page-title-row {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 14px;
    }

    .form-actions {
        width: 100%;
    }

    .form-actions .primary-button,
    .form-actions .secondary-button,
    .form-actions button,
    .form-actions a {
        flex: 1 1 148px;
        min-width: 0;
        text-align: center;
    }

    .table-wrap {
        border-radius: 14px;
    }

    table {
        min-width: 720px;
        font-size: 0.92rem;
    }

    th,
    td {
        padding: 10px 11px;
    }

    .toast {
        top: auto;
        right: var(--page-gutter);
        bottom: 14px;
        max-width: calc(100% - (var(--page-gutter) * 2));
    }

    .kiosk-header,
    .kiosk-language-bar,
    .kiosk-shell {
        width: calc(100% - (var(--page-gutter) * 2));
    }

    .kiosk-shell {
        margin-top: 18px;
        margin-bottom: 24px;
    }

    .kiosk-card,
    .narrow-card.kiosk-card,
    .public-fortune-card,
    .fortune-reading-shell .print-ticket-card {
        border-radius: 16px;
        box-shadow: none;
    }

    .kiosk-actions .primary-button,
    .kiosk-actions .secondary-button {
        flex: 1 1 132px;
        min-width: 0;
    }
}

@media (max-width: 420px) {
    :root {
        --card-pad: 13px;
        --field-min: 190px;
        --card-min: 190px;
    }

    h1 {
        font-size: clamp(1.45rem, 7.8vw, 1.95rem);
    }

    h2 {
        font-size: clamp(1.18rem, 6vw, 1.5rem);
    }

    .primary-button,
    .secondary-button {
        min-height: 42px;
        padding-inline: 12px;
    }

    table {
        min-width: 660px;
    }
}

/* Patch V1.0.5 - operational kiosk: program title only, no vertical scroll */
.kiosk-body.kiosk-operation-page {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

@supports (height: 100dvh) {
    .kiosk-body.kiosk-operation-page {
        height: 100dvh;
        min-height: 100dvh;
    }
}

.kiosk-operation-page .kiosk-header {
    flex: 0 0 auto;
    width: min(960px, calc(100% - 32px));
    margin-top: clamp(8px, 1.3vh, 14px);
}

.kiosk-operation-page .kiosk-brand-logo {
    max-height: clamp(40px, 6vh, 58px);
    max-width: min(220px, 68vw);
}

.kiosk-operation-page .kiosk-language-bar {
    flex: 0 0 auto;
    width: min(960px, calc(100% - 32px));
    margin-top: 4px;
}

.kiosk-operation-page .kiosk-language-select {
    gap: 8px;
    font-size: clamp(14px, 1.1vw, 16px);
}

.kiosk-operation-page .kiosk-language-select select {
    min-height: 36px;
    min-width: 82px;
    padding: 6px 30px 6px 12px;
    border-radius: 12px;
}

.kiosk-operation-page .kiosk-shell {
    flex: 1 1 auto;
    width: min(960px, calc(100% - 32px));
    margin: clamp(8px, 1.8vh, 18px) auto clamp(10px, 2vh, 18px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.kiosk-program-title {
    width: 100%;
    margin: 0 auto clamp(12px, 1.8vh, 18px);
    text-align: center;
}

.kiosk-program-title h1 {
    margin: 0;
    color: var(--primary-strong);
    font-size: clamp(28px, 3.2vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.kiosk-operation-page .kiosk-title-row,
.kiosk-operation-page .kiosk-current-campaign {
    display: none !important;
}

.kiosk-operation-page .narrow-card.kiosk-card,
.kiosk-operation-page .kiosk-card {
    width: 100%;
    max-width: 960px;
    padding: clamp(18px, 2.2vw, 28px);
    border-radius: 18px;
}

.kiosk-operation-page .kiosk-operation-form {
    gap: clamp(14px, 2vh, 22px);
}

.kiosk-operation-page .kiosk-scan-field {
    gap: 8px;
}

.kiosk-operation-page .kiosk-scan-field span:first-child,
.kiosk-operation-page .kiosk-form-grid label > span:first-child {
    margin-bottom: 6px;
    min-height: auto;
    line-height: 1.2;
}

.kiosk-operation-page .kiosk-input {
    min-height: clamp(56px, 7vh, 68px) !important;
    font-size: clamp(19px, 2.4vw, 26px) !important;
}

.kiosk-operation-page .kiosk-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: clamp(12px, 1.6vw, 16px);
}

.kiosk-operation-page .kiosk-form-grid input {
    min-height: 48px;
}

.kiosk-operation-page .kiosk-actions {
    justify-content: center;
    gap: 10px;
    margin-top: 0;
}

.kiosk-operation-page .kiosk-actions .primary-button,
.kiosk-operation-page .kiosk-actions .secondary-button {
    min-height: 48px;
    min-width: 126px;
    padding: 8px 20px;
}

@media (max-width: 760px) {
    .kiosk-operation-page .kiosk-header,
    .kiosk-operation-page .kiosk-language-bar,
    .kiosk-operation-page .kiosk-shell {
        width: min(100% - 20px, 100%);
    }

    .kiosk-operation-page .kiosk-header {
        margin-top: 8px;
    }

    .kiosk-operation-page .kiosk-brand-logo {
        max-height: 44px;
        max-width: min(190px, 70vw);
    }

    .kiosk-operation-page .kiosk-language-bar {
        margin-top: 3px;
    }

    .kiosk-operation-page .kiosk-language-select {
        justify-content: center;
        gap: 6px;
    }

    .kiosk-operation-page .kiosk-language-select select {
        min-height: 34px;
        min-width: 78px;
        padding-block: 5px;
    }

    .kiosk-operation-page .kiosk-shell {
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .kiosk-program-title {
        margin-bottom: 10px;
    }

    .kiosk-program-title h1 {
        font-size: clamp(24px, 7.4vw, 34px);
        line-height: 1.05;
    }

    .kiosk-operation-page .narrow-card.kiosk-card,
    .kiosk-operation-page .kiosk-card {
        padding: 14px 12px;
        border-radius: 16px;
    }

    .kiosk-operation-page .kiosk-operation-form {
        gap: 12px;
    }

    .kiosk-operation-page .kiosk-input {
        min-height: 50px !important;
        font-size: clamp(17px, 5vw, 22px) !important;
    }

    .kiosk-operation-page .kiosk-form-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
        gap: 10px;
    }

    .kiosk-operation-page .kiosk-form-grid input {
        min-height: 44px;
    }

    .kiosk-operation-page .kiosk-actions .primary-button,
    .kiosk-operation-page .kiosk-actions .secondary-button {
        flex: 1 1 118px;
        min-width: 0;
        min-height: 44px;
        padding-inline: 12px;
    }
}

@media (max-height: 700px) {
    .kiosk-operation-page .kiosk-header {
        margin-top: 6px;
    }

    .kiosk-operation-page .kiosk-brand-logo {
        max-height: 40px;
    }

    .kiosk-operation-page .kiosk-language-select select {
        min-height: 32px;
        padding-block: 4px;
    }

    .kiosk-operation-page .kiosk-shell {
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .kiosk-program-title {
        margin-bottom: 8px;
    }

    .kiosk-program-title h1 {
        font-size: clamp(22px, 3vw, 34px);
    }

    .kiosk-operation-page .narrow-card.kiosk-card,
    .kiosk-operation-page .kiosk-card {
        padding: 12px 14px;
    }

    .kiosk-operation-page .kiosk-operation-form {
        gap: 10px;
    }

    .kiosk-operation-page .kiosk-input {
        min-height: 48px !important;
    }

    .kiosk-operation-page .kiosk-form-grid input {
        min-height: 42px;
    }

    .kiosk-operation-page .kiosk-actions .primary-button,
    .kiosk-operation-page .kiosk-actions .secondary-button {
        min-height: 42px;
    }
}

/* COM/Serial card reader for operation screens */
.kiosk-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.kiosk-field-title {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.2;
}

.kiosk-reader-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid rgba(32, 169, 79, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--primary-strong);
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.kiosk-reader-button:hover,
.kiosk-reader-button:focus-visible {
    border-color: rgba(32, 169, 79, 0.42);
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(16, 111, 47, 0.08);
    outline: none;
}

.kiosk-reader-button.is-connected {
    border-color: rgba(23, 154, 66, 0.32);
    background: rgba(230, 255, 236, 0.88);
    color: var(--success);
}

.kiosk-reader-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c3c9c0;
    box-shadow: 0 0 0 4px rgba(195, 201, 192, 0.18);
}

.kiosk-reader-button.is-connected .kiosk-reader-dot {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(32, 169, 79, 0.16);
}

.kiosk-card-code-mask {
    -webkit-text-security: disc;
}

.kiosk-scan-field.has-card .kiosk-card-code-mask {
    border-color: rgba(32, 169, 79, 0.42) !important;
    box-shadow: 0 0 0 4px rgba(32, 169, 79, 0.08) !important;
}

.kiosk-card-code-mask::-ms-reveal,
.kiosk-card-code-mask::-ms-clear {
    display: none;
}

.reader-toast {
    position: fixed;
    right: 16px;
    top: 16px;
    z-index: 9999;
    display: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.reader-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.reader-toast__card {
    min-width: min(320px, calc(100vw - 32px));
    max-width: min(420px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 15px;
    border: 1px solid rgba(32, 169, 79, 0.24);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
    color: var(--text);
    pointer-events: auto;
}

.reader-toast__close {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.reader-toast--success .reader-toast__card {
    color: var(--success);
    border-color: rgba(32, 169, 79, 0.3);
}

.reader-toast--warning .reader-toast__card {
    color: var(--warning);
    border-color: rgba(154, 103, 0, 0.28);
}

.reader-toast--error .reader-toast__card {
    color: var(--danger);
    border-color: rgba(195, 49, 42, 0.28);
}

@media (max-width: 760px) {
    .kiosk-field-head {
        align-items: flex-start;
    }

    .kiosk-reader-button {
        min-height: 32px;
        padding: 5px 10px;
        font-size: 12px;
    }

    .reader-toast {
        top: auto;
        right: 10px;
        bottom: 10px;
    }
}

.kiosk-existing-ticket {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(32, 169, 79, 0.22);
    border-radius: 16px;
    background: rgba(230, 255, 236, 0.52);
    color: var(--primary-strong);
}

.kiosk-existing-ticket__title {
    font-size: 14px;
    font-weight: 650;
    margin-bottom: 6px;
}

.kiosk-existing-ticket__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 13px;
    color: var(--text);
}

.kiosk-existing-ticket__ready {
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
}

@media (max-width: 760px) {
    .kiosk-existing-ticket {
        padding: 9px 10px;
        border-radius: 14px;
    }

    .kiosk-existing-ticket__meta {
        display: grid;
        gap: 5px;
    }
}

/* Patch V1.0.7 - draw screen/result full screen and hide scanned token */
.kiosk-token-mask {
    -webkit-text-security: disc;
}

.kiosk-token-mask::-ms-reveal,
.kiosk-token-mask::-ms-clear {
    display: none;
}

.kiosk-operation-page .validation-summary ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.kiosk-operation-page .validation-summary li {
    margin: 0;
}

.kiosk-result-page .kiosk-shell {
    justify-content: center;
}

.kiosk-result-shell {
    width: min(100%, 560px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kiosk-result-page .print-ticket-card {
    width: min(100%, 500px);
    max-width: 100%;
    padding: clamp(18px, 2.2vw, 28px);
    border-radius: 20px;
}

.kiosk-result-page .ticket-header {
    font-size: clamp(14px, 1.6vw, 17px);
    letter-spacing: .14em;
}

.kiosk-result-page .ticket-campaign {
    margin-top: 8px;
    font-size: clamp(14px, 1.5vw, 16px);
}

.kiosk-result-page .ticket-main-no {
    margin-top: 14px;
    font-size: clamp(42px, 5vw, 62px);
    line-height: 1;
}

.kiosk-result-page .draw-result-text {
    margin-top: 16px;
    font-size: clamp(22px, 2.7vw, 34px);
    line-height: 1.12;
}

.kiosk-result-page .draw-prize-name {
    margin-top: 8px;
    font-size: clamp(16px, 1.8vw, 22px);
}

.kiosk-result-page .ticket-grid {
    margin-top: 18px;
    gap: 12px;
}

.kiosk-result-page .ticket-grid div {
    min-height: 56px;
    padding: 10px 14px;
}

.kiosk-result-page .ticket-qr-wrap {
    display: none;
}

@media (max-height: 760px) {
    .kiosk-result-page .kiosk-shell {
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .kiosk-result-page .print-ticket-card {
        padding: 16px 20px;
    }

    .kiosk-result-page .ticket-main-no {
        margin-top: 10px;
        font-size: clamp(36px, 5vh, 52px);
    }

    .kiosk-result-page .draw-result-text {
        margin-top: 12px;
        font-size: clamp(20px, 3.8vh, 30px);
    }

    .kiosk-result-page .ticket-grid {
        margin-top: 14px;
        gap: 10px;
    }

    .kiosk-result-page .ticket-grid div {
        min-height: 48px;
        padding: 8px 12px;
    }
}

@media (max-width: 760px) {
    .kiosk-result-shell {
        width: 100%;
    }

    .kiosk-result-page .print-ticket-card {
        width: 100%;
        padding: 16px 14px;
    }

    .kiosk-result-page .ticket-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    .kiosk-result-page .ticket-qr-wrap {
        display: block;
    }
}


/* Patch V1.0.5 - clean public draw result screen: no outer title/actions, no campaign/status pill/fortune/QR on screen */
.kiosk-result-page .page-title-row,
.kiosk-result-page .form-actions.no-print,
.kiosk-result-page .ticket-campaign,
.kiosk-result-page .draw-result-text,
.kiosk-result-page .draw-result-fortune-row,
.kiosk-result-page .ticket-qr-wrap,
.kiosk-result-page .ticket-qr,
.kiosk-result-page .ticket-qr-wrap img {
    display: none !important;
}

.kiosk-result-page .kiosk-shell {
    width: min(760px, calc(100% - (var(--page-gutter) * 2)));
    margin-top: clamp(22px, 5vh, 58px);
}

.kiosk-result-page .draw-public-result-card {
    width: min(100%, 560px);
    max-width: 560px;
}

.kiosk-result-page .draw-public-result-card .ticket-main-no {
    margin: clamp(22px, 3vh, 30px) 0 clamp(18px, 2.6vh, 26px);
}

.kiosk-result-page .draw-public-result-card .draw-prize-name {
    margin: 0 0 clamp(20px, 3vh, 30px);
    font-size: clamp(26px, 4vw, 40px);
}

.kiosk-result-page .draw-public-result-card .ticket-grid {
    margin-bottom: 0;
}

@media print {
    .kiosk-result-page .ticket-qr-wrap,
    .kiosk-result-page .ticket-qr,
    .kiosk-result-page .ticket-qr-wrap img {
        display: none !important;
    }
}

/* Patch - admin date/time input uses text field to force 24h HH:mm, no browser AM/PM/seconds picker */
.datetime24-input {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

[data-prize-section][hidden] {
    display: none !important;
}

/* Patch - grouped admin menu + visual date-time picker without AM/PM/seconds */
.app-header {
    align-items: center;
    gap: 14px;
}

.main-nav {
    align-items: center;
    gap: 10px;
    overflow: visible;
}

.nav-group {
    position: relative;
}

.nav-group > summary {
    list-style: none;
    min-height: 40px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--line);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 650;
    white-space: nowrap;
}

.nav-group > summary::-webkit-details-marker {
    display: none;
}

.nav-group > summary::after {
    content: "⌄";
    font-size: 13px;
    opacity: .72;
    transform: translateY(-1px);
}

.nav-group[open] > summary {
    border-color: rgba(18, 141, 78, .28);
    box-shadow: 0 12px 28px rgba(12, 86, 48, .09);
}

.nav-group[open] > summary::after {
    content: "⌃";
}

.nav-group-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    width: max-content;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 28px));
    padding: 8px;
    display: grid;
    gap: 4px;
    background: rgba(255,255,255,.98);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(18, 64, 42, .14);
}

.main-nav .nav-group-menu a {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 12px;
    background: transparent;
    border: 0;
    color: var(--text);
}

.main-nav .nav-group-menu a:hover,
.main-nav .nav-group-menu a:focus-visible {
    background: rgba(18, 141, 78, .08);
    color: var(--primary-strong);
    outline: none;
}

.datetime24-input[hidden] {
    display: none !important;
}

.datetime24-picker {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 74px auto 74px auto;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.datetime24-picker input,
.datetime24-picker select {
    min-height: 42px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.datetime24-picker__sep {
    color: var(--muted);
    font-weight: 700;
    text-align: center;
}

.datetime24-picker__clear {
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    cursor: pointer;
}

.datetime24-picker__clear:hover {
    color: var(--danger);
    border-color: rgba(179, 38, 30, .26);
}

@media (max-width: 900px) {
    .app-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .main-nav {
        width: 100%;
        overflow: visible;
        flex-wrap: wrap;
    }

    .nav-group-menu {
        left: 0;
        right: auto;
    }
}

@media (max-width: 640px) {
    .datetime24-picker {
        grid-template-columns: 1fr 72px auto 72px;
    }

    .datetime24-picker__clear {
        grid-column: 1 / -1;
    }
}

/* Patch V1.0.3.1 - responsive form controls + voucher cleanup */
.page-shell {
    width: min(var(--page-max, 1280px), calc(100% - (var(--page-gutter, 24px) * 2)));
}

.card,
.filter-card,
.table-card {
    max-width: 100%;
}

.form-grid,
.compact-grid,
.split-panels,
.permission-grid,
.report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--field-min, 280px)), 1fr));
    align-items: start;
}

.form-grid > label,
.compact-grid > label,
.form-grid > .form-actions,
.compact-grid > .form-actions {
    min-width: 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input:not([type]),
select,
textarea {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
}

input[type="date"] {
    min-width: 0;
    line-height: 1.2;
}

textarea {
    min-width: 0;
}

.form-actions {
    flex-wrap: wrap;
}

.form-actions .primary-button,
.form-actions .secondary-button,
.form-actions button,
.form-actions a {
    max-width: 100%;
}

label[hidden],
[data-voucher-product-section][hidden],
[data-voucher-value-section][hidden],
[data-prize-section][hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    :root {
        --field-min: 240px;
    }

    .page-title-row {
        align-items: stretch;
    }

    .page-title-row .form-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    :root {
        --page-gutter: 10px;
        --card-pad: 14px;
        --field-min: 100%;
    }

    .page-shell {
        margin-block: 14px 28px;
    }

    .card {
        padding: var(--card-pad, 14px);
        border-radius: 16px;
    }

    .form-grid,
    .compact-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .form-actions .primary-button,
    .form-actions .secondary-button,
    .form-actions button,
    .form-actions a {
        flex: 1 1 150px;
    }
}

/* Print template drag/drop designer */
.print-designer {
    margin-top: 18px;
    display: grid;
    gap: 14px;
}

.print-designer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.print-designer__head h2 {
    margin-bottom: 4px;
}

.print-designer__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.print-designer__layout {
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(320px, 1fr) minmax(210px, 260px);
    gap: 14px;
    align-items: stretch;
}

.print-designer__panel,
.print-designer__workspace,
.print-designer__html {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
}

.print-designer__panel {
    padding: 14px;
    align-self: stretch;
}

.print-designer__panel h3 {
    margin-bottom: 10px;
}

.print-designer__palette,
.print-designer__variables {
    display: grid;
    gap: 8px;
}

.print-designer__palette button,
.print-designer__variables button {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    cursor: grab;
    text-align: left;
    padding: 8px 10px;
}

.print-designer__variables button {
    cursor: pointer;
    font-size: 13px;
}

.print-designer__palette button:hover,
.print-designer__variables button:hover {
    border-color: var(--primary);
    color: var(--primary-strong);
}

.print-designer__workspace {
    min-height: 520px;
    padding: 18px;
    overflow: auto;
    background: linear-gradient(135deg, rgba(15, 123, 79, 0.06), rgba(255, 255, 255, 0.88));
}

.print-designer__paper {
    width: min(420px, 100%);
    min-height: 560px;
    margin: 0 auto;
    padding: 22px;
    background: #fff;
    border: 1px dashed rgba(15, 123, 79, 0.32);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(15, 70, 46, 0.08);
}

.print-designer__paper:empty::before {
    content: "Kéo khối vào đây";
    display: grid;
    place-items: center;
    min-height: 180px;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: 14px;
}

.print-designer-block {
    position: relative;
    min-height: 28px;
    outline: 1px solid transparent;
    border-radius: 10px;
    cursor: move;
    padding-right: 34px;
}

.print-designer-block:hover,
.print-designer-block.is-selected {
    outline-color: rgba(15, 123, 79, 0.42);
    box-shadow: 0 0 0 4px rgba(15, 123, 79, 0.08);
}

.print-designer-block.is-selected::after {
    content: "Đang chọn";
    position: absolute;
    top: -10px;
    right: 42px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #0f7b4f;
    color: #fff;
    font-size: 10px;
    line-height: 1.2;
    pointer-events: none;
}

.print-designer-block__remove {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    border: 1px solid rgba(168, 39, 39, 0.18);
    border-radius: 999px;
    background: #fff;
    color: #a82727;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, border-color .16s ease;
}

.print-designer-block:hover > .print-designer-block__remove,
.print-designer-block.is-selected > .print-designer-block__remove {
    opacity: 1;
    pointer-events: auto;
}

.print-designer-block__remove:hover {
    border-color: rgba(168, 39, 39, 0.42);
    transform: translateY(-50%) scale(1.04);
}

.print-designer__html {
    padding: 12px 14px 14px;
}

.print-designer__html summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--primary-strong);
}

.print-designer__html label {
    display: block;
    margin-top: 12px;
}

.code-textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    line-height: 1.55;
}

@media (max-width: 1120px) {
    .print-designer__layout {
        grid-template-columns: minmax(180px, 230px) minmax(320px, 1fr);
    }

    .print-designer__layout .print-designer__panel:last-child {
        grid-column: 1 / -1;
    }

    .print-designer__variables {
        grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    }
}

@media (max-width: 760px) {
    .print-designer__layout {
        grid-template-columns: 1fr;
    }

    .print-designer__workspace {
        min-height: 420px;
        padding: 12px;
    }

    .print-designer__paper {
        min-height: 420px;
        padding: 16px;
    }

    .print-designer__palette,
    .print-designer__variables {
        grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    }
}

/* Flexible print template designer controls */
.print-designer__section-title {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}

.print-designer__inspector {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.print-designer__controls {
    display: grid;
    gap: 10px;
}

.print-designer__controls label {
    display: grid;
    gap: 5px;
}

.print-designer__controls label span {
    font-size: 12px;
    color: var(--muted);
}

.print-designer__controls select,
.print-designer__controls input,
.print-designer__controls textarea {
    min-height: 38px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 8px 10px;
}


.print-designer__controls textarea {
    resize: vertical;
    min-height: 86px;
    font-family: inherit;
    line-height: 1.45;
}

.print-designer__content-label {
    padding: 10px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .7);
}
.print-designer__control-actions {
    display: grid;
    gap: 8px;
}

.print-designer__control-actions .secondary-button {
    width: 100%;
    justify-content: center;
    white-space: normal;
}

.print-designer__paper {
    font-size: 14px;
    line-height: 1.45;
}

.print-designer-block {
    max-width: 100%;
    vertical-align: top;
    margin-right: 4px;
    margin-left: 0;
}

.print-designer-block__resize {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 14px;
    height: 14px;
    border-right: 2px solid rgba(15, 123, 79, .45);
    border-bottom: 2px solid rgba(15, 123, 79, .45);
    border-radius: 0 0 8px 0;
    cursor: ew-resize;
    opacity: 0;
    pointer-events: none;
    touch-action: none;
}

.print-designer-block:hover > .print-designer-block__resize,
.print-designer-block.is-selected > .print-designer-block__resize {
    opacity: 1;
    pointer-events: auto;
}

.print-designer-block.is-selected {
    resize: none;
}

.small-text {
    font-size: 13px;
}

@media (max-width: 760px) {
    .print-designer__controls {
        grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    }

    .print-designer__control-actions {
        grid-column: 1 / -1;
    }
}

/* Digital Signage */
.signage-player-body {
    margin: 0;
    min-height: 100vh;
    background: #000;
    color: #fff;
    overflow: hidden;
}
.signage-player-root,
.signage-player-stage {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
}
.signage-player-stage {
    display: grid;
    place-items: center;
}
.signage-media,
.signage-media-image,
.signage-media-video,
.signage-media-frame {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    background: #000;
}
.signage-media-text,
.signage-empty-state {
    width: min(1100px, calc(100vw - 80px));
    min-height: 240px;
    display: grid;
    place-items: center;
    text-align: center;
    white-space: pre-line;
    line-height: 1.35;
    font-size: clamp(30px, 6vw, 76px);
    padding: 48px;
}
.signage-empty-state {
    font-size: 22px;
    color: rgba(255,255,255,.82);
}
.signage-empty-state h1 {
    color: #fff;
    font-size: clamp(34px, 6vw, 72px);
}
.signage-player-status {
    display: none !important;
}
.signage-player-body,
.signage-player-body:fullscreen,
.signage-player-body:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
}
.signage-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    background: #000;
    color: #fff;
}
.signage-overlay.show {
    display: block;
}
.signage-overlay-stage {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.signage-overlay-media {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    background: #000;
}
.signage-overlay-text {
    width: min(1100px, calc(100vw - 80px));
    height: auto;
    min-height: 240px;
    display: grid;
    place-items: center;
    text-align: center;
    white-space: pre-line;
    line-height: 1.35;
    font-size: clamp(30px, 6vw, 76px);
    padding: 48px;
}
.signage-overlay-close {
    position: fixed;
    right: 18px;
    top: 18px;
    z-index: 10000;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    color: #fff;
    cursor: pointer;
    font-size: 32px;
    line-height: 1;
}

.signage-fullscreen-button {
    position: fixed;
    right: 18px;
    top: 18px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    padding: 12px 18px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 16px 40px rgba(0,0,0,.32);
}

.signage-fullscreen-button[hidden] {
    display: none !important;
}
@media print {
    .signage-overlay { display: none !important; }
}

.inline-form {
    display: inline-flex;
    margin: 0 4px 0 0;
}
.signage-device-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(720px, calc(100vw - 80px));
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 28px;
    padding: 22px 34px;
    color: #fff;
    background: rgba(255,255,255,.08);
    letter-spacing: .08em;
    font-size: clamp(40px, 8vw, 98px);
    font-weight: 800;
}
.signage-pairing-state p {
    max-width: 980px;
}

.command-bar {
    margin-top: 12px;
    gap: 8px;
    flex-wrap: wrap;
}

.table-actions {
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.signage-command-message {
    width: min(1200px, 92vw);
    min-height: 40vh;
    padding: 48px;
    border-radius: 32px;
    background: rgba(0, 0, 0, .72);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 24px 90px rgba(0, 0, 0, .42);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
}

.signage-command-badge {
    padding: 8px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: clamp(18px, 2vw, 28px);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.signage-command-text {
    white-space: pre-wrap;
    font-weight: 700;
    font-size: clamp(42px, 7vw, 96px);
    line-height: 1.15;
}

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--panel-soft);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    flex-wrap: wrap;
}

.pager .is-current {
    border-color: var(--primary);
    color: var(--primary-strong);
    font-weight: 700;
}

.disabled-link {
    pointer-events: none;
    opacity: .45;
}

/* Digital Signage Step 7 - bố cục nhiều vùng */
.signage-layout {
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
}

.signage-layout-region {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #000;
    display: grid;
    place-items: center;
}

.signage-layout-media {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    background: #000;
}

.signage-layout-media.signage-media-text-node,
.signage-media-text-node {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    white-space: pre-line;
    line-height: 1.25;
    font-size: clamp(26px, 5vw, 68px);
    padding: 36px;
    color: #fff;
}

.signage-layout-empty {
    width: 100%;
    height: 100%;
    background: #000;
}

.signage-layout-split-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 28vw);
    gap: 0;
}

.signage-layout-split-right .region-side {
    border-left: 1px solid rgba(255,255,255,.14);
}

.signage-layout-ticker-bottom {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(86px, 16vh);
}

.signage-layout-ticker-bottom .region-ticker {
    border-top: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.94);
}

.signage-layout-ticker-bottom .region-ticker .signage-layout-media,
.signage-layout-ticker-bottom .region-ticker .signage-media-text-node {
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.15;
    padding: 16px 40px;
}

.signage-layout-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.signage-layout-grid-2x2 .signage-layout-region {
    border: 1px solid rgba(255,255,255,.08);
}

/* Digital Signage Step 8 - widget QR, đồng hồ và chữ chạy */
.signage-qr-card,
.signage-clock-card {
    width: min(900px, 92vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 28px);
    padding: clamp(24px, 4vw, 58px);
    color: #fff;
    text-align: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: clamp(22px, 4vw, 46px);
    box-shadow: 0 24px 90px rgba(0,0,0,.45);
}

.signage-qr-card img {
    width: min(54vh, 520px, 72vw);
    height: min(54vh, 520px, 72vw);
    padding: clamp(14px, 2vw, 26px);
    border-radius: clamp(18px, 3vw, 34px);
    background: #fff;
    object-fit: contain;
}

.signage-qr-title {
    font-size: clamp(28px, 4vw, 62px);
    line-height: 1.08;
    font-weight: 800;
}

.signage-qr-caption {
    max-width: 100%;
    color: rgba(255,255,255,.78);
    font-size: clamp(18px, 2vw, 30px);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.signage-clock-card {
    width: min(1100px, 94vw);
    gap: clamp(18px, 3vw, 34px);
}

.signage-clock-title {
    color: rgba(255,255,255,.76);
    font-size: clamp(22px, 3vw, 44px);
    line-height: 1.2;
}

.signage-clock-time {
    font-variant-numeric: tabular-nums;
    font-size: clamp(72px, 16vw, 220px);
    line-height: .92;
    letter-spacing: .03em;
    font-weight: 800;
}

.signage-clock-date {
    color: rgba(255,255,255,.82);
    font-size: clamp(26px, 4vw, 58px);
    line-height: 1.15;
    text-transform: capitalize;
}

.signage-layout-region .signage-qr-card,
.signage-layout-region .signage-clock-card {
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    max-height: none;
    border-radius: clamp(16px, 2vw, 28px);
    padding: clamp(16px, 2vw, 32px);
}

.signage-layout-region .signage-qr-card img {
    width: min(60%, 44vh, 360px);
    height: auto;
    aspect-ratio: 1;
}

.signage-layout-region .signage-clock-time {
    font-size: clamp(44px, 8vw, 132px);
}

.signage-layout-ticker-bottom .region-ticker {
    overflow: hidden;
}

.signage-ticker-text {
    display: inline-flex !important;
    width: max-content !important;
    min-width: 100%;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap !important;
    animation: signageTicker 22s linear infinite;
    will-change: transform;
}

@keyframes signageTicker {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

/* Digital Signage Step 11 - media library & bulk upload */
.signage-media-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 360px;
}
.signage-media-file-row img,
.signage-video-thumb {
    width: 72px;
    height: 48px;
    flex: 0 0 72px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #f8f4ed;
    object-fit: cover;
}
.signage-video-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}
.secondary-button.danger {
    color: var(--danger);
    border-color: rgba(179, 38, 30, .24);
    background: rgba(179, 38, 30, .04);
}
.secondary-button.danger:hover,
.secondary-button.danger:focus-visible {
    border-color: rgba(179, 38, 30, .45);
    background: rgba(179, 38, 30, .08);
}

.signage-file-source {
    border: 1px solid rgba(24, 157, 76, .18);
    border-radius: 18px;
    padding: 16px;
    background: rgba(24, 157, 76, .035);
}

.compact-note {
    margin: 8px 0 0;
}

.signage-current-file {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    font-size: .92rem;
}

.signage-current-file span {
    color: var(--text-muted);
}

/* Digital Signage Step 14 - visual media picker */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.signage-picker-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 78px;
    padding: 12px 14px;
    border: 1px dashed rgba(24, 157, 76, .28);
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
}

.signage-picker-summary span {
    color: var(--text-muted);
    font-size: .88rem;
}

.signage-picker-summary strong {
    font-size: .95rem;
    word-break: break-word;
}

.signage-file-picker {
    margin-top: 14px;
    border: 1px solid rgba(24, 157, 76, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
    padding: 14px;
}

.signage-file-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.signage-file-picker-tools {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.signage-file-picker-tools input {
    min-width: 220px;
}

.signage-file-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 12px;
    max-height: 420px;
    overflow: auto;
    padding: 2px 2px 4px;
}

.signage-file-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 178px;
    padding: 10px;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.signage-file-card:hover,
.signage-file-card:focus-visible {
    border-color: rgba(24, 157, 76, .45);
    box-shadow: 0 10px 24px rgba(18, 95, 48, .12);
    transform: translateY(-1px);
    outline: none;
}

.signage-file-card.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(24, 157, 76, .16);
}

.signage-file-card[hidden] {
    display: none !important;
}

.signage-file-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #f8f4ed;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.signage-file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.signage-file-name {
    font-weight: 800;
    font-size: .9rem;
    line-height: 1.25;
    word-break: break-word;
}

.signage-file-meta {
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.35;
}

.signage-file-empty {
    grid-column: 1 / -1;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .65);
}

@media (max-width: 720px) {
    .signage-file-picker-head {
        flex-direction: column;
    }

    .signage-file-picker-tools,
    .signage-file-picker-tools input {
        width: 100%;
    }
}

.signage-file-card.bulk-card {
    position: relative;
}

.signage-file-card.bulk-card input[type="checkbox"] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
    z-index: 2;
}

/* Digital Signage Step 16 - layout designer kéo thả, vùng hiển thị kéo thả */
.signage-layout-custom {
    position: relative;
    display: block;
}

.signage-layout-custom-region {
    position: absolute;
    border: 0;
}

.signage-layout-custom-region::before {
    display: none;
    content: attr(data-region-name);
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 2;
    max-width: calc(100% - 20px);
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    color: rgba(255,255,255,.72);
    font-size: clamp(10px, 1.2vw, 15px);
    line-height: 1;
    pointer-events: none;
}

.signage-region-drop-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,.72);
}

.signage-region-drop-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: .92rem;
}

.signage-region-zones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.signage-region-zone {
    min-height: 76px;
    display: grid;
    place-items: center;
    padding: 12px;
    border: 1px dashed rgba(24, 157, 76, .35);
    border-radius: 16px;
    background: rgba(240, 255, 245, .75);
    color: var(--primary-strong);
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.signage-region-zone:hover,
.signage-region-zone.is-drop-target {
    border-color: var(--primary);
    background: rgba(218, 255, 230, .95);
    box-shadow: 0 12px 30px rgba(18, 95, 48, .12);
    transform: translateY(-1px);
}

.signage-region-zone.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 14px 30px rgba(18, 95, 48, .22);
}

.signage-region-selected,
.signage-video-duration-note {
    color: var(--text-muted);
    font-size: .88rem;
}

.signage-layout-designer {
    display: grid;
    gap: 16px;
}

.signage-layout-toolbar,
.signage-layout-props {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,.74);
}

.signage-layout-toolbar label,
.signage-layout-props label {
    display: grid;
    gap: 6px;
    min-width: 130px;
    color: var(--text-muted);
    font-size: .9rem;
}

.signage-layout-toolbar input,
.signage-layout-props input {
    width: 100%;
}

.signage-layout-canvas-wrap {
    width: 100%;
    overflow: auto;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: repeating-linear-gradient(45deg, rgba(24,157,76,.04), rgba(24,157,76,.04) 12px, rgba(255,255,255,.72) 12px, rgba(255,255,255,.72) 24px);
}

.signage-layout-canvas {
    position: relative;
    width: min(100%, 1040px);
    aspect-ratio: 16 / 9;
    min-width: 640px;
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid rgba(24, 157, 76, .32);
    border-radius: 18px;
    background: #101510;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 50px rgba(18, 95, 48, .12);
}

.signage-layout-design-region {
    position: absolute;
    min-width: 8%;
    min-height: 8%;
    display: grid;
    place-items: center;
    padding: 10px;
    border: 2px solid rgba(255,255,255,.88);
    border-radius: 14px;
    background: rgba(24, 157, 76, .30);
    color: #fff;
    text-align: center;
    font-weight: 800;
    cursor: move;
    user-select: none;
    box-shadow: 0 12px 34px rgba(0,0,0,.26);
}

.signage-layout-design-region.active {
    border-color: #fff;
    background: rgba(24, 157, 76, .55);
    box-shadow: 0 0 0 4px rgba(24,157,76,.22), 0 12px 34px rgba(0,0,0,.26);
}

.signage-layout-design-region .resize-handle {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--primary);
    cursor: nwse-resize;
}

@media (max-width: 780px) {
    .signage-layout-canvas {
        min-width: 520px;
    }

    .signage-layout-toolbar,
    .signage-layout-props {
        align-items: stretch;
    }

    .signage-layout-toolbar label,
    .signage-layout-props label,
    .signage-layout-toolbar .btn,
    .signage-layout-props .btn {
        width: 100%;
    }
}

.signage-layout-designer-toolbar,
.signage-layout-designer-body {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.signage-layout-designer-toolbar {
    align-items: center;
}

.signage-layout-designer-body {
    align-items: stretch;
}

.signage-layout-designer-body .signage-layout-canvas-wrap {
    flex: 1 1 640px;
}

.signage-layout-designer-body .signage-layout-props {
    flex: 0 1 360px;
    align-content: flex-start;
}

.signage-layout-design-region i.resize-handle,
.signage-layout-design-region .resize-handle {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--primary);
    cursor: nwse-resize;
}

/* Digital Signage Step 17 - chuẩn hóa flow thiết kế layout và gán media */
.signage-flow-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 16px 0 22px;
}

.signage-flow-step {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, .82);
    padding: 16px;
    box-shadow: var(--shadow-soft);
}

.signage-flow-step strong {
    display: block;
    color: var(--primary-dark);
    margin-bottom: 6px;
}

.signage-layout-assignment {
    border: 1px dashed var(--border-strong);
    border-radius: 18px;
    padding: 16px;
    background: rgba(244, 253, 246, .72);
}

.signage-layout-map {
    position: relative;
    width: 100%;
    min-height: 360px;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: repeating-linear-gradient(45deg, rgba(22, 163, 74, .04), rgba(22, 163, 74, .04) 12px, rgba(255, 255, 255, .72) 12px, rgba(255, 255, 255, .72) 24px);
    overflow: hidden;
    margin-top: 14px;
}

.signage-layout-map-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

.signage-layout-map-region {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px solid rgba(22, 163, 74, .45);
    background: rgba(21, 128, 61, .84);
    color: #fff;
    border-radius: 14px;
    cursor: pointer;
    min-width: 52px;
    min-height: 42px;
    padding: 8px;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.signage-layout-map-region span {
    font-weight: 700;
}

.signage-layout-map-region small {
    font-weight: 800;
    letter-spacing: .08em;
    opacity: .9;
}

.signage-layout-map-region:hover,
.signage-layout-map-region.active,
.signage-layout-map-region.is-drop {
    background: #16a34a;
    box-shadow: 0 12px 34px rgba(22, 163, 74, .22);
    transform: translateY(-1px);
}

.signage-video-duration-auto input[data-signage-duration-input="true"] {
    background: rgba(22, 163, 74, .08);
}

.signage-layout-designer-toolbar {
    align-items: center;
}

.signage-layout-designer-toolbar .secondary-button.small {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .signage-layout-map {
        min-height: 240px;
    }
}

/* Digital Signage Step 19 - chuẩn hóa luồng gán nội dung theo vùng và responsive form */
.signage-content-flow-card {
    margin-bottom: 18px;
}

.signage-content-flow-card h2 {
    margin: 0 0 6px;
}

.form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 14px;
}

.form-grid.no-gap {
    gap: 12px;
}

.split-panels {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.signage-layout-designer-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    align-items: start;
}

.signage-layout-designer-body .signage-layout-canvas-wrap,
.signage-layout-designer-body .signage-layout-props {
    min-width: 0;
    width: 100%;
}

.signage-layout-designer-body .signage-layout-props {
    display: grid;
    gap: 12px;
}

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

.signage-layout-props input,
.signage-layout-props textarea,
.signage-layout-props select {
    min-width: 0;
}

.signage-layout-canvas-wrap {
    min-width: 0;
    overflow: auto;
}

.signage-layout-canvas {
    max-width: 100%;
}

.signage-file-picker-head {
    align-items: flex-start;
}

.signage-file-picker-head .form-actions {
    justify-content: flex-end;
}

.signage-layout-assignment .signage-file-picker-head {
    gap: 12px;
}

.signage-layout-map {
    min-height: clamp(220px, 36vw, 420px);
}

.signage-file-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}

@media (max-width: 980px) {
    .page-title-row,
    .signage-file-picker-head {
        flex-direction: column;
        align-items: stretch;
    }

    .page-title-row .form-actions,
    .signage-file-picker-head .form-actions {
        justify-content: flex-start;
    }

    .signage-layout-designer-body {
        grid-template-columns: 1fr;
    }

    .signage-layout-designer-body .signage-layout-props {
        order: -1;
    }

    .signage-layout-canvas {
        min-width: 560px;
    }
}

@media (max-width: 640px) {
    .page-shell {
        width: min(100% - 18px, var(--page-max, 1280px));
    }

    .card {
        padding: 14px;
        border-radius: 16px;
    }

    .form-grid,
    .compact-grid,
    .split-panels {
        grid-template-columns: 1fr;
    }

    .signage-layout-props .compact-grid {
        grid-template-columns: 1fr 1fr;
    }

    .signage-layout-canvas-wrap,
    .signage-region-drop-panel,
    .signage-layout-assignment,
    .signage-file-picker {
        padding: 12px;
    }

    .signage-layout-map {
        min-height: 210px;
    }

    .form-actions .primary-button,
    .form-actions .secondary-button {
        width: 100%;
    }
}

.info-callout {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(22, 163, 74, .28);
    border-radius: 14px;
    background: rgba(22, 163, 74, .06);
    color: var(--text);
}

.info-callout strong {
    color: var(--primary-strong);
}

/* Digital Signage Step 20 - chuẩn hóa luồng Campaign -> Player -> Layout -> Content */
.signage-flow-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}
.signage-flow-step {
    border: 1px solid var(--border-color, #d7eadc);
    border-radius: 18px;
    padding: 14px;
    background: rgba(255, 255, 255, .72);
    display: grid;
    gap: 4px;
}
.signage-flow-step b {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #eef7ef;
    color: #0b7134;
}
.signage-flow-step.active b { background: #1faa4b; color: #fff; }
.signage-flow-step span { font-weight: 700; color: #05351b; }
.signage-flow-step small { color: #667a70; }
.signage-flow-workspace {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr);
    gap: 18px;
    align-items: start;
}
.signage-responsive-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.signage-player-list,
.signage-layout-chip-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}
.signage-player-card,
.signage-layout-chip {
    border: 1px solid var(--border-color, #d7eadc);
    border-radius: 18px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    background: #fff;
}
.signage-player-card.active,
.signage-layout-chip.active {
    border-color: #1faa4b;
    box-shadow: 0 0 0 3px rgba(31, 170, 75, .12);
}
.signage-player-card a,
.signage-layout-chip a {
    display: grid;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    flex: 1;
}
.signage-player-card span,
.signage-layout-chip small { color: #667a70; }
.signage-assignment-card .form-grid,
.signage-content-flow-card .form-grid { align-items: end; }
.full-span { grid-column: 1 / -1; }
@media (max-width: 900px) {
    .signage-flow-workspace { grid-template-columns: 1fr; }
    .signage-player-card,
    .signage-layout-chip { align-items: stretch; flex-direction: column; }
}

/* Digital Signage step22 simplified flow */
.signage-layout-map-compact {
    max-height: 320px;
    min-height: 220px;
}
.signage-layout-content-form {
    margin-bottom: 1.5rem;
}
.signage-region-media-table td {
    vertical-align: top;
}
.signage-simple-flow .signage-flow-step small {
    white-space: normal;
}
.signage-simple-assignment-list {
    align-items: start;
}
.advanced-fields {
    border: 1px dashed rgba(22, 163, 74, .25);
    border-radius: 16px;
    padding: .75rem 1rem;
    background: rgba(240, 253, 244, .35);
}
.advanced-fields > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--brand-green, #127a36);
}
.advanced-fields[open] > summary {
    margin-bottom: .75rem;
}
@media (max-width: 900px) {
    .signage-layout-map-compact {
        max-height: 240px;
        min-height: 180px;
    }
    .signage-simple-assignment-list,
    .signage-flow-workspace {
        display: block;
    }
    .signage-simple-assignment-list > .card,
    .signage-flow-workspace > .card {
        margin-bottom: 1rem;
    }
}

/* Digital Signage Step 23 - layout kín, gán nội dung theo vùng */
.visually-hidden-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.signage-region-selected-summary,
.signage-content-pick-panel {
    border: 1px solid rgba(22, 163, 74, .18);
    border-radius: 16px;
    background: rgba(240, 253, 244, .55);
    padding: 12px 14px;
}
.signage-content-pick-panel h3 {
    margin: 0 0 12px;
    color: var(--primary-strong, #0b7134);
}
.signage-layout-designer-toolbar {
    align-items: center;
}
.signage-layout-design-region {
    cursor: pointer;
}
.signage-layout-design-region .resize-handle {
    cursor: nwse-resize;
}
.signage-layout-design-region::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.signage-layout-props {
    align-content: start;
}
.signage-layout-content-form > .signage-content-pick-panel {
    grid-column: 1 / -1;
}
.signage-layout-content-form .is-hidden {
    display: none !important;
}
.signage-layout-map-compact {
    max-height: min(300px, 48vh);
}
@media (max-width: 720px) {
    .signage-layout-designer-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }
    .signage-layout-canvas {
        min-width: 420px;
    }
}


/* Digital Signage Step 24 - dọn UI gán nội dung vùng layout */
.section-title-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.section-title-inline h2,
.section-title-inline h3 {
    margin: 0;
}
.section-title-inline.compact {
    margin-bottom: 10px;
}
.signage-region-content-workspace {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr);
    gap: 16px;
    align-items: start;
    margin-bottom: 18px;
}
.signage-region-select-panel,
.signage-region-content-panel {
    min-width: 0;
}
.signage-region-select-panel label {
    display: grid;
    gap: 6px;
}
.signage-region-select-panel .signage-layout-map {
    margin-top: 12px;
}
.signage-region-content-panel h3 {
    margin: 0 0 12px;
}
.signage-region-selected-summary:empty {
    display: none;
}
.signage-region-selected-summary {
    font-weight: 700;
    color: var(--primary-strong, #0b7134);
}
.signage-layout-props p.muted,
.signage-content-flow-card p.compact-note,
.signage-content-flow-card .compact-note,
.signage-content-flow-card .muted.compact-note,
.signage-layout-assignment .compact-note {
    display: none !important;
}
.signage-layout-map-compact {
    min-height: 220px;
    max-height: 300px;
}
@media (max-width: 980px) {
    .signage-region-content-workspace {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .section-title-inline {
        align-items: stretch;
    }
    .signage-region-content-panel,
    .signage-region-select-panel {
        padding: 12px;
    }
}

/* Digital Signage Step 25 - chọn vùng trực tiếp, chọn file bằng card */
.signage-region-content-workspace-clean {
    grid-template-columns: minmax(300px, .82fr) minmax(360px, 1.18fr);
}
.signage-region-content-workspace-clean .signage-region-select-panel label {
    display: none !important;
}
.signage-region-content-panel-clean .signage-file-picker {
    margin-top: 10px;
}
.signage-content-type-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.signage-content-type-tabs .secondary-button.active,
.signage-content-type-tabs .secondary-button[aria-pressed="true"] {
    background: #20a94d;
    border-color: #20a94d;
    color: #fff;
}
.signage-file-upload-row {
    align-items: end;
    margin-bottom: 10px;
}
.signage-file-card-grid-compact {
    max-height: 300px;
    overflow: auto;
    padding-right: 4px;
}
.signage-region-select-panel .signage-layout-map-region {
    cursor: pointer;
}
.signage-region-select-panel .signage-layout-map-region.active {
    outline: 3px solid rgba(34, 197, 94, .55);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .14);
}
.signage-region-content-panel-clean .signage-file-card[hidden] {
    display: none !important;
}
.signage-region-content-panel-clean .is-hidden {
    display: none !important;
}
@media (max-width: 980px) {
    .signage-region-content-workspace-clean {
        grid-template-columns: 1fr;
    }
}
.signage-layout-designer .signage-layout-canvas {
    min-width: 0;
    width: min(100%, 900px);
}
.signage-layout-designer .signage-layout-canvas-wrap {
    max-height: 58vh;
}
@media (max-width: 720px) {
    .signage-layout-designer .signage-layout-canvas {
        min-width: 0;
        width: 100%;
    }
}

/* Digital Signage - gộp thiết kế layout và gán nội dung trong cùng một khu vực */
.signage-layout-unified-card {
    display: grid;
    gap: 18px;
}
.signage-layout-content-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
    gap: 18px;
    align-items: start;
}
.signage-layout-editor-form,
.signage-layout-content-form {
    min-width: 0;
}
.signage-layout-content-form .signage-content-pick-panel {
    height: 100%;
    display: grid;
    gap: 12px;
    align-content: start;
}
.signage-layout-content-form .signage-file-picker {
    margin-top: 10px;
}
.signage-layout-content-form .is-hidden {
    display: none !important;
}
.signage-layout-design-region.is-drop {
    outline: 4px solid rgba(34, 197, 94, .55);
    background: rgba(34, 197, 94, .72);
}
.signage-layout-unified-card .signage-layout-designer-body {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}
.signage-layout-unified-card .signage-region-media-table {
    margin-top: 2px;
}
@media (max-width: 1180px) {
    .signage-layout-content-shell {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 980px) {
    .signage-layout-unified-card .signage-layout-designer-body {
        grid-template-columns: 1fr;
    }
}

/* Digital Signage - album chọn file và demo nội dung trực tiếp trên layout */
.signage-file-picker-shell {
    display: grid;
    gap: 10px;
}
.signage-album-trigger-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.signage-album-modal[hidden] {
    display: none !important;
}
.signage-album-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 32px);
    background: rgba(6, 39, 20, .48);
    backdrop-filter: blur(4px);
}
.signage-album-dialog {
    width: min(1080px, 96vw);
    max-height: min(82vh, 760px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(24, 157, 76, .22);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .24);
}
.signage-album-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}
.signage-album-head > div {
    display: grid;
    gap: 4px;
}
.signage-album-head strong {
    color: var(--primary-dark);
    font-size: 1.1rem;
}
.signage-album-head span {
    color: var(--text-muted);
    font-size: .92rem;
}
.signage-album-tools {
    margin: 0;
}
.signage-album-grid {
    max-height: none;
    min-height: 260px;
    overflow: auto;
    padding: 2px 6px 8px 2px;
}
body.has-signage-modal {
    overflow: hidden;
}
.signage-layout-design-region.has-preview {
    overflow: hidden;
    background: #111;
}
.signage-layout-design-region .signage-region-label {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 4px;
    padding: 6px 9px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .38);
    backdrop-filter: blur(2px);
    color: #fff;
    max-width: calc(100% - 16px);
}
.signage-layout-design-region .signage-region-label strong,
.signage-layout-design-region .signage-region-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.signage-region-live-preview {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #111;
    pointer-events: none;
}

.signage-region-live-preview-count {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}

.signage-region-live-preview img,
.signage-region-live-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.signage-region-live-preview-text-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg, rgba(24, 157, 76, .92), rgba(8, 68, 34, .92));
}
.signage-region-live-preview-text-box strong {
    font-size: clamp(.85rem, 1.6vw, 1.4rem);
    letter-spacing: .08em;
}
.signage-region-live-preview-text-box span {
    max-width: 100%;
    font-size: clamp(.75rem, 1.3vw, 1rem);
    line-height: 1.35;
    word-break: break-word;
}
.signage-region-live-preview-clock-text {
    color: #fff;
    font-size: clamp(1.2rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: .04em;
}
.signage-layout-design-region .resize-handle {
    z-index: 3;
}
@media (max-width: 720px) {
    .signage-album-dialog {
        width: 100%;
        max-height: 88vh;
        padding: 14px;
    }
    .signage-album-head,
    .signage-album-tools {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Digital Signage - responsive cleanup for admin screens */
.signage-responsive-table .table-actions,
.signage-responsive-table .action-stack {
    flex-wrap: wrap;
}

.signage-responsive-table td[data-label] {
    word-break: break-word;
}

.signage-layout-designer-toolbar,
.signage-content-type-tabs,
.signage-album-trigger-row {
    max-width: 100%;
}

.signage-layout-designer-toolbar .secondary-button,
.signage-content-type-tabs .secondary-button,
.signage-album-trigger-row .secondary-button {
    white-space: normal;
}

@media (max-width: 760px) {
    .signage-responsive-table.table-card {
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .signage-responsive-table .table-wrap,
    .table-wrap.signage-responsive-table {
        overflow: visible;
        border-radius: 0;
    }

    .signage-responsive-table table,
    .table-wrap.signage-responsive-table table {
        min-width: 0;
        border: 0;
        background: transparent;
    }

    .signage-responsive-table thead,
    .table-wrap.signage-responsive-table thead {
        display: none;
    }

    .signage-responsive-table tbody,
    .signage-responsive-table tr,
    .signage-responsive-table td,
    .table-wrap.signage-responsive-table tbody,
    .table-wrap.signage-responsive-table tr,
    .table-wrap.signage-responsive-table td {
        display: block;
        width: 100%;
    }

    .signage-responsive-table tbody,
    .table-wrap.signage-responsive-table tbody {
        display: grid;
        gap: 12px;
    }

    .signage-responsive-table tr,
    .table-wrap.signage-responsive-table tr {
        padding: 12px;
        border: 1px solid var(--line, #d8e7db);
        border-radius: 16px;
        background: #fff;
        box-shadow: var(--shadow-soft);
    }

    .signage-responsive-table td,
    .table-wrap.signage-responsive-table td {
        border: 0;
        padding: 8px 0;
        text-align: left !important;
    }

    .signage-responsive-table td[data-label],
    .table-wrap.signage-responsive-table td[data-label] {
        display: grid;
        grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }

    .signage-responsive-table td[data-label]::before,
    .table-wrap.signage-responsive-table td[data-label]::before {
        content: attr(data-label);
        color: var(--text-muted, #667a70);
        font-weight: 650;
    }

    .signage-responsive-table td[colspan],
    .table-wrap.signage-responsive-table td[colspan] {
        display: block;
        text-align: center !important;
    }

    .signage-responsive-table .form-actions,
    .signage-responsive-table .table-actions,
    .signage-responsive-table .action-stack,
    .table-wrap.signage-responsive-table .form-actions,
    .table-wrap.signage-responsive-table .table-actions,
    .table-wrap.signage-responsive-table .action-stack {
        justify-content: stretch !important;
        width: 100%;
    }

    .signage-responsive-table .form-actions > *,
    .signage-responsive-table .table-actions > *,
    .signage-responsive-table .action-stack > *,
    .table-wrap.signage-responsive-table .form-actions > *,
    .table-wrap.signage-responsive-table .table-actions > *,
    .table-wrap.signage-responsive-table .action-stack > * {
        flex: 1 1 100%;
    }

    .signage-responsive-table .form-actions button,
    .signage-responsive-table .form-actions a,
    .signage-responsive-table .table-actions button,
    .signage-responsive-table .table-actions a,
    .signage-responsive-table .action-stack button,
    .signage-responsive-table .action-stack a,
    .table-wrap.signage-responsive-table .form-actions button,
    .table-wrap.signage-responsive-table .form-actions a,
    .table-wrap.signage-responsive-table .table-actions button,
    .table-wrap.signage-responsive-table .table-actions a,
    .table-wrap.signage-responsive-table .action-stack button,
    .table-wrap.signage-responsive-table .action-stack a {
        width: 100%;
    }

    .signage-media-file-row {
        min-width: 0;
        align-items: flex-start;
    }

    .signage-media-file-row img,
    .signage-video-thumb {
        width: 64px;
        height: 44px;
        flex-basis: 64px;
    }

    .signage-file-card-grid,
    .signage-album-grid {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
        max-height: 52vh;
    }

    .signage-file-card {
        min-height: 150px;
    }

    .signage-layout-content-shell,
    .signage-flow-workspace,
    .signage-layout-designer-body {
        grid-template-columns: 1fr !important;
    }

    .signage-layout-designer-toolbar,
    .signage-content-type-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .signage-layout-designer-toolbar .secondary-button,
    .signage-content-type-tabs .secondary-button {
        width: 100%;
    }

    .signage-layout-props {
        order: -1;
    }

    .signage-layout-canvas-wrap {
        max-height: none !important;
        overflow: visible;
    }

    .signage-layout-design-region .signage-region-label {
        max-width: calc(100% - 8px);
        padding: 4px 6px;
    }

    .signage-layout-design-region .signage-region-label strong {
        font-size: .74rem;
    }

    .signage-layout-design-region .signage-region-label span {
        font-size: .68rem;
    }
}

@media (max-width: 420px) {
    .signage-responsive-table td[data-label],
    .table-wrap.signage-responsive-table td[data-label] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .signage-layout-designer-toolbar,
    .signage-content-type-tabs {
        grid-template-columns: 1fr;
    }

    .signage-file-card-grid,
    .signage-album-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Signage module - compact responsive cleanup */
.signage-admin-shell {
    --field-min: 220px;
    --signage-gap: 12px;
    --signage-radius: 16px;
    max-width: min(1500px, calc(100% - 28px));
}

.signage-admin-shell * {
    min-width: 0;
}

.signage-admin-shell .page-title-row {
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.signage-admin-shell h1 {
    margin: 0;
    font-size: clamp(24px, 2.2vw, 34px);
}

.signage-admin-shell h2,
.signage-admin-shell h3 {
    margin-bottom: 10px;
}

.signage-admin-shell .card,
.signage-admin-shell .sub-card,
.signage-admin-shell .filter-card {
    border-radius: 22px;
}

.signage-admin-shell .card {
    padding: clamp(14px, 1.25vw, 20px);
}

.signage-admin-shell .table-card {
    padding: 0;
    overflow: hidden;
}

.signage-admin-shell .filter-card,
.signage-admin-shell .card + .card,
.signage-admin-shell .report-kpi-grid,
.signage-admin-shell .cards-grid,
.signage-admin-shell .signage-flow-workspace {
    margin-top: 12px;
}

.signage-admin-shell .form-grid,
.signage-admin-shell .compact-grid,
.signage-admin-shell .split-panels,
.signage-admin-shell .signage-responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--field-min)), 1fr));
    gap: var(--signage-gap);
    align-items: start;
}

.signage-admin-shell .compact-grid {
    --field-min: 200px;
}

.signage-admin-shell .signage-campaign-main-grid {
    --field-min: 210px;
}

.signage-admin-shell .split-panels {
    --field-min: 250px;
    margin: 12px 0 16px;
}

.signage-admin-shell .signage-scope-panels {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.signage-admin-shell .sub-card {
    padding: 14px;
    box-shadow: none;
}

.signage-admin-shell .section-title {
    margin: 16px 0 10px;
    padding-top: 12px;
    font-size: clamp(18px, 1.55vw, 24px);
}

.signage-admin-shell input[type="text"],
.signage-admin-shell input[type="password"],
.signage-admin-shell input[type="email"],
.signage-admin-shell input[type="tel"],
.signage-admin-shell input[type="url"],
.signage-admin-shell input[type="search"],
.signage-admin-shell input[type="number"],
.signage-admin-shell input[type="date"],
.signage-admin-shell input[type="time"],
.signage-admin-shell input[type="datetime-local"],
.signage-admin-shell input[type="file"],
.signage-admin-shell input:not([type]),
.signage-admin-shell select,
.signage-admin-shell textarea,
.signage-admin-shell .datetime24-picker input,
.signage-admin-shell .datetime24-picker select,
.signage-admin-shell .time24-picker select {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    border-radius: var(--signage-radius);
    border: 1px solid var(--line, #d8e7db);
    background: #fff;
}

.signage-admin-shell input[type="file"] {
    padding: 9px 12px;
}

.signage-admin-shell textarea {
    min-height: 92px;
}

.signage-admin-shell .check-row,
.signage-admin-shell .radio-row {
    min-height: 44px;
}

.signage-admin-shell .check-row input,
.signage-admin-shell .radio-row input {
    flex: 0 0 auto;
}

.signage-admin-shell .advanced-fields,
.signage-admin-shell .signage-advanced-fields,
.signage-admin-shell .signage-region-drop-panel,
.signage-admin-shell .signage-file-picker,
.signage-admin-shell .signage-picker-summary,
.signage-admin-shell .signage-current-file {
    border-radius: 18px;
}

.signage-admin-shell .advanced-fields,
.signage-admin-shell .signage-advanced-fields {
    padding: 12px;
}

.signage-admin-shell .advanced-fields > summary,
.signage-admin-shell .signage-advanced-fields > summary {
    min-height: 28px;
}

.signage-admin-shell .form-actions {
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.signage-admin-shell .form-actions.no-margin {
    margin-top: 0;
}

.signage-admin-shell .primary-button,
.signage-admin-shell .secondary-button,
.signage-admin-shell .link-button {
    border-radius: 999px;
    min-height: 40px;
}

.signage-admin-shell .secondary-button.small,
.signage-admin-shell .primary-button.small {
    min-height: 34px;
}

.signage-admin-shell .time24-picker {
    display: grid;
    grid-template-columns: 74px auto 74px auto;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.signage-admin-shell .datetime24-picker {
    grid-template-columns: minmax(135px, 1fr) 72px auto 72px auto;
}

.signage-admin-shell .datetime24-input[hidden],
.signage-admin-shell .time24-input[hidden] {
    display: none !important;
}

.signage-admin-shell .datetime24-picker__clear {
    border-radius: 999px;
}

.signage-admin-shell .check-list {
    gap: 8px;
}

.signage-admin-shell .signage-day-list {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.signage-admin-shell .report-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: 10px;
}

.signage-admin-shell .cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 12px;
}

.signage-admin-shell .feature-card,
.signage-admin-shell .choice-card {
    min-height: auto;
    padding: 16px;
    border-radius: 20px;
}

.signage-admin-shell .feature-card > span:not(.feature-title),
.signage-admin-shell .choice-card > span:not(.choice-title) {
    display: none;
}

.signage-admin-shell .table-toolbar {
    padding: 12px 14px;
    gap: 10px;
    flex-wrap: wrap;
}

.signage-admin-shell .table-wrap {
    width: 100%;
}

.signage-admin-shell table {
    min-width: 760px;
}

.signage-admin-shell th,
.signage-admin-shell td {
    padding: 12px 14px;
}

.signage-admin-shell .signage-responsive-table .table-actions,
.signage-admin-shell .signage-responsive-table .action-stack,
.signage-admin-shell .signage-responsive-table .text-right {
    gap: 6px;
}

.signage-admin-shell .signage-layout-designer {
    border-radius: 22px;
}

.signage-admin-shell .signage-layout-designer-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.signage-admin-shell .signage-layout-designer-body {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 14px;
}

.signage-admin-shell .signage-layout-canvas-wrap {
    overflow: auto;
    border-radius: 20px;
}

.signage-admin-shell .signage-layout-canvas {
    min-width: 0;
    width: 100%;
}

.signage-admin-shell .signage-layout-props {
    border-radius: 20px;
}

.signage-admin-shell .signage-layout-map,
.signage-admin-shell .signage-layout-map-compact {
    min-height: 180px;
    max-height: min(300px, 45vh);
    border-radius: 18px;
}

.signage-admin-shell .signage-file-picker-head,
.signage-admin-shell .signage-file-picker-tools,
.signage-admin-shell .signage-media-file-row {
    flex-wrap: wrap;
    gap: 10px;
}

.signage-admin-shell .signage-file-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.signage-admin-shell .signage-file-card {
    border-radius: 18px;
    min-height: 150px;
}

.signage-admin-shell .pager {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

@media (max-width: 980px) {
    .signage-admin-shell {
        max-width: calc(100% - 20px);
        --field-min: 210px;
    }

    .signage-admin-shell .page-title-row {
        align-items: stretch;
    }

    .signage-admin-shell .page-title-row .form-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .signage-admin-shell .signage-layout-designer-body,
    .signage-admin-shell .signage-flow-workspace,
    .signage-admin-shell .signage-region-content-workspace,
    .signage-admin-shell .signage-region-content-workspace-clean {
        grid-template-columns: 1fr !important;
    }

    .signage-admin-shell .signage-layout-props {
        order: 0;
    }
}

@media (max-width: 760px) {
    .signage-admin-shell {
        max-width: calc(100% - 16px);
        margin-top: 12px;
        --field-min: 100%;
        --signage-gap: 10px;
    }

    .signage-admin-shell .card,
    .signage-admin-shell .sub-card,
    .signage-admin-shell .filter-card {
        border-radius: 18px;
        padding: 12px;
    }

    .signage-admin-shell .table-card.signage-responsive-table {
        padding: 0;
    }

    .signage-admin-shell .form-grid,
    .signage-admin-shell .compact-grid,
    .signage-admin-shell .split-panels,
    .signage-admin-shell .signage-responsive-grid {
        grid-template-columns: 1fr;
    }

    .signage-admin-shell .datetime24-picker,
    .signage-admin-shell .time24-picker {
        grid-template-columns: 1fr 1fr;
    }

    .signage-admin-shell .datetime24-picker__date,
    .signage-admin-shell .datetime24-picker__clear {
        grid-column: 1 / -1;
    }

    .signage-admin-shell .datetime24-picker__sep {
        display: none;
    }

    .signage-admin-shell .form-actions,
    .signage-admin-shell .page-title-row .form-actions {
        align-items: stretch;
    }

    .signage-admin-shell .page-title-row .form-actions > *,
    .signage-admin-shell .form-actions > .primary-button,
    .signage-admin-shell .form-actions > .secondary-button,
    .signage-admin-shell .form-actions > button,
    .signage-admin-shell .form-actions > a {
        flex: 1 1 auto;
    }

    .signage-admin-shell .signage-layout-designer-toolbar,
    .signage-admin-shell .signage-content-type-tabs {
        grid-template-columns: 1fr;
        display: grid;
    }

    .signage-admin-shell .signage-layout-canvas-wrap {
        overflow-x: auto;
    }

    .signage-admin-shell .signage-layout-canvas {
        min-width: 320px;
    }

    .signage-admin-shell .signage-file-picker-tools,
    .signage-admin-shell .signage-file-picker-tools input,
    .signage-admin-shell .signage-file-picker-tools button {
        width: 100%;
    }

    .signage-admin-shell .signage-file-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
    }

    .signage-admin-shell table {
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .signage-admin-shell .signage-file-card-grid {
        grid-template-columns: 1fr;
    }

    .signage-admin-shell .page-title-row .form-actions > *,
    .signage-admin-shell .form-actions > .primary-button,
    .signage-admin-shell .form-actions > .secondary-button,
    .signage-admin-shell .form-actions > button,
    .signage-admin-shell .form-actions > a {
        width: 100%;
        flex-basis: 100%;
    }
}


/* Signage V1.1.0 responsive correction - compact forms, rounded controls, 24h picker without AM/PM/seconds */
.signage-admin-shell {
    --signage-radius: 16px;
    --signage-gap: 12px;
    width: min(1500px, calc(100% - 28px));
}

.signage-admin-shell .page-title-row {
    margin-bottom: 12px;
    gap: 12px;
}

.signage-admin-shell h1 {
    margin-bottom: 0;
}

.signage-admin-shell .card,
.signage-admin-shell .filter-card,
.signage-admin-shell .sub-card {
    border-radius: 22px;
}

.signage-admin-shell .card {
    padding: clamp(14px, 1.1vw, 18px);
}

.signage-admin-shell label > span:first-child,
.signage-admin-shell .form-grid label > span:first-child,
.signage-admin-shell .compact-grid label > span:first-child {
    margin-bottom: 6px;
}

.signage-admin-shell :is(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="file"], input:not([type]), select, textarea),
.signage-admin-shell .datetime24-picker :is(input, select),
.signage-admin-shell .time24-picker select {
    min-height: 44px;
    border-radius: var(--signage-radius) !important;
    border: 1px solid var(--line, #d8e7db);
    padding: 9px 12px;
    background-color: #fff;
}

.signage-admin-shell textarea {
    min-height: 82px;
}

.signage-admin-shell .form-grid,
.signage-admin-shell .compact-grid,
.signage-admin-shell .split-panels,
.signage-admin-shell .signage-responsive-grid {
    gap: var(--signage-gap);
}

.signage-admin-shell .signage-campaign-main-grid {
    grid-template-columns: minmax(175px, .8fr) minmax(230px, 1fr) minmax(305px, 1.05fr) minmax(305px, 1.05fr);
    align-items: start;
}

.signage-admin-shell .signage-campaign-main-grid .advanced-fields,
.signage-admin-shell .signage-campaign-main-grid .full-row {
    grid-column: 1 / -1;
}

.signage-admin-shell .datetime24-input[hidden],
.signage-admin-shell .time24-input[hidden],
.signage-admin-shell .datetime24-picker__clear {
    display: none !important;
}

.signage-admin-shell .datetime24-picker {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 60px .35em 60px;
    gap: 6px;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.signage-admin-shell .datetime24-picker input[type="date"] {
    min-width: 0;
}

.signage-admin-shell .datetime24-picker select,
.signage-admin-shell .time24-picker select {
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    text-align-last: center;
}

.signage-admin-shell .datetime24-picker__sep {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted, #667a70);
    font-weight: 700;
    min-width: 0;
}

.signage-admin-shell .time24-picker {
    display: grid;
    grid-template-columns: 60px .35em 60px;
    gap: 6px;
    align-items: center;
    width: max-content;
    max-width: 100%;
}

.signage-admin-shell .signage-schedule-panels {
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    margin: 8px 0 14px;
}

.signage-admin-shell .signage-day-list {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 6px 10px;
}

.signage-admin-shell .signage-schedule-panels .sub-card {
    padding: 14px 16px;
}

.signage-admin-shell .section-title {
    margin: 14px 0 8px;
    padding-top: 8px;
}

.signage-admin-shell .signage-scope-panels {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.signage-admin-shell .form-actions,
.signage-admin-shell .page-title-row .form-actions,
.signage-admin-shell .table-actions,
.signage-admin-shell .action-stack {
    gap: 8px;
    flex-wrap: wrap;
}

.signage-admin-shell .form-actions > *,
.signage-admin-shell .page-title-row .form-actions > * {
    flex: 0 0 auto;
}

.signage-admin-shell :is(.primary-button, .secondary-button, .link-button) {
    border-radius: 999px;
}

.signage-admin-shell :is(.primary-button, .secondary-button).small,
.signage-admin-shell .signage-layout-designer-toolbar :is(.primary-button, .secondary-button) {
    min-height: 34px;
    padding: 7px 12px;
    font-size: .92rem;
}

.signage-admin-shell .signage-layout-designer {
    gap: 12px;
}

.signage-admin-shell .signage-layout-designer-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 0 2px;
}

.signage-admin-shell .signage-layout-designer-toolbar button {
    white-space: nowrap;
}

.signage-admin-shell .signage-layout-designer-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 12px;
    align-items: start;
}

.signage-admin-shell .signage-layout-designer-body .signage-layout-canvas-wrap,
.signage-admin-shell .signage-layout-designer-body .signage-layout-props {
    flex: none;
}

.signage-admin-shell .signage-layout-canvas-wrap {
    padding: 14px;
    border-radius: 20px;
}

.signage-admin-shell .signage-layout-canvas {
    min-width: 0;
    width: 100%;
    max-height: min(420px, 52vh);
}

.signage-admin-shell .signage-layout-props {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
}

.signage-admin-shell .signage-layout-props h3 {
    margin-bottom: 0;
}

.signage-admin-shell .signage-layout-design-region .signage-region-label {
    max-width: calc(100% - 12px);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.signage-admin-shell .signage-layout-design-region .signage-region-label strong,
.signage-admin-shell .signage-layout-design-region .signage-region-label span {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

.signage-admin-shell .signage-layout-content-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 14px;
    align-items: start;
}

.signage-admin-shell .signage-content-pick-panel {
    border-radius: 20px;
    padding: 14px;
}

.signage-admin-shell .signage-content-type-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.signage-admin-shell .signage-content-type-tabs button {
    flex: 0 0 auto;
}

.signage-admin-shell .signage-picker-summary,
.signage-admin-shell .signage-file-source,
.signage-admin-shell .signage-current-file,
.signage-admin-shell .signage-file-picker {
    border-radius: 18px;
}

@media (max-width: 1180px) {
    .signage-admin-shell .signage-campaign-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .signage-admin-shell .signage-layout-content-shell,
    .signage-admin-shell .signage-layout-designer-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .signage-admin-shell {
        width: min(100% - 16px, 100%);
        margin-top: 12px;
        --signage-gap: 10px;
    }

    .signage-admin-shell .page-title-row,
    .signage-admin-shell .page-title-row .form-actions {
        align-items: stretch;
    }

    .signage-admin-shell .form-actions > *,
    .signage-admin-shell .page-title-row .form-actions > * {
        flex: 1 1 auto;
    }

    .signage-admin-shell .signage-campaign-main-grid,
    .signage-admin-shell .signage-schedule-panels,
    .signage-admin-shell .signage-scope-panels,
    .signage-admin-shell .form-grid,
    .signage-admin-shell .compact-grid,
    .signage-admin-shell .split-panels,
    .signage-admin-shell .signage-responsive-grid {
        grid-template-columns: 1fr;
    }

    .signage-admin-shell .datetime24-picker {
        grid-template-columns: minmax(0, 1fr) 56px .35em 56px;
    }

    .signage-admin-shell .time24-picker {
        grid-template-columns: 56px .35em 56px;
    }

    .signage-admin-shell .signage-day-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .signage-admin-shell .signage-layout-canvas-wrap {
        overflow-x: auto;
    }

    .signage-admin-shell .signage-layout-canvas {
        min-width: 320px;
        max-height: none;
    }

    .signage-admin-shell .signage-layout-designer-toolbar,
    .signage-admin-shell .signage-content-type-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .signage-admin-shell .signage-layout-designer-toolbar button,
    .signage-admin-shell .signage-content-type-tabs button {
        width: 100%;
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .signage-admin-shell .datetime24-picker {
        grid-template-columns: 1fr 56px .35em 56px;
    }

    .signage-admin-shell .signage-day-list,
    .signage-admin-shell .signage-layout-designer-toolbar,
    .signage-admin-shell .signage-content-type-tabs {
        grid-template-columns: 1fr;
    }
}

/* Signage campaign scope cleanup: no hardcoded business screens, choose all/group/devices only */
.signage-admin-shell .signage-scope-clean {
    display: grid;
    gap: 12px;
    margin: 8px 0 16px;
}

.signage-admin-shell .signage-scope-mode-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 10px;
}

.signage-admin-shell .signage-scope-mode {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 74px;
    padding: 14px;
    border: 1px solid var(--line, #d8e7db);
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
}

.signage-admin-shell .signage-scope-mode:has(input:checked) {
    border-color: #26a957;
    background: #f4fff7;
    box-shadow: 0 10px 22px rgba(38, 169, 87, .08);
}

.signage-admin-shell .signage-scope-mode input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.signage-admin-shell .signage-scope-mode span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.signage-admin-shell .signage-scope-mode small {
    color: var(--muted, #667a70);
    line-height: 1.35;
}

.signage-admin-shell .signage-scope-section {
    padding: 14px;
    border: 1px solid var(--line, #d8e7db);
    border-radius: 20px;
    background: #fff;
}

.signage-admin-shell .signage-device-check-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 8px 12px;
    max-height: 260px;
    overflow: auto;
    padding-right: 4px;
}

.signage-admin-shell .signage-device-check-list .check-row {
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--line, #d8e7db);
    border-radius: 14px;
    background: #fbfffc;
}

.signage-admin-shell .signage-scope-advanced {
    margin: 0;
}

.signage-admin-shell .signage-point-mode-row {
    align-self: end;
}

@media (max-width: 760px) {
    .signage-admin-shell .signage-scope-mode-list,
    .signage-admin-shell .signage-device-check-list {
        grid-template-columns: 1fr;
    }

    .signage-admin-shell .signage-device-check-list {
        max-height: none;
    }
}

/* Signage campaign schedule/scope layout */
.signage-admin-shell .signage-time-card {
    display: grid;
    gap: 10px;
}

.signage-admin-shell .signage-time-range-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.signage-admin-shell .signage-time-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    min-width: 230px;
    width: auto;
}

.signage-admin-shell .signage-time-field > span:first-child {
    margin: 0;
    white-space: nowrap;
    min-width: 58px;
}

.signage-admin-shell .signage-time-field .field-validation {
    flex-basis: 100%;
    margin-left: 68px;
}

.signage-admin-shell .signage-time-range-sep {
    color: var(--muted, #667a70);
    font-weight: 700;
    white-space: nowrap;
}

.signage-admin-shell .signage-scope-clean {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    margin: 8px 0 16px;
}

.signage-admin-shell .signage-scope-mode-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-content: start;
}

.signage-admin-shell .signage-scope-mode {
    min-height: 74px;
}

.signage-admin-shell .signage-scope-detail-panel {
    min-height: 100%;
    padding: 16px;
    border: 1px solid var(--line, #d8e7db);
    border-radius: 22px;
    background: #fff;
}

.signage-admin-shell .signage-scope-detail-panel .signage-scope-section {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.signage-admin-shell .signage-scope-section h3 {
    margin: 0 0 10px;
}

.signage-admin-shell .signage-scope-section > label {
    max-width: 520px;
}

.signage-admin-shell .signage-device-check-list {
    max-height: 300px;
}

@media (max-width: 980px) {
    .signage-admin-shell .signage-scope-clean {
        grid-template-columns: 1fr;
    }

    .signage-admin-shell .signage-scope-mode-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .signage-admin-shell .signage-time-range-row {
        align-items: stretch;
    }

    .signage-admin-shell .signage-time-field {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
    }

    .signage-admin-shell .signage-time-field .time24-picker {
        margin-left: auto;
    }

    .signage-admin-shell .signage-time-range-sep {
        display: none;
    }

    .signage-admin-shell .signage-scope-mode-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .signage-admin-shell .signage-time-field {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .signage-admin-shell .signage-time-field .time24-picker {
        margin-left: 0;
    }

    .signage-admin-shell .signage-time-field .field-validation {
        margin-left: 0;
    }
}


/* Final Signage campaign schedule and scope cleanup */
.signage-admin-shell .signage-schedule-panels {
    grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
    align-items: stretch;
}

.signage-admin-shell .signage-day-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.signage-admin-shell .signage-day-list .check-row {
    width: auto;
    min-width: 84px;
    white-space: nowrap;
}

.signage-admin-shell .signage-time-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 18px;
    row-gap: 8px;
}

.signage-admin-shell .signage-time-card h3 {
    margin: 0;
    white-space: nowrap;
}

.signage-admin-shell .signage-time-line {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}

.signage-admin-shell .signage-time-inline-label,
.signage-admin-shell .signage-time-range-sep {
    color: var(--muted, #667a70);
    font-weight: 700;
    white-space: nowrap;
}

.signage-admin-shell .signage-time-card > .field-validation {
    grid-column: 2;
}

.signage-admin-shell .signage-scope-clean {
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    align-items: stretch;
}

.signage-admin-shell .signage-scope-detail-panel {
    min-width: 0;
}

.signage-admin-shell .signage-group-check-list,
.signage-admin-shell .signage-device-check-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 10px;
}

.signage-admin-shell .signage-choice-card,
.signage-admin-shell .signage-device-check-list .check-row {
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--line, #d8e7db);
    border-radius: 16px;
    background: #fbfffc;
}

.signage-admin-shell .signage-choice-card:has(input:checked),
.signage-admin-shell .signage-device-check-list .check-row:has(input:checked) {
    border-color: #26a957;
    background: #f4fff7;
}

@media (max-width: 980px) {
    .signage-admin-shell .signage-schedule-panels,
    .signage-admin-shell .signage-scope-clean {
        grid-template-columns: 1fr;
    }

    .signage-admin-shell .signage-scope-mode-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .signage-admin-shell .signage-time-card {
        grid-template-columns: 1fr;
    }

    .signage-admin-shell .signage-time-card > .field-validation {
        grid-column: 1;
    }

    .signage-admin-shell .signage-time-line {
        flex-wrap: wrap;
    }

    .signage-admin-shell .signage-scope-mode-list,
    .signage-admin-shell .signage-group-check-list,
    .signage-admin-shell .signage-device-check-list {
        grid-template-columns: 1fr;
    }
}

/* Signage Smart TV stability screens */
.signage-admin-shell .input-suffix {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.signage-admin-shell .input-suffix input {
    flex: 1 1 auto;
    min-width: 0;
}

.signage-admin-shell .input-suffix em {
    min-width: 46px;
    font-style: normal;
    color: var(--muted, #667a70);
    white-space: nowrap;
}

.signage-admin-shell .signage-settings-card h2,
.signage-admin-shell .signage-detail-card h2 {
    margin: 0 0 14px;
    font-size: 1.08rem;
}

.signage-admin-shell .signage-settings-card > h2:not(:first-of-type) {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line, #d8e7db);
}

.signage-admin-shell .signage-setting-check {
    min-height: 52px;
    border: 1px solid var(--line, #d8e7db);
    border-radius: 16px;
    padding: 12px 14px;
    background: #fbfffc;
}

.signage-admin-shell .signage-video-standard-box {
    display: grid;
    gap: 6px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px dashed #b8dcc2;
    border-radius: 18px;
    background: #f7fff9;
}

.signage-admin-shell .signage-video-upload-note {
    display: block;
    margin-top: 6px;
    line-height: 1.45;
}

.signage-admin-shell .signage-device-health-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.signage-admin-shell .report-kpi-card small {
    display: block;
    margin-top: 6px;
    color: var(--muted, #667a70);
    font-weight: 500;
}

.signage-admin-shell .report-kpi-card.off {
    border-color: #f2c4c4;
    background: #fff7f7;
}

.signage-admin-shell .signage-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.signage-admin-shell .signage-detail-card {
    margin-bottom: 16px;
}

.signage-admin-shell .signage-detail-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.signage-admin-shell .signage-detail-list {
    display: grid;
    grid-template-columns: minmax(110px, 180px) minmax(0, 1fr);
    gap: 10px 14px;
    margin: 0;
}

.signage-admin-shell .signage-detail-list dt {
    color: var(--muted, #667a70);
    font-weight: 700;
}

.signage-admin-shell .signage-detail-list dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.signage-admin-shell .danger-text {
    color: #b42318;
}

.signage-admin-shell .signage-user-agent {
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .signage-admin-shell .signage-device-health-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .signage-admin-shell .signage-device-health-grid,
    .signage-admin-shell .signage-detail-grid {
        grid-template-columns: 1fr;
    }

    .signage-admin-shell .signage-detail-list {
        grid-template-columns: 1fr;
    }

    .signage-admin-shell .signage-detail-list dt {
        margin-top: 6px;
    }
}