:root {
    --bg: #f3f5ef;
    --surface: #ffffff;
    --primary: #1b5e20;
    --primary-dark: #143d17;
    --accent: #2563eb;
    --text: #18211a;
    --muted: #66726a;
    --border: #dbe3d4;
    --danger: #a61b1b;
    --success: #177245;
    --info: #2558d8;
    --shadow: 0 20px 45px rgba(16, 37, 25, 0.08);
    --radius: 20px;
    --sidebar: #0e2415;
    --sidebar-muted: #96aa9a;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color: var(--text); background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 24%), linear-gradient(180deg, #f7f8f3 0%, var(--bg) 100%); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.app-shell { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.sidebar { background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%), var(--sidebar); color: #fff; padding: 28px 22px; display: flex; flex-direction: column; gap: 28px; }
.brand h1, .page-head h2, .section-heading h3, .login-copy h2, .screen-card h4, .content-library-banner h4, .canvas-head h3 { margin: 0; }
.brand-kicker, .eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; color: var(--accent); font-weight: 700; }
.brand p, .sidebar-foot span, .page-head p, .section-heading span, .list-item p, .login-copy p, .empty-state, .content-library-body p, .playlist-copy p, .playlist-copy small, .helper-text, .canvas-meta span, .preview-status { margin: 0; color: var(--muted); }
.menu { display: grid; gap: 8px; }
.menu a { padding: 14px 16px; border-radius: 14px; color: var(--sidebar-muted); transition: 0.2s ease; }
.menu a:hover, .menu a.is-active { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); }
.logout-link { color: #fff; font-weight: 600; }
.main-content, .auth-shell { padding: 32px; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; }
.login-panel { width: min(1100px, 100%); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: stretch; }
.login-copy { padding: 36px; border-radius: 28px; color: #fff; background: linear-gradient(130deg, rgba(255,255,255,0.08), transparent 35%), linear-gradient(135deg, #17351e, #1b5e20 55%, #2563eb 160%); box-shadow: var(--shadow); }
.info-card, .card, .stat-card, .screen-card, .content-library-item, .playlist-item { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.info-card { margin-top: 28px; padding: 18px 20px; background: rgba(255,255,255,0.12); color: #fff; }
.login-form, .card { padding: 24px; }
.page-head, .section-heading, .button-row, .actions, .screen-card-head, .list-item, .canvas-head, .editor-toolbar, .preview-control-bar { display: flex; justify-content: space-between; gap: 16px; }
.page-head, .grid, .stats-grid, .content-library, .screen-list, .playlist-list, .list-stack { margin-bottom: 24px; }
.page-head { align-items: end; }
.page-head-actions, .button-row, .actions, .canvas-head, .preview-control-bar { align-items: center; flex-wrap: wrap; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.stat-card { padding: 22px; background: linear-gradient(180deg, rgba(27,94,32,0.08), transparent 75%), var(--surface); }
.stat-card span, .stat-card small { color: var(--muted); }
.stat-card strong { display: block; margin: 10px 0 6px; font-size: 2rem; }
.grid.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid.content-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 20px; }
.grid.compact-gap, .grid.two-col.compact-gap { gap: 14px; }
.stack-form, .login-form { display: grid; gap: 16px; }
label span, fieldset legend { display: block; margin-bottom: 8px; font-weight: 600; }
input, select, textarea { width: 100%; border: 1px solid var(--border); background: #fbfcf8; border-radius: 14px; padding: 12px 14px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(27,94,32,0.12); }
.toggle-row, .day-checkbox { display: flex; align-items: center; gap: 10px; }
.toggle-row input, .day-checkbox input { width: auto; }
.btn { border: 0; border-radius: 14px; padding: 12px 18px; cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-block { width: 100%; }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--primary), #2d7a33); }
.btn-secondary { background: #e4ecd9; color: var(--primary-dark); }
.btn-ghost { background: rgba(37,88,216,0.08); color: var(--info); }
.btn-danger-lite { background: rgba(166,27,27,0.1); color: var(--danger); }
.alert { padding: 14px 16px; border-radius: 14px; margin-bottom: 16px; }
.alert-success { background: rgba(23,114,69,0.12); color: var(--success); }
.alert-danger { background: rgba(166,27,27,0.1); color: var(--danger); }
.badge { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.badge-success { background: rgba(23,114,69,0.12); color: var(--success); }
.badge-muted { background: rgba(102,114,106,0.12); color: var(--muted); }
.badge-info { background: rgba(37,88,216,0.1); color: var(--info); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.content-library, .screen-list, .playlist-list, .list-stack { display: grid; gap: 14px; }
.content-library { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.content-library-item { overflow: hidden; }
.content-library-banner { min-height: 120px; padding: 20px; display: flex; flex-direction: column; justify-content: end; gap: 8px; position: relative; overflow: hidden; }
.content-library-body { padding: 18px 20px 20px; }
.screen-card, .playlist-item { padding: 18px 20px; }
.playlist-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.playlist-item.dragging { opacity: 0.45; }
.playlist-handle { color: var(--muted); font-weight: 700; cursor: grab; }
.days-group { border: 1px solid var(--border); border-radius: 18px; padding: 14px; display: flex; flex-wrap: wrap; gap: 12px; }
.empty-state { padding: 24px; border: 1px dashed var(--border); border-radius: 16px; text-align: center; }
code { font-family: Consolas, Monaco, monospace; }
.editor-shell { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 24px; margin-bottom: 24px; align-items: start; }
.editor-panel { padding: 0; overflow: hidden; }
.editor-toolbar { border-bottom: 1px solid var(--border); background: #f8fafc; }
.editor-tab { flex: 1; padding: 18px; background: transparent; border: 0; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; }
.editor-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); background: #fff; }
.editor-form { padding: 22px; gap: 20px; }
.canvas-preset-card { margin-bottom: 24px; padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, #fafcf7 0%, #f4f8ff 100%); display: grid; gap: 14px; }
  .canvas-preset-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .canvas-preset-head p { margin: 6px 0 0; color: var(--muted); font-size: 0.92rem; }
.canvas-preset-label { max-width: 320px; }
.canvas-preset-label select { background: #fff; }
.editor-resolution-row { margin-bottom: 0; }
.editor-tab-panel { display: none; }
.editor-tab-panel.is-active { display: block; }
.compact-form { gap: 18px; }
.asset-group { padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: #fafcf7; display: grid; gap: 12px; }
.inline-heading { align-items: center; }
.upload-preview-box { border: 1px dashed var(--border); border-radius: 16px; padding: 14px; background: #fff; }
  .upload-preview-label { font-size: 0.86rem; color: var(--muted); margin-bottom: 10px; }
  .asset-resolution { margin-top: 10px; font-size: 0.84rem; color: var(--muted); font-weight: 600; }
.mini-media-preview { min-height: 88px; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: #edf2f7; color: var(--muted); }
.mini-media-preview img, .mini-media-preview video, .mini-media-preview iframe { width: 100%; max-height: 160px; object-fit: cover; display: block; border: 0; }
.slide-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.slide-thumb { position: relative; border-radius: 16px; overflow: hidden; min-height: 110px; background: #dde6ef; display: flex; flex-direction: column; }
  .slide-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; flex: 1 1 auto; min-height: 110px; }
  .slide-thumb .slide-meta { position: absolute; left: 10px; right: 40px; bottom: 10px; padding: 6px 9px; border-radius: 999px; background: rgba(4, 11, 22, 0.72); color: #fff; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; }
.slide-thumb button { position: absolute; top: 8px; right: 8px; border: 0; background: rgba(0,0,0,0.55); color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; }
.slide-empty { grid-column: 1 / -1; padding: 18px; border: 1px dashed var(--border); border-radius: 14px; text-align: center; color: var(--muted); }
.helper-text { font-size: 0.88rem; line-height: 1.5; }
.editor-tips { padding: 14px 16px; border-radius: 16px; background: #eef5ff; color: #20466f; font-size: 0.92rem; line-height: 1.6; }
.quick-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-btn { border: 1px solid #c8d8ff; background: #f4f8ff; color: #2558d8; border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.range-value { color: var(--muted); }
.sticky-actions { position: sticky; bottom: 0; padding-top: 14px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%); }
.canvas-panel { padding: 22px; }
.canvas-meta { text-align: right; }
.canvas-meta strong { display: block; }
.preview-control-bar { margin-bottom: 18px; }
.preview-status { padding: 0 4px; }
.canvas-grid { border-radius: 22px; padding: 24px; background-color: #f4f7fb; background-image: linear-gradient(#d8e2ef 1px, transparent 1px), linear-gradient(90deg, #d8e2ef 1px, transparent 1px); background-size: 28px 28px; overflow: auto; display: flex; justify-content: center; }
.content-preview { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 440px; border-radius: 24px; overflow: hidden; background: #102542; color: #f8fafc; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 30px 60px rgba(16,37,66,0.18); }
.content-preview.is-portrait { width: min(100%, 430px); min-height: 760px; margin: 0 auto; }
.preview-bg-layer, .preview-video-wrap, .preview-slides, .preview-overlay, .preview-content-layer { position: absolute; inset: 0; }
.preview-bg-layer { background-position: center; background-repeat: no-repeat; }
.preview-video-wrap video, .preview-video-wrap iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.preview-video-wrap iframe { pointer-events: none; }
.preview-slides { overflow: hidden; }
.preview-slide { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; opacity: 0; transition-property: opacity, transform; transition-timing-function: ease; transition-duration: 0.8s; }
.preview-slide.transition-fade { transform: none; }
.preview-slide.transition-zoom { transform: scale(1.04); }
.preview-slide.transition-slide-left { transform: translateX(6%); }
.preview-slide.transition-slide-right { transform: translateX(-6%); }
.preview-slide.is-active { opacity: 1; transform: translateX(0) scale(1); }
.preview-overlay { background: rgba(0,0,0,0.45); }
.preview-content-layer { padding: 42px; display: flex; flex-direction: column; justify-content: center; gap: 16px; z-index: 3; }
.preview-content-layer.align-left { align-items: flex-start; text-align: left; }
.preview-content-layer.align-center { align-items: center; text-align: center; }
.preview-content-layer.align-right { align-items: flex-end; text-align: right; }
.preview-chip, .preview-cta { align-self: flex-start; }
.preview-content-layer.align-center .preview-chip, .preview-content-layer.align-center .preview-cta { align-self: center; }
.preview-content-layer.align-right .preview-chip, .preview-content-layer.align-right .preview-cta { align-self: flex-end; }
.preview-chip { border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,0.16); font-size: 0.82rem; font-weight: 700; }
.preview-kicker { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.82; }
.content-preview h4 { margin: 0; font-size: clamp(1.8rem, 3vw, 3.4rem); max-width: 12ch; }
.content-preview p { margin: 0; max-width: 40ch; line-height: 1.65; font-size: clamp(0.95rem, 1.3vw, 1.15rem); }
.preview-cta { background: #fff; color: var(--text); padding: 12px 18px; border-radius: 999px; border: 0; font-weight: 700; min-width: 120px; }
.preview-cta[contenteditable="true"] { display: inline-flex; justify-content: center; }
.preview-edit-hint { padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,0.12); font-size: 0.82rem; }
[contenteditable="true"] { outline: 2px dashed transparent; transition: outline-color 0.2s ease, background 0.2s ease; }
[contenteditable="true"]:hover { outline-color: rgba(255,255,255,0.35); }
[contenteditable="true"]:focus { outline-color: #8bc4ff; background: rgba(255,255,255,0.08); }
.animation-fade-up .preview-content-layer { animation: fadeUp 0.9s ease both; }
.animation-fade-in .preview-content-layer { animation: fadeIn 1s ease both; }
.animation-zoom-in .preview-content-layer { animation: zoomIn 0.8s ease both; }
.animation-slide-left .preview-content-layer { animation: slideLeft 0.8s ease both; }
.animation-slide-right .preview-content-layer { animation: slideRight 0.8s ease both; }
.animation-blur-in .preview-content-layer { animation: blurIn 0.85s ease both; }
.animation-rotate-in .preview-content-layer { animation: rotateIn 0.9s ease both; }
.library-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.editor-library-item .content-library-banner > * { position: relative; z-index: 1; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: translateX(0); } }
@keyframes blurIn { from { opacity: 0; filter: blur(14px); transform: translateY(12px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes rotateIn { from { opacity: 0; transform: rotate(-8deg) scale(0.96); } to { opacity: 1; transform: rotate(0deg) scale(1); } }
@keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (max-width: 1280px) { .editor-shell { grid-template-columns: 1fr; } }
@media (max-width: 1120px) { .app-shell, .login-panel, .grid.two-col, .grid.content-grid, .stats-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
    .main-content, .auth-shell { padding: 18px; }
    .card, .login-form, .login-copy { padding: 18px; }
    .page-head, .section-heading, .playlist-item, .canvas-head { grid-template-columns: 1fr; display: grid; }
    .slide-library { grid-template-columns: 1fr 1fr; }
    .preview-content-layer { padding: 24px; }
}
.builder-shell { grid-template-columns: 460px minmax(0, 1fr); }
.scene-header-bar { display: grid; gap: 14px; }
.scene-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.scene-list { display: grid; gap: 10px; }
.scene-chip { width: 100%; text-align: left; border: 1px solid var(--border); background: #fff; border-radius: 16px; padding: 12px 14px; display: grid; gap: 4px; cursor: pointer; }
.scene-chip.is-active { border-color: #8bc4ff; background: #eef5ff; }
.scene-chip small { color: var(--muted); }
.scene-editor-card { padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: #fafcf7; }
.layer-config-grid { display: grid; gap: 10px; }
.layer-config-item { padding: 12px 14px; border-radius: 14px; background: #f5f8fb; color: #39506a; font-size: 0.9rem; }
.layer-item { position: absolute; z-index: 4; min-width: 100px; min-height: 40px; }
.layer-item .drag-handle { position: absolute; top: -18px; left: 0; background: rgba(6, 16, 28, 0.72); color: #fff; padding: 3px 8px; font-size: 11px; border-radius: 999px; cursor: move; }
.layer-item .resize-handle { position: absolute; width: 16px; height: 16px; right: -8px; bottom: -8px; border-radius: 50%; background: #8bc4ff; border: 2px solid #fff; cursor: nwse-resize; }
.layer-item h4, .layer-item p, .layer-item .preview-cta, .layer-item #preview-clock, .layer-item #preview-date { margin: 0; }
.preview-marquee-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: none; align-items: center; min-height: 54px; padding: 0 18px; background: rgba(6, 16, 28, 0.84); border-top: 1px solid rgba(255,255,255,0.12); overflow: hidden; }
.preview-marquee-track { white-space: nowrap; min-width: 100%; }
.preview-marquee-track span { display: inline-block; padding-left: 100%; font-weight: 700; letter-spacing: 0.04em; color: #f8fafc; animation: marqueeMove 18s linear infinite; }
.text-layer h4, .text-layer p, .text-layer .text-block-stack { max-width: 100%; white-space: pre-line; display: grid; gap: 10px; }
.text-block-item { display: inline-block; width: fit-content; max-width: 100%; padding: 10px 14px; border-radius: 14px; }
.dynamic-text-layer { cursor: move; touch-action: none; z-index: 4; }
.dynamic-text-layer .text-block-item { width: 100%; height: 100%; display: flex; align-items: center; }
.dynamic-text-layer .drag-handle { cursor: move; }
.dynamic-text-layer .dynamic-text-surface { width: 100%; height: 100%; pointer-events: none; display: flex; }
.button-layer .preview-cta { display: inline-flex; width: 100%; justify-content: center; }
.media-layer img { width: 100%; height: 100%; object-fit: contain; display: block; }
.overlay-slides-layer { border-radius: 18px; overflow: visible; background: transparent; cursor: move; touch-action: none; }
.overlay-slides-layer .drag-handle { top: 0; left: 0; right: 0; bottom: 0; padding: 0; border-radius: 18px; background: transparent; color: transparent; z-index: 2; pointer-events: auto; }
.overlay-slides-layer .resize-handle { z-index: 3; }
.overlay-slides-preview { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; background: rgba(7, 16, 28, 0.28); box-shadow: 0 18px 30px rgba(0,0,0,0.18); pointer-events: none; cursor: move; }
.overlay-slides-preview .overlay-slide-item { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity 0.7s ease, transform 0.9s ease; pointer-events: none; }
.overlay-slides-preview .overlay-slide-media { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: contain; transform-origin: center; pointer-events: none; }
.overlay-slides-preview .overlay-slide-item.is-active { opacity: 1; transform: scale(1); }
.info-layer { color: inherit; font-weight: 700; }
#layer-logo, #layer-qr { background: rgba(255,255,255,0.08); border-radius: 14px; padding: 8px; }
#layer-qr img { width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 10px; }
.preview-control-bar { justify-content: flex-start; }
.preview-edit-hint { display: none; }
@media (max-width: 1280px) { .builder-shell { grid-template-columns: 1fr; } }
.scene-chip { display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 10px; padding: 10px; }
.scene-chip-main { width: 100%; text-align: left; border: 0; background: transparent; display: grid; gap: 4px; cursor: pointer; }
.scene-chip-delete { width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(166,27,27,0.1); color: #a61b1b; cursor: pointer; font-weight: 700; }
.scene-chip-delete:hover { background: rgba(166,27,27,0.18); }