:root {
  --ink: #17201d;
  --muted: #68736e;
  --line: #dfe4e1;
  --canvas: #f5f7f5;
  --surface: #ffffff;
  --nav: #142520;
  --nav-soft: #20352e;
  --green: #4e7d68;
  --green-dark: #315b49;
  --green-pale: #e5f1eb;
  --coral: #d46d52;
  --coral-pale: #f8e8e3;
  --violet: #7665a8;
  --violet-pale: #eeebf7;
  --blue: #4d7798;
  --blue-pale: #e6eef4;
  --peach: #d79b63;
  --peach-pale: #f7ecdf;
  --red: #b64c4c;
  --red-pale: #f8e4e4;
  --shadow: 0 12px 32px rgba(28, 45, 38, .07);
  --radius: 18px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); font-family: "DM Sans", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(78, 125, 104, .26); outline-offset: 2px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Manrope", sans-serif; }
h1 { margin-bottom: 0; font-size: clamp(1.55rem, 2.7vw, 2.25rem); letter-spacing: -.035em; }
h2 { margin-bottom: 0; font-size: 1.16rem; letter-spacing: -.02em; }
h3 { margin-bottom: 0; }
small { display: block; color: var(--muted); font-size: .76rem; }

.app-shell { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 30px 18px 20px; color: #eaf1ed; background: var(--nav); }
.brand { display: flex; align-items: center; gap: 11px; margin: 0 10px 36px; color: #fff; font: 700 1.3rem "Manrope", sans-serif; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: grid; grid-template-columns: repeat(3, 5px); align-items: end; justify-content: center; gap: 3px; padding: 8px; border-radius: 10px; color: var(--nav); background: #d1df6a; }
.brand-mark span { display: block; width: 5px; border-radius: 3px; background: currentColor; }
.brand-mark span:nth-child(1) { height: 11px; }.brand-mark span:nth-child(2) { height: 18px; }.brand-mark span:nth-child(3) { height: 14px; }
.main-nav { display: grid; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; border: 0; border-radius: 10px; color: #acbbb5; background: transparent; text-align: left; transition: background .2s, color .2s; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-item.is-active { color: #fff; background: var(--nav-soft); }
.nav-icon { width: 19px; color: #cbd873; font-size: 1.12rem; text-align: center; }
.system-health { display: grid; gap: 9px; margin: auto 10px 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09); color: #b7c4bf; font-size: .75rem; }
.system-health div { display: flex; align-items: center; gap: 8px; }
.system-health .eyebrow { color: #6f837b; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #80c596; box-shadow: 0 0 0 4px rgba(128,197,150,.1); }
.profile-button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 12px 8px; border: 0; border-top: 1px solid rgba(255,255,255,.09); color: #eef4f1; background: transparent; text-align: left; }
.profile-button small { color: #7f928a; }.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--nav); background: #cbd873; font-size: .75rem; font-weight: 600; }

.main-content { min-width: 0; padding: 34px clamp(22px, 4vw, 58px) 60px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar .eyebrow { margin-bottom: 6px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.eyebrow { margin-bottom: 5px; color: #87918d; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 15px; border: 1px solid transparent; border-radius: 10px; font-weight: 600; transition: transform .15s, background .15s; }
.button:hover { transform: translateY(-1px); }.button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.button-primary { color: #fff; background: var(--green-dark); }.button-primary:hover { background: #274c3d; }
.button-secondary { color: var(--ink); border-color: var(--line); background: var(--surface); }.button-secondary:hover { background: #f1f4f2; }
.icon-button, .mobile-menu { position: relative; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); }
.notification-dot { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.mobile-menu { display: none; }
.source-strip { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 25px 0 22px; padding: 11px 15px; border: 1px solid #d9e7df; border-radius: 12px; color: #496156; background: #edf5f0; font-size: .8rem; }
.source-strip > div { display: flex; align-items: center; gap: 9px; }.pulse { width: 8px; height: 8px; border-radius: 50%; background: #68aa80; box-shadow: 0 0 0 5px rgba(104,170,128,.13); }
.text-button { padding: 3px; border: 0; color: var(--green-dark); background: transparent; font-weight: 600; }

.view { display: none; animation: reveal .22s ease; }.view.is-active { display: block; }
@keyframes reveal { from { opacity: .3; transform: translateY(4px); } }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card, .panel, .display-card, .integration-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.metric-card { min-width: 0; overflow: hidden; padding: 18px 19px; }.metric-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .78rem; }
.metric-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-weight: 600; }.metric-icon.lavender { color: var(--violet); background: var(--violet-pale); }.metric-icon.mint { color: var(--green); background: var(--green-pale); }.metric-icon.peach { color: #aa6b37; background: var(--peach-pale); }.metric-icon.blue { color: var(--blue); background: var(--blue-pale); }
.metric-value { display: block; margin-top: 12px; font: 700 1.85rem "Manrope", sans-serif; letter-spacing: -.04em; }.metric-value small { display: inline; font-size: .9rem; }.metric-value.time { font-size: 1.55rem; }
.metric-card p { margin: 5px 0 0; color: var(--muted); font-size: .73rem; overflow-wrap: anywhere; }.positive { color: var(--green); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr); gap: 16px; margin-top: 16px; }
.panel { padding: 22px; }.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.event-list { display: grid; }.event-row { display: grid; grid-template-columns: 46px 3px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 61px; border-bottom: 1px solid #edf0ee; }.event-row:last-child { border-bottom: 0; }
.event-row time { font-size: .78rem; font-weight: 600; }.event-row strong { display: block; margin-bottom: 3px; font-size: .86rem; }.event-line { align-self: stretch; width: 3px; margin: 9px 0; border-radius: 3px; }.event-line.violet { background: var(--violet); }.event-line.coral { background: var(--coral); }.event-line.green { background: var(--green); }.event-line.blue { background: var(--blue); }
.tag { display: inline-flex; width: max-content; padding: 4px 8px; border-radius: 999px; font-size: .65rem; font-style: normal; font-weight: 600; }.tag.muted { color: var(--muted); background: #eef1ef; }.tag.coral { color: #a74934; background: var(--coral-pale); }.tag.green { color: var(--green-dark); background: var(--green-pale); }.tag.blue { color: #38637f; background: var(--blue-pale); }
.quick-actions { display: grid; }.quick-actions button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 12px 0; border: 0; border-bottom: 1px solid #edf0ee; color: var(--ink); background: transparent; text-align: left; }.quick-actions button:last-child { border-bottom: 0; }.quick-actions button > span:last-child { color: #9aa39f; font-size: 1.4rem; }.quick-actions button:hover strong { color: var(--green); }
.quick-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-weight: 600; }.quick-icon.violet { color: var(--violet); background: var(--violet-pale); }.quick-icon.green { color: var(--green); background: var(--green-pale); }.quick-icon.peach { color: #a96d3b; background: var(--peach-pale); }.quick-icon.red { color: var(--red); background: var(--red-pale); }
.display-overview { margin-top: 16px; }.display-summary { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 20px; }.display-summary > div { display: flex; align-items: center; gap: 12px; }.screen-shape { display: grid; place-items: center; width: 47px; height: 31px; border: 2px solid #8da098; border-radius: 4px; }.screen-shape.portrait { width: 27px; height: 42px; margin-inline: 10px; }.screen-shape i { width: 60%; height: 2px; background: #8da098; }.next-change { padding-left: 20px; border-left: 1px solid var(--line); }.clock { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--blue); background: var(--blue-pale); font-size: 1.3rem; }

.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 8px 0 22px; }.section-heading h2 { font-size: 1.65rem; }.section-heading p:last-child { max-width: 650px; margin: 7px 0 0; color: var(--muted); font-size: .88rem; }
.table-panel { padding: 0; overflow: hidden; }.toolbar { display: flex; justify-content: space-between; gap: 12px; padding: 17px; border-bottom: 1px solid var(--line); }.search-field { display: flex; align-items: center; gap: 8px; min-width: 300px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; }.search-field input { width: 100%; border: 0; outline: 0; }.toolbar select { padding: 8px 30px 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.table-row { display: grid; grid-template-columns: 1.5fr .8fr .8fr .6fr .55fr 32px; align-items: center; gap: 15px; min-width: 800px; padding: 15px 18px; border-bottom: 1px solid #edf0ee; font-size: .78rem; }.table-row:last-child { border-bottom: 0; }.table-head { color: var(--muted); background: #f8faf8; font-size: .67rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }.table-row strong { display: block; margin-bottom: 3px; }.source-label { color: var(--green-dark); font-weight: 600; }.row-menu { border: 0; color: var(--muted); background: transparent; }.data-table { overflow-x: auto; }
.display-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.display-card { display: grid; grid-template-columns: minmax(180px, .9fr) 1.1fr; overflow: hidden; }.display-canvas { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; padding: 22px; color: white; overflow: hidden; }.display-canvas::after { content: ""; position: absolute; inset: 0; background: linear-gradient(15deg, rgba(8,20,16,.6), transparent 75%); }.display-canvas > * { position: relative; z-index: 1; }.display-canvas strong { font: 700 1.5rem "Manrope"; }.display-canvas small { color: rgba(255,255,255,.78); }.display-canvas.concert { background: radial-gradient(circle at 75% 20%, #d48264, transparent 35%), linear-gradient(135deg, #34284c, #735f81); }.display-canvas.daily { background: linear-gradient(150deg, #294c40, #4f826d); }.display-canvas.restaurant { background: radial-gradient(circle at 80% 20%, #d9aa72, transparent 30%), linear-gradient(145deg, #403028, #7b5942); }.display-canvas.neutral { background: linear-gradient(140deg, #283d45, #587381); }.tiny-logo { position: absolute; top: 18px; left: 20px; font-size: .58rem; font-weight: 600; letter-spacing: .12em; }.display-card-body { display: flex; flex-direction: column; justify-content: center; padding: 22px; }.display-card-body > div { display: flex; justify-content: space-between; gap: 8px; }.online-label { color: var(--green); font-size: .7rem; font-weight: 600; }.display-card code { margin: 11px 0; color: var(--muted); font-size: .72rem; }.display-card p { margin: 0 0 20px; color: var(--muted); font-size: .78rem; }
.schedule-panel { overflow-x: auto; }.legend { display: flex; gap: 15px; color: var(--muted); font-size: .7rem; }.legend span { display: flex; align-items: center; gap: 5px; }.legend-dot { width: 8px; height: 8px; border-radius: 2px; }.legend-dot.event { background: var(--coral); }.legend-dot.preset { background: var(--green); }.legend-dot.default { background: #bdc5c1; }.schedule-grid { display: grid; grid-template-columns: 90px repeat(5, minmax(110px, 1fr)); min-width: 680px; margin-top: 20px; }.schedule-grid > * { min-height: 48px; padding: 12px 10px; border-right: 1px solid #edf0ee; border-bottom: 1px solid #edf0ee; }.schedule-grid > strong { font-size: .76rem; }.hour { color: var(--muted); font-size: .68rem; }.block { margin: 4px; min-height: 40px; border: 0; border-radius: 7px; font-size: .72rem; font-weight: 600; }.block.event { color: #974731; background: var(--coral-pale); }.block.preset { color: var(--green-dark); background: var(--green-pale); }.block.default { color: var(--muted); background: #eff2f0; }
.public-calendar { padding: clamp(22px, 4vw, 45px); border-radius: 24px; color: #f6f5ef; background: #1b2421; box-shadow: var(--shadow); }.calendar-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }.calendar-header h2 { font-size: clamp(2rem, 4vw, 3.7rem); }.calendar-kicker { color: #ccd76e; font-size: .62rem; font-weight: 600; letter-spacing: .13em; }.calendar-search { display: flex; align-items: center; gap: 8px; width: min(310px, 100%); padding: 10px 14px; border-bottom: 1px solid #59635f; }.calendar-search input { width: 100%; border: 0; outline: 0; color: #fff; background: transparent; }.calendar-search input::placeholder { color: #8c9994; }.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }.filter { padding: 8px 14px; border: 1px solid #44504b; border-radius: 999px; color: #b8c2bd; background: transparent; }.filter.is-active, .filter:hover { color: #1b2421; border-color: #d1db78; background: #d1db78; }.public-event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.public-event { overflow: hidden; border-radius: 13px; background: #28312e; }.public-event > div:last-child { padding: 17px; }.public-event h3 { margin: 7px 0 4px; font-size: 1rem; }.public-event p { color: #aeb8b4; font-size: .76rem; }.event-image { position: relative; height: 155px; background: #455; }.event-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(20deg, rgba(0,0,0,.55), transparent); }.event-image span { position: absolute; left: 15px; bottom: 13px; z-index: 1; font: 700 1.35rem "Manrope"; line-height: .85; }.event-image small { color: white; font-size: .6rem; letter-spacing: .12em; }.image-one { background: radial-gradient(circle at 70% 30%, #cf8068, transparent 25%), linear-gradient(135deg, #4e3c64, #896f77); }.image-two { background: radial-gradient(circle at 25% 30%, #d9b778, transparent 22%), linear-gradient(135deg, #274c47, #647f68); }.image-three { background: radial-gradient(circle at 70% 25%, #79a7c4, transparent 23%), linear-gradient(135deg, #734d56, #c98267); }.ticket-status { color: #cdd878; font-size: .67rem; }.ticket-status.free { color: #86c5a1; }.empty-calendar { margin: 20px 0 0; color: #b8c2bd; }
.integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.integration-card { position: relative; padding: 23px; }.integration-card.is-leading { border-color: #8eb29f; box-shadow: 0 0 0 2px rgba(78,125,104,.08), var(--shadow); }.integration-logo { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 13px; color: white; font: 700 .85rem "Manrope"; }.integration-logo.easy { background: var(--green-dark); }.integration-logo.crew { background: var(--violet); }.integration-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.integration-title h3 { font-size: 1.15rem; }.integration-title p { margin: 3px 0 0; color: var(--muted); font-size: .75rem; }.integration-card ul { margin: 20px 0; padding: 0; list-style: none; }.integration-card li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf0ee; color: var(--muted); font-size: .75rem; }.integration-card li strong { color: var(--ink); }.integration-card .connected { color: var(--green); }.integration-card .button { width: 100%; }.audit-note { color: var(--muted); font-size: .75rem; }.mapping-panel { margin-top: 18px; }.mapping-list > div { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid #edf0ee; font-size: .8rem; }.mapping-list > div:last-child { border-bottom: 0; }.mapping-list span:nth-child(2) { color: #a6afab; }.mapping-list strong { color: var(--green-dark); }

/* Slides and channel builder */
.section-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.workflow-line { display: flex; align-items: center; gap: 10px; margin: -5px 0 17px; color: #9aa39f; font-size: .72rem; font-weight: 600; }
.workflow-line span { padding: 6px 10px; border-radius: 999px; background: #e9edeb; }.workflow-line span.is-current { color: var(--green-dark); background: var(--green-pale); }.workflow-line i { font-style: normal; }
.channel-studio { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(430px, 1.28fr); gap: 18px; align-items: start; }
.slide-library-panel, .channel-builder-panel { min-width: 0; }
.slide-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 8px; }.search-field.compact { min-width: 0; padding: 8px 10px; }.slide-toolbar select, .channel-settings-row select { width: 100%; padding: 9px 28px 9px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface); }
.drag-hint { margin: 10px 0; color: var(--muted); font-size: .69rem; }
.slide-library { display: grid; gap: 9px; max-height: 570px; overflow-y: auto; padding-right: 3px; }
.slide-library-card { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--surface); text-align: left; transition: border-color .15s, transform .15s, background .15s; }
.slide-library-card:hover, .slide-library-card.is-selected { border-color: #91b09f; background: #f6faf7; transform: translateY(-1px); }.slide-library-card[hidden] { display: none; }.slide-library-card.dragging { opacity: .45; }
.slide-thumb { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 16 / 9; padding: 8px; overflow: hidden; border-radius: 7px; color: white; background: linear-gradient(135deg, #2d493f, #679076); }
.slide-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(15deg, rgba(0,0,0,.45), transparent 70%); }.slide-thumb > * { position: relative; z-index: 1; }.slide-thumb strong { font-size: .52rem; line-height: 1.1; }.slide-thumb small { color: rgba(255,255,255,.75); font-size: .42rem; }
.slide-thumb.type-text { color: var(--ink); background: #dfe7c0; }.slide-thumb.type-image { background: linear-gradient(140deg, #544267, #c17865); }.slide-thumb.type-video { background: radial-gradient(circle at 70% 25%, #c69c64, transparent 30%), #344c54; }.slide-thumb.type-web { background: linear-gradient(140deg, #345a78, #79a5b5); }.slide-thumb.type-pdf { background: linear-gradient(140deg, #6f3e3e, #c77868); }
.slide-card-info { min-width: 0; }.slide-card-info strong, .slide-card-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.slide-card-info strong { display: block; margin-bottom: 3px; font-size: .78rem; }.slide-card-info small { font-size: .67rem; }.drag-handle { color: #9fa8a4; font-size: 1.2rem; }
.channel-builder-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.channel-builder-head p { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; color: var(--muted); font-size: .68rem; }.channel-builder-head .status-dot { display: inline-block; }
.channel-settings-row { display: grid; grid-template-columns: 1.15fr 1fr auto; gap: 10px; margin: 17px 0; padding: 13px; border-radius: 11px; background: #f4f6f5; }.channel-settings-row label { color: var(--muted); font-size: .66rem; }.channel-settings-row select { display: block; margin-top: 5px; background: #fff; }.toggle-label { display: flex; align-items: center; gap: 7px; padding-top: 20px; color: var(--ink) !important; font-weight: 600; white-space: nowrap; }
.playlist-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 18px 0 8px; }.playlist-head strong { display: block; font-size: .8rem; }.playlist-head > span { color: var(--muted); font-size: .64rem; }
.channel-playlist { display: grid; gap: 8px; min-height: 90px; }
.playlist-item { display: grid; grid-template-columns: 28px 86px minmax(120px, 1fr) 125px 78px 30px; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }.playlist-item.drag-over { border-color: var(--green); background: var(--green-pale); }.playlist-item.dragging { opacity: .4; }.playlist-order { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--green-dark); background: var(--green-pale); font-size: .66rem; font-weight: 600; }.playlist-item .slide-thumb { width: 86px; }.playlist-item-info { min-width: 0; }.playlist-item-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }.playlist-item-info small { font-size: .64rem; }.duration-field { display: flex; align-items: center; gap: 4px; }.duration-field input { width: 52px; padding: 7px; border: 1px solid var(--line); border-radius: 7px; text-align: right; }.duration-field span { color: var(--muted); font-size: .65rem; }.transition-field { display: grid; gap: 3px; color: var(--muted); font-size: .55rem; }.transition-field select { width: 100%; min-width: 0; padding: 7px 5px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fff; font-size: .62rem; }.remove-slide { width: 28px; height: 28px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; }.remove-slide:hover { color: var(--red); background: var(--red-pale); }
.playlist-drop { width: 100%; margin-top: 9px; padding: 13px; border: 1px dashed #aebbb4; border-radius: 11px; color: var(--green-dark); background: #f8faf9; font-weight: 600; }.playlist-drop.drag-over { border-color: var(--green); background: var(--green-pale); }
.builder-footer { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); }.builder-footer > span { margin-right: auto; color: var(--muted); font-size: .66rem; }

/* Display scheduler */
.scheduler-panel { padding: 0; overflow: hidden; }.scheduler-topbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 19px; border-bottom: 1px solid var(--line); }.week-switch { display: flex; align-items: center; gap: 12px; }.week-switch button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; }.week-switch strong { font-size: .8rem; }.schedule-status { display: flex; align-items: center; gap: 7px; color: var(--green-dark); font-size: .7rem; font-weight: 600; }
.day-tabs { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 18px; border-bottom: 1px solid var(--line); }.day-tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 8px 10px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; }.day-tabs button strong { color: var(--ink); }.day-tabs button.is-active { color: var(--green-dark); border-bottom-color: var(--green); background: #f5f9f6; }
.scheduler-workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 590px; }.scheduler-sidebar { border-right: 1px solid var(--line); background: #fafbfa; }.scheduler-sidebar section { padding: 18px; border-bottom: 1px solid var(--line); }.scheduler-side-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }.scheduler-side-head h3 { font-size: .86rem; }.target-list { display: grid; gap: 6px; }.target-list label { display: grid; grid-template-columns: auto 30px minmax(0,1fr); align-items: center; gap: 8px; padding: 8px; border: 1px solid transparent; border-radius: 9px; background: #fff; }.target-list label:has(input:checked) { border-color: #bdd2c6; background: var(--green-pale); }.target-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--green-dark); background: #edf2ef; }.target-list strong { font-size: .72rem; }.target-list small { font-size: .61rem; }.selected-targets { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 8px; color: var(--green-dark); background: #edf5f0; font-size: .66rem; }
.schedule-content-list { display: grid; gap: 7px; }.schedule-content-list button { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; text-align: left; }.schedule-content-list button:hover, .schedule-content-list button.is-selected { border-color: #8eb29f; background: var(--green-pale); }.schedule-content-list button.dragging { opacity: .4; }.schedule-content-list strong { font-size: .7rem; }.schedule-content-list small { font-size: .6rem; }.schedule-content-list b { color: #a0aaa5; font-size: .9rem; }.content-swatch { width: 7px; height: 32px; border-radius: 5px; }.content-swatch.coral { background: var(--coral); }.content-swatch.green { background: var(--green); }.content-swatch.blue { background: var(--blue); }.content-swatch.muted { background: #aeb7b3; }
.schedule-canvas-wrap { min-width: 0; padding: 18px; overflow-x: auto; }.schedule-canvas-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 13px; }.schedule-canvas-head h3 { font-size: .92rem; }.visual-schedule { display: grid; grid-template-columns: 82px repeat(12, minmax(62px, 1fr)); min-width: 830px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.schedule-hour, .schedule-lane-label, .schedule-cell { min-height: 64px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.schedule-hour { min-height: 33px; padding: 9px 6px; color: var(--muted); font-size: .6rem; }.schedule-lane-label { display: flex; align-items: center; padding: 7px; background: #f7f9f8; font-size: .66rem; font-weight: 600; }.schedule-cell { position: relative; padding: 4px; background: repeating-linear-gradient(135deg, transparent, transparent 8px, rgba(0,0,0,.012) 8px, rgba(0,0,0,.012) 9px); }.schedule-cell:hover, .schedule-cell.drag-over { background: var(--green-pale); }.schedule-cell::after { content: attr(data-time); position: absolute; right: 4px; bottom: 3px; color: #aab3af; font-size: .5rem; opacity: 0; }.schedule-cell:hover::after { opacity: 1; }
.schedule-block { position: absolute; inset: 5px 4px; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 6px; border: 0; border-radius: 7px; text-align: left; overflow: hidden; }.schedule-block strong, .schedule-block small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.schedule-block strong { font-size: .62rem; }.schedule-block small { font-size: .52rem; }.schedule-block.event { color: #8f3e2c; background: var(--coral-pale); }.schedule-block.preset { color: var(--green-dark); background: var(--green-pale); }.schedule-block.default { color: #536d80; background: var(--blue-pale); }.schedule-help { display: flex; justify-content: space-between; gap: 15px; margin-top: 10px; color: var(--muted); font-size: .62rem; }

.schedule-assignment-options { display: grid; gap: 7px; margin-top: 12px; padding: 11px; border-radius: 10px; background: #f1f4f2; }.schedule-assignment-options label { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 7px; color: var(--muted); font-size: .62rem; font-weight: 600; }.schedule-assignment-options select { width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fff; }.schedule-block.priority-high { box-shadow: inset 3px 0 #dc8a3b; }.schedule-block.priority-takeover { color: #842a26; background: #ffd8d3; box-shadow: inset 4px 0 #ba332d; }

/* Operations, safety and proof of play */
.ops-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 18px 0; }.ops-metrics article { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }.ops-metrics strong { display: block; font: 700 1.45rem "Manrope"; }.ops-metrics small { color: var(--muted); font-size: .64rem; }.ops-indicator { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 6px rgba(47,112,79,.1); }.ops-indicator.healthy { background: #3a9a67; }.ops-indicator.warning { background: #d78b37; box-shadow: 0 0 0 6px rgba(215,139,55,.12); }.ops-indicator.cached { background: #5a879b; box-shadow: 0 0 0 6px rgba(90,135,155,.12); }.ops-indicator.plays { background: #7b648f; box-shadow: 0 0 0 6px rgba(123,100,143,.12); }
.operations-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(320px,.8fr); gap: 18px; align-items: start; }.device-monitor-panel { min-width: 0; overflow: hidden; }.device-monitor-table { overflow-x: auto; }.device-row { display: grid; grid-template-columns: 1.2fr .85fr 1fr .8fr 90px; align-items: center; gap: 10px; min-width: 760px; padding: 11px 6px; border-top: 1px solid var(--line); font-size: .7rem; }.device-row.device-head { padding-top: 4px; border-top: 0; color: var(--muted); font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.device-row span { display: grid; gap: 2px; }.device-row small { color: var(--muted); font-size: .57rem; }.player-state { font-size: .66rem; }.player-state.online { color: #258353; }.player-state.warning { color: #b66a23; }.player-state.offline { color: #ba3d38; }.cache-state { color: var(--muted); }.cache-state.ready { color: #39785a; }.device-actions { display: flex !important; grid-auto-flow: column; justify-content: end; gap: 4px !important; }.device-actions button, .device-actions a { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 7px; color: var(--green-dark); background: #fff; text-decoration: none; cursor: pointer; }
.emergency-panel { border-top: 4px solid #c84b43; }.emergency-panel textarea { width: 100%; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }.emergency-state { padding: 5px 8px; border-radius: 999px; color: #66736e; background: #edf1ef; font-size: .58rem; font-weight: 700; }.emergency-state.is-active { color: #fff; background: #ba332d; animation: emergencyPulse 1.5s infinite; }.emergency-targets { margin: 13px 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }.emergency-targets legend { padding: 0 5px; color: var(--muted); font-size: .62rem; font-weight: 600; }.emergency-targets > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.emergency-targets label { display: flex; align-items: center; gap: 7px; padding: 7px; border-radius: 7px; background: #f3f5f4; }.emergency-targets label span { display: grid; }.emergency-targets label strong { font-size: .64rem; }.emergency-targets label small { color: var(--muted); font-size: .54rem; }.emergency-targets details { grid-column: 1/-1; }.emergency-targets summary { margin: 4px 0; color: var(--green-dark); font-size: .62rem; cursor: pointer; }.emergency-targets details label { margin-top: 5px; }.emergency-preview { display: grid; min-height: 155px; align-content: center; padding: 20px; border-radius: 10px; color: #fff; background: repeating-linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.04) 10px,transparent 10px,transparent 20px),#a92f2a; }.emergency-preview small { font-weight: 700; letter-spacing: .14em; }.emergency-preview strong { margin-top: 7px; font: 700 1.45rem "Manrope"; }.emergency-preview p { margin: 8px 0 0; font-size: .72rem; line-height: 1.5; }.emergency-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 12px; }.emergency-button { border: 0; color: #fff; background: #b53630; }.safety-note { margin: 10px 0 0; color: var(--muted); font-size: .56rem; line-height: 1.45; }
.proof-panel { margin-top: 18px; }.proof-actions { display: flex; gap: 7px; }.proof-actions select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.proof-table { overflow-x: auto; }.proof-row { display: grid; grid-template-columns: .8fr 1fr 1.3fr 1fr .65fr; gap: 12px; min-width: 680px; padding: 10px 6px; border-top: 1px solid var(--line); font-size: .68rem; }.proof-row.proof-head { color: var(--muted); font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #3b9b69; animation: emergencyPulse 1.5s infinite; }.empty-proof { color: var(--muted); font-size: .72rem; }
.player-offline-indicator { position: fixed; top: 16px; left: 50%; z-index: 21; padding: 8px 13px; border-radius: 999px; color: #fff; background: #a85e21; font-size: .72rem; transform: translateX(-50%); }.emergency-takeover { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; align-content: center; padding: 7vw; color: #fff; background: repeating-linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.035) 18px,transparent 18px,transparent 36px),#a82723; text-align: center; }.emergency-symbol { display: grid; place-items: center; width: clamp(60px,9vw,120px); height: clamp(60px,9vw,120px); margin-bottom: 3vh; border: clamp(4px,.6vw,8px) solid #fff; border-radius: 50%; font: 800 clamp(2rem,6vw,5rem) "Manrope"; }.emergency-takeover small { font-size: clamp(.75rem,1.5vw,1.5rem); font-weight: 700; letter-spacing: .2em; }.emergency-takeover strong { max-width: 1100px; margin-top: 2vh; font: 700 clamp(2.8rem,8vw,8rem) "Manrope"; line-height: .95; }.emergency-takeover p { max-width: 1000px; margin: 3vh 0 0; font-size: clamp(1rem,2.5vw,2.4rem); line-height: 1.35; }.emergency-takeover > span { margin-top: 6vh; font-size: clamp(.7rem,1.2vw,1.2rem); opacity: .72; } @keyframes emergencyPulse { 50% { opacity: .55; } }

/* Slide dialogs */
.wide-dialog { width: min(720px, calc(100% - 28px)); }.slide-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 20px 0; }.slide-type-option { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 3px 9px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }.slide-type-option:has(input:checked), .slide-type-option.is-selected { border-color: var(--green); background: var(--green-pale); }.slide-type-option input { position: absolute; opacity: 0; }.slide-type-option strong { font-size: .74rem; }.slide-type-option small { grid-column: 2; font-size: .62rem; }.slide-type-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: var(--green-dark); background: #eef3f0; font-size: .7rem; font-weight: 700; }.slide-type-icon.event { background: var(--coral-pale); }.slide-type-icon.video { color: var(--blue); background: var(--blue-pale); }.slide-type-icon.pdf { color: var(--red); background: var(--red-pale); }.form-field { display: grid; gap: 6px; margin-top: 12px; color: var(--muted); font-size: .72rem; font-weight: 600; }.form-field input, .form-field select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; }.preview-dialog { width: min(860px, calc(100% - 28px)); }.preview-content { background: #121a17; }.preview-content .eyebrow { color: #87958f; }.channel-preview-screen { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 16/9; padding: 28px; border-radius: 12px; color: white; background: radial-gradient(circle at 75% 25%, #d57d5f, transparent 27%), linear-gradient(135deg, #34284c, #6e597d); overflow: hidden; }.channel-preview-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(20deg, rgba(0,0,0,.55), transparent); }.channel-preview-screen > * { position: relative; z-index: 1; }.channel-preview-screen > span { font-size: .62rem; letter-spacing: .15em; }.channel-preview-screen strong { display: block; font: 700 clamp(1.7rem, 5vw, 3.6rem) "Manrope"; }.channel-preview-screen small { color: #d8dfdc; }.channel-preview-screen p { margin: 7px 0 0; }.preview-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; color: #c6cfcb; font-size: .72rem; }

/* Detailed display management */
.display-management-summary { display: grid; grid-template-columns: repeat(3, 130px) minmax(250px, 1fr); gap: 12px; align-items: center; margin-bottom: 18px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }.display-management-summary > div { padding-right: 12px; border-right: 1px solid var(--line); }.display-management-summary strong { display: block; font: 700 1.35rem "Manrope"; }.display-management-summary span { color: var(--muted); font-size: .68rem; }.display-management-summary p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.detailed-display-card { grid-template-columns: minmax(190px, .8fr) minmax(280px, 1.2fr); }.detailed-display-card .display-card-body { padding: 18px; }.display-canvas.portrait-preview { min-height: 250px; margin: 16px 35px; border-radius: 9px; }.display-group-tags { display: flex !important; justify-content: flex-start !important; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }.display-group-tags span { padding: 4px 7px; border-radius: 999px; color: var(--green-dark); background: var(--green-pale); font-size: .6rem; }.display-link-field { display: grid; gap: 5px; min-width: 0; margin: 2px 0 12px; }.display-link-field span { color: var(--muted); font-size: .62rem; }.display-link-field code { display: block; margin: 0; padding: 8px 9px; overflow: hidden; border-radius: 7px; background: #f0f3f1; text-overflow: ellipsis; white-space: nowrap; }.display-link-actions { display: flex !important; justify-content: flex-start !important; flex-wrap: wrap; gap: 7px; }.display-link-actions .button { min-height: 36px; padding: 7px 10px; font-size: .68rem; text-decoration: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }.display-group-choice { margin: 17px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }.display-group-choice legend { padding: 0 6px; color: var(--muted); font-size: .68rem; font-weight: 600; }.display-group-choice > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }.display-group-choice label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: #f3f6f4; }.display-group-choice label span { font-size: .72rem; font-weight: 600; }.display-group-choice label small { font-size: .59rem; }.display-url-preview { display: grid; gap: 5px; padding: 11px; border-radius: 9px; color: var(--green-dark); background: var(--green-pale); }.display-url-preview span { font-size: .62rem; font-weight: 600; }.display-url-preview code { overflow-wrap: anywhere; font-size: .68rem; }
.group-manager { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; margin-top: 20px; }.group-list { display: grid; align-content: start; gap: 7px; }.group-list-item { display: grid; grid-template-columns: 1fr auto; gap: 5px; }.group-list-item > button:first-child { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; text-align: left; }.group-list-item > button:last-child { width: 32px; border: 0; border-radius: 8px; color: var(--muted); background: #f0f3f1; }.group-list-item strong { font-size: .72rem; }.group-list-item small { font-size: .6rem; }
.target-section-label { margin: 9px 0 3px; color: #98a29e; font-size: .57rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.target-list { max-height: 325px; overflow-y: auto; padding-right: 3px; }

/* Visual slide editor */
.slide-editor-dialog { width: min(1380px, calc(100% - 20px)); max-width: none; height: min(900px, calc(100vh - 20px)); padding: 0; overflow: hidden; }.slide-editor-shell { display: grid; grid-template-rows: auto minmax(0,1fr); height: 100%; background: #eef1ef; }.slide-editor-header { display: flex; align-items: center; gap: 10px; padding: 12px 54px 12px 16px; border-bottom: 1px solid var(--line); background: #fff; }.slide-editor-header h2 { font-size: 1.1rem; }.slide-editor-header .eyebrow { margin: 0; }.editor-title-field { display: grid; gap: 2px; min-width: 230px; margin-left: auto; color: var(--muted); font-size: .56rem; }.editor-title-field input, .editor-title-field select { padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; }.editor-title-field.compact-field { min-width: 150px; margin-left: 0; }.editor-close { top: 13px; right: 14px; }
.editor-main { display: grid; grid-template-columns: 92px minmax(480px,1fr) 270px; min-height: 0; }.editor-tools { padding: 14px 10px; border-right: 1px solid var(--line); background: #fff; }.editor-tools > button { display: grid; place-items: center; gap: 4px; width: 100%; margin-bottom: 7px; padding: 8px 4px; border: 1px solid transparent; border-radius: 9px; color: var(--muted); background: transparent; }.editor-tools > button:hover { color: var(--green-dark); border-color: #bad0c3; background: var(--green-pale); }.editor-tools > button span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--green-dark); background: #edf3ef; font-weight: 700; }.editor-tools > button strong { font-size: .62rem; }.editor-layer-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }.editor-layer-actions button { height: 27px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #fff; }
.editor-workspace { display: grid; grid-template-rows: auto minmax(0,1fr) auto; min-width: 0; min-height: 0; }.editor-toolbar { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #fff; }.editor-toolbar button { min-width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; }.editor-toolbar > span:not(.zoom-label) { width: 1px; margin: 3px 6px; background: var(--line); }.zoom-label { margin-left: auto; padding: 7px; color: var(--muted); font-size: .62rem; }.editor-stage-wrap { display: grid; place-items: center; min-height: 0; padding: 24px; overflow: auto; background: #dfe3e1; }.slide-editor-canvas { position: relative; width: min(100%, 960px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; color: #fff; background: radial-gradient(circle at 78% 22%, #896d72, transparent 25%), linear-gradient(135deg,#20372f,#445f55); box-shadow: 0 15px 50px rgba(15,28,23,.25); }.slide-editor-canvas[data-ratio="portrait"] { width: min(48%, 460px); aspect-ratio: 9 / 16; }.slide-editor-canvas.drag-over { outline: 4px solid #cddc78; outline-offset: 3px; }.editor-help { margin: 0; padding: 8px 14px; color: var(--muted); background: #fff; font-size: .62rem; text-align: center; }
.canvas-element { position: absolute; display: grid; align-items: center; min-width: 30px; min-height: 25px; overflow: hidden; border: 1px solid transparent; border-radius: 3px; }.canvas-element.is-selected { border-color: #d8e579; outline: 2px solid rgba(216,229,121,.45); }.canvas-element img, .canvas-element video, .canvas-element iframe { width: 100%; height: 100%; border: 0; object-fit: cover; }.canvas-element-handle { position: absolute; top: 3px; right: 3px; display: none; width: 24px; height: 24px; border: 0; border-radius: 5px; color: #17201d; background: #d8e579; cursor: move; }.canvas-element.is-selected .canvas-element-handle { display: block; }.canvas-text-content { min-width: 100%; padding: 8px; outline: 0; line-height: 1.08; }.canvas-event-content { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 10px; }.canvas-event-content small { color: rgba(255,255,255,.75); font-size: .35em; letter-spacing: .12em; }.canvas-event-content strong { font-family: "Manrope"; line-height: 1.05; }.canvas-event-content span { margin-top: 5px; font-size: .38em; }.canvas-placeholder { display: grid; place-items: center; align-content: center; height: 100%; color: rgba(255,255,255,.85); font-size: 2rem; }.canvas-placeholder small { max-width: 90%; margin-top: 5px; overflow: hidden; color: rgba(255,255,255,.7); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.editor-properties { min-height: 0; padding: 15px; overflow-y: auto; border-left: 1px solid var(--line); background: #fff; }.property-empty { display: grid; place-items: center; padding: 50px 15px; color: var(--muted); text-align: center; }.property-empty > span { font-size: 2rem; }.property-empty p { margin-top: 8px; font-size: .72rem; }.property-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }.property-heading strong { font-size: .8rem; }.property-heading button { border: 0; color: var(--green-dark); background: transparent; font-size: .62rem; font-weight: 600; }.property-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.editor-properties textarea { resize: vertical; padding: 9px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }.media-drop-field { position: relative; display: grid; place-items: center; margin-top: 12px; padding: 18px; border: 1px dashed #9cadA4; border-radius: 9px; color: var(--muted); text-align: center; }.media-drop-field.drag-over { border-color: var(--green); background: var(--green-pale); }.media-drop-field input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }.media-drop-field > span { font-size: 1.4rem; }.media-drop-field strong { color: var(--green-dark); font-size: .72rem; }.media-drop-field small { font-size: .58rem; }.property-note { margin: 7px 0; color: var(--muted); font-size: .62rem; line-height: 1.45; }.slide-editor-dialog.is-previewing .editor-tools, .slide-editor-dialog.is-previewing .editor-properties, .slide-editor-dialog.is-previewing .editor-toolbar, .slide-editor-dialog.is-previewing .editor-help { display: none; }.slide-editor-dialog.is-previewing .editor-main { grid-template-columns: 1fr; }.slide-editor-dialog.is-previewing .slide-editor-canvas { width: min(94%, 1200px); }

/* Full-screen display player */
body.player-mode { min-width: 0; overflow: hidden; background: #0d1714; }.display-player { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px,5vw,80px); color: #fff; background: radial-gradient(circle at 80% 20%, #d0785d, transparent 25%), linear-gradient(135deg,#29223f,#685779); }.display-player[data-theme="warm"] { background: radial-gradient(circle at 78% 20%,#d2a56b,transparent 25%),linear-gradient(135deg,#342820,#755440); }.display-player[data-theme="blue"] { background: radial-gradient(circle at 80% 18%,#6f9fb7,transparent 24%),linear-gradient(135deg,#173b42,#456c72); }.player-brand { font: 700 clamp(.7rem,1.2vw,1rem) "Manrope"; letter-spacing: .18em; }.display-player section { display: grid; align-content: center; max-width: 80%; opacity: 0; transform: translateY(24px); transition: opacity .45s, transform .45s; }.display-player section.is-visible { opacity: 1; transform: translateY(0); }.display-player section small { color: rgba(255,255,255,.72); font-size: clamp(.65rem,1.4vw,1.15rem); letter-spacing: .15em; }.display-player section strong { font: 700 clamp(2.5rem,8vw,8rem) "Manrope"; line-height: .95; letter-spacing: -.05em; }.display-player section p { margin: 18px 0 0; font-size: clamp(1rem,2.2vw,2rem); }.player-status { display: flex; justify-content: space-between; color: rgba(255,255,255,.65); font-size: clamp(.65rem,1.2vw,1rem); }.display-player-portrait section { max-width: 100%; }.display-player-portrait section strong { font-size: clamp(2.5rem,10vw,6rem); }.player-error { display: grid; place-items: center; align-content: center; min-height: 100vh; color: #fff; text-align: center; }.player-error strong { font-size: 2rem; }.player-error p { color: #9db0a8; }
dialog { width: min(520px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 20px; color: var(--ink); box-shadow: 0 28px 80px rgba(15,29,24,.25); }dialog::backdrop { background: rgba(12,24,20,.62); backdrop-filter: blur(4px); }.dialog-content { position: relative; padding: 30px; }.dialog-close { position: absolute; top: 17px; right: 17px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--muted); background: #eff2f0; font-size: 1.3rem; }.dialog-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 13px; color: var(--green-dark); background: var(--green-pale); font-size: 1.4rem; }.dialog-content h2 { margin-bottom: 10px; font-size: 1.5rem; }.dialog-content > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; font-size: .85rem; }.comparison-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 20px 0; }.comparison-grid div { padding: 12px; border-radius: 11px; background: #f1f4f2; }.comparison-grid strong { display: block; font: 700 1.35rem "Manrope"; }.comparison-grid span { color: var(--muted); font-size: .67rem; }.confirm-check { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: .78rem; }.confirm-check input { margin-top: 2px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }.toast { position: fixed; right: 24px; bottom: 24px; z-index: 10; max-width: 360px; padding: 13px 17px; border-radius: 11px; color: white; background: var(--nav); box-shadow: var(--shadow); opacity: 0; transform: translateY(15px); pointer-events: none; transition: .25s; }.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1120px) { .channel-studio { grid-template-columns: 1fr; }.slide-library { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }.scheduler-workspace { grid-template-columns: 240px minmax(0,1fr); }.operations-grid { grid-template-columns: 1fr; } }
@media (max-width: 1050px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-grid { grid-template-columns: 1fr; }.display-card-grid { grid-template-columns: 1fr; }.public-event-grid { grid-template-columns: repeat(2, 1fr); }.public-event:last-child { display: none; }.display-management-summary { grid-template-columns: repeat(3,1fr); }.display-management-summary p { grid-column: 1/-1; }.ops-metrics { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 780px) { .app-shell { grid-template-columns: 1fr; }.sidebar { position: fixed; z-index: 20; width: 238px; transform: translateX(-100%); transition: transform .25s; }.sidebar.is-open { transform: translateX(0); }.mobile-menu { display: block; }.main-content { padding: 24px 18px 45px; }.topbar { align-items: flex-start; }.topbar-actions .icon-button { display: none; }.source-strip { align-items: flex-start; }.display-summary { grid-template-columns: 1fr 1fr; }.next-change { grid-column: 1/-1; padding: 15px 0 0; border-top: 1px solid var(--line); border-left: 0; }.integration-grid { grid-template-columns: 1fr; }.scheduler-workspace { grid-template-columns: 1fr; }.scheduler-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }.target-list { grid-template-columns: repeat(2, 1fr); }.schedule-content-list { grid-template-columns: repeat(2, 1fr); }.day-tabs { overflow-x: auto; }.day-tabs button { min-width: 58px; }.slide-library { grid-template-columns: 1fr; }.playlist-item { grid-template-columns: 25px 72px minmax(0,1fr) 72px 28px; }.playlist-item .slide-thumb { width: 72px; }.transition-field { display: none; }.slide-editor-header { flex-wrap: wrap; }.editor-title-field { min-width: 170px; margin-left: 0; }.editor-main { grid-template-columns: 70px minmax(0,1fr); }.editor-properties { display: none; }.editor-stage-wrap { padding: 12px; } }
@media (max-width: 560px) { .metric-grid { grid-template-columns: 1fr; }.metric-card { padding: 15px; }.metric-value { font-size: 1.5rem; }.topbar-actions .button { width: 40px; padding: 0; font-size: 0; }.topbar-actions .button span { font-size: 1.2rem; }.source-strip { flex-direction: column; }.events-panel .panel-header .text-button { display: none; }.event-row { grid-template-columns: 42px 3px minmax(0,1fr); }.event-row .tag { display: none; }.display-summary, .display-card-grid { grid-template-columns: 1fr; }.display-card { grid-template-columns: 1fr; }.display-canvas { min-height: 185px; }.detailed-display-card { grid-template-columns: 1fr; }.display-management-summary { grid-template-columns: 1fr 1fr; }.display-management-summary p { grid-column: 1/-1; }.section-heading { align-items: flex-start; flex-direction: column; }.section-actions, .section-actions .button { width: 100%; }.toolbar { align-items: stretch; flex-direction: column; }.search-field { min-width: 0; }.public-calendar { padding: 23px 18px; }.calendar-header { align-items: flex-start; flex-direction: column; }.public-event-grid { grid-template-columns: 1fr; }.public-event:last-child { display: block; }.comparison-grid { grid-template-columns: 1fr; }.mapping-list > div { grid-template-columns: 1fr auto; }.mapping-list > div strong { grid-column: 1/-1; }.dialog-actions { flex-direction: column-reverse; }.dialog-actions .button { width: 100%; }.workflow-line { overflow-x: auto; white-space: nowrap; }.slide-toolbar, .channel-settings-row, .form-grid { grid-template-columns: 1fr; }.toggle-label { padding-top: 4px; }.playlist-head > span { display: none; }.playlist-item { grid-template-columns: 24px 58px minmax(0,1fr) 28px; }.playlist-item .slide-thumb { width: 58px; }.duration-field { display: none; }.builder-footer .button { flex: 1 1 100%; }.scheduler-topbar { align-items: flex-start; flex-direction: column; }.target-list, .schedule-content-list { grid-template-columns: 1fr; }.schedule-canvas-head { align-items: flex-start; flex-direction: column; }.schedule-help { flex-direction: column; }.slide-type-grid { grid-template-columns: 1fr 1fr; }.preview-controls { align-items: flex-start; flex-direction: column; }.display-group-choice > div, .group-manager { grid-template-columns: 1fr; }.slide-editor-header > div:first-child, .editor-title-field.compact-field, .slide-editor-header [data-editor-action="preview"] { display: none; }.slide-editor-header .button { flex: 1; }.editor-main { grid-template-columns: 58px minmax(0,1fr); }.editor-tools { padding: 8px 5px; }.editor-tools > button strong { display: none; }.editor-stage-wrap { padding: 6px; }.ops-metrics { grid-template-columns: 1fr; }.emergency-targets > div { grid-template-columns: 1fr; }.proof-actions { align-items: stretch; flex-direction: column; }.proof-actions .button { width: 100%; } }