* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: #0b1020; background: #f7f8fb; }
.boot-loader { display: flex; align-items: center; justify-content: center; min-height: 100vh; color: #64748b; font-size: 1.1rem; }
#blazor-error-ui { background: #fee2e2; color: #991b1b; bottom: 0; display: none; left: 0; padding: 0.6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.btn-primary, .btn-secondary, .btn-warn, .btn-call { display: inline-block; padding: 0.6rem 1rem; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; text-decoration: none; margin-right: 0.5rem; }
.btn-primary { background: #0d9488; color: #fff; }
.btn-secondary { background: #e2e8f0; color: #0b1020; }
.btn-warn { background: #f59e0b; color: #1f2937; }
.row { margin-bottom: 0.75rem; display: block; }
.row label { display: block; font-weight: 600; }
.row input, .row select { width: 100%; padding: 0.5rem; border: 1px solid #cbd5e1; border-radius: 6px; }
.error { color: #b91c1c; }
.status { margin-left: 0.5rem; color: #0f766e; }
.hero { padding: 2rem 0; text-align: center; }
.hero h1 { font-size: 2.4rem; margin: 0 0 1rem 0; }
.hero .lead { font-size: 1.2rem; color: #475569; max-width: 720px; margin: 0 auto 1.5rem; }
.hero .cta { margin: 1.5rem 0; }
.hero .badge { display: inline-block; background: #0f766e; color: #fff; padding: 0.35rem 0.75rem; border-radius: 9999px; margin-top: 2rem; }
.hero .note { max-width: 720px; margin: 1rem auto; color: #475569; font-size: 0.95rem; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 2rem 0; }
.feature { background: #fff; padding: 1.25rem; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; }
.card { background: #fff; padding: 1.25rem; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.card h2 { margin-top: 0; }
.card label { display: block; margin-bottom: 0.6rem; font-weight: 600; }
.card input[type=text], .card input[type=number], .card select { width: 100%; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 6px; }
.card input[type=color] { width: 4rem; height: 2rem; border: none; padding: 0; }
.preview { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.preview-banner { font-size: 4rem; font-weight: 800; }
.preview-sub { font-size: 1rem; letter-spacing: 0.2em; }
.preview-logo { max-height: 60px; margin-bottom: 0.5rem; }
.actions { margin-top: 1rem; }
.sub-banner { background: #fef3c7; color: #92400e; padding: 0.75rem 1rem; border-radius: 8px; margin: 1rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.sub-banner .warn { color: #b91c1c; font-weight: 600; }
.pad { padding: 1rem; }
.pad-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.pad-header .now { font-size: 1.2rem; }
.hub-state { padding: 0.25rem 0.75rem; border-radius: 9999px; font-weight: 600; font-size: 0.85rem; }
.hub-state.ok { background: #dcfce7; color: #166534; }
.hub-state.warn { background: #fef3c7; color: #92400e; }
.hub-state.bad { background: #fee2e2; color: #991b1b; }
.pad-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 1rem; margin-top: 1rem; }
.btn-call { background: #0d9488; color: #fff; font-size: 4rem; font-weight: 800; padding: 3rem 1rem; border-radius: 16px; grid-row: span 2; cursor: pointer; }
.pad-specific, .pad-controls, .pad-recent { background: #fff; padding: 1rem; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.pad-specific input { display: block; width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; }
.pad-recent ul { list-style: none; padding: 0; margin: 0; }
.pad-recent li { padding: 0.25rem 0; border-bottom: 1px solid #e2e8f0; }
.tv-loading { height: 100vh; display: flex; align-items: center; justify-content: center; color: #cbd5e1; background: #0b1020; font-size: 1.5rem; }
.tv-root { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
.tv-logo { position: absolute; top: 2vh; left: 2vw; max-height: 8vh; }
.tv-clock { position: absolute; top: 2vh; right: 2vw; font-size: 4vh; font-weight: 600; opacity: 0.85; }
.tv-banner { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tv-label { font-size: 5vh; letter-spacing: 0.3em; opacity: 0.8; }
.tv-ticket { font-size: 35vh; line-height: 1; font-weight: 900; }
.tv-room { font-size: 6vh; margin-top: 1vh; }
.tv-recent { position: absolute; bottom: 8vh; right: 2vw; max-width: 25vw; text-align: right; opacity: 0.85; }
.tv-recent ul { list-style: none; padding: 0; margin: 0; }
.tv-recent li { font-size: 3vh; }
.tv-marquee { position: absolute; bottom: 0; left: 0; right: 0; overflow: hidden; font-size: 3vh; padding: 0.5vh 0; opacity: 0.85; }
.tv-marquee span { display: inline-block; padding-left: 100%; white-space: nowrap; animation: tv-marquee-scroll 30s linear infinite; }
@keyframes tv-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.tv-footer { position: absolute; bottom: 4vh; left: 0; right: 0; text-align: center; font-size: 2.5vh; opacity: 0.7; }
.tv-pairing { position: absolute; top: 12vh; left: 50%; transform: translateX(-50%); text-align: center; background: rgba(0,0,0,0.45); padding: 1vh 3vw; border-radius: 1vh; }
.tv-pairing-label { font-size: 2.5vh; opacity: 0.8; }
.tv-pairing-code { font-size: 10vh; font-weight: 800; letter-spacing: 0.2em; }
.tv-pairing-hint { font-size: 2vh; opacity: 0.7; }
.tv-reconnect { position: absolute; top: 2vh; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.5); color: #fbbf24; padding: 0.4vh 1vw; border-radius: 0.6vh; font-size: 2.5vh; }

/* Pad page - teal call button */
.btn-teal { background:#0d9488; color:#fff; border:none; } .btn-teal:hover { background:#0f766e; color:#fff; } .btn-outline-teal { color:#0d9488; border:1px solid #0d9488; background:transparent; } .btn-outline-teal:hover { background:#0d9488; color:#fff; }

/* Pairing code dismiss button -- shown inside the overlay */
.tv-pairing-dismiss { display: block; margin: 1.5vh auto 0; background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.35); border-radius: 0.5vh; padding: 0.4vh 2vw; font-size: 1.8vh; cursor: pointer; }
.tv-pairing-dismiss:hover { background: rgba(255,255,255,0.25); }

/* Corner button: recalls the pairing code after it has been hidden */
.tv-show-pairing-btn { position: absolute; bottom: 2vh; right: 2vw; background: rgba(0,0,0,0.45); color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.25); border-radius: 0.5vh; padding: 0.5vh 1.2vw; font-size: 1.8vh; cursor: pointer; z-index: 10; }
.tv-show-pairing-btn:hover { background: rgba(0,0,0,0.7); color: #fff; }

/* ---- Billing pages (BillingSuccess, BillingCancel) ---- */
.billing-page{display:flex;justify-content:center;align-items:flex-start;min-height:70vh;padding:2rem 1rem;}
.billing-card{background:#1e293b;border:1px solid #334155;border-radius:1rem;padding:2.5rem 2rem;max-width:560px;width:100%;text-align:center;}
.billing-icon{width:4rem;height:4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:800;margin:0 auto 1.25rem;}
.billing-icon--success{background:#0d9488;color:#fff;}
.billing-icon--neutral{background:#334155;color:#94a3b8;}
.billing-check,.billing-x{line-height:1;}
.billing-title{font-size:1.6rem;font-weight:700;color:#f1f5f9;margin-bottom:.5rem;}
.billing-sub{color:#94a3b8;margin-bottom:1.5rem;}
.billing-status-row{display:flex;align-items:center;gap:.75rem;justify-content:center;margin-bottom:1.5rem;}
.billing-badge{padding:.25rem .75rem;border-radius:999px;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.billing-badge--active{background:#0d9488;color:#fff;}
.billing-badge--trialing{background:#0ea5e9;color:#fff;}
.billing-badge--past_due{background:#f59e0b;color:#000;}
.billing-badge--canceled{background:#64748b;color:#fff;}
.billing-period{color:#94a3b8;font-size:.85rem;}
.billing-tiers{margin:1.5rem 0;text-align:left;}
.billing-tiers-title{font-size:1rem;font-weight:600;color:#e2e8f0;margin-bottom:.75rem;}
.billing-tier-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.billing-tier-table th{color:#94a3b8;font-weight:500;padding:.4rem .5rem;border-bottom:1px solid #334155;text-align:left;}
.billing-tier-table td{padding:.45rem .5rem;border-bottom:1px solid #1e293b;color:#e2e8f0;}
.billing-tier-table tr:last-child td{border-bottom:none;}
.tier-price{font-weight:600;color:#0d9488;}
.billing-tiers-note{font-size:.8rem;color:#64748b;margin-top:.75rem;}
.billing-actions{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;}


/* ===== Billing plan picker ================================================
   Used by DisplayBoard.Portal/Components/BillingManagement.razor.
   Dark-slate palette that matches the rest of the admin portal. */

/* Outer wrapper for the whole billing panel inside Account Settings */
.billing-panel {
    color: #e2e8f0;
}

/* Current subscription status card */
.billing-status-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
}
.billing-detail {
    font-size: .875rem;
    color: #94a3b8;
}
.billing-detail strong {
    color: #e2e8f0;
}

/* "Change your plan" / "Choose a plan" heading above cards */
.billing-plans-heading {
    font-size: .9rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .75rem;
}

/* Responsive card grid: 1 col on small, 2-3 on wider viewports */
.billing-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .875rem;
}

/* Individual plan card */
.billing-plan-card {
    position: relative;
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: .75rem;
    padding: 1.25rem 1rem 1rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    user-select: none;
}
.billing-plan-card:hover {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,.18);
}
/* Currently active plan */
.billing-plan-card--current {
    border-color: #0d9488;
    background: #0d2d2a;
}
/* Highlighted "most popular" plan (when it is NOT the current plan) */
.billing-plan-card--recommended {
    border-color: #0ea5e9;
}
/* User's click selection */
.billing-plan-card--selected {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,.25);
}

/* Badge shown at the top-right of a card ("Most popular", "Current plan") */
.billing-plan-badge {
    position: absolute;
    top: -.6rem;
    left: 50%;
    transform: translateX(-50%);
    background: #0ea5e9;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 999px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.billing-plan-badge--current {
    background: #0d9488;
}

/* Plan name */
.billing-plan-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: .35rem;
    margin-top: .5rem;
}

/* Price display */
.billing-plan-price {
    display: flex;
    align-items: baseline;
    gap: .2rem;
    margin-bottom: .5rem;
}
.billing-plan-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0d9488;
    line-height: 1;
}
.billing-plan-period {
    font-size: .8rem;
    color: #64748b;
}

/* Short tagline */
.billing-plan-tagline {
    font-size: .8rem;
    color: #94a3b8;
    margin-bottom: .75rem;
    line-height: 1.4;
}

/* Feature bullet list */
.billing-plan-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.billing-plan-features li {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: #cbd5e1;
}
/* Checkmark icon colour */
.billing-plan-check {
    flex-shrink: 0;
    color: #0d9488;
}

/* CTA row below the plan grid */
.billing-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* Inline confirmation prompt before a plan change */
.billing-confirm {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: #94a3b8;
}

/* ===== Announcements ticker (TV display) =================================
   Continuous horizontal marquee. Duration set inline from AnnouncementScrollSpeed. */
.tv-announcements {
    position: absolute; bottom: 0; left: 0; right: 0;
    overflow: hidden; font-size: 2.8vh; padding: 0.4vh 0;
    background: rgba(0,0,0,0.35); white-space: nowrap; z-index: 10;
}
.tv-announcements-track {
    display: inline-block; padding-left: 100%; white-space: nowrap;
    animation: tv-announcements-scroll linear infinite;
}
@keyframes tv-announcements-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ===== Onboarding overlay (Admin portal) ================================ */
.onboarding-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.65);
    z-index: 1050; display: flex; align-items: center; justify-content: center;
}
.onboarding-panel {
    background: #1e293b; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem; padding: 1.75rem; max-width: 580px; width: 94vw;
    max-height: 90vh; overflow-y: auto; color: #f8fafc;
}
.onboarding-steps { display: flex; flex-direction: column; gap: 0.75rem; }
.onboarding-step {
    display: flex; gap: 0.75rem; padding: 0.75rem 1rem;
    border-radius: 0.5rem; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06); transition: background 0.15s;
}
.onboarding-step.active { background: rgba(13,148,136,0.15); border-color: rgba(13,148,136,0.4); }
.step-num {
    flex: 0 0 2rem; height: 2rem; border-radius: 50%;
    background: #0d9488; color: #fff; display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: 0.875rem;
}
.onboarding-step.active .step-num { background: #2dd4bf; color: #0f172a; }
.step-body h6 { margin: 0 0 0.2rem; font-size: 0.9rem; font-weight: 600; }
.step-body p  { margin: 0; font-size: 0.8rem; color: #94a3b8; }

/* ===== Announcement source editor (Admin portal) ======================== */
.announcement-sources { display: flex; flex-direction: column; gap: 0.5rem; }
.announcement-source-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07); border-radius: 0.4rem;
}
.card-inner {
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.12);
}

/* ===== FAQ accordion (Help tab) ========================================= */
.faq-item summary {
    cursor: pointer; list-style: none; padding: 0.35rem 0;
    color: #1e293b; font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: #0d9488; }
.faq-item summary:hover { color: #0d9488; }
.faq-item p { color: #475569; }
.faq-item p { padding-left: 0.25rem; }

/* ===== Auth / login shell =============================================== */
.auth-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #e8f5f4 0%, #f7f8fb 60%, #eef2ff 100%);
}
.auth-card {
    background: #ffffff; border: 1px solid rgba(0,0,0,0.08);
    border-radius: 0.75rem; padding: 2rem 2.25rem; width: 100%; max-width: 420px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.auth-logo-row { margin-bottom: 1.25rem; text-align: center; }
.auth-brand { font-size: 1.5rem; font-weight: 800; color: #0d9488; letter-spacing: -0.02em; }
.auth-title { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin: 0 0 0.25rem; }
.auth-sub { font-size: 0.875rem; color: #64748b; margin: 0 0 1.25rem; }
.auth-divider {
    text-align: center; position: relative; color: #94a3b8; font-size: 0.78rem;
    margin: 1rem 0;
}
.auth-divider::before, .auth-divider::after {
    content: ""; position: absolute; top: 50%; width: 42%; height: 1px;
    background: rgba(0,0,0,0.1);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }
.auth-footer { font-size: 0.85rem; color: #64748b; text-align: center; }

/* ===== Account Settings page =========================================== */
.acct-settings-page { max-width: 860px; padding-bottom: 3rem; }
.acct-settings-header { margin-bottom: 1.75rem; }
.acct-settings-title  { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin: 0 0 0.3rem; }
.acct-settings-sub    { font-size: 0.875rem; color: #64748b; margin: 0; }
.acct-settings-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem;
    margin-bottom: 1.5rem; overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.acct-settings-card-header {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.1rem 1.4rem; background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.acct-settings-card-icon {
    flex: 0 0 2.5rem; height: 2.5rem; border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.acct-icon-users    { background: #eff6ff; color: #2563eb; }
.acct-icon-security { background: #f0fdf4; color: #16a34a; }
.acct-icon-network  { background: #fff7ed; color: #ea580c; }
.acct-icon-billing  { background: #fdf4ff; color: #9333ea; }
.acct-settings-card-title { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 0.2rem; }
.acct-settings-card-desc  { font-size: 0.82rem; color: #64748b; margin: 0; line-height: 1.4; }
.acct-settings-card-body  { padding: 1.25rem 1.4rem; }
/* Legacy admin heading classes used by Help & other sections */
.admin-section-title {
    font-size: 1.4rem; font-weight: 700; color: #0f172a;
    margin: 0 0 1.25rem; padding-bottom: 0.6rem;
    border-bottom: 2px solid #e2e8f0;
}
.admin-subsection { margin-bottom: 1.5rem; }
.admin-subsection-title {
    font-size: 0.78rem; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.07em;
    margin: 0 0 0.75rem; padding-bottom: 0.35rem;
    border-bottom: 1px solid #e2e8f0;
}


/* ================================================================
   Template Editor -- full-screen drag-and-drop layout editor
   ================================================================ */

/* App shell */
.te-app { display:flex; flex-direction:column; height:100vh; width:100vw; overflow:hidden;
          background:#0f172a; color:#e2e8f0; font-family:system-ui,-apple-system,sans-serif; }

/* Loading splash */
.te-splash { display:flex; flex-direction:column; align-items:center; justify-content:center;
             height:100vh; background:#0f172a; }

/* ---- Top chrome bar ---- */
.te-topbar { display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
             background:#1e293b; border-bottom:1px solid #334155; padding:0.4rem 1rem;
             flex-shrink:0; flex-wrap:wrap; min-height:3rem; }
.te-topbar-left  { display:flex; align-items:center; gap:0.5rem; flex:1 1 auto; }
.te-topbar-center{ display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }
.te-topbar-right { display:flex; align-items:center; gap:0.5rem; }

.te-palette-label { font-size:0.72rem; color:#94a3b8; white-space:nowrap; }

/* Template title in topbar */
.te-template-name-wrap { display:flex; align-items:center; gap:0.25rem; }
.te-title      { font-weight:600; font-size:0.95rem; cursor:pointer; }
.te-title-input{ background:#0f172a; border:1px solid #38bdf8; border-radius:4px;
                 color:#e2e8f0; padding:0.1rem 0.4rem; font-size:0.95rem; width:18rem; }
.te-badge-builtin { font-size:0.65rem; background:#334155; color:#94a3b8;
                    border-radius:3px; padding:0.1rem 0.4rem; }

/* Status strip */
.te-status { display:flex; align-items:center; justify-content:space-between;
             padding:0.3rem 1.2rem; font-size:0.82rem; flex-shrink:0; }
.te-status-ok    { background:#065f46; color:#6ee7b7; }
.te-status-error { background:#7f1d1d; color:#fca5a5; }
.te-status-close { background:none; border:none; color:inherit; cursor:pointer;
                   font-size:1rem; padding:0; margin-left:1rem; }

/* ---- Main workspace (3-column) ---- */
.te-workspace { display:flex; flex:1 1 0; overflow:hidden; }

/* Left and right inspector panels */
.te-panel { width:240px; flex-shrink:0; background:#1e293b;
            border-right:1px solid #334155; overflow-y:auto;
            padding:0.75rem 0.6rem; display:flex; flex-direction:column; gap:0.5rem; }
.te-panel-right { border-right:none; border-left:1px solid #334155; }

.te-section { background:#0f172a; border-radius:6px; padding:0.6rem 0.6rem 0.75rem; }
.te-section-title { font-size:0.72rem; font-weight:700; text-transform:uppercase;
                    color:#64748b; letter-spacing:0.08em; margin:0 0 0.5rem; }
.te-hint { color:#64748b; font-size:0.8rem; padding:0.5rem 0.25rem; }

/* Inputs inside inspector */
.te-lbl   { display:flex; flex-direction:column; gap:0.15rem; font-size:0.78rem;
            color:#94a3b8; margin-bottom:0.4rem; }
.te-input { background:#0f172a; border:1px solid #334155; border-radius:4px;
            color:#e2e8f0; padding:0.2rem 0.4rem; font-size:0.8rem; width:100%; }
.te-input:focus { border-color:#38bdf8; outline:none; }
.te-textarea { resize:vertical; min-height:3rem; }
.te-select { background:#0f172a; border:1px solid #334155; border-radius:4px;
             color:#e2e8f0; padding:0.2rem 0.4rem; font-size:0.8rem; width:100%; }
.te-color  { height:2rem; width:100%; padding:0.1rem 0.2rem; border:1px solid #334155;
             border-radius:4px; background:#0f172a; cursor:pointer; }
.te-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0.3rem; }
.te-small  { font-size:0.72rem; color:#94a3b8; }

/* Layer order buttons */
.te-layer-btns { display:flex; gap:0.25rem; flex-wrap:wrap; }

/* Layers panel list */
.te-layers { display:flex; flex-direction:column; gap:0.25rem; }
.te-layer-row { display:flex; gap:0.4rem; align-items:center; cursor:pointer;
                padding:0.3rem 0.4rem; border-radius:4px; border:1px solid transparent;
                font-size:0.78rem; }
.te-layer-row:hover    { background:#0f172a; border-color:#334155; }
.te-layer-selected     { background:#0c4a6e; border-color:#38bdf8 !important; }
.te-layer-type         { font-weight:600; color:#7dd3fc; white-space:nowrap; }
.te-layer-content      { color:#64748b; font-size:0.72rem; overflow:hidden;
                         text-overflow:ellipsis; white-space:nowrap; }

/* ---- Canvas area ---- */
.te-canvas-wrap { flex:1 1 0; overflow:auto; background:#020617;
                  display:flex; align-items:center; justify-content:center; padding:1rem; }
.te-canvas { position:relative; width:100%; max-width:min(calc(100% - 2rem), calc((100vh - 5rem) * 16/9));
             aspect-ratio:16/9; overflow:hidden; flex-shrink:0;
             box-shadow:0 0 0 2px #334155, 0 8px 32px rgba(0,0,0,0.7);
             border-radius:4px; }

/* ---- Widget boxes on canvas ---- */
.te-widget { position:absolute; cursor:move; box-sizing:border-box;
             border:1px dashed transparent; border-radius:2px;
             overflow:hidden; user-select:none; }
.te-widget:hover         { border-color:rgba(56,189,248,0.5); }
.te-widget-selected      { border:2px solid #38bdf8 !important;
                           box-shadow:0 0 0 1px rgba(56,189,248,0.3); }
.te-widget-rect          { }

/* Small type badge shown in edit mode */
.te-widget-label { position:absolute; top:1px; left:2px; font-size:0.55rem;
                   color:rgba(255,255,255,0.45); line-height:1; pointer-events:none;
                   white-space:nowrap; z-index:100; }
.te-widget-preview-text { width:100%; height:100%; display:flex; align-items:center;
                          justify-content:inherit; overflow:hidden; }

/* Resize handle (bottom-right corner) */
.te-resize-handle { position:absolute; bottom:0; right:0; width:14px; height:14px;
                    cursor:se-resize; background:linear-gradient(135deg, transparent 50%, #38bdf8 50%);
                    opacity:0; z-index:200; }
.te-widget-selected .te-resize-handle { opacity:1; }
.te-widget:hover .te-resize-handle    { opacity:0.6; }

/* ---- Button system ---- */
.te-btn { padding:0.28rem 0.6rem; border-radius:5px; border:none; cursor:pointer;
          font-size:0.8rem; font-weight:500; line-height:1.4; white-space:nowrap;
          transition:opacity 0.15s; }
.te-btn:disabled { opacity:0.45; cursor:not-allowed; }
.te-btn-primary   { background:#0e7490; color:#fff; }
.te-btn-primary:hover:not(:disabled)   { background:#0891b2; }
.te-btn-success   { background:#059669; color:#fff; }
.te-btn-success:hover:not(:disabled)   { background:#10b981; }
.te-btn-secondary { background:#334155; color:#cbd5e1; }
.te-btn-secondary:hover:not(:disabled) { background:#475569; }
.te-btn-danger    { background:#991b1b; color:#fca5a5; }
.te-btn-danger:hover:not(:disabled)    { background:#b91c1c; }
.te-btn-ghost     { background:transparent; color:#94a3b8; }
.te-btn-ghost:hover:not(:disabled)     { color:#e2e8f0; background:#1e293b; }
.te-btn-add       { background:#1e293b; color:#7dd3fc; border:1px solid #334155; font-size:0.75rem; }
.te-btn-add:hover { background:#0c4a6e; border-color:#38bdf8; }
.te-btn-icon      { background:none; border:none; color:#64748b; padding:0 0.2rem; cursor:pointer;
                    font-size:0.85rem; line-height:1; }
.te-btn-icon:hover{ color:#e2e8f0; }
.te-btn-sm        { padding:0.15rem 0.4rem; font-size:0.72rem; }
.te-icon          { font-style:normal; }


/* Template-rendered widget div on the TV display */
.tv-template-widget {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tv-marquee-inner {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;
    animation: tv-marquee-scroll 40s linear infinite;
}


/* ===== Admin monitor page 2-column grid ===== */
/* Settings tabs (wide) on the left; persistent live preview on the right. */
/* Templates now live inside the settings tabs as their own tab pane.     */
.admin-layout {
    display: grid;
    grid-template-columns: minmax(360px, 3fr) minmax(260px, 1.5fr);
    gap: 1.5rem;
    align-items: start;
}
.admin-tabs-col  { min-width: 0; }
.admin-preview-col { min-width: 0; }
/* Preview label row: title + optional applied-template badge */
.admin-preview-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* Blue pill: shows which template is currently applied */
.preview-template-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    background: #0ea5e9;
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* On viewports narrower than 900px stack vertically */
@media (max-width: 900px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }
}
/* ===== Template Gallery (Admin.razor - inside Templates tab) ===== */
.template-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.template-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    padding: 1rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: box-shadow 0.15s;
}
.template-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.template-card-active {
    border-color: #0ea5e9;
    background: #f0f9ff;
    box-shadow: 0 0 0 2px #38bdf840;
}
.template-card-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.template-card-name { font-weight: 600; font-size: 0.95rem; flex: 1; }
.template-badge-builtin {
    font-size: 0.65rem;
    background: #f0f4ff;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
    border-radius: 0.3rem;
    padding: 0.1rem 0.35rem;
    white-space: nowrap;
}
.template-card-desc { font-size: 0.8rem; color: #6b7280; margin: 0; flex: 1; }
.template-card-meta { font-size: 0.75rem; }
.template-card-actions { display: flex; gap: 0.5rem; margin-top: auto; flex-wrap: wrap; }

/* ---- Admin pairing-code display box ---- */
.pairing-code-box {
    background: #0f1e38;
    border: 1px solid #1d3a6b;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    display: inline-block;
    max-width: 100%;
}
.pairing-code-digits {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.35em;
    color: #38bdf8;
    font-variant-numeric: tabular-nums;
}

/* ---- Staff pad: spacing for pair-with-TV input ---- */
.letter-spacing-wide { letter-spacing: 0.3em; font-size: 1.3rem; }