:root {
  --bg: #eef2f6;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --sidebar: #15263d;
  --sidebar-hover: #213956;
  --sidebar-active: #2e78c7;
  --primary: #2e78c7;
  --primary-dark: #1f5e9e;
  --text: #243044;
  --muted: #718096;
  --border: #dfe6ee;
  --success: #16845b;
  --info: #2877b9;
  --warning: #c17a0f;
  --danger: #c23d4b;
  --shadow: 0 10px 30px rgba(18, 38, 63, 0.09);
  --radius: 12px;
  --sidebar-width: 270px;
  --sidebar-collapsed: 78px;
  --transparent-checker: linear-gradient(45deg, #dbe3ee 25%, transparent 25%), linear-gradient(-45deg, #dbe3ee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dbe3ee 75%), linear-gradient(-45deg, transparent 75%, #dbe3ee 75%);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar-width); display: flex; flex-direction: column; color: #fff; background: linear-gradient(180deg, #172a43, #102036); box-shadow: 5px 0 24px rgba(18, 38, 63, .12); transition: width .25s ease, transform .25s ease; }
.sidebar.collapsed { width: var(--sidebar-collapsed); }
.brand { height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.09); overflow: hidden; white-space: nowrap; }
.brand-logo { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, #58a5ee, var(--primary)); box-shadow: 0 8px 18px rgba(46,120,199,.35); font-weight: 800; flex: 0 0 auto; }
.brand-text strong, .brand-text small { display: block; }
.brand-text strong { font-size: 17px; }
.brand-text small { color: #a9bfd8; font-size: 12px; }
.nav { padding: 12px 10px 18px; overflow-y: auto; flex: 1; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 13px; border: 0; color: #d3dfec; background: transparent; border-radius: 10px; padding: 12px 14px; margin: 4px 0; text-align: left; transition: .18s ease; white-space: nowrap; overflow: hidden; }
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.active { background: var(--sidebar-active); color: #fff; box-shadow: 0 7px 15px rgba(46,120,199,.28); }
.nav-icon { width: 24px; min-width: 24px; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.nav-label { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,.09); }
.collapse-button { width: 100%; height: 42px; border: 0; border-radius: 10px; color: #d3dfec; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; gap: 10px; }
.sidebar.collapsed .brand-text, .sidebar.collapsed .nav-label, .sidebar.collapsed .collapse-label { display: none; }
.sidebar.collapsed .brand, .sidebar.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.main { width: calc(100% - var(--sidebar-width)); margin-left: var(--sidebar-width); transition: .25s ease; min-width: 0; }
.sidebar.collapsed + .main { width: calc(100% - var(--sidebar-collapsed)); margin-left: var(--sidebar-collapsed); }
.topbar { height: 76px; position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 28px; }
.topbar-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar h1 { margin: 0; font-size: 22px; line-height: 1.15; }
.topbar p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.top-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.top-user { display: flex; align-items: center; gap: 8px; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--border); }
.top-user-info { text-align: right; line-height: 1.2; }
.top-user-info strong { display: block; font-size: 13px; }
.top-user-info span { color: var(--muted); font-size: 11px; }
.top-user-avatar { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #f1b14f; color: #16304b; display: grid; place-items: center; font-weight: 800; box-shadow: 0 4px 12px rgba(18,38,63,.12); }
.top-icon-button { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: #435168; display: grid; place-items: center; transition: .18s ease; }
.top-icon-button:hover { color: var(--primary); border-color: #a9c9ea; background: #eef6fe; transform: translateY(-1px); }
.mobile-menu { display: none; }
.btn { border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; font-size: 13px; transition: .18s ease; white-space: nowrap; text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: #e9eef5; color: #34445b; }
.btn-secondary:hover { background: #dde5ef; }
.btn-success { background: #e4f5ee; color: var(--success); }
.btn-warning { background: #fff1d7; color: #9e6208; }
.btn-danger { background: #ffe7ea; color: var(--danger); }
.content { padding: 26px 28px 44px; }
.page { display: none; animation: fade .18s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.grid { display: grid; gap: 18px; }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }
.two-col { grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card-body { padding: 20px; }
.card-header { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.card-header h2, .card-header h3 { margin: 0; font-size: 16px; }
.card-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.stat-card { padding: 18px; display: flex; align-items: center; gap: 16px; }
.stat-icon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; }
.stat-icon.blue { background: #e3f0fd; color: var(--primary); }
.stat-icon.green { background: #e1f5ec; color: var(--success); }
.stat-icon.orange { background: #fff0d6; color: var(--warning); }
.stat-icon.red { background: #ffe4e8; color: var(--danger); }
.stat-value { font-size: 26px; font-weight: 800; line-height: 1; }
.stat-label { color: var(--muted); font-size: 13px; margin-top: 7px; }
.status-list { display: grid; gap: 12px; }
.status-list div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.status-list div:last-child { border-bottom: 0; }
.status-list span { color: var(--muted); font-size: 13px; text-align: right; }
.section-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.section-toolbar h2 { margin: 0; font-size: 19px; }
.section-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.section-toolbar.section-toolbar-actions { justify-content: flex-end; }
.monitor-grid, .media-grid, .applet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.applet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.monitor-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-soft); }
.monitor-preview { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #203d5e, #315d87); color: #fff; display: grid; place-items: center; }
.monitor-preview.muted { background: linear-gradient(135deg, #607086, #92a1b3); }
.monitor-preview .clock { font-size: 26px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.monitor-preview[style*="#111827"] .clock { text-shadow: none; }
.monitor-meta { padding: 13px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.monitor-meta strong { font-size: 14px; }
.monitor-meta small { display: block; color: var(--muted); margin-top: 4px; }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge.success { color: var(--success); background: #e1f5ec; }
.badge.warning { color: #9d6208; background: #fff0d6; }
.badge.danger { color: var(--danger); background: #ffe4e8; }
.badge.info { color: var(--info); background: #e3f0fd; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 16px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13px; vertical-align: middle; }
th { color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; background: #f9fbfd; }
tr:last-child td { border-bottom: 0; }
.mini-btn { border: 0; border-radius: 8px; padding: 7px 9px; background: #eef3f8; color: #34445b; }
.tile { border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: 18px; transition: .18s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #bfd1e4; }
.tile-icon { width: 46px; height: 46px; border-radius: 12px; background: #e9f2fc; color: var(--primary); display: grid; place-items: center; font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.tile h3 { margin: 0 0 7px; font-size: 15px; }
.tile p { margin: 0 0 15px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid-spaced { margin-top: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-spaced { margin-top: 14px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 700; color: #4a586d; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #cad4e1; border-radius: 9px; padding: 10px 11px; background: #fff; color: var(--text); outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46,120,199,.12); }
.notification-demo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.toast-container { position: fixed; top: 92px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.toast { color: #fff; border-radius: 11px; padding: 13px 15px; display: flex; align-items: flex-start; gap: 11px; box-shadow: 0 12px 28px rgba(0,0,0,.18); animation: toast-in .25s ease; }
.toast.success { background: var(--success); }
.toast.info { background: var(--info); }
.toast.warning { background: var(--warning); }
.toast.danger { background: var(--danger); }
.toast-content { flex: 1; }
.toast strong { display: block; font-size: 13px; margin-bottom: 3px; }
.toast span { font-size: 12px; opacity: .95; }
.toast-close { border: 0; background: transparent; color: #fff; font-size: 16px; padding: 0; opacity: .85; }
@keyframes toast-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
.modal-backdrop { position: fixed; inset: 0; background: rgba(8, 19, 34, .58); z-index: 80; display: none; place-items: center; padding: 18px; }
.modal-backdrop.open { display: grid; }
.modal { width: min(640px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.28); animation: modal-in .22s ease; }
.modal-wide { width: min(900px, 100%); }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-header { padding: 19px 21px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { margin: 0; font-size: 17px; }
.modal-close { width: 34px; height: 34px; border: 0; border-radius: 9px; background: #edf2f7; color: #35445a; }
.modal-body { padding: 21px; }
.modal-footer { padding: 16px 21px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 9px; }
.upload-drop { border: 2px dashed #b9c7d8; border-radius: 13px; padding: 42px; text-align: center; background: #f8fafc; }
.upload-drop div { font-size: 38px; }
.upload-drop p { color: var(--muted); font-size: 12px; }
.preview-stage { aspect-ratio: 16 / 9; border-radius: 12px; background: linear-gradient(135deg, #1c3755, #3976ab); display: grid; place-items: center; color: #fff; text-align: center; }
.preview-stage strong { display: block; font-size: clamp(24px, 4vw, 42px); }
.preview-stage span { display: block; margin-top: 12px; opacity: .82; }
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, 1fr); } .two-col, .applet-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .sidebar { transform: translateX(-100%); width: var(--sidebar-width); }
  .sidebar.mobile-open { transform: translateX(0); }
  .main, .sidebar.collapsed + .main { margin-left: 0; width: 100%; }
  .topbar { padding: 0 16px; }
  .content { padding: 18px 14px 35px; }
  .stats, .monitor-grid, .media-grid, .form-grid, .notification-demo { grid-template-columns: 1fr; }
  .desktop-only, .top-user-info { display: none; }
  .top-user { margin-left: 0; padding-left: 8px; }
  .top-icon-button { width: 36px; height: 36px; }
  .mobile-menu { display: inline-grid; }
  .section-toolbar, .topbar { align-items: flex-start; }
  .section-toolbar { flex-direction: column; }
  .topbar { height: auto; min-height: 76px; padding-top: 12px; padding-bottom: 12px; }
  .top-actions { gap: 7px; }
  .btn { padding: 9px 11px; }
  th, td { padding: 11px 10px; }
}
@media (max-width: 520px) { .top-actions .btn-primary { display: none; } .status-list div { display: block; } .status-list span { display: block; text-align: left; margin-top: 5px; } }
.login-page { min-height: 100vh; background: linear-gradient(135deg, #eef2f6 0%, #dfe8f2 100%); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-panel { width: min(420px, 100%); background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.login-brand { color: #fff; background: linear-gradient(180deg, #172a43, #102036); border-bottom: 0; }
.login-form { padding: 24px; display: grid; gap: 16px; }
.login-form h1 { margin: 0; font-size: 24px; }
.login-submit { width: 100%; margin-top: 4px; }
.form-message { border-radius: 9px; padding: 10px 12px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.form-message[hidden] { display: none; }
.form-message.success { background: #e1f5ec; color: var(--success); }
.form-message.danger { background: #ffe4e8; color: var(--danger); }
.session-countdown { margin: 14px 0 0; font-size: 30px; text-align: center; color: var(--danger); }
.monitor-details { padding: 0 13px 12px; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.monitor-actions { padding: 0 13px 13px; display: flex; gap: 8px; flex-wrap: wrap; }
.monitor-actions .mini-btn { text-decoration: none; display: inline-flex; align-items: center; }
.checkbox-field label { display: inline-flex; align-items: center; gap: 9px; }
.checkbox-field input { width: auto; }
.empty-state { margin: 0; color: var(--muted); }

.media-filter-card, .time-filter-card, .channel-filter-card, .quick-filter-card, .user-filter-card { margin-bottom: 18px; }
.media-filters, .time-filters, .channel-filters, .quick-filters, .user-filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.time-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.channel-filters { grid-template-columns: minmax(160px, .8fr) minmax(220px, 1.4fr) minmax(180px, .8fr); }
.quick-filters { grid-template-columns: minmax(240px, 1fr) minmax(160px, .45fr) auto; }
.user-filters { grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(180px, .7fr) minmax(220px, auto); }
.media-filter-actions, .time-filter-actions, .channel-filter-actions, .quick-filter-actions, .user-filter-actions { justify-content: end; }
.media-filter-buttons, .time-filter-buttons, .channel-filter-buttons, .quick-filter-buttons, .user-filter-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.media-filter-buttons .btn, .time-filter-buttons .btn, .channel-filter-buttons .btn, .quick-filter-buttons .btn, .user-filter-buttons .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.media-browser-grid { margin-bottom: 18px; }
.media-tile { padding: 0; overflow: hidden; }
.media-tile h3, .media-tile p, .media-badges { margin-left: 14px; margin-right: 14px; }
.media-thumb { aspect-ratio: 16 / 9; background: #111827; display: grid; place-items: center; overflow: hidden; }
.media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: contain; display: block; }
.media-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.media-table-card small { display: block; color: var(--muted); margin-top: 4px; }
@media (max-width: 1100px) { .media-filters, .time-filters, .channel-filters, .quick-filters, .user-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .media-filters, .time-filters, .channel-filters, .quick-filters, .user-filters { grid-template-columns: 1fr; } }

.mini-btn.danger { background: #ffe7ea; color: var(--danger); }
.mini-btn.danger:hover { background: #ffd8dd; }
.mini-note { display: inline-flex; align-items: center; color: var(--muted); font-size: 12px; padding: 7px 0; }

.media-table-card table { min-width: 1120px; }
.media-thumb-checker { background-color: #f8fafc; background-image: var(--transparent-checker); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; }
.media-thumb-button { width: 86px; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 6px; padding: 0; background-color: #f8fafc; background-image: var(--transparent-checker); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.media-thumb-button img { width: 100%; height: 100%; object-fit: contain; display: block; }
.media-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-width: 220px; }
.media-preview-modal { min-height: 360px; display: grid; place-items: center; gap: 12px; background: #0f172a; border-radius: 8px; padding: 18px; color: #fff; }
.media-preview-modal.is-transparent-preview { background-color: #f8fafc; background-image: var(--transparent-checker); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; color: var(--text); }
.media-preview-modal.is-transparent-preview p { color: #334155; background: rgba(255,255,255,.82); border-radius: 999px; padding: 4px 10px; }
.media-preview-modal img, .media-preview-modal video { max-width: 100%; max-height: 68vh; object-fit: contain; display: block; }
.media-preview-modal p { margin: 0; color: #dbeafe; }

.table-sort { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; white-space: nowrap; }
.table-sort span { color: var(--muted); font-size: 11px; line-height: 1; }
.table-sort.active { color: var(--primary); }
.table-sort.active span { color: var(--primary); }
.media-pagination, .time-pagination, .channel-pagination, .quick-pagination, .user-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 0 2px; flex-wrap: wrap; }
.media-pagination-count, .time-pagination-count, .channel-pagination-count, .quick-pagination-count, .user-pagination-count { color: var(--muted); font-size: 13px; }
.media-pagination-actions, .time-pagination-actions, .channel-pagination-actions, .quick-pagination-actions, .user-pagination-actions { display: inline-flex; gap: 8px; align-items: center; }
.mini-btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.media-pagination-actions .pagination-arrow, .time-pagination-actions .pagination-arrow, .channel-pagination-actions .pagination-arrow, .quick-pagination-actions .pagination-arrow, .user-pagination-actions .pagination-arrow { width: 52px; height: 44px; justify-content: center; align-items: center; font-size: 28px; line-height: 1; padding: 0; border-radius: 8px; font-weight: 900; }

.media-video-thumb { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 4px; color: #e5e7eb; background: linear-gradient(135deg, #111827, #374151); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.media-video-icon { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.16); }
.media-video-icon::before { content: ""; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid #fff; margin-left: 3px; }
.upload-progress { display: grid; gap: 16px; }
.upload-progress-label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.upload-progress-label strong { font-size: 32px; line-height: 1; color: var(--primary); }
.upload-progress-label span { color: var(--muted); font-size: 13px; text-align: right; }
.upload-progress-track { width: 100%; height: 18px; border-radius: 999px; overflow: hidden; background: #e8eef6; border: 1px solid var(--border); }
.upload-progress-track span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), #35a3dc); transition: width .16s ease; }
.time-table-card table { min-width: 980px; }
.time-table-card small { display: block; color: var(--muted); margin-top: 4px; }
.time-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-width: 220px; }
.time-segment-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 10px; }
.time-segments { display: grid; gap: 10px; }
.time-segment-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(110px, .8fr) minmax(110px, .8fr) auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.time-segment-row .mini-btn { min-height: 39px; }
@media (max-width: 760px) { .time-segment-row { grid-template-columns: 1fr; } .time-segment-toolbar { align-items: flex-start; flex-direction: column; } }

.channel-table-card table { min-width: 1080px; }
.channel-table-card small { display: block; color: var(--muted); margin-top: 4px; }
.channel-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-width: 310px; }
.channel-actions .mini-btn { display: inline-flex; align-items: center; text-decoration: none; }
.channel-editor-shell { display: grid; gap: 18px; }
.channel-editor-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.channel-editor-grid { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(420px, 1.15fr); gap: 18px; align-items: start; }
.channel-editor-card { max-height: calc(100vh - 190px); display: flex; flex-direction: column; }
.channel-editor-card .card-header { flex: 0 0 auto; }
.channel-editor-card .card-body { overflow-y: auto; min-height: 340px; }
.channel-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.channel-gallery-filters { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(150px, .7fr) minmax(170px, 1fr) auto; gap: 12px; align-items: end; margin: 0 0 14px; }
.channel-gallery-filter-actions { justify-content: end; }
.channel-gallery-filter-buttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.channel-gallery-empty { grid-column: 1 / -1; }
.channel-gallery-item { border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: var(--surface-soft); display: grid; gap: 8px; }
.channel-gallery-item.is-filtered-out, .channel-gallery-item[hidden] { display: none; }
.channel-gallery-count { margin: 8px 0 18px; color: var(--muted); font-size: 12px; text-align: right; }
.channel-gallery-thumb { aspect-ratio: 16 / 9; border-radius: 6px; background: #111827; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 800; }
.channel-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.channel-gallery-applet-thumb { background: linear-gradient(135deg, #203d5e, #2e78c7); }
.channel-gallery-applet-thumb span { font-size: 13px; text-transform: uppercase; letter-spacing: 0; }
.channel-gallery-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0 18px; flex-wrap: wrap; }
.channel-gallery-pagination-count { color: var(--muted); font-size: 12px; }
.channel-gallery-pagination-actions { display: inline-flex; gap: 8px; align-items: center; }
.channel-gallery-pagination-actions .pagination-arrow { width: 52px; height: 44px; justify-content: center; align-items: center; font-size: 28px; line-height: 1; padding: 0; border-radius: 8px; font-weight: 900; }
.channel-item-list { display: grid; gap: 10px; }
.channel-item-row { display: grid; grid-template-columns: 34px 104px minmax(170px, 1.1fr) minmax(112px, .55fr) minmax(140px, .75fr) minmax(130px, .72fr) 124px; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.channel-item-row.dragging { opacity: .55; }
.channel-drag-handle { align-self: stretch; display: grid; place-items: center; border-radius: 7px; background: #eef3f8; color: var(--muted); font-weight: 900; cursor: grab; }
.channel-preview-window { min-height: 100vh; margin: 0; background: #101827; color: #fff; display: grid; place-items: center; padding: 24px; }
.channel-preview-stage { position: relative; width: min(1280px, 100%); aspect-ratio: 16 / 9; background: #050b14; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
.channel-preview-stage img, .channel-preview-stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.channel-preview-slide iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.channel-preview-slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(0); transition: opacity .55s ease, transform .55s ease; background: #050b14; }
.channel-preview-slide.is-active { opacity: 1; transform: translateX(0) scale(1); z-index: 2; }
.channel-preview-slide.is-leaving { opacity: 0; z-index: 1; }
.channel-preview-slide.transition-slide_left { transform: translateX(10%); }
.channel-preview-slide.transition-slide_right { transform: translateX(-10%); }
.channel-preview-slide.transition-carousel { transform: scale(.96); }
.channel-preview-slide.transition-none { transition: none; }
.channel-preview-slide.is-active.transition-slide_left, .channel-preview-slide.is-active.transition-slide_right, .channel-preview-slide.is-active.transition-carousel { transform: translateX(0) scale(1); }
.channel-preview-placeholder { text-align: center; padding: 24px; }
@media (max-width: 1100px) { .channel-editor-grid { grid-template-columns: 1fr; } .channel-editor-card { max-height: none; } .channel-editor-card .card-body { max-height: 70vh; } .channel-item-row { grid-template-columns: 34px 1fr 90px; } .channel-item-row .field { grid-column: span 1; } }
@media (max-width: 760px) { .channel-gallery, .channel-gallery-filters { grid-template-columns: 1fr; } .channel-gallery-pagination { align-items: flex-start; flex-direction: column; } .channel-item-row { grid-template-columns: 1fr; } .channel-drag-handle { min-height: 34px; } }
.monitor-assignment-list { display: grid; gap: 10px; }
.monitor-assignment-option { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--surface-soft); }
.monitor-assignment-option input { margin-top: 3px; }
.monitor-assignment-option span { display: grid; gap: 3px; }
.monitor-assignment-option small { color: var(--muted); }
.monitor-preview.has-content{position:relative;overflow:hidden}.monitor-preview.has-content img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}.monitor-preview-video{display:grid;place-items:center;gap:6px;text-align:center;padding:16px}.monitor-preview-video span{font-size:12px;text-transform:uppercase;color:currentColor;opacity:.72}.monitor-preview-video strong{font-size:20px;overflow-wrap:anywhere}.monitor-preview-count{position:absolute;left:8px;bottom:8px;padding:4px 7px;border-radius:7px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:800}.monitor-preview[style*="#111827"] .monitor-preview-count{background:rgba(255,255,255,.82);color:#111827}.inline-input-action{display:flex;gap:8px;align-items:center}.inline-input-action input{min-width:0;flex:1}.inline-input-action .mini-btn{white-space:nowrap}.channel-duration-field .inline-input-action{gap:6px}.channel-reset-btn{width:34px;height:34px;padding:0;display:inline-grid;place-items:center;font-size:18px;line-height:1}
.monitor-preview-item{animation:monitorPreviewFade .28s ease}.monitor-preview-count{right:8px;left:auto;min-width:42px;text-align:center}.monitor-preview.has-content .monitor-preview-item{max-width:100%;max-height:100%}@keyframes monitorPreviewFade{from{opacity:.35}to{opacity:1}}

.monitor-preview-video-thumb{width:100%;height:100%;padding:12px;text-align:center}.monitor-preview-video-thumb strong{font-size:14px;line-height:1.2;text-transform:none;max-width:100%;overflow-wrap:anywhere;color:#fff}.monitor-preview .media-video-thumb{letter-spacing:0}

.channel-item-preview-button{width:76px;aspect-ratio:16/9;border:1px solid var(--border);border-radius:7px;padding:0;background:#111827;display:grid;place-items:center;overflow:hidden;cursor:pointer;align-self:center}.channel-item-preview-button img{width:100%;height:100%;object-fit:contain;display:block}.channel-item-preview-button .media-video-thumb{font-size:10px}.channel-item-preview-button[hidden]{display:none}

.quick-table-card table{min-width:980px}.quick-table-card small{display:block;color:var(--muted);margin-top:4px}.quick-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-width:240px}.quick-color-swatch{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;padding:6px 10px;font-size:12px;font-weight:900;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.quick-monitor-list{display:grid;gap:8px}.quick-monitor-option{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--surface-soft);cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}.quick-monitor-option:hover{border-color:#a9c9ea;background:#eef6fe}.quick-monitor-option input{position:absolute;opacity:0;pointer-events:none}.quick-monitor-check{width:24px;height:24px;border:2px solid #b7c4d5;border-radius:7px;background:#fff;display:grid;place-items:center}.quick-monitor-check::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px);opacity:0}.quick-monitor-option input:checked + .quick-monitor-check{border-color:var(--primary);background:var(--primary)}.quick-monitor-option input:checked + .quick-monitor-check::after{opacity:1}.quick-monitor-option:has(input:checked){border-color:var(--primary);background:#eef6fe;box-shadow:0 0 0 3px rgba(46,120,199,.1)}.quick-monitor-option:has(input:checked) .quick-monitor-check{border-color:var(--primary);background:var(--primary)}.quick-monitor-option:has(input:checked) .quick-monitor-check::after{opacity:1}.quick-monitor-copy{display:grid;gap:2px}.quick-monitor-copy small{color:var(--muted)}

.applet-config-grid { margin-bottom: 18px; }
.applet-type-tile.muted { opacity: .64; }
.applet-list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.applet-config-card .card-body { display: grid; gap: 10px; }
.applet-card-head { display: flex; align-items: center; gap: 12px; }
.applet-card-head h3 { margin: 0; font-size: 16px; }
.applet-card-head small, .applet-card-meta small { color: var(--muted); }
.applet-url { margin: 0; overflow-wrap: anywhere; font-size: 12px; }
.applet-url a { color: var(--primary); }
.applet-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.applet-actions { display: flex; gap: 7px; flex-wrap: nowrap; align-items: center; min-width: 330px; white-space: nowrap; }
@media (max-width: 1100px) { .applet-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .applet-list-grid { grid-template-columns: 1fr; } }
.applet-filters { display: grid; grid-template-columns: minmax(150px, .9fr) minmax(220px, 1.4fr) minmax(150px, .8fr) auto; gap: 14px; align-items: end; }
.applet-filter-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.applet-table-card td:nth-child(2) small { display: block; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.applet-actions { display: flex; gap: 7px; flex-wrap: nowrap; align-items: center; min-width: 330px; white-space: nowrap; }
.applet-pagination { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); }
.applet-pagination-actions { display: flex; gap: 8px; }
.applet-type-choice-list { display: grid; gap: 10px; }
.applet-type-choice { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); text-align: left; }
.applet-type-choice:hover:not(:disabled) { border-color: var(--primary); box-shadow: 0 8px 18px rgba(46,120,199,.12); }
.applet-type-choice:disabled { opacity: .56; cursor: not-allowed; }
.applet-type-choice strong, .applet-type-choice small { display: block; }
.applet-type-choice small { color: var(--muted); margin-top: 2px; }
@media (max-width: 960px) { .applet-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .applet-filters { grid-template-columns: 1fr; } }
/* Step 9: stable Applet table/filter layout */
#page-applets { display: none; }
#page-applets.active { display: block; }
#page-applets .section-toolbar { margin-bottom: 16px; }
.applet-filter-card { width: 100%; margin-bottom: 16px; overflow: visible; }
.applet-filters { grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.4fr) minmax(150px, 1fr) minmax(220px, auto); gap: 14px; width: 100%; }
.applet-filters .field, .applet-filters input, .applet-filters select { min-width: 0; width: 100%; }
.applet-filter-actions { min-width: 0; }
.applet-filter-buttons { justify-content: flex-end; }
.applet-filter-buttons .btn { white-space: nowrap; }
.applet-table-card { width: 100%; overflow-x: auto; overflow-y: hidden; }
.applet-table { width: 100%; min-width: 1120px; table-layout: fixed; }
.applet-table th:nth-child(1), .applet-table td:nth-child(1) { width: 14%; }
.applet-table th:nth-child(2), .applet-table td:nth-child(2) { width: 25%; }
.applet-table th:nth-child(3), .applet-table td:nth-child(3) { width: 11%; }
.applet-table th:nth-child(4), .applet-table td:nth-child(4) { width: 13%; }
.applet-table th:nth-child(5), .applet-table td:nth-child(5) { width: 13%; }
.applet-table th:nth-child(6), .applet-table td:nth-child(6) { width: 24%; }
.applet-table td { vertical-align: top; overflow-wrap: anywhere; }
.applet-table td:nth-child(6) { overflow-wrap: normal; }
.applet-table .table-sort { align-items: center; gap: 6px; }
@media (max-width: 980px) { .applet-filters { grid-template-columns: 1fr 1fr; } .applet-filter-buttons { justify-content: flex-start; } }
@media (max-width: 640px) { .applet-filters { grid-template-columns: 1fr; } .applet-filter-buttons .btn { flex: 1 1 auto; } }
/* Step 9: Applet table/filter layout hardening */
.applet-filter-card { box-sizing: border-box; }
.applet-filter-card .applet-filters { padding: 16px; box-sizing: border-box; align-items: end; }
.applet-filter-card .field { min-width: 0; }
.applet-filter-actions { align-self: end; }
.applet-filter-buttons { display: flex; gap: 8px; flex-wrap: nowrap; }
.applet-table-card { max-width: 100%; }
.applet-table { min-width: 1120px; }
.applet-table th, .applet-table td { box-sizing: border-box; }
.applet-table th:nth-child(1), .applet-table td:nth-child(1) { width: 14%; }
.applet-table th:nth-child(2), .applet-table td:nth-child(2) { width: 25%; }
.applet-table th:nth-child(3), .applet-table td:nth-child(3) { width: 11%; }
.applet-table th:nth-child(4), .applet-table td:nth-child(4) { width: 14%; }
.applet-table th:nth-child(5), .applet-table td:nth-child(5) { width: 13%; }
.applet-table th:nth-child(6), .applet-table td:nth-child(6) { width: 24%; }
@media (max-width: 980px) { .applet-filter-buttons { flex-wrap: wrap; justify-content: flex-start; } }
@media (max-width: 640px) { .applet-filter-card .applet-filters { padding: 14px; } .applet-filter-buttons { flex-direction: column; align-items: stretch; } }
/* Step 9: Applet thumbnails in channel item order */
.channel-gallery-applet-thumb, .channel-applet-thumb { display: grid; place-items: center; align-content: center; gap: 5px; text-align: center; color: #fff; background: linear-gradient(135deg, #203d5e, #2e78c7); }
.channel-gallery-applet-thumb-external_web, .channel-applet-thumb-external_web { background: linear-gradient(135deg, #155e75, #2e78c7); }
.channel-gallery-applet-thumb-widget_page, .channel-applet-thumb-widget_page { background: linear-gradient(135deg, #166534, #4f9f62); }
.channel-gallery-applet-thumb-animation, .channel-applet-thumb-animation { background: linear-gradient(135deg, #7c2d12, #d97706); }
.channel-gallery-applet-thumb-builtin_clock, .channel-applet-thumb-builtin_clock { background: linear-gradient(135deg, #3730a3, #2563eb); }
.channel-gallery-applet-thumb-builtin_note, .channel-applet-thumb-builtin_note { background: linear-gradient(135deg, #854d0e, #ca8a04); }
.channel-applet-icon { display: inline-grid; place-items: center; min-width: 34px; min-height: 24px; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,.18); font-size: 11px; font-weight: 900; letter-spacing: 0; line-height: 1; }
.channel-gallery-applet-thumb > span:last-child, .channel-applet-thumb > span:last-child { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; line-height: 1.15; }
.channel-item-preview-button .channel-applet-thumb { width: 100%; height: 100%; padding: 5px; box-sizing: border-box; }
.channel-applet-preview-card { display: grid; justify-items: center; gap: 12px; padding: 20px; text-align: center; }
.channel-applet-preview-card .channel-applet-thumb { width: min(320px, 90vw); aspect-ratio: 16 / 9; border-radius: 8px; }
.channel-applet-preview-card strong { font-size: 18px; }
.channel-applet-preview-card p { margin: 0; color: var(--muted); }
/* Step 9: larger thumbnails in channel item order */
.channel-item-row { grid-template-columns: 34px 104px minmax(170px, 1.1fr) minmax(112px, .55fr) minmax(140px, .75fr) minmax(130px, .72fr) 124px; }
.channel-item-preview-button { width: 104px; min-height: 59px; }
.channel-item-preview-button .media-video-thumb { font-size: 11px; }
.channel-item-preview-button .channel-applet-icon { min-width: 38px; min-height: 27px; }
@media (max-width: 1100px) { .channel-item-row { grid-template-columns: 34px 104px minmax(170px, 1fr); } }
@media (max-width: 760px) { .channel-item-preview-button { width: 100%; max-width: 180px; } }
/* Step 9: Widget page editor */
.widget-editor { display: grid; grid-template-columns: 260px minmax(360px, 1fr) 310px; gap: 14px; min-height: 620px; }
.widget-editor-panel { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); padding: 12px; overflow: auto; }
.widget-editor-panel h4 { margin: 16px 0 8px; font-size: 13px; color: #34445b; }
.widget-layout-list, .widget-palette { display: grid; gap: 8px; }
.widget-layout-list .mini-btn, .widget-palette .mini-btn { text-align: left; }
.widget-layout-list .mini-btn.active { background: var(--primary); color: #fff; }
.widget-editor-canvas-shell { display: grid; place-items: center; min-height: 620px; border: 1px solid var(--border); border-radius: 8px; background: #dfe6ee; padding: 16px; overflow: auto; }
.widget-editor-canvas { width: min(100%, 820px); aspect-ratio: 16 / 9; display: grid; gap: 10px; padding: 10px; border-radius: 8px; box-shadow: 0 10px 28px rgba(18,38,63,.16); color: #fff; }
.widget-editor-canvas[data-ratio="4-3"] { aspect-ratio: 4 / 3; }
.widget-editor-canvas[data-ratio="9-16"] { aspect-ratio: 9 / 16; max-height: 560px; width: auto; }
.widget-editor-canvas[data-layout="one"] { grid-template-columns: 1fr; }
.widget-editor-canvas[data-layout="two"] { grid-template-columns: repeat(2, 1fr); }
.widget-editor-canvas[data-layout="three"] { grid-template-columns: repeat(3, 1fr); }
.widget-editor-canvas[data-layout="header"] { grid-template-rows: 28% 1fr; }
.widget-editor-canvas[data-layout="footer"] { grid-template-rows: 1fr 24%; }
.widget-editor-canvas[data-layout="left"], .widget-editor-canvas[data-layout="right"] { grid-template-columns: 32% 1fr; }
.widget-editor-canvas[data-layout="header-left"] { grid-template-columns: 30% 1fr; grid-template-rows: 26% 1fr; }
.widget-editor-canvas[data-layout="header-left"] .widget-canvas-region-header { grid-column: 1 / -1; }
.widget-canvas-region { display: grid; grid-template-rows: auto 1fr; gap: 8px; min-width: 0; min-height: 0; border: 2px solid rgba(255,255,255,.24); border-radius: 7px; padding: 8px; background: rgba(255,255,255,.08); }
.widget-canvas-region.selected { border-color: #7dd3fc; box-shadow: inset 0 0 0 2px rgba(125,211,252,.2); }
.widget-canvas-region header { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0; opacity: .82; }
.widget-canvas-region > div { display: grid; gap: 8px; align-content: start; overflow: auto; }
.widget-canvas-region p { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; }
.widget-canvas-item { width: 100%; min-height: 70px; display: grid; place-items: center; gap: 4px; border: 1px solid rgba(255,255,255,.28); border-radius: 7px; color: #fff; background: rgba(0,0,0,.25); padding: 8px; overflow: hidden; }
.widget-canvas-item.selected { outline: 3px solid #7dd3fc; }
.widget-canvas-item img { max-width: 100%; max-height: 110px; object-fit: contain; }
.widget-canvas-item small { color: rgba(255,255,255,.72); font-size: 10px; text-transform: uppercase; }
.widget-preview-clock { font-size: 32px; font-variant-numeric: tabular-nums; }
.widget-preview-chip, .widget-preview-analog { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.18); font-weight: 900; }
.widget-preview-analog::before { content: ""; width: 28px; height: 28px; border: 3px solid #fff; border-radius: 50%; }
@media (max-width: 1180px) { .widget-editor { grid-template-columns: 1fr; } .widget-editor-panel { max-height: 360px; } }

/* Step 9: full page widget editor */
.widget-editor-page{min-height:100vh;background:#eef2f6;color:var(--text)}
.widget-editor-topbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 18px;background:#15263d;color:#fff;box-shadow:0 2px 14px rgba(0,0,0,.18)}
.widget-editor-topbar strong,.widget-editor-topbar span{display:block}.widget-editor-topbar span{font-size:12px;color:#cbd5e1}.widget-editor-topbar nav{display:flex;gap:8px;align-items:center}.widget-editor-topbar a{text-decoration:none}
.widget-editor-app{display:grid;grid-template-columns:270px minmax(640px,1fr) 330px;height:calc(100vh - 64px);min-height:680px}.widget-editor-sidebar,.widget-editor-inspector{background:#fff;overflow:auto}.widget-editor-sidebar{border-right:1px solid var(--border)}.widget-editor-inspector{border-left:1px solid var(--border)}
.widget-editor-section{padding:16px;border-bottom:1px solid var(--border)}.widget-editor-section h2{margin:0 0 12px;font-size:15px}.widget-palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);padding:9px 10px;text-align:left}.layout-btn+ .layout-btn{margin-top:7px}.layout-btn.active{border-color:var(--primary);background:#eef6fe;color:var(--primary);font-weight:800}.widget-column-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.widget-editor-workspace{display:flex;flex-direction:column;min-width:0;overflow:hidden}.widget-workspace-toolbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:#fff;color:var(--muted);font-size:13px}.widget-workspace-toolbar .success{color:var(--success);font-weight:800}.widget-workspace-toolbar .danger{color:var(--danger);font-weight:800}.widget-stage-shell{flex:1;display:grid;place-items:center;overflow:auto;padding:18px;background:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.widget-stage{width:min(1180px,100%);aspect-ratio:16/9;display:grid;gap:6px;padding:6px;background:#fff;box-shadow:0 10px 30px rgba(18,38,63,.18);overflow:hidden}.widget-stage[data-ratio="4-3"]{aspect-ratio:4/3}.widget-stage[data-ratio="1-1"]{aspect-ratio:1/1;max-height:calc(100vh - 140px);width:auto;min-width:620px}.widget-stage[data-layout="one"]{grid-template-columns:1fr}.widget-stage[data-layout="two"],.widget-stage[data-layout="three"]{grid-template-columns:var(--columns)}.widget-stage[data-layout="header"]{grid-template-columns:1fr;grid-template-rows:22% 1fr}.widget-stage[data-layout="footer"]{grid-template-columns:1fr;grid-template-rows:1fr 22%}.widget-stage[data-layout="left"],.widget-stage[data-layout="right"]{grid-template-columns:var(--columns)}.widget-stage[data-layout="header-left"]{grid-template-columns:var(--columns);grid-template-rows:22% 1fr}.widget-stage[data-layout="header-left"] .widget-region:first-child{grid-column:1/-1}.widget-region{position:relative;min-width:0;min-height:0;overflow:hidden;border:1px dashed #94a3b8;background:rgba(248,250,252,.72)}.widget-region.selected{outline:3px solid #60a5fa;outline-offset:-3px}.region-label{position:absolute;z-index:1000;top:6px;right:6px;border-radius:5px;padding:3px 6px;background:rgba(15,23,42,.72);color:#fff;font-size:10px;font-weight:800;pointer-events:none}.region-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#94a3b8;font-weight:800}.free-widget{position:absolute;min-width:24px;min-height:24px;border:1px solid rgba(37,99,235,.08);background:#fff;overflow:hidden;touch-action:none;cursor:move}.free-widget.selected{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.25)}.resize-handle{position:absolute;right:0;bottom:0;width:14px;height:14px;background:#2563eb;cursor:nwse-resize;z-index:1001}.free-widget-content{width:100%;height:100%;overflow:hidden}.free-widget-content.text{display:grid;align-content:center;padding:6%;overflow:auto}.free-widget-content.text h1,.free-widget-content.text h2,.free-widget-content.text p{margin:.25em 0}.free-widget-content.image{display:grid;place-items:center;color:#fff;font-weight:800;text-align:center}.free-widget-content.image img{width:100%;height:100%;display:block}.free-widget-content.digital{display:grid;place-items:center;align-content:center;gap:6px;text-align:center}.free-widget-content.digital strong{font-size:clamp(28px,5vw,88px);font-variant-numeric:tabular-nums;line-height:1}.free-widget-content.digital span{font-size:clamp(12px,1.4vw,24px)}.free-widget-content.analog{display:grid;place-items:center}.editor-clock-face{position:relative;width:min(78%,260px);aspect-ratio:1;border:8px solid #1e293b;border-radius:50%;background:#fff}.editor-clock-face::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:#111827;transform:translate(-50%,-50%)}.editor-clock-face span{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:99px;background:#111827}.editor-clock-face .hour{height:27%;width:5px}.editor-clock-face .minute{height:37%;width:3px}.editor-clock-face .second{height:42%;width:2px;background:#dc2626}.free-widget-content.iframe iframe,.free-widget-content.html iframe{display:block;width:100%;height:100%;border:0;background:#fff}.free-widget-content.info{display:grid;align-content:center;padding:8%;border-left:7px solid #2563eb}.free-widget-content.info h3{margin:0 0 8px;font-size:clamp(16px,2vw,38px)}.free-widget-content.info p{margin:0;font-size:clamp(12px,1.4vw,24px)}.widget-position-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.widget-layer-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.checkbox-line{display:flex;align-items:center;gap:8px;margin:8px 0;color:#4a586d;font-weight:700;font-size:12px}.checkbox-line input{width:auto}.widget-preview-host{display:grid;place-items:center;background:#111827;min-height:60vh}.widget-preview-host .widget-stage{width:min(1280px,100%)}
@media(max-width:1180px){.widget-editor-app{grid-template-columns:1fr;height:auto}.widget-editor-sidebar,.widget-editor-inspector{border:0}.widget-editor-workspace{min-height:70vh}.widget-stage[data-ratio="1-1"]{min-width:0;width:min(100%,720px)}}

/* Step 9: Widget editor prototype-aligned refinement */
.widget-editor-page{--widget-bg:#eef2f6;--widget-panel:#fff;--widget-line:#d7dee8;--widget-muted:#64748b;--widget-blue:#2563eb;min-height:100vh;background:var(--widget-bg);color:#1e293b;overflow:hidden}
.widget-editor-page .btn{border-radius:8px;font-weight:700;padding:9px 13px}
.widget-editor-topbar{height:64px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;box-shadow:0 2px 12px rgba(0,0,0,.18);gap:16px}
.widget-editor-brand{display:flex;align-items:baseline;gap:10px;min-width:0}.widget-editor-brand strong{font-size:18px}.widget-editor-brand small{font-size:12px;color:#cbd5e1;font-weight:400}.widget-editor-actions{display:flex;gap:8px;align-items:center}.widget-editor-actions a{text-decoration:none}
.widget-toast-container{top:82px;right:18px;z-index:120}
.widget-editor-app{display:grid;grid-template-columns:260px minmax(620px,1fr) 310px;height:calc(100vh - 64px);min-height:0;background:var(--widget-bg)}
.widget-editor-sidebar,.widget-editor-inspector{background:var(--widget-panel);overflow:auto}.widget-editor-sidebar{border-right:1px solid var(--widget-line)}.widget-editor-inspector{border-left:1px solid var(--widget-line)}
.widget-panel-head{padding:18px;border-bottom:1px solid var(--widget-line)}.widget-panel-head h2{font-size:16px;margin:0 0 4px;color:#1e293b}.widget-panel-head p{font-size:12px;color:var(--widget-muted);margin:0;line-height:1.4}
.widget-editor-section{padding:16px;border-bottom:1px solid var(--widget-line)}.widget-editor-section h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#475569;margin:0 0 10px}.widget-editor-section .field label{font-size:12px}.widget-editor-section input,.widget-editor-section select,.widget-editor-section textarea{border-color:var(--widget-line);border-radius:7px;background:#fff}
.widget-layout-list{display:grid;gap:7px}.layout-btn{display:flex;align-items:center;justify-content:flex-start;gap:9px;border:1px solid var(--widget-line);background:#fff;border-radius:8px;padding:9px;color:#1e293b;font-weight:700}.layout-btn+ .layout-btn{margin-top:0}.layout-btn.active{border-color:#60a5fa;background:#eff6ff;color:#1d4ed8}.layout-icon{width:44px;height:28px;border:1px solid #94a3b8;border-radius:3px;display:grid;gap:2px;padding:2px;background:#f8fafc;flex:0 0 auto}.layout-icon i{display:block;background:#cbd5e1;min-width:0;min-height:0}
.widget-palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.widget-add{border:1px solid var(--widget-line);background:#fff;border-radius:9px;padding:10px 8px;text-align:left;color:#1e293b}.widget-add:hover{border-color:#93c5fd;background:#eff6ff}.widget-add b{display:block;font-size:13px}.widget-add span{display:block;font-size:11px;color:var(--widget-muted);margin-top:2px}.widget-add-wide{grid-column:1/3}.widget-help{font-size:11px;line-height:1.45;color:var(--widget-muted);margin:12px 0 0}
.widget-editor-workspace{display:flex;flex-direction:column;min-width:0;overflow:hidden}.widget-workspace-toolbar{display:flex;justify-content:space-between;align-items:center;margin:0;padding:18px;gap:12px;background:transparent;border:0}.widget-workspace-toolbar .meta{font-size:12px;color:#475569;background:#fff;padding:8px 10px;border-radius:8px;border:1px solid var(--widget-line);line-height:1.35}.widget-workspace-toolbar .success{color:#15803d;font-weight:800}.widget-workspace-toolbar .danger{color:#b91c1c;font-weight:800}
.widget-stage-shell{flex:1;overflow:auto;padding:0 18px 18px;background:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;display:grid;place-items:center}.widget-stage-preview{width:min(1180px,100%);background:#0f172a;border-radius:12px;box-shadow:0 8px 26px rgba(15,23,42,.08);padding:10px}.widget-stage{width:100%;aspect-ratio:16/9;background:#fff;overflow:hidden;display:grid;gap:6px;padding:6px;box-shadow:none;border-radius:0;color:#1e293b}.widget-stage[data-ratio="4-3"]{aspect-ratio:4/3}.widget-stage[data-ratio="1-1"]{aspect-ratio:1/1;max-height:calc(100vh - 168px);width:auto;min-width:min(620px,100%)}
.widget-stage[data-layout="one"]{grid-template-columns:1fr;grid-template-rows:1fr}.widget-stage[data-layout="two"],.widget-stage[data-layout="three"]{grid-template-columns:var(--columns);grid-template-rows:1fr}.widget-stage[data-layout="header"]{grid-template-columns:1fr;grid-template-rows:20% 1fr}.widget-stage[data-layout="footer"]{grid-template-columns:1fr;grid-template-rows:1fr 20%}.widget-stage[data-layout="left"],.widget-stage[data-layout="right"]{grid-template-columns:var(--columns);grid-template-rows:1fr}.widget-stage[data-layout="header-left"]{grid-template-columns:var(--columns);grid-template-rows:20% 1fr}.widget-stage[data-layout="header-left"] .widget-region:first-child{grid-column:1/-1}
.widget-region{min-width:0;min-height:0;border:1px dashed #94a3b8;background:#f8fafc;position:relative;padding:6px;overflow:hidden}.widget-region.selected{outline:3px solid #60a5fa;outline-offset:-3px}.region-label{position:absolute;z-index:1000;top:6px;right:7px;font-size:9px;background:rgba(15,23,42,.72);color:#fff;padding:3px 6px;border-radius:5px;pointer-events:none}.region-empty{height:100%;display:grid;place-items:center;margin:0;text-align:center;color:#94a3b8;font-size:12px;padding:16px;font-weight:700}
.free-widget{position:absolute;min-width:52px;min-height:52px;border:1px solid transparent;background:#fff;overflow:hidden;touch-action:none;cursor:move}.free-widget.selected{border-color:#2563eb;box-shadow:inset 0 0 0 1px #2563eb}.resize-handle{position:absolute;right:0;bottom:0;width:15px;height:15px;background:#2563eb;cursor:nwse-resize;z-index:1001}.free-widget-content{width:100%;height:100%;overflow:hidden}.free-widget-content.text{display:flex;align-items:center;padding:8%;overflow:auto}.free-widget-content.image{display:flex;align-items:center;justify-content:center;background:#111827;color:#fff}.free-widget-content.image img{width:100%;height:100%;display:block}.free-widget-content.digital{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0f172a;color:#fff}.free-widget-content.digital strong{font-size:clamp(28px,5vw,80px);font-weight:700;letter-spacing:.04em;line-height:1}.free-widget-content.digital span{font-size:clamp(12px,1.4vw,24px);margin-top:8px}.free-widget-content.info{display:flex;align-items:center;justify-content:center;padding:8%;background:#eff6ff;border-left:6px solid #2563eb}.free-widget-content.info h3{margin:0 0 8px;font-size:clamp(16px,2vw,34px)}.free-widget-content.info p{margin:0;line-height:1.4}.free-widget-content.iframe iframe,.free-widget-content.html iframe{width:100%;height:100%;border:0;background:#fff}.free-widget-content.analog{display:flex;align-items:center;justify-content:center;background:#f8fafc}.editor-clock-face{width:min(70%,280px);aspect-ratio:1;border:8px solid #1e293b;border-radius:50%;position:relative;background:#fff}.editor-clock-face::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#111827;left:50%;top:50%;transform:translate(-50%,-50%)}
.widget-position-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.widget-layer-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.widget-preview-host{display:grid;place-items:center;background:#111827;min-height:60vh}.widget-preview-host .widget-stage{width:min(1280px,100%)}.widget-preview-host .widget-stage-preview{width:min(1300px,100%)}
@media(max-width:1100px){.widget-editor-page{overflow:auto}.widget-editor-app{grid-template-columns:220px minmax(500px,1fr);height:auto;min-height:calc(100vh - 64px)}.widget-editor-inspector{position:fixed;right:0;top:64px;bottom:0;width:310px;z-index:70;box-shadow:-8px 0 20px rgba(0,0,0,.08)}.widget-stage[data-ratio="1-1"]{min-width:0;width:min(100%,720px)}}
/* Step 9: widget editor pixel format and standalone preview */
.widget-editor-sidebar{font-size:12px}.widget-editor-sidebar .widget-panel-head{padding:14px 16px}.widget-editor-sidebar .widget-panel-head h2{font-size:14px}.widget-editor-sidebar .widget-panel-head p{font-size:11px}.widget-editor-sidebar .widget-editor-section{padding:12px 14px}.widget-editor-sidebar .widget-editor-section h2{font-size:11px;margin-bottom:8px}.widget-editor-sidebar .field{margin-bottom:9px}.widget-editor-sidebar .field label{font-size:11px;margin-bottom:4px}.widget-editor-sidebar input,.widget-editor-sidebar select,.widget-editor-sidebar textarea{font-size:12px;padding:6px 7px}.widget-editor-sidebar .layout-btn{font-size:12px;padding:7px 8px}.widget-editor-sidebar .layout-icon{width:38px;height:24px}.widget-editor-sidebar .widget-add{padding:8px 7px}.widget-editor-sidebar .widget-add b{font-size:12px}.widget-editor-sidebar .widget-add span{font-size:10px}.widget-editor-sidebar .widget-help{font-size:10px}
.widget-size-inputs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:center}.widget-size-inputs span{font-size:12px;color:#64748b;font-weight:800}.widget-size-inputs input{text-align:right}
.widget-preview-page{margin:0;background:#020617;color:#fff;overflow:hidden}.widget-preview-standalone{width:100vw;height:100vh;display:grid;place-items:center;background:#020617}.widget-preview-empty{margin:0;padding:24px;color:#cbd5e1;font-size:16px}.widget-stage-fullscreen{width:100vw;height:100vh;max-width:100vw;max-height:100vh;box-shadow:none;border-radius:0}.widget-stage-fullscreen .region-label,.widget-stage-fullscreen .resize-handle{display:none}.widget-stage-fullscreen .widget-region{border:0;background:transparent}.widget-stage-fullscreen .free-widget{border:0;cursor:default}.widget-stage-fullscreen .free-widget.selected{box-shadow:none}
/* Step 9: widget inspector media chooser */
.widget-editor-inspector{font-size:12px;background:#f8fafc}
.widget-editor-inspector .widget-editor-section{padding:12px;background:#f8fafc}
.widget-inspector-title{display:grid;gap:7px;margin:0 0 10px;padding:10px;border:1px solid #d7dee8;border-radius:8px;background:#fff}
.widget-inspector-title .badge{justify-self:start;border-radius:6px;padding:4px 7px;background:#e0f2fe;color:#075985;font-size:10px;text-transform:uppercase;letter-spacing:0;font-weight:900}
.widget-inspector-title strong{font-size:14px;line-height:1.25;color:#0f172a;word-break:break-word}
.inspector-card{margin:0 0 10px;padding:11px;border:1px solid #d7dee8;border-radius:8px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.inspector-card h3{margin:0 0 9px;font-size:11px;line-height:1.2;text-transform:uppercase;letter-spacing:0;color:#475569}
.inspector-card .field{margin-bottom:9px}.inspector-card .field:last-child{margin-bottom:0}
.inspector-card input,.inspector-card select,.inspector-card textarea{font-size:12px;padding:7px 8px;border-radius:7px}
.widget-bg-row{display:grid;grid-template-columns:48px minmax(0,1fr);gap:9px;align-items:center}.widget-bg-row input[type="color"]{width:48px;height:36px;padding:3px}
.checkbox-line.compact{margin:0;font-size:12px;min-height:36px}.checkbox-line.compact input{margin:0}
.media-choice-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px;border:1px solid #d7dee8;border-radius:8px;background:#f8fafc}
.media-choice-summary span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#334155;font-size:12px}
.widget-media-modal{max-width:920px}.widget-media-filter{margin-bottom:12px}.widget-media-filter label{display:block;font-size:12px;font-weight:800;color:#475569;margin-bottom:5px}.widget-media-filter input{width:100%}
.widget-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:min(62vh,560px);overflow:auto;padding:2px}
.widget-media-option{display:grid;grid-template-rows:100px auto auto;gap:6px;border:1px solid #d7dee8;border-radius:8px;background:#fff;color:#1e293b;text-align:left;padding:7px;min-width:0}
.widget-media-option:hover{border-color:#60a5fa;background:#eff6ff}.widget-media-option .thumb{display:grid;place-items:center;background:#e2e8f0;border-radius:6px;overflow:hidden}.widget-media-option img{width:100%;height:100%;object-fit:contain;display:block}.widget-media-option strong{font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-media-option small{font-size:10px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Step 9: text widget typography controls */
.text-style-grid{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:8px;align-items:start}
.text-style-grid .field{margin-bottom:9px;min-width:0}.text-style-grid .field label{display:block;min-height:16px;line-height:16px;white-space:nowrap;margin-bottom:5px}
/* Step 9: refined analog clock face in widget editor */
.widget-stage .free-widget-content.analog .editor-clock-face,.widget-preview-standalone .editor-clock-face{width:min(82%,280px);aspect-ratio:1;border:clamp(5px,.8vw,10px) solid #1e293b;border-radius:50%;position:relative;background:radial-gradient(circle at center,#fff 0 58%,transparent 59%),repeating-conic-gradient(from 0deg,#1e293b 0deg 1.7deg,transparent 1.7deg 30deg),repeating-conic-gradient(from 0deg,rgba(15,23,42,.32) 0deg .7deg,transparent .7deg 6deg),#fff;box-shadow:inset 0 0 0 clamp(3px,.35vw,6px) rgba(15,23,42,.12),0 4px 16px rgba(15,23,42,.18)}
.widget-stage .free-widget-content.analog .editor-clock-face::before,.widget-preview-standalone .editor-clock-face::before{content:"";position:absolute;inset:12%;border-radius:50%;background:#fff;z-index:0}
.widget-stage .free-widget-content.analog .editor-clock-face::after,.widget-preview-standalone .editor-clock-face::after{z-index:4;width:clamp(10px,1vw,16px);height:clamp(10px,1vw,16px);background:#111827;box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.widget-stage .free-widget-content.analog .editor-clock-face span,.widget-preview-standalone .editor-clock-face span{z-index:3;left:50%;bottom:50%;transform-origin:bottom center;border-radius:99px;background:#111827}
.widget-stage .free-widget-content.analog .editor-clock-face .hour,.widget-preview-standalone .editor-clock-face .hour{width:clamp(5px,.55vw,8px);height:27%;background:#0f172a}
.widget-stage .free-widget-content.analog .editor-clock-face .minute,.widget-preview-standalone .editor-clock-face .minute{width:clamp(3px,.35vw,5px);height:37%;background:#111827}
.widget-stage .free-widget-content.analog .editor-clock-face .second,.widget-preview-standalone .editor-clock-face .second{width:clamp(2px,.22vw,3px);height:41%;background:#dc2626}
/* Step 9: transparent analog clock face in widget editor */
.widget-stage .free-widget-content.analog[style*="background:transparent"] .editor-clock-face,.widget-preview-standalone .free-widget-content.analog[style*="background:transparent"] .editor-clock-face{background:repeating-conic-gradient(from 0deg,#1e293b 0deg 1.7deg,transparent 1.7deg 30deg),repeating-conic-gradient(from 0deg,rgba(15,23,42,.36) 0deg .7deg,transparent .7deg 6deg);box-shadow:none}
.widget-stage .free-widget-content.analog[style*="background:transparent"] .editor-clock-face::before,.widget-preview-standalone .free-widget-content.analog[style*="background:transparent"] .editor-clock-face::before{background:transparent}
/* Step 9: transparent widget wrappers and stable transparent clocks */
.widget-stage .free-widget.is-transparent,.widget-preview-standalone .free-widget.is-transparent{background:transparent}
.widget-stage .free-widget.is-transparent .free-widget-content,.widget-preview-standalone .free-widget.is-transparent .free-widget-content{background:transparent!important}
.widget-stage .free-widget.is-transparent .editor-clock-face,.widget-preview-standalone .free-widget.is-transparent .editor-clock-face{background:transparent;box-shadow:none}
.widget-stage .free-widget.is-transparent .editor-clock-face::before,.widget-preview-standalone .free-widget.is-transparent .editor-clock-face::before{background:repeating-conic-gradient(from 0deg,#1e293b 0deg 1.7deg,transparent 1.7deg 30deg),repeating-conic-gradient(from 0deg,rgba(15,23,42,.36) 0deg .7deg,transparent .7deg 6deg);-webkit-mask:radial-gradient(circle,transparent 0 68%,#000 69% 100%);mask:radial-gradient(circle,transparent 0 68%,#000 69% 100%)}
/* Step 9: restore simple analog clock face in widget editor */
.widget-stage .free-widget-content.analog .editor-clock-face,
.widget-preview-standalone .editor-clock-face{width:min(70%,280px);aspect-ratio:1;border:8px solid #1e293b;border-radius:50%;position:relative;background:#fff;box-shadow:none}
.widget-stage .free-widget-content.analog .editor-clock-face::before,
.widget-preview-standalone .editor-clock-face::before{content:none}
.widget-stage .free-widget-content.analog .editor-clock-face::after,
.widget-preview-standalone .editor-clock-face::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#111827;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:none;z-index:4}
.widget-stage .free-widget-content.analog .editor-clock-face span,
.widget-preview-standalone .editor-clock-face span{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:99px;background:#111827;z-index:3}
.widget-stage .free-widget-content.analog .editor-clock-face .hour,
.widget-preview-standalone .editor-clock-face .hour{height:27%;width:5px;background:#0f172a}
.widget-stage .free-widget-content.analog .editor-clock-face .minute,
.widget-preview-standalone .editor-clock-face .minute{height:37%;width:3px;background:#111827}
.widget-stage .free-widget-content.analog .editor-clock-face .second,
.widget-preview-standalone .editor-clock-face .second{height:42%;width:2px;background:#dc2626}
.widget-stage .free-widget.is-transparent,
.widget-preview-standalone .free-widget.is-transparent{background:transparent}
.widget-stage .free-widget.is-transparent .free-widget-content,
.widget-preview-standalone .free-widget.is-transparent .free-widget-content{background:transparent!important}
.widget-stage .free-widget.is-transparent .editor-clock-face,
.widget-preview-standalone .free-widget.is-transparent .editor-clock-face{background:transparent;box-shadow:none}
.widget-stage .free-widget.is-transparent .editor-clock-face::before,
.widget-preview-standalone .free-widget.is-transparent .editor-clock-face::before{content:none;background:transparent;-webkit-mask:none;mask:none}
/* Step 9: corrected analog clock hour marks in widget editor */
.widget-stage .free-widget-content.analog .editor-clock-face,
.widget-preview-standalone .editor-clock-face{width:min(72%,280px);aspect-ratio:1;border:8px solid #1e293b;border-radius:50%;position:relative;background:#fff;box-shadow:inset 0 0 0 4px rgba(15,23,42,.08)}
.widget-stage .free-widget-content.analog .editor-clock-face::before,
.widget-preview-standalone .editor-clock-face::before{content:"";position:absolute;inset:7%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#1e293b 0deg 2.4deg,transparent 2.4deg 30deg);-webkit-mask:radial-gradient(circle,transparent 0 78%,#000 79% 100%);mask:radial-gradient(circle,transparent 0 78%,#000 79% 100%);z-index:1;pointer-events:none}
.widget-stage .free-widget-content.analog .editor-clock-face::after,
.widget-preview-standalone .editor-clock-face::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#111827;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(255,255,255,.9);z-index:4}
.widget-stage .free-widget-content.analog .editor-clock-face span,
.widget-preview-standalone .editor-clock-face span{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:99px;background:#111827;z-index:3}
.widget-stage .free-widget-content.analog .editor-clock-face .hour,
.widget-preview-standalone .editor-clock-face .hour{height:27%;width:5px;background:#0f172a}
.widget-stage .free-widget-content.analog .editor-clock-face .minute,
.widget-preview-standalone .editor-clock-face .minute{height:37%;width:3px;background:#111827}
.widget-stage .free-widget-content.analog .editor-clock-face .second,
.widget-preview-standalone .editor-clock-face .second{height:42%;width:2px;background:#dc2626}
.widget-stage .free-widget.is-transparent,
.widget-preview-standalone .free-widget.is-transparent{background:transparent}
.widget-stage .free-widget.is-transparent .free-widget-content,
.widget-preview-standalone .free-widget.is-transparent .free-widget-content{background:transparent!important}
.widget-stage .free-widget.is-transparent .editor-clock-face,
.widget-preview-standalone .free-widget.is-transparent .editor-clock-face{background:transparent;box-shadow:none}
.widget-stage .free-widget.is-transparent .editor-clock-face::before,
.widget-preview-standalone .free-widget.is-transparent .editor-clock-face::before{content:"";background:repeating-conic-gradient(from 0deg,#1e293b 0deg 2.4deg,transparent 2.4deg 30deg);-webkit-mask:radial-gradient(circle,transparent 0 78%,#000 79% 100%);mask:radial-gradient(circle,transparent 0 78%,#000 79% 100%)}
/* Step 9: svg hour mark analog clock face in widget editor */
.widget-stage .free-widget-content.analog .editor-clock-face,
.widget-preview-standalone .editor-clock-face{width:min(72%,280px);aspect-ratio:1;border:8px solid #1e293b;border-radius:50%;position:relative;background:#fff;box-shadow:inset 0 0 0 4px rgba(15,23,42,.08);overflow:hidden}
.widget-stage .free-widget-content.analog .editor-clock-face::before,
.widget-preview-standalone .editor-clock-face::before{content:"";position:absolute;inset:0;border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%231e293b' stroke-linecap='round'%3E%3Cline x1='50' y1='8' x2='50' y2='18' stroke-width='5'/%3E%3Cline x1='71' y1='13.6' x2='67' y2='20.6' stroke-width='4'/%3E%3Cline x1='86.4' y1='29' x2='79.4' y2='33' stroke-width='4'/%3E%3Cline x1='92' y1='50' x2='82' y2='50' stroke-width='5'/%3E%3Cline x1='86.4' y1='71' x2='79.4' y2='67' stroke-width='4'/%3E%3Cline x1='71' y1='86.4' x2='67' y2='79.4' stroke-width='4'/%3E%3Cline x1='50' y1='92' x2='50' y2='82' stroke-width='5'/%3E%3Cline x1='29' y1='86.4' x2='33' y2='79.4' stroke-width='4'/%3E%3Cline x1='13.6' y1='71' x2='20.6' y2='67' stroke-width='4'/%3E%3Cline x1='8' y1='50' x2='18' y2='50' stroke-width='5'/%3E%3Cline x1='13.6' y1='29' x2='20.6' y2='33' stroke-width='4'/%3E%3Cline x1='29' y1='13.6' x2='33' y2='20.6' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:100% 100%;-webkit-mask:none;mask:none;z-index:1;pointer-events:none}
.widget-stage .free-widget-content.analog .editor-clock-face::after,
.widget-preview-standalone .editor-clock-face::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#111827;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(255,255,255,.9);z-index:4}
.widget-stage .free-widget-content.analog .editor-clock-face span,
.widget-preview-standalone .editor-clock-face span{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:99px;background:#111827;z-index:3}
.widget-stage .free-widget-content.analog .editor-clock-face .hour,
.widget-preview-standalone .editor-clock-face .hour{height:27%;width:5px;background:#0f172a}
.widget-stage .free-widget-content.analog .editor-clock-face .minute,
.widget-preview-standalone .editor-clock-face .minute{height:37%;width:3px;background:#111827}
.widget-stage .free-widget-content.analog .editor-clock-face .second,
.widget-preview-standalone .editor-clock-face .second{height:42%;width:2px;background:#dc2626}
.widget-stage .free-widget.is-transparent,
.widget-preview-standalone .free-widget.is-transparent{background:transparent}
.widget-stage .free-widget.is-transparent .free-widget-content,
.widget-preview-standalone .free-widget.is-transparent .free-widget-content{background:transparent!important}
.widget-stage .free-widget.is-transparent .editor-clock-face,
.widget-preview-standalone .free-widget.is-transparent .editor-clock-face{background:transparent;box-shadow:none}
.widget-stage .free-widget.is-transparent .editor-clock-face::before,
.widget-preview-standalone .free-widget.is-transparent .editor-clock-face::before{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%231e293b' stroke-linecap='round'%3E%3Cline x1='50' y1='8' x2='50' y2='18' stroke-width='5'/%3E%3Cline x1='71' y1='13.6' x2='67' y2='20.6' stroke-width='4'/%3E%3Cline x1='86.4' y1='29' x2='79.4' y2='33' stroke-width='4'/%3E%3Cline x1='92' y1='50' x2='82' y2='50' stroke-width='5'/%3E%3Cline x1='86.4' y1='71' x2='79.4' y2='67' stroke-width='4'/%3E%3Cline x1='71' y1='86.4' x2='67' y2='79.4' stroke-width='4'/%3E%3Cline x1='50' y1='92' x2='50' y2='82' stroke-width='5'/%3E%3Cline x1='29' y1='86.4' x2='33' y2='79.4' stroke-width='4'/%3E%3Cline x1='13.6' y1='71' x2='20.6' y2='67' stroke-width='4'/%3E%3Cline x1='8' y1='50' x2='18' y2='50' stroke-width='5'/%3E%3Cline x1='13.6' y1='29' x2='20.6' y2='33' stroke-width='4'/%3E%3Cline x1='29' y1='13.6' x2='33' y2='20.6' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:100% 100%;-webkit-mask:none;mask:none}
/* Step 9: compact icon actions for applet table */
.applet-actions{display:grid;grid-template-columns:repeat(4,34px);justify-content:start;align-items:center;gap:8px;min-width:160px;white-space:nowrap}
.applet-actions .icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--border);border-radius:7px;background:#fff;color:#1f3654;text-decoration:none;cursor:pointer;line-height:1;padding:0}
.applet-actions .icon-btn svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.applet-actions .icon-btn:hover:not(.disabled){border-color:var(--primary);color:var(--primary);background:#eef6fe}
.applet-actions .icon-btn.danger{color:var(--danger)}
.applet-actions .icon-btn.danger:hover{border-color:var(--danger);background:#fff1f2}
.applet-actions .icon-btn.disabled{color:#94a3b8;background:#f8fafc;cursor:not-allowed}
.applet-table th:nth-child(6),.applet-table td:nth-child(6){width:18%}
.applet-table{min-width:1040px}
/* Step 9: widget region background colors */
.widget-stage{gap:0;padding:0}
.widget-region{border:0;background:var(--region-bg,#f8fafc);box-shadow:inset 0 0 0 1px rgba(148,163,184,.58)}
.widget-region.selected{outline:3px solid #60a5fa;outline-offset:-3px;box-shadow:inset 0 0 0 1px rgba(37,99,235,.7)}
.widget-stage-fullscreen .widget-region{background:var(--region-bg,#f8fafc)!important;box-shadow:none}
.region-color-btn{position:absolute;z-index:1002;top:6px;left:6px;width:28px;height:28px;border:0;border-radius:7px;background:rgba(15,23,42,.78);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.22)}
.region-color-btn:hover{background:#1e293b}
.region-color-btn:focus-visible{outline:3px solid #bfdbfe;outline-offset:2px}
.region-color-btn span{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#ef4444 0 33%,#facc15 33% 66%,#2563eb 66% 100%);box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.widget-region-color-modal .modal-body{display:grid;gap:14px}
.widget-region-color-modal input[type="color"]{width:72px;height:42px;padding:2px;border:1px solid var(--border);border-radius:8px;background:#fff}
/* Step 9: text widget headings follow widget editor size */
.widget-stage .free-widget-content.text h1,.widget-stage .free-widget-content.text h2,.widget-stage .free-widget-content.text h3,.widget-stage .free-widget-content.text h4,.widget-stage .free-widget-content.text p,.widget-stage .free-widget-content.text div,.widget-stage .free-widget-content.text span,.widget-stage .free-widget-content.text li,.widget-stage .free-widget-content.text strong,.widget-stage .free-widget-content.text b,.widget-stage .free-widget-content.text em,.widget-stage .free-widget-content.text i,.widget-stage .free-widget-content.text u,.widget-preview-standalone .free-widget-content.text h1,.widget-preview-standalone .free-widget-content.text h2,.widget-preview-standalone .free-widget-content.text h3,.widget-preview-standalone .free-widget-content.text h4,.widget-preview-standalone .free-widget-content.text p,.widget-preview-standalone .free-widget-content.text div,.widget-preview-standalone .free-widget-content.text span,.widget-preview-standalone .free-widget-content.text li,.widget-preview-standalone .free-widget-content.text strong,.widget-preview-standalone .free-widget-content.text b,.widget-preview-standalone .free-widget-content.text em,.widget-preview-standalone .free-widget-content.text i,.widget-preview-standalone .free-widget-content.text u{font-size:1em!important;font-family:inherit!important;color:inherit!important;line-height:1.15}
/* Step 9: text widget alignment fix */
.widget-stage .free-widget-content.text,.widget-preview-standalone .free-widget-content.text{display:flex;flex-direction:column;justify-content:center;align-items:stretch;text-align:inherit;overflow:hidden}
.widget-stage .free-widget-content.text > *,.widget-preview-standalone .free-widget-content.text > *{width:100%;max-width:100%;text-align:inherit}

/* Step 9: monitor-faithful editor stage scaling */
.widget-stage-preview{position:relative;overflow:hidden;flex:0 0 auto}
.widget-stage-preview::after{content:attr(data-scale);position:absolute;right:8px;bottom:8px;z-index:1100;border-radius:999px;padding:3px 7px;background:rgba(15,23,42,.72);color:#fff;font-size:10px;font-weight:800;pointer-events:none}
.widget-stage{transform-origin:top left;max-width:none;max-height:none;flex:0 0 auto}
.widget-stage-fullscreen{width:min(100vw,calc(100vh * var(--widget-ratio-number,1.777778)));height:auto;max-height:100vh;aspect-ratio:var(--widget-ratio,16/9);margin:auto;transform:none}
.widget-preview-standalone{overflow:hidden}
/* Step 9: plain top-aligned text widgets */
.widget-stage .free-widget.free-widget-text:not(.selected),.widget-preview-standalone .free-widget.free-widget-text{border:0;box-shadow:none;background:transparent}
.widget-stage .free-widget-content.text,.widget-preview-standalone .free-widget-content.text{justify-content:flex-start;align-items:stretch;border:0;box-shadow:none;overflow:hidden;text-align:inherit}
.widget-stage .free-widget-content.text > *,.widget-preview-standalone .free-widget-content.text > *{text-align:inherit;margin-left:0;margin-right:0}
.widget-stage .free-widget-content.text > :first-child,.widget-preview-standalone .free-widget-content.text > :first-child{margin-top:0}
.widget-stage .free-widget-content.text > :last-child,.widget-preview-standalone .free-widget-content.text > :last-child{margin-bottom:0}
/* Step 9: text widgets without inner spacing */
.widget-stage .free-widget-content.text,.widget-preview-standalone .free-widget-content.text{padding:0!important}
.widget-stage .free-widget-content.text > *,.widget-preview-standalone .free-widget-content.text > *{margin-left:0;margin-right:0}
.widget-stage .free-widget-content.text > :first-child,.widget-preview-standalone .free-widget-content.text > :first-child{margin-top:0}
/* Step 9 Content-Browser */
.content-browser-page { margin: 0; min-height: 100vh; background: #1f242b; color: #d4d7dc; overflow: hidden; }
.content-browser-page button, .content-browser-page input, .content-browser-page select, .content-browser-page textarea { font: inherit; }
.content-browser-topbar { height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 16px; background: #252a31; color: #f3f6fb; border-bottom: 1px solid #14181f; box-shadow: 0 8px 24px rgba(0, 0, 0, .20); }
.content-browser-brand { display: flex; flex-direction: column; gap: 2px; }
.content-browser-brand strong { font-size: 16px; line-height: 1.1; }
.content-browser-brand small { color: #9da7b4; font-size: 11px; }
.content-browser-actions { display: flex; align-items: center; gap: 8px; }
.content-icon-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid #3d4652; border-radius: 6px; color: #d4d7dc; background: #2f3640; font-size: 16px; line-height: 1; }
.content-icon-btn:hover { background: #3a4350; border-color: #5a6573; }
.content-browser-app { height: calc(100vh - 58px); display: grid; grid-template-columns: 300px minmax(460px, 1fr); gap: 0; overflow: hidden; }
.content-browser-sidebar { min-height: 0; background: #20252c; border-right: 1px solid #14181f; overflow: hidden; display: flex; flex-direction: column; }
.content-browser-workspace { min-height: 0; overflow: hidden; display: grid; grid-template-rows: 38px 34px minmax(0, 1fr); background: #111827; }
.content-explorer-head { height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 14px; border-bottom: 1px solid #14181f; background: #252a31; }
.content-explorer-head div { min-width: 0; display: grid; gap: 2px; }
.content-explorer-head strong { font-size: 11px; text-transform: uppercase; letter-spacing: 0; color: #c6ced8; }
.content-explorer-head span { min-width: 0; color: #8f9baa; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-panel { padding: 12px; border-bottom: 1px solid #14181f; }
.content-panel h2 { margin: 0; font-size: 11px; font-weight: 700; color: #c6ced8; text-transform: uppercase; letter-spacing: 0; }
.content-panel .field { margin-bottom: 10px; }
.content-panel .field label { font-size: 11px; color: #8f9baa; font-weight: 700; }
.content-panel-head, .content-panel-actions { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.content-panel-actions { justify-content: flex-start; margin: 10px 0; }
.content-file-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.content-file-filter { width: 100%; height: 30px; margin: 0 0 10px; border: 1px solid #3a4350; border-radius: 5px; padding: 0 9px; color: #d4d7dc; background: #181d24; font-size: 12px; }
.content-file-tree { min-height: 0; overflow: auto; padding: 2px 0 8px; }
.content-tree-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 26px; align-items: center; min-height: 24px; font-size: 12px; color: #cbd5e1; }
.content-tree-row button { min-width: 0; height: 24px; border: 0; border-radius: 4px; color: inherit; background: transparent; }
.content-tree-row > button:first-child { display: flex; align-items: center; gap: 5px; padding: 0 6px 0 calc(6px + (var(--tree-depth, 0) * 14px)); text-align: left; overflow: hidden; }
.content-tree-row > button:first-child span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-tree-row:hover > button:first-child, .content-tree-row.active > button:first-child { background: #2d3642; }
.content-tree-row.active > button:first-child { color: #ffffff; outline: 1px solid rgba(96, 165, 250, .36); }
.content-tree-folder { grid-template-columns: minmax(0, 1fr); color: #e2e8f0; }
.content-tree-folder > button:first-child { font-weight: 600; }
.content-tree-file [data-delete] { opacity: 0; width: 23px; height: 23px; margin-right: 2px; border-radius: 4px; color: #fca5a5; background: transparent; }
.content-tree-file:hover [data-delete], .content-tree-file:focus-within [data-delete] { opacity: 1; }
.content-tree-file [data-delete]:hover { color: #fff; background: #7f1d1d; }
.content-tree-caret { width: 12px; flex: 0 0 12px; color: #8f9baa; }
.content-tree-icon { width: 18px; flex: 0 0 18px; color: #7dd3fc; font-size: 11px; text-align: center; }
.content-tree-empty { margin: 12px 6px; color: #8f9baa; font-size: 12px; }
.content-tabs { display: flex; align-items: end; gap: 1px; padding: 6px 8px 0; overflow-x: auto; background: #181d24; border-bottom: 1px solid #111827; }
.content-tabs button { height: 32px; border: 0; border-radius: 5px 5px 0 0; padding: 0 12px; color: #aab4c0; background: #20252c; white-space: nowrap; font-size: 12px; }
.content-tabs button.active { color: #f8fafc; background: #111827; font-weight: 700; }
.content-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; background: #111827; border-bottom: 1px solid #1f2937; color: #94a3b8; font-size: 12px; }
.content-editor-shell { min-height: 0; overflow: hidden; background: #111827; }
.content-code-editor { width: 100%; height: 100%; resize: none; border: 0; outline: 0; padding: 18px; box-sizing: border-box; font-family: Consolas, "Courier New", monospace; font-size: 15px; line-height: 1.55; color: #dbeafe; background: #111827; tab-size: 2; }
.content-editor-shell .CodeMirror { height: 100%; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 1.55; }
.content-editor-shell .CodeMirror-gutters { border-right: 1px solid rgba(148, 163, 184, .24); }
.content-editor-shell .CodeMirror-linenumber { color: #64748b; }
.content-upload-modal .modal-body { font-size: 13px; }
.content-upload-menu { display: grid; gap: 12px; }
.content-upload-drop { display: grid; gap: 4px; padding: 18px; border: 1px dashed #7890a8; border-radius: 8px; background: #f8fafc; color: #243443; cursor: pointer; text-align: center; }
.content-upload-drop strong { font-size: 14px; }
.content-upload-drop span { color: #64748b; font-size: 12px; }
.content-upload-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.content-upload-list { list-style: none; margin: 0; padding: 0; max-height: 170px; overflow: auto; border: 1px solid #d9e1e8; border-radius: 7px; background: #fff; }
.content-upload-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 9px; border-bottom: 1px solid #eef2f6; font-size: 12px; }
.content-upload-list li:last-child { border-bottom: 0; }
.content-upload-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-upload-list li small { flex: 0 0 auto; color: #64748b; }
.content-upload-list li.empty { color: #64748b; }
@media (max-width: 960px) { .content-browser-app { grid-template-columns: 1fr; } .content-browser-sidebar { max-height: 42vh; } }

/* Step 9: light Content-Browser editor refinement */
.content-browser-page{background:#eef2f6;color:#1f2937}
.content-browser-topbar{background:#ffffff;color:#15263d;border-bottom:1px solid #d7dee8;box-shadow:0 2px 12px rgba(15,23,42,.08)}
.content-browser-brand small{color:#64748b}
.content-icon-btn{border-color:#d7dee8;color:#1f3654;background:#f8fafc}
.content-icon-btn:hover{background:#eef6fe;border-color:#93c5fd;color:#1d4ed8}
.content-browser-sidebar{background:#f8fafc;border-right:1px solid #d7dee8}
.content-browser-workspace{background:#ffffff;grid-template-rows:38px 34px minmax(0,1fr)}
.content-explorer-head{background:#ffffff;border-bottom:1px solid #d7dee8}
.content-explorer-head strong{color:#334155;font-size:12px}
.content-explorer-head span{color:#64748b;font-size:12px}
.content-panel{border-bottom:1px solid #d7dee8;background:#f8fafc}
.content-panel h2{color:#334155;font-size:12px}
.content-panel .field label{color:#64748b;font-size:12px}
.content-panel-actions{gap:8px;margin:10px 0}
.content-action-btn{height:31px;display:inline-flex;align-items:center;gap:6px;border:1px solid #d7dee8;border-radius:7px;background:#ffffff;color:#1f3654;padding:0 9px;font-size:13px;font-weight:700;line-height:1;cursor:pointer}
.content-action-btn span:first-child{width:16px;height:16px;display:inline-grid;place-items:center;color:#2563eb;font-size:14px;font-weight:900;line-height:1}
.content-action-btn:hover{border-color:#93c5fd;background:#eff6ff;color:#1d4ed8}
.content-file-filter{height:32px;border-color:#d7dee8;background:#ffffff;color:#1f2937;font-size:13px}
.content-file-tree{padding-top:4px}
.content-tree-row{min-height:28px;font-size:13px;color:#334155;grid-template-columns:minmax(0,1fr) 28px}
.content-tree-row button{height:28px;border-radius:5px}
.content-tree-row > button:first-child{gap:6px;padding-left:calc(7px + (var(--tree-depth,0) * 15px))}
.content-tree-row:hover > button:first-child,.content-tree-row.active > button:first-child{background:#eaf2fb}
.content-tree-row.active > button:first-child{color:#0f4f95;outline:1px solid rgba(37,99,235,.22)}
.content-tree-folder{color:#1e293b}
.content-tree-file [data-delete]{width:25px;height:25px;color:#b91c1c}
.content-tree-file [data-delete]:hover{color:#fff;background:#dc2626}
.content-tree-caret{color:#64748b}
.content-tree-icon{color:#2563eb;font-size:12px}
.content-tree-empty{color:#64748b;font-size:13px}
.content-tabs{background:#eef2f6;border-bottom:1px solid #d7dee8}
.content-tabs button{color:#475569;background:#dfe7f1;font-size:13px}
.content-tabs button.active{color:#15263d;background:#ffffff;border:1px solid #d7dee8;border-bottom-color:#ffffff;font-weight:800}
.content-editor-toolbar{background:#ffffff;border-bottom:1px solid #d7dee8;color:#64748b;font-size:13px}
.content-editor-shell{background:#ffffff}
.content-code-editor{color:#0f172a;background:#ffffff}
.content-editor-shell .CodeMirror{height:100%;font-family:Consolas,"Courier New",monospace;font-size:14px;line-height:1.55;color:#0f172a;background:#ffffff}
.content-editor-shell .CodeMirror-gutters{background:#f8fafc;border-right:1px solid #d7dee8}
.content-editor-shell .CodeMirror-linenumber{color:#94a3b8}
.content-editor-shell .CodeMirror-cursor{border-left-color:#0f172a}
.content-editor-shell .CodeMirror-selected{background:#bfdbfe!important}
.content-editor-shell .CodeMirror-activeline-background{background:#f1f5f9}
/* Step 9: Content-Browser closeable editor tabs */
.content-tabs button{display:inline-flex;align-items:center;gap:8px;max-width:260px;min-width:0}
.content-tab-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.content-tab-close{width:18px;height:18px;display:inline-grid;place-items:center;flex:0 0 auto;border-radius:5px;color:#64748b;font-size:11px;line-height:1}
.content-tab-close:hover,.content-tab-close:focus{background:#fee2e2;color:#b91c1c;outline:0}
.content-tabs button.active .content-tab-close{color:#475569}
.content-tabs button.active .content-tab-close:hover,.content-tabs button.active .content-tab-close:focus{background:#fee2e2;color:#b91c1c}
/* Step 9: semantic Content-Browser tab buttons */
.content-tab{height:32px;display:inline-flex;align-items:center;min-width:0;max-width:260px;border-radius:5px 5px 0 0;background:#dfe7f1;color:#475569;overflow:hidden}
.content-tab.active{background:#ffffff;color:#15263d;border:1px solid #d7dee8;border-bottom-color:#ffffff;font-weight:800}
.content-tab-open{height:32px;min-width:0;border:0;background:transparent;color:inherit;padding:0 6px 0 12px;font-size:13px}
.content-tab-open:hover{background:transparent}
.content-tab .content-tab-close{width:24px;height:24px;margin-right:4px;border:0;background:transparent;color:#64748b;padding:0;border-radius:5px;font-size:11px;line-height:1}
.content-tab .content-tab-close:hover,.content-tab .content-tab-close:focus{background:#fee2e2;color:#b91c1c;outline:0}
/* Step 9: unified Content-Browser tab colors */
.content-tabs{align-items:flex-end;gap:4px;padding:6px 8px 0;background:#edf3f9;border-bottom:1px solid #cbd8e6}
.content-tabs button{background:transparent}
.content-tab{height:32px;display:inline-flex;align-items:center;min-width:0;max-width:270px;border:1px solid #d2dce8;border-bottom-color:#cbd8e6;border-radius:7px 7px 0 0;background:#e4ebf4;color:#334155;overflow:hidden;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.content-tab:hover{background:#d9e7f5;border-color:#b9cce2;color:#1e3a5f}
.content-tab.active{background:#f8fbff;color:#12385f;border-color:#93b7dc;border-bottom-color:#f8fbff;font-weight:800;box-shadow:inset 0 2px 0 #2e78c7}
.content-tab.active:hover{background:#f1f7ff;border-color:#7fabd8;border-bottom-color:#f1f7ff}
.content-tab-open{height:30px;min-width:0;border:0;background:transparent!important;color:inherit;padding:0 7px 0 12px;font-size:13px;line-height:1}
.content-tab-open:focus-visible{outline:2px solid #93c5fd;outline-offset:-3px}
.content-tab .content-tab-close{width:22px;height:22px;margin:0 5px 0 0;border:0;background:transparent;color:inherit;opacity:.72;padding:0;border-radius:5px;font-size:11px;line-height:1}
.content-tab:hover .content-tab-close,.content-tab.active .content-tab-close{opacity:.9}
.content-tab .content-tab-close:hover,.content-tab .content-tab-close:focus{background:#dbeafe;color:#0f4f95;opacity:1;outline:0}
/* Step 9: transparent thumbnails in channel editor */
.channel-gallery-thumb-checker,.channel-item-preview-checker{background-color:#f8fafc;background-image:var(--transparent-checker);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;color:var(--text)}
.applet-type-choice .tile-icon-content-browser{font-size:13px;letter-spacing:0}

/* channel item scheduling icon controls */
.channel-icon-actions{display:grid;grid-template-columns:repeat(3,34px);gap:7px;align-self:end;justify-content:end}
.channel-icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;color:#475569;padding:0;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
.channel-icon-btn svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.channel-icon-btn:hover,.channel-icon-btn:focus-visible{background:#e0f2fe;border-color:#38bdf8;color:#075985;box-shadow:0 0 0 3px rgba(56,189,248,.18);outline:0}
.channel-schedule-btn.has-schedule{background:#ecfdf5;color:#166534;border-color:#86efac}
.channel-state-btn.is-active{background:#dcfce7;color:#166534;border-color:#86efac}
.channel-state-btn.is-passive{background:#f1f5f9;color:#64748b;border-color:#cbd5e1}
.channel-remove-btn{color:#b91c1c;border-color:#fecaca;background:#fff1f2}
.channel-remove-btn:hover,.channel-remove-btn:focus-visible{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.channel-schedule-modal{width:min(620px,100%)}
.channel-schedule-form{display:grid;gap:14px}
@media (max-width:1100px){.channel-icon-actions{grid-column:1/-1;justify-content:start}}
@media (max-width:760px){.channel-icon-actions{grid-template-columns:repeat(3,38px)}.channel-icon-btn{width:38px;height:38px}}
/* channel item remove confirmation modal */
.channel-remove-modal { width: min(520px, 100%); }
.channel-remove-modal .modal-body { display: grid; gap: 10px; }
.channel-remove-target { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); color: var(--text); font-weight: 700; word-break: break-word; }

/* program info modal and dashboard overview */
.program-info dl{display:grid;gap:12px;margin:0}.program-info dl div{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--border)}.program-info dl div:last-child{border-bottom:0}.program-info dt{color:var(--muted);font-weight:700}.program-info dd{margin:0;font-weight:800;color:var(--text)}.dashboard-overview .card{min-width:0}.dashboard-list strong{max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-list span{max-width:58%}
.dashboard-overview .card-header h2{font-size:20px;line-height:1.2}.dashboard-list>div{display:grid;grid-template-columns:minmax(0,42%) minmax(180px,1fr) auto;align-items:center;column-gap:12px}.dashboard-list strong{max-width:none}.dashboard-list span{max-width:none;text-align:left}.dashboard-edit-link{justify-self:end;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}



/* Step user management actions */
.user-actions{display:grid;grid-template-columns:repeat(4,34px);align-items:center;justify-content:start;gap:8px;min-width:160px;white-space:nowrap}.user-actions .icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--border);border-radius:7px;background:#fff;color:#1f3654;text-decoration:none;cursor:pointer;line-height:1;padding:0}.user-actions .icon-btn svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.user-actions .icon-btn:hover:not(.disabled){border-color:var(--primary);color:var(--primary);background:#eef6fe}.user-actions .icon-btn.success{color:var(--success)}.user-actions .icon-btn.warning{color:#b45309}.user-actions .icon-btn.danger{color:var(--danger)}.user-actions .icon-btn.danger:hover{border-color:var(--danger);background:#fff1f2}.user-actions .icon-btn.disabled{color:#94a3b8;background:#f8fafc;cursor:not-allowed}

/* forced password modal lock */
.modal-backdrop.force-required .modal-close,.modal-backdrop.force-required .modal-footer .btn-secondary{display:none!important}

#page-monitors .section-toolbar-actions { justify-content: flex-end; align-items: center; }

#page-channels .section-toolbar-actions, #page-times .section-toolbar-actions, #page-media .section-toolbar-actions { justify-content: flex-end; align-items: center; }

#page-quick .section-toolbar-actions, #page-applets .section-toolbar-actions, #page-users .section-toolbar-actions, #page-settings .section-toolbar-actions { justify-content: flex-end; align-items: center; }

/* Settings template cards */
.settings-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.settings-template-card .card-header { align-items: flex-start; }
.settings-template-card .card-body { display: flex; flex-direction: column; gap: 14px; }
.settings-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.settings-check-grid label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text); }
.settings-check-grid input { width: auto; accent-color: var(--primary); }
@media (max-width: 1180px) { .settings-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .settings-template-grid, .settings-check-grid { grid-template-columns: 1fr; } }
.login-hint { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.login-code-input { text-align: center; letter-spacing: 6px; font-size: 24px; font-weight: 800; }