/* OBSLAppClocks stable UI Lock — 2026-09-22
   Final geometry/settings override. Loaded after style.css so the public App keeps
   a stable desktop width while remaining responsive below that width. */
:root{
  --obsl-app-max-width:1180px;
  --obsl-news-viewport-height:226px;
}
html,body{max-width:100%!important;overflow-x:hidden!important}
body{margin:0!important}

/* Stable App canvas: widening the browser never stretches the dashboard beyond
   its designed desktop width; narrower screens still use 100% responsively. */
body>.dashboard{
  width:min(100%,var(--obsl-app-max-width))!important;
  max-width:var(--obsl-app-max-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
html.obsl-settings-open body>.dashboard,
body.obsl-settings-open>.dashboard{
  left:50%!important;
  right:auto!important;
  width:min(100%,var(--obsl-app-max-width))!important;
  max-width:var(--obsl-app-max-width)!important;
  transform:translateX(-50%)!important;
}
body>#obsl-settings-viewport:not([hidden]){
  left:50%!important;
  right:auto!important;
  width:min(100%,var(--obsl-app-max-width))!important;
  max-width:var(--obsl-app-max-width)!important;
  transform:translateX(-50%)!important;
}

/* Tin nhanh: reserve the complete metadata lane so source + date/time can never
   be clipped when the window is resized. Day Info is equalized to this panel by JS. */
#tech-news-panel.tech-news-panel{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  align-content:start!important;
  min-height:0!important;
}
#tech-news-panel .obsl-tech-news-viewport{
  height:var(--obsl-news-viewport-height)!important;
  min-height:var(--obsl-news-viewport-height)!important;
  max-height:var(--obsl-news-viewport-height)!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
#tech-news-panel .obsl-tech-news-track,
#tech-news-panel .tech-news-batch{height:100%!important;align-items:flex-start!important}
#tech-news-panel .tech-news-card{height:auto!important;min-height:0!important;overflow:visible!important}
#tech-news-panel .tech-news-card-body{min-height:75px!important;overflow:visible!important;position:relative!important;z-index:2!important}
#tech-news-panel .tech-news-card-title{flex:0 0 auto!important}
#tech-news-panel .tech-news-meta{
  flex:0 0 32px!important;
  min-height:32px!important;
  height:32px!important;
  overflow:visible!important;
  position:relative!important;
  z-index:3!important;
}
#tech-news-panel .tech-news-source-row,
#tech-news-panel .tech-news-card-date{
  opacity:1!important;
  visibility:visible!important;
  position:relative!important;
  transform:none!important;
}
#tech-news-panel .tech-news-card-date{height:13px!important;min-height:13px!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* Pencils which open the module Settings viewport are glyph-only controls. */
:is(.obsl-module-pencil,.section-editor-pencil,#event-admin-gear,.footer-admin-pencil,#moments-admin-manage){
  -webkit-appearance:none!important;
  appearance:none!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  text-shadow:none!important;
  border-radius:0!important;
  color:inherit!important;
  padding:0!important;
  margin:0!important;
  width:26px!important;
  min-width:26px!important;
  height:26px!important;
  min-height:26px!important;
  display:inline-grid!important;
  place-items:center!important;
  font:700 19px/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  opacity:.78!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
}
:is(.obsl-module-pencil,.section-editor-pencil,#event-admin-gear,.footer-admin-pencil,#moments-admin-manage):is(:hover,:focus-visible){
  opacity:1!important;
  background:transparent!important;
  box-shadow:none!important;
}
.obsl-module-pencil[hidden]{display:none!important}
#countdown-panel>.obsl-module-pencil{
  position:absolute!important;
  top:auto!important;
  right:6px!important;
  bottom:5px!important;
  left:auto!important;
  z-index:42!important;
}
#day-info-panel>.obsl-module-pencil{
  position:absolute!important;
  top:4px!important;
  right:6px!important;
  bottom:auto!important;
  left:auto!important;
  z-index:42!important;
}
#tech-news-panel .tech-news-head-actions>.obsl-module-pencil,
#market-panel .market-heading>.obsl-module-pencil{position:static!important;flex:0 0 26px!important}
#moments-admin-manage{font-size:19px!important;color:inherit!important}

/* The active Settings tab must be unmistakable without changing layout width. */
#obsl-settings-tabs>button{
  border:1.5px solid transparent!important;
  border-radius:9px!important;
  box-shadow:none!important;
  transition:border-color .12s ease,background-color .12s ease!important;
}
#obsl-settings-tabs>button.active,
#obsl-settings-tabs>button[aria-selected="true"]{
  border-color:currentColor!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)!important;
  font-weight:900!important;
}

@media(max-width:900px){
  :root{--obsl-news-viewport-height:218px}
  #tech-news-panel.tech-news-panel,#day-info-panel.day-info-panel{height:auto!important;min-height:0!important;max-height:none!important}
}
@media(max-width:430px){:root{--obsl-news-viewport-height:214px}}

/* Nested setting tabs use the same selected-outline language. */
#obsl-settings-viewport :is([data-pc-admin-tab],[data-event-settings-tab],.obsl-html5-tabs>[data-tab]){
  border:1.5px solid transparent!important;
  box-shadow:none!important;
}
#obsl-settings-viewport :is([data-pc-admin-tab].is-active,[data-pc-admin-tab][aria-selected="true"],[data-event-settings-tab].is-active,[data-event-settings-tab][aria-selected="true"],.obsl-html5-tabs>[data-tab].is-active){
  border-color:currentColor!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)!important;
  font-weight:900!important;
}


/* ===== stable production geometry hardening ===== */
:root{
  --obsl-module-gap:2px!important;
  --obsl-app-pad:2px;
  --obsl-news-min-height:260px;
}
html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;overscroll-behavior-x:none!important}
html{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;touch-action:pan-x pan-y!important}
body{touch-action:pan-x pan-y!important}
.dashboard{
  width:min(100%,var(--obsl-app-max-width))!important;
  max-width:var(--obsl-app-max-width)!important;
  padding:0 var(--obsl-app-pad) var(--obsl-app-pad)!important;
  gap:var(--obsl-module-gap)!important;
  overflow:visible!important;
  contain:layout style!important;
}
.dashboard>*{min-width:0!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important}
#event-frame.event-frame,#weather-widget.weather-grid,#bottom-grid{gap:var(--obsl-module-gap)!important}
#event-frame.event-frame{padding:var(--obsl-module-gap)!important}

/* Every public module owns its content box. Content may reflow/scroll internally,
   but may never enlarge the App width or paint across a neighbour. */
:is(#header-frame,#birthday-event-panel,#event-frame,#weather-widget,#bottom-grid,#footer-frame,
    #weather-widget>.now-panel,#countdown-panel,#tech-news-panel,#day-info-panel,#moments-panel,#market-panel){
  min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
}
:is(#header-frame,#event-frame,#weather-widget>.now-panel,#countdown-panel,#tech-news-panel,#day-info-panel,#moments-panel,#market-panel,#footer-frame){
  overflow:hidden!important;
}
:is(#header-frame,#event-frame,#weather-widget,#bottom-grid,#footer-frame) :is(img,video,canvas,iframe,svg){max-width:100%}
:is(#header-frame,#event-frame,#weather-widget,#bottom-grid,#footer-frame) :is(p,span,strong,small,b,i,em,a,button,label,div){min-width:0}

/* Keep paired rows equal-height on desktop without clipping either member. */
#weather-widget.weather-grid{align-items:stretch!important}
#weather-widget.weather-grid>.now-panel,#weather-widget.weather-grid>#countdown-panel{align-self:stretch!important;height:auto!important;max-height:none!important}
#weather-widget.weather-grid>#countdown-panel{min-height:100%!important}
#bottom-grid{align-items:stretch!important;grid-auto-rows:max-content!important}
#tech-news-panel,#day-info-panel{height:auto!important;min-height:var(--obsl-news-min-height)!important;max-height:none!important;align-self:stretch!important}
#moments-panel,#market-panel{height:auto!important;min-height:0!important;max-height:none!important;align-self:stretch!important}
#market-panel.market-panel{overflow:hidden!important;padding:6px 8px!important}
#market-panel .market-sections{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;gap:4px!important}
#market-panel .market-section{min-width:0!important;max-width:100%!important;overflow:hidden!important}
#market-panel .market-row{grid-template-columns:minmax(0,1fr) max-content!important;align-items:baseline!important}
#market-panel .market-row>span:first-child{min-width:0!important;overflow-wrap:anywhere!important}
#market-panel .market-value{white-space:nowrap!important}

/* Tin nhanh: full card metadata lane is physically inside the viewport at all sizes. */
#tech-news-panel.tech-news-panel{grid-template-rows:auto auto!important;align-content:start!important;padding:4px 8px 6px!important}
#tech-news-panel .tech-news-head{position:relative!important;z-index:5!important;flex:0 0 auto!important;overflow:visible!important}
#tech-news-panel .tech-news-head-actions{display:flex!important;align-items:center!important;gap:5px!important;visibility:visible!important;opacity:1!important}
#tech-news-panel .tech-news-view-all,#tech-news-panel .tech-news-refresh-head,#tech-news-panel .obsl-module-pencil{display:inline-grid!important;visibility:visible!important;opacity:1!important}
#tech-news-panel .tech-news-view-all{display:inline-flex!important}
#tech-news-panel .tech-news-layout{min-width:0!important;overflow:hidden!important}
#tech-news-panel .obsl-tech-news-viewport{
  height:var(--obsl-news-viewport-height)!important;min-height:var(--obsl-news-viewport-height)!important;max-height:var(--obsl-news-viewport-height)!important;
  overflow-x:auto!important;overflow-y:hidden!important;scroll-behavior:auto!important;scroll-snap-type:none!important;
  overscroll-behavior-inline:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-x pan-y!important;
  contain:layout paint!important;
}
#tech-news-panel .tech-news-card{height:100%!important;max-height:100%!important;overflow:hidden!important;contain:layout paint style!important}
#tech-news-panel .tech-news-card-media{height:140px!important;flex:0 0 140px!important}
#tech-news-panel .tech-news-card-body{height:calc(100% - 140px)!important;min-height:72px!important;max-height:none!important;padding:4px 1px 1px!important;overflow:hidden!important;justify-content:flex-start!important}
#tech-news-panel .tech-news-card-title{flex:0 0 31px!important;min-height:31px!important;max-height:31px!important;margin:0 0 2px!important}
#tech-news-panel .tech-news-meta{flex:0 0 34px!important;height:34px!important;min-height:34px!important;max-height:34px!important;grid-template-rows:18px 15px!important;overflow:visible!important}
#tech-news-panel .tech-news-source-row{height:18px!important;min-height:18px!important;max-height:18px!important;overflow:hidden!important}
#tech-news-panel .tech-news-card-date{display:block!important;height:15px!important;min-height:15px!important;max-height:15px!important;line-height:15px!important;overflow:hidden!important;text-overflow:ellipsis!important;visibility:visible!important;opacity:1!important}
#tech-news-panel .tech-news-source-name{visibility:visible!important;opacity:1!important}

/* Clock glyphs need breathing room for DSEG/outline/neon side bearings. */
#header-frame .header-time-layout{overflow:visible!important;padding-inline:8px!important}
#header-frame .clock{
  width:auto!important;max-width:calc(100% - 18px)!important;
  padding:0 .16em .04em!important;margin-inline:auto!important;
  overflow:visible!important;text-overflow:clip!important;box-sizing:border-box!important;
  letter-spacing:-.025em!important;line-height:1!important;
}
#header-frame .brand-header,#header-frame .header-calendar-row{max-width:100%!important}

/* The draggable Trend bubble is still fixed for convenience, but runtime clamps
   it to the physical App canvas. CSS provides a safe fallback before JS runs. */
#obsl-trend-launcher{max-width:calc(min(100vw,var(--obsl-app-max-width)) - 12px)!important}

/* Embedded Moments manager belongs to Settings, never a second viewport/modal. */
#obsl-settings-viewport .moments-manager-modal.is-embedded{
  position:static!important;inset:auto!important;z-index:auto!important;display:block!important;
  width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;
  padding:0!important;margin:0!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  overflow:visible!important;
}
#obsl-settings-viewport .moments-manager-modal.is-embedded>.moments-manager-dialog{
  width:100%!important;max-width:100%!important;max-height:none!important;height:auto!important;
  margin:0!important;padding:8px!important;border-radius:10px!important;box-shadow:none!important;overflow:visible!important;
}
#obsl-settings-viewport .moments-manager-modal.is-embedded .moment-modal-close{display:none!important}
#obsl-settings-viewport .moments-manager-modal.is-embedded .moments-manager-layout{grid-template-columns:1fr!important;gap:8px!important;margin-top:8px!important}
#obsl-settings-viewport .moments-manager-modal.is-embedded .moment-editor-wrap{min-width:0!important;max-width:100%!important}
#obsl-settings-viewport .moments-manager-modal.is-embedded .moment-html-editor{max-height:none!important;min-height:220px!important}

/* Mobile: no browser input auto-zoom, no stale landscape width after rotation. */
@media(max-width:900px){
  :root{--obsl-news-min-height:252px}
  :is(input,select,textarea){font-size:16px!important}
  .dashboard{width:100%!important;max-width:100%!important;padding-inline:var(--obsl-app-pad)!important}
  #bottom-grid{grid-auto-rows:auto!important}
  #tech-news-panel,#day-info-panel,#moments-panel,#market-panel{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important}
  #tech-news-panel{min-height:252px!important}
  #weather-widget.weather-grid>#countdown-panel{min-height:0!important}
  #obsl-settings-viewport :is(input,select,textarea,button){font-size:max(16px,1em)!important}
}
@media(max-width:760px){
  #tech-news-panel .tech-news-card-media{height:134px!important;flex-basis:134px!important}
  #tech-news-panel .tech-news-card-body{height:calc(100% - 134px)!important}
}
@media(max-width:430px){
  :root{--obsl-app-pad:2px;--obsl-module-gap:2px!important}
  #tech-news-panel .tech-news-card-media{height:130px!important;flex-basis:130px!important}
  #tech-news-panel .tech-news-card-body{height:calc(100% - 130px)!important}
  #header-frame .header-time-layout{padding-inline:10px!important}
  #header-frame .clock{max-width:calc(100% - 24px)!important;padding-inline:.20em!important}
}

/* ===== OBSLAppClocks stable final runtime invariants ===== */
:root{
  --obsl-module-gap:2px!important;
  --obsl-news-viewport-height:190px!important;
  --obsl-news-min-height:222px!important;
}

/* Guest-safe admin controls: default is hidden until the authenticated role is admin. */
html:not([data-obsl-role="admin"]) :is(
  .obsl-module-pencil,#header-admin-editor,#event-admin-gear,#moments-admin-manage,
  #footer-admin-editor,.footer-admin-pencil,.section-editor-pencil,#location-weather-settings
){display:none!important;visibility:hidden!important;pointer-events:none!important}
html[data-obsl-role="admin"] :is(.obsl-module-pencil,#header-admin-editor,#event-admin-gear,#moments-admin-manage,#footer-admin-editor){visibility:visible}

/* Countdown must always own physical height; never collapse while the responsive grid is recalculated. */
#weather-widget.weather-grid>#countdown-panel.countdown-panel--weather-slot{
  display:block!important;position:relative!important;visibility:visible!important;opacity:1!important;
  min-height:156px!important;height:auto!important;max-height:none!important;overflow:hidden!important;
}
#countdown-panel>.countdown-panel-host,
#countdown-panel .cd-carousel,
#countdown-panel .cd-book,
#countdown-panel .cd-page{min-height:0!important;max-width:100%!important}
#countdown-panel>.countdown-panel-host{height:100%!important;width:100%!important;overflow:hidden!important}

/* Compact News while preserving media + title + source + timestamp as separate lanes. */
#tech-news-panel.tech-news-panel{min-height:222px!important;padding:3px 7px 5px!important;overflow:hidden!important}
#tech-news-panel .tech-news-head{min-height:25px!important;height:25px!important;margin:0!important;padding:0!important}
#tech-news-panel .tech-news-title{font-size:17px!important;line-height:23px!important}
#tech-news-panel .tech-news-head-actions{height:25px!important;gap:3px!important}
#tech-news-panel .tech-news-view-all{font-size:10px!important;line-height:1!important;padding:3px 5px!important;min-height:22px!important}
#tech-news-panel .tech-news-refresh-head{width:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important;font-size:15px!important}
#tech-news-panel .tech-news-head-actions>.obsl-module-pencil{width:22px!important;min-width:22px!important;height:22px!important;min-height:22px!important;font-size:16px!important}
#tech-news-panel .obsl-tech-news-viewport{height:190px!important;min-height:190px!important;max-height:190px!important}
#tech-news-panel .tech-news-card-media{height:114px!important;flex:0 0 114px!important}
#tech-news-panel .tech-news-card-body{height:76px!important;min-height:76px!important;padding:3px 1px 1px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
#tech-news-panel .tech-news-card-title{flex:0 0 32px!important;min-height:32px!important;max-height:32px!important;font-size:11.5px!important;line-height:16px!important;margin:0 0 1px!important;overflow:hidden!important}
#tech-news-panel .tech-news-meta{flex:0 0 40px!important;height:40px!important;min-height:40px!important;max-height:40px!important;grid-template-rows:21px 18px!important;overflow:hidden!important}
#tech-news-panel .tech-news-source-row{height:21px!important;min-height:21px!important;max-height:21px!important;font-size:10px!important;line-height:20px!important;overflow:hidden!important}
#tech-news-panel .tech-news-card-date{display:block!important;height:18px!important;min-height:18px!important;max-height:18px!important;font-size:9.5px!important;line-height:17px!important;visibility:visible!important;opacity:1!important;overflow:hidden!important;text-overflow:ellipsis!important}
#tech-news-panel .tech-news-source-name{visibility:visible!important;opacity:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* Day-info stays paired with compact News on desktop but its three utilities remain inside. */
#day-info-panel.day-info-panel{min-height:222px!important;height:auto!important;overflow:hidden!important;padding-top:5px!important;padding-bottom:5px!important}
#day-info-panel .day-info-actions,#day-info-panel .day-info-utils{max-width:100%!important;min-width:0!important}
#day-info-panel :is(button,a){min-width:0!important;max-width:100%!important}

/* Compact Market without hiding any fuel/gold row. Height is content-driven. */
#market-panel.market-panel{height:auto!important;min-height:0!important;max-height:none!important;padding:4px 7px 5px!important;overflow:hidden!important;align-self:start!important}
#market-panel .market-heading{min-height:23px!important;margin:0 0 2px!important;padding:0!important;line-height:23px!important}
#market-panel .market-heading :is(.panel-title,h2,h3){font-size:15px!important;line-height:21px!important;margin:0!important}
#market-panel .weather-refresh-button{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;font-size:17px!important}
#market-panel .market-heading>.obsl-module-pencil{width:22px!important;min-width:22px!important;height:22px!important;min-height:22px!important;font-size:16px!important}
#market-panel .market-sections{display:grid!important;gap:2px!important;margin:0!important;padding:0!important;height:auto!important;max-height:none!important;overflow:visible!important}
#market-panel .market-section{margin:0!important;padding:2px 0!important;min-height:0!important;overflow:visible!important}
#market-panel .market-section :is(h3,h4,strong.market-title){font-size:11.5px!important;line-height:15px!important;margin:0 0 1px!important}
#market-panel .market-source{font-size:8.8px!important;line-height:11px!important;margin:0 0 1px!important;min-height:0!important}
#market-panel .market-row{font-size:10px!important;line-height:12px!important;min-height:12px!important;padding:0!important;gap:5px!important;grid-template-columns:minmax(0,1fr) max-content!important}
#market-panel .market-value,#market-panel .market-row strong{font-size:10px!important;line-height:12px!important;white-space:nowrap!important}
#market-panel :is(#market-fuel,#market-gold){min-height:0!important;margin:0!important;padding:0!important}

/* Settings viewport: denser professional typography and smaller controls, functionality unchanged. */
#obsl-settings-viewport{font-size:12px!important}
#obsl-settings-viewport>header{padding:5px 10px!important;min-height:35px!important}
#obsl-settings-title{font-size:13px!important}
#obsl-settings-close{font-size:22px!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important}
#obsl-settings-tabs{gap:3px!important;padding:4px 7px!important}
#obsl-settings-tabs>button{font-size:11px!important;line-height:1.15!important;min-height:29px!important;padding:5px 8px!important;border-radius:7px!important}
#obsl-settings-body{font-size:12px!important;padding:6px 8px 18px!important}
#obsl-settings-body :is(label,span,p,small,strong,b,legend,summary,.admin-hint,.admin-form-message){font-size:12px!important;line-height:1.25!important}
#obsl-settings-body :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,button){font-size:12px!important;line-height:1.2!important;min-height:31px!important;padding-block:4px!important}
#obsl-settings-body input[type="number"]{min-height:30px!important}
#obsl-settings-body input[type="range"]{min-height:24px!important;padding:0!important}
#obsl-settings-viewport :is(input[type="checkbox"]){width:42px!important;height:24px!important;min-width:42px!important;min-height:24px!important;background-size:auto!important}
#obsl-settings-viewport :is(input[type="checkbox"]):checked{background-image:radial-gradient(circle 10px at 30px 12px,#fff 99%,transparent 100%)!important}
#obsl-settings-viewport :is(input[type="checkbox"]):not(:checked){background-image:radial-gradient(circle 10px at 12px 12px,#fff 99%,transparent 100%)!important}
#obsl-settings-body .system-switch-row{min-height:31px!important;padding-block:3px!important;gap:7px!important}
#obsl-settings-body :is(.admin-subsection-body,.title-logo-tools-body,.system-group-body){gap:5px!important}
#obsl-settings-body .obsl-tab-pane.is-dirty::before{content:"Bản nháp • chưa lưu Server";display:block;width:max-content;max-width:100%;margin:0 0 5px auto;padding:2px 6px;border:1px solid currentColor;border-radius:999px;font-size:10px!important;font-weight:700;opacity:.72}
.obsl-pane-commit{display:flex!important;align-items:center!important;gap:8px!important;justify-content:flex-end!important;flex-wrap:wrap!important;margin:10px 0 2px!important;padding-top:7px!important;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)!important}
.obsl-pane-commit .obsl-pane-update{min-width:92px!important}
.obsl-pane-commit-state{font-size:10.5px!important;opacity:.75}

/* Embedded Moments manager must remain in the current Settings tab through edit/save/cancel. */
#obsl-settings-viewport .moments-manager-modal.is-embedded>.moments-manager-dialog{font-size:12px!important;padding:5px!important}
#obsl-settings-viewport .moments-manager-modal.is-embedded .moments-manager-head{gap:6px!important;margin:0!important}
#obsl-settings-viewport .moments-manager-modal.is-embedded .moments-manager-head h3{font-size:14px!important;margin:0!important}
#obsl-settings-viewport .moments-manager-modal.is-embedded .moments-manager-head p{font-size:10.5px!important;margin:2px 0!important}
#obsl-settings-viewport .moments-manager-modal.is-embedded .moments-manager-row{font-size:11px!important;padding:5px!important;gap:5px!important}
#obsl-settings-viewport .moments-manager-modal.is-embedded .moment-html-editor{min-height:180px!important;max-height:42vh!important;overflow:auto!important}
#obsl-settings-viewport .moments-manager-modal.is-embedded .moment-editor-grid{gap:5px!important}

/* SystemHealth exposes every WARN reason, not only a dot/count. */
.system-health-warning-details{margin:6px 0!important;padding:7px 9px!important;border:1px solid #d89b22!important;border-radius:8px!important;background:color-mix(in srgb,#f5b82e 10%,transparent)!important;font-size:11px!important}
.system-health-warning-details>strong{display:block!important;margin-bottom:4px!important;font-size:11.5px!important}
.system-health-warning-details p{margin:2px 0!important;font-size:10.5px!important;line-height:1.3!important;overflow-wrap:anywhere!important}

/* Only the OBSL logo is allowed to appear during boot. Theme bulb and Trend stay hidden until ready. */
#obsl-boot-loader{display:none}
html.obsl-booting #obsl-boot-loader{position:fixed!important;inset:0!important;z-index:2147483646!important;display:grid!important;place-items:center!important;background:var(--bg,#f3f3ef)!important;pointer-events:all!important}
#obsl-boot-loader img{width:72px!important;height:72px!important;max-width:22vw!important;max-height:22vw!important;object-fit:cover!important;border-radius:18px!important;animation:obslV13LogoPulse .68s ease-in-out infinite alternate!important}
@keyframes obslV13LogoPulse{from{opacity:.28;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
html.obsl-booting :is(#theme-toggle,#obsl-trend-launcher){opacity:0!important;visibility:hidden!important;pointer-events:none!important}
html:not(.obsl-booting) #obsl-boot-loader{display:none!important}

/* Trend must remain inside the physical App canvas at every viewport size. */
#obsl-trend-launcher{max-width:calc(min(100vw,var(--obsl-app-max-width)) - 8px)!important;max-height:calc(100dvh - 8px)!important}

@media(max-width:900px){
  :root{--obsl-news-viewport-height:188px!important;--obsl-news-min-height:220px!important}
  #weather-widget.weather-grid>#countdown-panel.countdown-panel--weather-slot{
    min-height:clamp(164px,42vw,205px)!important;height:clamp(164px,42vw,205px)!important;max-height:205px!important;
  }
  #tech-news-panel.tech-news-panel{min-height:220px!important;height:220px!important;max-height:220px!important}
  #tech-news-panel .obsl-tech-news-viewport{height:188px!important;min-height:188px!important;max-height:188px!important}
  #tech-news-panel .tech-news-card-media{height:112px!important;flex-basis:112px!important}
  #tech-news-panel .tech-news-card-body{height:76px!important}
  #day-info-panel.day-info-panel{min-height:0!important;height:auto!important;max-height:none!important}
  #market-panel.market-panel{height:auto!important;min-height:0!important;max-height:none!important;align-self:start!important}
  #obsl-settings-viewport :is(input,select,textarea,button){font-size:13px!important}
}
@media(max-width:520px){
  #tech-news-panel .tech-news-card-title{font-size:11px!important}
  #market-panel .market-row{grid-template-columns:minmax(0,1fr) max-content!important;font-size:9.8px!important}
  #obsl-settings-viewport{font-size:11.5px!important}
  #obsl-settings-tabs>button{font-size:10.5px!important;padding-inline:7px!important}
}

/* ===== stable corrective pack — 2026-09-22 22:42 ===== */
/* Settings must overlay without changing the public App geometry. */
html.obsl-settings-open body>.dashboard,
body.obsl-settings-open>.dashboard{
  position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:min(100%,var(--obsl-app-max-width))!important;max-width:var(--obsl-app-max-width)!important;
  margin-left:auto!important;margin-right:auto!important;transform:none!important;
  height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;contain:none!important;
}
body>#obsl-settings-viewport:not([hidden]){
  grid-template-rows:auto auto minmax(0,1fr)!important;
  transform:translateX(-50%)!important;
}
#obsl-settings-resizer{display:none!important}
#obsl-settings-dragbar{
  min-height:29px!important;height:29px!important;padding:2px 7px 2px 10px!important;
  cursor:ns-resize!important;touch-action:none!important;user-select:none!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) 28px!important;align-items:center!important;gap:4px!important;
  border-bottom:1px solid var(--line,#d1d5db)!important;background:var(--panel,#fff)!important;
}
#obsl-settings-title{font-size:12px!important;line-height:1.1!important;margin:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#obsl-settings-close{width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;padding:0!important;font-size:20px!important;line-height:1!important;cursor:pointer!important}
#obsl-settings-tabs{padding:3px 6px!important;gap:3px!important}
#obsl-settings-body{padding-top:5px!important}
.obsl-current-setting{display:block!important;margin-top:2px!important;font-size:10px!important;line-height:1.15!important;opacity:.68!important;font-weight:500!important;overflow-wrap:anywhere!important}

/* Event2 manager is a first-class Settings tab, never a second modal. */
#obsl-settings-viewport .obsl-event-legacy-manage{display:none!important}
#obsl-settings-viewport #event-admin-modal.obsl-event-admin-inline{
  position:static!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;
  min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;background:transparent!important;
  z-index:auto!important;overflow:visible!important;transform:none!important;
}
#obsl-settings-viewport #event-admin-modal.obsl-event-admin-inline>.admin-modal-backdrop,
#obsl-settings-viewport #event-admin-modal.obsl-event-admin-inline .admin-dialog-close{display:none!important}
#obsl-settings-viewport #event-admin-modal.obsl-event-admin-inline>.admin-dialog{
  position:static!important;inset:auto!important;display:block!important;width:100%!important;max-width:none!important;
  min-height:0!important;max-height:none!important;margin:0!important;padding:6px!important;transform:none!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important;
}
#obsl-settings-viewport #event-admin-modal.obsl-event-admin-inline h2{font-size:14px!important;margin:0 0 6px!important}
#obsl-settings-viewport #event-admin-modal.obsl-event-admin-inline .event-admin-list{max-height:none!important;overflow:visible!important}

/* Bottom pair: same physical height on desktop; Market distributes its content cleanly. */
@media(min-width:901px){
  #bottom-grid{align-items:stretch!important}
  #moments-panel,#market-panel{align-self:stretch!important;height:100%!important;min-height:0!important;max-height:none!important}
  #market-panel.market-panel{display:flex!important;flex-direction:column!important;overflow:hidden!important}
  #market-panel .market-sections{flex:1 1 auto!important;min-height:0!important;display:grid!important;grid-template-rows:1fr auto!important;align-content:stretch!important;gap:2px!important}
  #market-panel .market-section{display:flex!important;flex-direction:column!important;justify-content:center!important;min-height:0!important}
}

/* Weather text effect owns the complete status unit: emoji/icon + description. */
#weather-desc[data-obsl-zone-effect]{display:inline-flex!important;align-items:center!important;gap:.18em!important;transform-origin:center!important}

/* Modern dark mode: every major surface remains visible and readable. */
html.dark{--bg:#0b0f14!important;--panel:#111821!important;--text:#eef4fb!important;--muted:#9aa9ba!important;--line:#2b3948!important;color-scheme:dark}
html.dark body{background:#0b0f14!important;color:#eef4fb!important}
html.dark :is(#header-frame,#event-frame,#weather-panel,#countdown-panel,#tech-news-panel,#day-info-panel,#moments-panel,#market-panel,#footer-frame,#site-footer){
  background-color:#111821!important;color:#eef4fb!important;border-color:#2b3948!important;box-shadow:0 1px 0 #ffffff08 inset!important;
}
html.dark :is(#header-frame,#event-frame,#weather-panel,#countdown-panel,#tech-news-panel,#day-info-panel,#moments-panel,#market-panel,#footer-frame) *{border-color:#2b3948}
html.dark :is(.tech-news-card,.moment-card,.market-section,.event-card,.day-info-panel,.countdown-panel){color:#eef4fb!important}
html.dark :is(.tech-news-card-title,.tech-news-source-row,.tech-news-card-date,.market-source,.market-row,.moment-card-title,.moment-card-meta,#weather-meta,#weather-update,#weather-location){color:#c7d3df!important}
html.dark :is(#obsl-settings-viewport,#system-menu,.admin-dialog,.obsl-custom-confirm,.moments-manager-dialog){background:#111821!important;color:#eef4fb!important;border-color:#354455!important}
html.dark #obsl-settings-dragbar,html.dark #obsl-settings-tabs{background:#111821!important;border-color:#2b3948!important}
html.dark #obsl-settings-tabs>button{background:#17212d!important;color:#dbe7f4!important;border-color:#354455!important}
html.dark #obsl-settings-tabs>button.active{background:#223247!important;color:#fff!important;border-color:#79a9e6!important;box-shadow:inset 0 0 0 1px #79a9e6!important}
html.dark :is(#obsl-settings-viewport,#system-menu,.admin-dialog,.moments-manager-dialog) :is(input,select,textarea){background:#0c131b!important;color:#f3f7fc!important;border-color:#425366!important;caret-color:#fff!important}
html.dark :is(#obsl-settings-viewport,#system-menu,.admin-dialog,.moments-manager-dialog) :is(input,textarea)::placeholder{color:#718399!important}
html.dark :is(#obsl-settings-viewport,#system-menu,.admin-dialog,.moments-manager-dialog) button:not(.danger){color:#eef4fb;border-color:#425366}
html.dark :is(summary,label,.admin-hint,.admin-form-message,.obsl-current-setting){color:inherit}
html.dark a{color:#8dc2ff}
html.dark #market-panel::before,html.dark #tech-news-panel::before,html.dark #moments-panel::before{opacity:.16!important}
html.dark .obsl-toast-item{background:#111821!important;color:#eef4fb!important;border-color:#354455!important}

@media(max-width:900px){
  #obsl-settings-dragbar{height:30px!important;min-height:30px!important}
  #market-panel.market-panel{align-self:stretch!important}
}


/* ===== stable stability owner — 2026-09-22 23:43 ===== */
:root{--obsl-layout-surface:#ffffff;--obsl-layout-surface-2:#f6f7f9;--obsl-layout-border:#cfd5dc}

/* Legacy floating editor shells are retired. They were responsible for the thin
   ghost strip at the left side of Header and for stealing Footer/Header form nodes. */
body>#header-section-editor,body>#footer-section-editor{display:none!important;visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;overflow:hidden!important;padding:0!important;margin:0!important;border:0!important}
body>#event-section-editor:not(.obsl-settings-live){display:none!important;visibility:hidden!important;pointer-events:none!important}
#obsl-settings-viewport #event-section-editor.obsl-settings-live{display:block!important;visibility:visible!important;pointer-events:auto!important;width:100%!important;height:auto!important;overflow:visible!important}

/* Opening Settings must never change the document viewport width or dashboard
   coordinate system. Keep the scrollbar gutter stable and overlay Settings. */
html{scrollbar-gutter:stable}
html.obsl-settings-open,html.obsl-settings-open body{
  width:100%!important;height:auto!important;min-height:100%!important;
  overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:auto!important;
}
html.obsl-settings-open body>.dashboard,body.obsl-settings-open>.dashboard{
  position:relative!important;inset:auto!important;transform:none!important;
  width:min(100%,var(--obsl-app-max-width))!important;max-width:var(--obsl-app-max-width)!important;
  margin-inline:auto!important;height:auto!important;overflow:visible!important;
}
body>#obsl-settings-viewport:not([hidden]){position:fixed!important;left:50%!important;right:auto!important;bottom:0!important;top:auto!important;transform:translateX(-50%)!important}

/* Bottom row: CSS Grid owns the row height. Both cells stretch to the same track;
   no hard-coded height can cause Market to end early or clip rows. */
@media(min-width:901px){
  #bottom-grid{align-items:stretch!important;grid-auto-rows:max-content!important}
  #moments-panel,#market-panel{height:auto!important;min-height:0!important;max-height:none!important;align-self:stretch!important}
  #market-panel.market-panel{display:flex!important;flex-direction:column!important}
  #market-panel .market-sections{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;justify-content:space-evenly!important;gap:2px!important}
  #market-panel .market-section{flex:0 1 auto!important;justify-content:center!important}
}

/* Settings viewport is compact, but controls remain usable and cannot disappear. */
#obsl-settings-dragbar{height:27px!important;min-height:27px!important;padding:1px 5px 1px 9px!important}
#obsl-settings-title{font-size:11.5px!important;line-height:1!important}
#obsl-settings-close{width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important;font-size:18px!important}
#obsl-settings-body{position:relative!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;contain:none!important}
#obsl-settings-body>.obsl-tab-pane:not([hidden]){display:block!important;visibility:visible!important;opacity:1!important;min-height:1px!important}

/* App confirmation actions: Thoát/Lưu same compact size, content-fit, no oversized pills. */
#obsl-popup-layer.is-dialog .obsl-popup-dialog-actions{display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:6px!important;flex-wrap:nowrap!important}
#obsl-popup-layer.is-dialog :is(.obsl-popup-cancel,.obsl-popup-action){
  flex:0 0 auto!important;width:auto!important;min-width:58px!important;min-height:30px!important;height:30px!important;
  margin:0!important;padding:0 11px!important;border-radius:9px!important;font-size:12px!important;line-height:30px!important;
}

/* Samsung One UI-inspired dark palette. High-contrast text is applied after all
   legacy style layers so configured dark colors can no longer become invisible. */
html.dark{
  color-scheme:dark!important;
  --bg:#080c12!important;--panel:#111821!important;--text:#f2f6fb!important;--muted:#a7b3c2!important;--line:#2b3746!important;
  --obsl-layout-surface:#111821;--obsl-layout-surface-2:#18212c;--obsl-layout-border:#2b3746;
  background:#080c12!important;
}
html.dark body{background:radial-gradient(circle at 50% -10%,#17202b 0,#0b1017 34%,#080c12 72%) fixed!important;color:#f2f6fb!important}
html.dark .dashboard{color:#f2f6fb!important}
html.dark :is(#header-frame,#event-frame,#weather-widget>.now-panel,#countdown-panel,#tech-news-panel,#day-info-panel,#moments-panel,#market-panel,#footer-frame,#site-footer){
  background-color:#111821!important;border-color:#2b3746!important;color:#f2f6fb!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 1px 2px rgba(0,0,0,.34)!important;
}
html.dark :is(#header-frame,#event-frame,#weather-widget>.now-panel,#countdown-panel,#tech-news-panel,#moments-panel,#market-panel,#footer-frame) :is(h1,h2,h3,h4,strong,b,label,p,span,small,em){color:inherit}
html.dark :is(.panel-title,.tech-news-title,.moments-title,.market-heading,.market-heading .panel-title,.weather-desc,.weather-desc span,.brand-title,#weekday,#solar-date,#lunar-date){color:#f4f7fb!important;text-shadow:none!important}
html.dark :is(.tech-news-card-title,.tech-news-source-name,.tech-news-card-date,.moment-card-title,.moment-card-meta,.market-source,.market-row,.market-row span,.market-row strong,.weather-meta,.weather-meta span,.weather-updated-status,#location-status,.calendar-count,.calendar-state-compact){color:#c8d3df!important}
html.dark #clock{--header-clock-color:#f7f9fc!important;color:#f7f9fc!important;-webkit-text-stroke-color:currentColor!important;text-shadow:none!important}
html.dark #clock .obsl7-digit i,html.dark #clock .obsl7-colon i{background:#f7f9fc!important}
html.dark #clock .obsl7-digit i:not(.on){opacity:.095!important}
html.dark #clock .obsl7-digit i.on{opacity:1!important}
html.dark #clock[data-clock-style="flip"] .clock-digit{color:#fff!important;background:linear-gradient(#26313f 0 49%,#151d27 50% 100%)!important;border-color:#3b4a5d!important}
html.dark #clock[data-clock-style="flip"] .clock-colon{color:#f7f9fc!important}
html.dark #event-frame :is(.event-content,.event-name,.event-label-text,.event-weekday){color:#eef4fb!important}
html.dark #event-frame .event-date,html.dark #event-frame .highlight{color:#ff8a94!important}
html.dark .calendar-ticker{background:#121a24!important;color:#eef4fb!important}
html.dark :is(.calendar-brand,.calendar-day-badge){background:#1b2734!important;color:#fff!important;border-color:#344355!important}
html.dark #calendar-motion,html.dark #calendar-motion *{color:#d9e3ee!important}
html.dark #weather-widget>.now-panel :is(.temperature,#temp){color:#f8fafc!important;text-shadow:none!important}
html.dark #countdown-panel .cd-title{color:#ff6075!important;text-shadow:0 1px 2px #000!important}
html.dark #countdown-panel :is(.cd-target,.cd-today,.cd-grid,.cd-grid span){color:#f7f9fc!important}
html.dark #tech-news-panel .tech-news-card{background:rgba(22,30,40,.78)!important;color:#eef4fb!important}
html.dark #tech-news-panel .tech-news-card-body{background:linear-gradient(180deg,rgba(17,24,33,.25),rgba(17,24,33,.94))!important}
html.dark #moments-panel .moment-card{background:#151e29!important;color:#eef4fb!important}
html.dark #market-panel :is(.market-section,.market-row,.market-value,#market-fuel,#market-gold){color:#eef4fb!important}
html.dark #market-panel .market-source{color:#9eb0c2!important}
html.dark #footer-frame,html.dark #site-footer{background:#101720!important;color:#dce5ef!important}
html.dark #site-footer :is(#footer-text,a,button,span){color:#dce5ef!important}

/* Day-info intentionally keeps its decorative background, but every utility stays readable. */
html.dark #day-info-panel{background-color:#151b24!important;filter:none!important}
html.dark #day-info-panel .day-info-content-wrap{background:rgba(12,17,24,.40)!important;border-radius:10px!important}
html.dark #day-info-panel :is(.day-info-line,.day-info-key,.day-info-value){color:#ffd0d5!important;text-shadow:0 1px 2px #0008!important}
html.dark #day-info-panel .day-info-title{color:#ff5d6c!important;text-shadow:0 1px 2px #0008!important}
html.dark #day-info-panel .day-util-btn{background:#1a2633!important;color:#dce8f5!important;border:1px solid #344557!important}

/* Settings and dialogs: Samsung-style layered surfaces, never white-on-white/black-on-black. */
html.dark :is(#obsl-settings-viewport,#system-menu,.admin-dialog,.moments-manager-dialog,#obsl-popup-layer .obsl-popup-card){background:#111821!important;color:#eef4fb!important;border-color:#354457!important;box-shadow:0 -10px 36px rgba(0,0,0,.42)!important}
html.dark #obsl-settings-dragbar{background:#151e29!important;border-color:#2c3948!important}
html.dark #obsl-settings-tabs{background:#0f161f!important;border-color:#2c3948!important}
html.dark #obsl-settings-tabs>button{background:#18222e!important;color:#cbd7e4!important;border-color:#2f4052!important}
html.dark #obsl-settings-tabs>button.active,html.dark #obsl-settings-tabs>button[aria-selected="true"]{background:#24364b!important;color:#fff!important;border-color:#5aa9ff!important;box-shadow:inset 0 0 0 1px #5aa9ff33!important}
html.dark #obsl-settings-body :is(details,fieldset,.admin-subsection-body,.title-logo-tools-body,.system-module-card,.system-group-body){border-color:#2b3949!important;color:#eaf1f8!important}
html.dark #obsl-settings-body summary{color:#e7eef7!important;background:transparent!important}
html.dark :is(#obsl-settings-viewport,#system-menu,.admin-dialog,.moments-manager-dialog) :is(input:not([type="color"]),select,textarea){background:#0b121a!important;color:#f3f7fc!important;border-color:#405267!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.32)!important}
html.dark :is(#obsl-settings-viewport,#system-menu,.admin-dialog,.moments-manager-dialog) input[type="color"]{background:#0b121a!important;border-color:#405267!important}
html.dark :is(#obsl-settings-viewport,#system-menu,.admin-dialog,.moments-manager-dialog) :is(input,textarea)::placeholder{color:#73859a!important}
html.dark :is(#obsl-settings-viewport,#system-menu,.admin-dialog,.moments-manager-dialog) :is(.system-menu-button,button:not(.obsl-module-pencil):not(#obsl-settings-close)){background:#1a2633!important;color:#e8f0f8!important;border-color:#405267!important}
html.dark :is(#obsl-settings-viewport,#system-menu,.admin-dialog,.moments-manager-dialog) :is(.system-menu-button.primary,.admin-primary){background:#0b66d8!important;color:#fff!important;border-color:#2f86ef!important}
html.dark :is(.admin-hint,.admin-form-message,.obsl-current-setting,.system-health-warning-details p){color:#9fb0c2!important}
html.dark .obsl-toast-item{background:#18222e!important;color:#f1f6fb!important;border-color:#36495d!important;box-shadow:0 10px 30px #0008!important}
html.dark #obsl-popup-layer{background:rgba(1,5,10,.54)!important}
html.dark #obsl-popup-layer .obsl-popup-card{--popup-bg:#151e29!important;--popup-text:#eef4fb!important;--popup-title:#fff!important;--popup-button-bg:#2f7be5!important;--popup-button-color:#fff!important}
html.dark #obsl-popup-layer .obsl-popup-cancel{background:#202b38!important;color:#e9f0f7!important;border-color:#3a4b5e!important}

@media(max-width:900px){html{scrollbar-gutter:auto}html.obsl-settings-open,html.obsl-settings-open body{overflow-y:auto!important}}


/* ===== stable final corrective owner — ghost/editor isolation + exact paired row ===== */
/* These legacy editor shells are siblings INSIDE .dashboard/#footer-frame, not body children.
   Hide by ID regardless of parent to prevent the thin left-side ghost strip during auth/settings hydration. */
#header-section-editor,#footer-section-editor{
  display:none!important;visibility:hidden!important;pointer-events:none!important;
  position:static!important;inset:auto!important;width:0!important;height:0!important;min-width:0!important;min-height:0!important;
  max-width:0!important;max-height:0!important;overflow:hidden!important;padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;
}
#event-section-editor:not(.obsl-settings-live){display:none!important;visibility:hidden!important;pointer-events:none!important}
#obsl-settings-viewport #event-section-editor.obsl-settings-live{display:block!important;visibility:visible!important;pointer-events:auto!important;width:100%!important;height:auto!important;max-width:100%!important}

/* Canonical desktop lower pair: exact physical equality, content stays inside. */
@media(min-width:901px){
  #moments-panel.moments-panel,#market-panel.market-panel{
    box-sizing:border-box!important;height:222px!important;min-height:222px!important;max-height:222px!important;align-self:stretch!important;overflow:hidden!important;
  }
  #moments-panel .moments-layout,#moments-panel .obsl-moments-viewport{min-height:0!important;max-height:186px!important;overflow:hidden!important}
  #market-panel .market-sections{height:calc(100% - 25px)!important;min-height:0!important;max-height:none!important;justify-content:space-evenly!important;overflow:hidden!important}
}

/* Compact confirmation controls: equal geometry and no oversized pill. */
#obsl-popup-layer.is-dialog :is(.obsl-popup-cancel,.obsl-popup-action){
  min-width:50px!important;width:50px!important;height:27px!important;min-height:27px!important;max-height:27px!important;
  padding:0 7px!important;border-radius:7px!important;font-size:11px!important;line-height:25px!important;
}

/* Opening/closing Settings is a pure overlay operation: never animate/transform public App geometry. */
html.obsl-settings-open body>.dashboard,body.obsl-settings-open>.dashboard,
html.obsl-settings-closing body>.dashboard,body.obsl-settings-closing>.dashboard{
  transition:none!important;animation:none!important;transform:none!important;scale:1!important;zoom:1!important;
}
#header-frame,#header-frame .brand-header,#header-frame .topbar,#clock,.header-calendar-row{
  transition-property:color,background-color,border-color,opacity!important;
}

/* One UI dark final contrast owner: all public/dashboard and settings text/control surfaces stay legible. */
html.dark{--obsl-oneui-bg:#080b10;--obsl-oneui-card:#111720;--obsl-oneui-card2:#18202b;--obsl-oneui-line:#303b49;--obsl-oneui-text:#f5f7fb;--obsl-oneui-sub:#b9c3cf;--obsl-oneui-blue:#4aa3ff;--obsl-oneui-red:#ff6675}
html.dark body{background:linear-gradient(180deg,#0b1017 0,#080b10 42%,#070a0f 100%) fixed!important;color:var(--obsl-oneui-text)!important}
html.dark :is(#header-frame,#event-frame,#weather-widget>.now-panel,#countdown-panel,#tech-news-panel,#moments-panel,#market-panel,#footer-frame,#site-footer){
  background:#111720!important;color:#f5f7fb!important;border-color:#303b49!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 1px 2px rgba(0,0,0,.5)!important;
}
html.dark #header-frame :is(.brand-title,#weekday,#solar-date,#lunar-date,#lunar-before,#lunar-label,#lunar-value,#lunar-after){color:#f8fafc!important}
html.dark #clock,html.dark #clock *{color:#f8fafc!important}
html.dark #event-frame :is(.event-content,.event-name,.event-label-text,.event-weekday,.calendar-state-compact,.calendar-count,#calendar-motion,#calendar-motion *){color:#edf3f9!important}
html.dark #event-frame :is(.event-date,.highlight){color:#ff7a87!important}
html.dark #weather-widget>.now-panel :is(.temperature,#temp,.weather-desc,.weather-desc *,#weather-desc,#weather-desc *,strong){color:#f8fafc!important}
html.dark #weather-widget>.now-panel :is(.weather-meta,.weather-meta *,#location-status,.weather-updated-status){color:#c7d0db!important}
html.dark #countdown-panel :is(.cd-target,.cd-today,.cd-grid,.cd-grid *,.cd-footer,.cd-note){color:#f3f6fa!important}
html.dark #tech-news-panel :is(.tech-news-title,.tech-news-card-title,.tech-news-source-name,.tech-news-card-date,.tech-news-view-all,.tech-news-refresh-head){color:#edf3f9!important}
html.dark #moments-panel :is(.moments-title,.moment-card-title,.moment-card-excerpt,.moment-card-date){color:#edf3f9!important}
html.dark #market-panel :is(.market-heading,.panel-title,.market-section,.market-section *,#market-fuel,#market-fuel *,#market-gold,#market-gold *){color:#eef4fa!important}
html.dark #market-panel .market-source{color:#a9b7c6!important}
html.dark #site-footer :is(#footer-text,.footer-copyright-group,.footer-links,.footer-links *,button,a){color:#dfe7f0!important}
html.dark :is(#obsl-settings-viewport,#system-menu,.admin-dialog,.moments-manager-dialog,#obsl-popup-layer .obsl-popup-card){background:#111720!important;color:#f5f7fb!important;border-color:#344151!important}
html.dark #obsl-settings-body :is(label,legend,summary,p,span,strong,b,small,.admin-form-message,.obsl-current-setting){color:#dfe7ef!important}
html.dark #obsl-settings-body :is(input:not([type=color]),textarea,select){background:#0b1119!important;color:#f7f9fc!important;border-color:#435267!important;caret-color:#fff!important}
html.dark #obsl-settings-body :is(input:not([type=color]),textarea,select):focus{border-color:#4aa3ff!important;outline:1px solid #4aa3ff!important;box-shadow:0 0 0 2px rgba(74,163,255,.18)!important}
html.dark #obsl-settings-viewport button:not(.obsl-module-pencil):not(#obsl-settings-close){background:#1a2430!important;color:#edf3f9!important;border-color:#435267!important}
html.dark #obsl-settings-viewport button.active,html.dark #obsl-settings-viewport button[aria-selected=true]{background:#253a52!important;color:#fff!important;border-color:#4aa3ff!important}
html.dark ::selection{background:#276db5!important;color:#fff!important}
html.dark *{scrollbar-color:#526276 #0c121a}

/* Canonical 1180px desktop measurement owner. News/Day is exactly 222px while
   preserving the complete source + timestamp lane inside the News card. */
@media(min-width:901px){
  #tech-news-panel.tech-news-panel,#day-info-panel.day-info-panel{
    height:222px!important;min-height:222px!important;max-height:222px!important;box-sizing:border-box!important;
  }
  #tech-news-panel .obsl-tech-news-viewport{height:187px!important;min-height:187px!important;max-height:187px!important}
  #tech-news-panel .tech-news-card-media{height:111px!important;flex:0 0 111px!important}
  #tech-news-panel .tech-news-card-body{height:76px!important;min-height:76px!important;max-height:76px!important}
}


/* ===== stable final owner: source quarantine + One UI dark visibility ===== */
/* The stable ghost strip was caused by zero-size legacy dashboard sources using
   overflow:visible plus legacy fixed-width editor rules. Never let source DOM paint. */
[hidden]{display:none!important}
#obsl-settings-repository{display:none!important;visibility:hidden!important;pointer-events:none!important;contain:strict!important}
.dashboard>.app-settings,.dashboard>.app-settings.obsl-source-quarantine{
  display:none!important;visibility:hidden!important;pointer-events:none!important;
  position:absolute!important;inset:0 auto auto 0!important;width:0!important;height:0!important;
  min-width:0!important;min-height:0!important;max-width:0!important;max-height:0!important;
  overflow:hidden!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;contain:strict!important
}
.dashboard>#header-section-editor,.dashboard>#event-section-editor:not(.obsl-settings-live),
#footer-frame>#footer-section-editor:not(.obsl-settings-live),.dashboard>#event-admin-modal[hidden],
#calendar-speed-panel[hidden],#calendar-picker[hidden]{
  display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;
  width:0!important;height:0!important;min-width:0!important;min-height:0!important;max-width:0!important;max-height:0!important;
  overflow:hidden!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;transform:none!important
}
#obsl-settings-viewport :is(#event-section-editor.obsl-settings-live,#footer-tools-group,#title-logo-tools){visibility:visible!important;pointer-events:auto!important}

/* Samsung One UI inspired dark layer: media backgrounds stay visible while text remains readable. */
html.dark{
  --obsl-oneui-bg:#05080d;--obsl-oneui-surface:rgba(13,20,29,.64);--obsl-oneui-surface-2:rgba(19,29,41,.70);
  --obsl-oneui-line:rgba(121,154,188,.34);--obsl-oneui-text:#f5f8fc;--obsl-oneui-sub:#c3cfdd;--obsl-oneui-muted:#9fb0c2;--obsl-oneui-accent:#5aa9ff
}
html.dark body{background:radial-gradient(circle at 50% -20%,#152236 0,#09111a 38%,#05080d 75%) fixed!important;color:var(--obsl-oneui-text)!important}
html.dark .obsl-bg-layer.is-active{
  opacity:clamp(0,calc(var(--obsl-bg-opacity,.18) * 1.95),.78)!important;
  filter:brightness(.92) saturate(1.12) contrast(1.04) blur(var(--obsl-bg-blur,0px))!important
}
html.dark .obsl-bg-layer :is(img,video){filter:none!important;opacity:1!important}
html.dark :is(#header-frame,#event-frame,#weather-widget>.now-panel,#countdown-panel,#tech-news-panel,#day-info-panel,#moments-panel,#market-panel,#footer-frame,#site-footer).obsl-bg-host{
  background:rgba(10,16,24,.54)!important;border-color:var(--obsl-oneui-line)!important;color:var(--obsl-oneui-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 8px 24px rgba(0,0,0,.14)!important;
  -webkit-backdrop-filter:blur(3px) saturate(1.04);backdrop-filter:blur(3px) saturate(1.04)
}
html.dark :is(#header-frame,#event-frame,#weather-widget>.now-panel,#countdown-panel,#tech-news-panel,#day-info-panel,#moments-panel,#market-panel,#footer-frame,#site-footer):not(.obsl-bg-host){
  background:linear-gradient(150deg,rgba(18,27,38,.92),rgba(8,13,20,.94))!important;border-color:var(--obsl-oneui-line)!important
}
html.dark #tech-news-panel .tech-news-card,
html.dark #moments-panel .moment-card{background:rgba(8,14,22,.34)!important;border-color:rgba(147,177,207,.18)!important;box-shadow:0 6px 16px rgba(0,0,0,.15)!important}
html.dark #tech-news-panel .tech-news-card-body,
html.dark #moments-panel :is(.moment-card-body,.moment-card-copy){background:linear-gradient(180deg,rgba(5,9,14,.12),rgba(5,9,14,.62))!important}
html.dark #market-panel :is(.market-section,#market-fuel,#market-gold){background:rgba(5,10,16,.20)!important}
html.dark #day-info-panel :is(.day-info-body,.day-info-content){background:rgba(7,12,19,.16)!important}
html.dark #countdown-panel :is(.cd-grid>div,.countdown-cell){background:rgba(13,20,29,.32)!important}
html.dark :is(#header-frame,#event-frame,#weather-widget,#countdown-panel,#tech-news-panel,#day-info-panel,#moments-panel,#market-panel,#footer-frame) :is(h1,h2,h3,h4,strong,b,.panel-title,.brand-title){
  color:#f8fbff!important;text-shadow:0 1px 3px rgba(0,0,0,.72)!important
}
html.dark :is(#header-frame,#event-frame,#weather-widget,#countdown-panel,#tech-news-panel,#day-info-panel,#moments-panel,#market-panel,#footer-frame) :is(p,span,small,time,label,.market-source,.tech-news-card-date,.moment-card-date){
  text-shadow:0 1px 2px rgba(0,0,0,.66)
}
html.dark :is(#header-frame,#event-frame,#weather-widget,#countdown-panel,#tech-news-panel,#moments-panel,#market-panel,#footer-frame) :is(.secondary,.muted,.weather-updated-status,.market-source){color:var(--obsl-oneui-sub)!important}
html.dark :is(#obsl-settings-viewport,.admin-dialog,.moments-manager-dialog,#obsl-popup-layer .obsl-popup-card){
  background:linear-gradient(180deg,#151e29 0,#0f1721 100%)!important;color:#f5f8fc!important;border-color:#34465a!important
}
html.dark #obsl-settings-body :is(input:not([type=color]),textarea,select){background:#0b131d!important;color:#f8fbff!important;border-color:#496079!important}
html.dark #obsl-settings-body :is(input:not([type=color]),textarea,select):focus{background:#0d1824!important;border-color:#64adff!important;box-shadow:0 0 0 2px rgba(90,169,255,.20)!important}
html.dark #obsl-settings-tabs>button{background:#172332!important;color:#dce7f2!important;border-color:#34485d!important}
html.dark #obsl-settings-tabs>button.active,html.dark #obsl-settings-tabs>button[aria-selected=true]{background:#24476d!important;color:#fff!important;border-color:#65adff!important}

/* stable hard stop: legacy admin modal/editor may never paint while it is still a direct Dashboard child.
   Unified Settings physically moves the live node into #obsl-settings-viewport before it is allowed to render. */
.dashboard>.admin-modal,
.dashboard>.section-config-panel{
  display:none!important;visibility:hidden!important;pointer-events:none!important;
  position:absolute!important;inset:0 auto auto 0!important;width:0!important;height:0!important;
  min-width:0!important;min-height:0!important;max-width:0!important;max-height:0!important;
  overflow:hidden!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;transform:none!important
}
#obsl-settings-viewport .admin-modal.obsl-settings-live,
#obsl-settings-viewport .section-config-panel.obsl-settings-live{
  display:block!important;visibility:visible!important;pointer-events:auto!important;
  position:static!important;inset:auto!important;width:100%!important;height:auto!important;min-width:0!important;max-width:100%!important;
  min-height:0!important;max-height:none!important;overflow:visible!important;transform:none!important
}
\n/* stable motion stability: rotating public information moves continuously without blinking. */
#event-frame :is(.event-content,.event-name,.event-label-text,.event-date,.event-weekday,.highlight),
#birthday-event-panel :is(.birthday-event-item,.birthday-name,.birthday-date,.birthday-days-number),
#event-frame .calendar-ticker :is(.calendar-item,.calendar-event,.calendar-date,.calendar-weekday){
  animation:none!important;opacity:1!important;visibility:visible!important;
}
.tech-news-card{cursor:pointer!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important}


/* stable · Settings interaction acknowledgement.
   Uses shadow/background only so it cannot fight text-effect transform animations. */
#obsl-settings-viewport button.obsl-settings-pressed:not(:disabled){
  box-shadow:inset 0 0 0 2px currentColor,0 0 0 2px color-mix(in srgb,currentColor 24%,transparent)!important;
  filter:brightness(.94)!important;
}
#obsl-settings-viewport button.obsl-settings-ack:not(:disabled){
  outline:2px solid color-mix(in srgb,currentColor 62%,transparent)!important;
  outline-offset:2px!important;
  box-shadow:inset 0 0 0 1px currentColor,0 0 0 4px color-mix(in srgb,currentColor 13%,transparent)!important;
}
#obsl-settings-viewport button:disabled{
  cursor:wait!important;
  opacity:.62!important;
}

/* ===== 2026-10-01 dialog/footer final override ===== */
#obsl-popup-layer{box-sizing:border-box!important;overflow:auto!important;padding:12px!important}
#obsl-popup-layer .obsl-popup-card{width:min(var(--popup-width,420px),calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important;box-sizing:border-box!important}
#obsl-popup-layer.is-dialog .obsl-popup-dialog-actions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;align-items:stretch!important}
#obsl-popup-layer.is-dialog :is(.obsl-popup-cancel,.obsl-popup-action){width:100%!important;min-width:0!important;max-width:100%!important;min-height:42px!important;height:auto!important;padding:9px 10px!important;line-height:1.2!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;box-sizing:border-box!important}
#site-footer.site-footer{height:auto!important;min-height:0!important;overflow:visible!important;align-items:center!important}
#footer-center-cluster{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;white-space:normal!important;overflow:visible!important;min-width:0!important}
#footer-center-cluster .footer-copyright-group{display:flex!important;flex-direction:column!important;align-items:center!important;white-space:normal!important;overflow:visible!important;min-width:0!important}
@media(max-width:520px){#obsl-popup-layer{padding:8px!important}#obsl-popup-layer .obsl-popup-card{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important}#obsl-popup-layer.is-dialog .obsl-popup-dialog-actions{grid-template-columns:1fr!important}}