@charset "UTF-8";

@font-face{
  font-family:"DSEG7Local";
  src:url("fonts/DSEG7Classic-Bold.woff2") format("woff2"),
      url("fonts/DSEG7Classic-Bold.woff") format("woff");
  font-style:normal;
  font-weight:700;
  font-display:block;
}

:root{
  --bg:#f3f3ef;
  --panel:#fbfbf7;
  --text:#111;
  --muted:#666;
  --line:#c9c9c2;
  --danger:#d40000;
  --font-ui:"Noto Sans","Roboto","Segoe UI","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body,button,textarea,input,select{font-family:var(--font-ui)}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.dashboard{width:min(1180px,100%);min-height:100vh;margin:auto;padding:14px 16px 18px}

.header-frame{
  position:relative;
  width:100%;
  margin:0 0 10px;
  padding:8px 10px 10px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  box-sizing:border-box;
  overflow:hidden;
}
.header-frame.header-pinned{position:sticky;top:0;z-index:6000;background:var(--bg)}
.header-frame .brand-header{
  position:relative;
  display:flex!important;
  align-items:center;
  justify-content:center;
  min-height:min(var(--brand-logo-size,110px),22vw);
  padding:4px clamp(58px,18vw,165px) 7px!important;
  overflow:hidden;
}
.header-frame .brand-logo-wrap{
  position:absolute;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:auto!important;
  max-width:24vw;
}
.header-frame .brand-logo{
  display:block;
  width:min(var(--brand-logo-size,110px),22vw)!important;
  height:min(var(--brand-logo-size,110px),22vw)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:150px!important;
  max-height:150px!important;
  object-fit:cover!important;
  transition:none!important;
}
.header-frame .brand-title{
  margin:0!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  line-height:1.05!important;
}
.header-time-layout{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto;
  justify-items:center;
  align-items:center;
  gap:6px!important;
  margin:0!important;
  padding:4px 0 0!important;
  border:0!important;
  background:transparent!important;
  min-width:0;
}
.header-time-layout .clock{
  font-family:var(--header-clock-font,"DSEG7Local")!important;
  font-size:min(var(--header-clock-size,72px),16vw)!important;
  font-weight:700!important;
  font-synthesis:none;
  line-height:.95!important;
  text-align:center;
  white-space:nowrap;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  max-width:100%;
  overflow:hidden;
}
.header-calendar-row{
  width:100%;
  min-width:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:clamp(4px,1.2vw,12px);
  white-space:nowrap!important;
  overflow:hidden;
  line-height:1.2;
  padding:0 4px;
  box-sizing:border-box;
}
#weekday,#solar-date{
  flex:0 1 auto;
  min-width:0;
  font-family:var(--header-date-font,"Times New Roman",serif)!important;
  font-size:min(var(--header-date-size,24px),4.9vw)!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
#lunar-date{
  flex:0 1 auto;
  min-width:0;
  margin:0!important;
  font-family:var(--header-lunar-font,"Times New Roman",serif)!important;
  font-size:min(var(--header-lunar-size,18px),4.5vw)!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
.header-calendar-dot{font-size:min(var(--header-date-size,24px),4.2vw);opacity:.72;flex:0 0 auto}
@media(max-width:520px){
  .header-frame{padding:6px 7px 8px}
  .header-frame .brand-header{padding-inline:clamp(50px,18vw,76px)!important;min-height:min(var(--brand-logo-size,110px),20vw)}
  .header-frame .brand-logo{width:min(var(--brand-logo-size,110px),20vw)!important;height:min(var(--brand-logo-size,110px),20vw)!important}
  .header-time-layout{gap:4px!important}
  .header-calendar-row{gap:4px;padding-inline:1px}
}

.upcoming-wrap{width:100%;display:flex;justify-content:center;padding:0 4px}
.upcoming-box{
  width:min(980px,100%);
  height:66px;
  margin:10px auto 5px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  overflow:hidden;
}
.upcoming-stage{position:relative;width:100%;height:100%;overflow:hidden}
.upcoming-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  align-content:center;
  gap:2px 0;
  padding:7px 14px;
  text-align:center;
  font-size:14px;
  line-height:1.4;
  font-weight:700;
  background:var(--panel);
  overflow:hidden;
}
.upcoming-slide.current{transform:translateY(0)}
.upcoming-slide.next{transform:translateY(100%)}
.upcoming-slide.slide-out{animation:slideOut .68s ease-in-out forwards}
.upcoming-slide.slide-in{animation:slideIn .68s ease-in-out forwards}
@keyframes slideOut{from{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes slideIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
.highlight,.event-date{color:var(--danger);font-weight:900}
.event-label-text{font-weight:800}
.event-gap{display:inline-block;width:18px;flex:0 0 18px}

.calendar-ticker{
  min-height:42px;
  display:flex;
  align-items:center;
  margin:7px 0 5px;
  border:1.5px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  overflow:hidden;
}
.calendar-label{
  flex:0 0 auto;
  padding:9px 12px;
  border-right:1px solid var(--line);
  font-weight:900;
  white-space:nowrap;
}
.calendar-window{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.calendar-track{
  display:inline-block;
  padding-left:100%;
  white-space:nowrap;
  font-weight:800;
  animation:calendarMarquee var(--calendar-marquee-seconds,60s) linear infinite;
}
.calendar-item{display:inline-block;margin-right:42px}
.calendar-time{font-weight:900;font-variant-numeric:tabular-nums}
@keyframes calendarMarquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.calendar-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  border-left:1px solid var(--line);
}
#calendar-state{font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap}

.location-status{
  margin:12px 0 8px;
  text-align:center;
  font-size:clamp(17px,2vw,24px);
  font-weight:800;
}
.weather-grid{display:grid;grid-template-columns:1.3fr 2.7fr;gap:12px}
.panel{
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:12px;
}
.now-panel{
  padding:16px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:15px;
}
.temperature{
  font-size:clamp(58px,9vw,110px);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:900;
}
.weather-desc{font-size:clamp(17px,2vw,25px);font-weight:800}
.weather-meta{
  margin-top:9px;
  display:grid;
  grid-template-columns:repeat(2,minmax(100px,1fr));
  gap:6px 14px;
  color:var(--muted);
  font-size:14px;
}
.weather-meta b{color:var(--text)}
.forecast-panel{padding:12px 10px;overflow:hidden}
.panel-title{font-weight:900;margin-bottom:9px;font-size:16px}
.hours{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(76px,1fr);
  overflow-x:auto;
  scrollbar-width:none;
  border-top:1px solid var(--line);
}
.hours::-webkit-scrollbar{display:none}
.hour{text-align:center;padding:9px 5px;border-right:1px solid var(--line);min-height:116px}
.htime{font-size:13px;color:var(--muted);font-weight:700}
.hicon{font-size:27px;line-height:1.4;filter:grayscale(1)}
.htemp{font-size:19px;font-weight:900}
.hrain{font-size:12px;color:var(--muted);margin-top:3px}

.bottom-grid{display:grid;grid-template-columns:2.8fr 1.2fr;gap:12px;margin-top:12px}
.note-panel,.system-panel{padding:14px;min-height:118px}
#note{
  width:100%;
  min-height:72px;
  resize:none;
  border:0;
  outline:none;
  background:transparent;
  color:var(--text);
  font:600 16px/1.45 var(--font-ui);
}
#sys,#wake-state{font-size:13px;line-height:1.5;color:var(--muted)}
.buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:9px}
button{
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:var(--text);
  font-weight:700;
}
footer{text-align:center;color:var(--muted);font-size:12px;margin-top:10px}
.loading{opacity:.72}

@media(max-width:900px){
  .dashboard{padding:12px}
  .topbar{grid-template-columns:1fr 2fr 1fr}
  .clock{font-size:clamp(48px,10.5vw,94px)}
  .upcoming-box{height:76px}
  .upcoming-slide{font-size:13px;padding:8px 10px}
  .weather-grid{grid-template-columns:1fr}
}

@media(max-width:640px){
  .dashboard{padding:9px}
  .topbar{grid-template-columns:1fr;gap:8px}
  .clock{order:-1;font-size:clamp(44px,15.5vw,82px);margin-bottom:3px}
  .date-panel{text-align:center;font-size:clamp(17px,5vw,23px)}
  .device-panel{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    text-align:center;
    font-size:clamp(17px,5vw,23px);
  }
  .upcoming-box{height:94px;width:100%}
  .upcoming-slide{font-size:12px;line-height:1.45;padding:8px}
  .event-gap{width:9px;flex-basis:9px}
  .calendar-ticker{flex-wrap:wrap}
  .calendar-label{padding:7px 8px;font-size:12px}
  .calendar-actions{
    width:100%;
    justify-content:center;
    border-left:0;
    border-top:1px solid var(--line);
  }
  #calendar-state{display:none}
  .now-panel{grid-template-columns:1fr;text-align:center}
  .weather-meta{max-width:390px;margin:10px auto 0}
  .bottom-grid{grid-template-columns:1fr}
}
@media(max-width:380px){
  .clock{font-size:clamp(38px,14.5vw,62px)}
  .upcoming-box{height:108px}
  .upcoming-slide{font-size:11px}
  .date-panel,.device-panel{font-size:16px}
}
@media(prefers-color-scheme:dark){
  :root{--bg:#121212;--panel:#181818;--text:#eee;--muted:#aaa;--line:#444}
}

.attendance-panel{
  margin-top:12px;
  padding:12px 14px;
  overflow:hidden;
}
.attendance-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.attendance-kicker{
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}
#attendance-title{
  margin:2px 0 0;
  font-family:"Times New Roman",Times,serif;
  font-size:clamp(20px,2.5vw,30px);
  line-height:1.05;
}
.attendance-status{
  flex:0 0 auto;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  text-align:right;
}
.attendance-table-wrap{
  width:100%;
  max-height:210px;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}
.attendance-table{
  width:max-content;
  min-width:100%;
  table-layout:auto;
  border-collapse:separate;
  border-spacing:0;
  background:var(--panel);
  font-family:"Times New Roman",Times,serif;
  font-size:clamp(12px,1.35vw,15px);
}
.attendance-table th,
.attendance-table td{
  width:1%;
  max-width:none;
  padding:5px 8px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  line-height:1.2;
  white-space:nowrap;
}
.attendance-table th:last-child,
.attendance-table td:last-child{border-right:0}
.attendance-table tbody tr:last-child td{border-bottom:0}
.attendance-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#ffebcd;
  color:#111;
  font-weight:900;
  text-align:center;
  box-shadow:0 1px 0 var(--line);
}
.attendance-name{font-weight:700}
.attendance-center{text-align:center}
.attendance-late{font-weight:800}
.attendance-empty{
  width:auto !important;
  padding:14px !important;
  text-align:center;
  color:var(--muted);
}

@media(max-width:640px){
  .attendance-panel{padding:9px}
  .attendance-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .attendance-status{text-align:left}
  .attendance-table-wrap{max-height:195px}
  .attendance-table{
    width:max-content;
    min-width:100%;
    font-size:12px;
  }
  .attendance-table th,
  .attendance-table td{padding:5px 6px}
}

@media(prefers-color-scheme:dark){
  .attendance-table thead th{
    background:#332a1e;
    color:var(--text);
  }
}

.market-panel{
  padding:14px;
  min-height:118px;
}
.market-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.market-heading .panel-title{margin:0}
.market-updated{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-align:right;
}
.market-sections{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.market-section{
  min-width:0;
  border-top:1px solid var(--line);
  padding-top:7px;
}
.market-section:first-child{border-top:0;padding-top:0}
.market-section h3{
  margin:0 0 5px;
  font-size:13px;
  line-height:1.25;
}
.market-source,
.market-unit{
  color:var(--muted);
  font-size:10px;
  line-height:1.3;
}
.market-source{margin-bottom:4px}
.market-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding:2px 0;
  font-size:12px;
}
.market-row span{min-width:0}
.market-row strong{white-space:nowrap;font-variant-numeric:tabular-nums}
.market-mini-head,
.market-rate-row{
  display:grid;
  grid-template-columns:42px 1fr 1fr;
  gap:5px;
  align-items:center;
}
.market-mini-head{
  color:var(--muted);
  font-size:9px;
  text-align:right;
  padding-bottom:2px;
}
.market-mini-head span:first-child{text-align:left}
.market-rate-row{
  font-size:11px;
  padding:2px 0;
  font-variant-numeric:tabular-nums;
}
.market-rate-row span{text-align:right;white-space:nowrap}
.market-gold-name{font-size:12px;font-weight:800;margin-bottom:3px}
.market-gold-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.market-gold-grid>div{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.market-gold-grid span{color:var(--muted);font-size:9px}
.market-gold-grid strong{
  font-size:11px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.market-loading,.market-error{
  color:var(--muted);
  font-size:11px;
}
.market-error{line-height:1.35}

.system-details{
  margin-top:10px;
  padding:0;
  overflow:hidden;
}
.system-details summary{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 14px;
  cursor:pointer;
  list-style:none;
  user-select:none;
  font-weight:900;
}
.system-details summary::-webkit-details-marker{display:none}
.system-arrow{
  display:inline-block;
  transition:transform .18s ease;
  font-size:12px;
}
.system-details:not([open]) .system-arrow{
  transform:rotate(180deg);
}
.system-details-body{
  border-top:1px solid var(--line);
  padding:10px 14px 13px;
}
.system-details-body #sys,
.system-details-body #wake-state{
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}

@media(max-width:640px){
  .market-panel{padding:11px}
  .market-sections{
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow-x:auto;
    gap:8px;
  }
  .market-section{
    min-width:165px;
    border-top:0;
    border-left:1px solid var(--line);
    padding:0 0 0 8px;
  }
  .market-section:first-child{border-left:0;padding-left:0}
}

@media(min-width:900px){
  .market-sections{
    grid-template-columns:1fr;
  }
}

#attendance-panel[hidden]{display:none !important}

.market-panel{
  min-height:0;
  padding:10px 12px;
}
.market-heading{
  margin-bottom:5px;
}
.market-sections{
  display:block;
}
.market-fuel-fixed{
  border-top:0 !important;
  padding-top:0 !important;
  padding-bottom:4px;
}
.market-scroll{
  max-height:76px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  border-top:1px solid var(--line);
}
.market-scroll .market-section{
  padding:5px 2px 4px;
  border-top:1px solid var(--line);
}
.market-scroll .market-section:first-child{
  border-top:0;
}
.market-section h3{
  margin:0 0 3px;
  font-size:12px;
}
.market-source{
  margin-bottom:2px;
  font-size:9px;
}
.market-row{
  padding:1px 0;
  font-size:11px;
}
.market-mini-head,
.market-rate-row{
  line-height:1.2;
}
.market-rate-row{
  padding:1px 0;
  font-size:10px;
}
.market-gold-name{
  margin-bottom:2px;
  font-size:11px;
}
.market-gold-grid strong{
  font-size:10px;
}
.market-unit{
  font-size:9px;
}

@media(max-width:640px){
  .market-sections{
    display:block;
    overflow:visible;
  }
  .market-section{
    min-width:0;
    border-left:0;
    padding-left:0;
  }
  .market-scroll{
    max-height:82px;
  }
}

.attendance-updated{
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  line-height:1.25;
}

.calendar-picker{
  margin:8px 0 0;
  padding:11px 12px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  box-shadow:0 1px 0 rgba(0,0,0,.10);
}
.calendar-picker[hidden]{display:none!important}
.calendar-picker-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.calendar-picker-head strong{
  display:block;
  font-size:14px;
}
.calendar-picker-sub{
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
#calendar-picker-close{
  flex:0 0 auto;
  min-width:34px;
  min-height:32px;
  padding:4px 9px;
  font-size:20px;
  line-height:1;
}
.calendar-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:7px;
  max-height:190px;
  overflow:auto;
  padding:2px;
}
.calendar-choice{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  font-size:12px;
  line-height:1.25;
}
.calendar-choice input{
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin:0;
}
.calendar-choice-text{
  min-width:0;
}
.calendar-choice-name{
  display:block;
  font-weight:800;
  overflow-wrap:anywhere;
}
.calendar-choice-meta{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:10px;
  overflow-wrap:anywhere;
}
.calendar-picker-loading,
.calendar-picker-empty{
  grid-column:1/-1;
  padding:12px;
  color:var(--muted);
  text-align:center;
  font-size:12px;
}
.calendar-picker-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:9px;
}
.calendar-save{
  font-weight:900!important;
  border-color:#111!important;
}
@media(max-width:640px){
  .calendar-list{
    grid-template-columns:1fr;
    max-height:220px;
  }
  .calendar-picker-actions{
    justify-content:stretch;
  }
  .calendar-picker-actions button{
    flex:1 1 auto;
  }
}

.calendar-settings-button{
  min-width:36px;
  padding:6px 9px;
  font-size:17px;
  line-height:1;
}
.calendar-speed-panel{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:6px;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel);
}
.calendar-speed-panel[hidden]{display:none!important}
.calendar-speed-title{
  flex:0 0 auto;
  font-size:12px;
  font-weight:900;
}
.calendar-speed-control{
  display:flex;
  align-items:center;
  gap:7px;
  flex:1;
  min-width:180px;
  font-size:10px;
  color:var(--muted);
}
.calendar-speed-control input{
  flex:1;
  min-width:100px;
}
.calendar-speed-value{
  flex:0 0 auto;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.note-panel{
  position:relative;
}
.note-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.note-heading .panel-title{
  margin:0;
}
.note-tools-button{
  width:34px;
  height:32px;
  padding:4px;
  font-size:18px;
  line-height:1;
}
.note-tools-menu{
  position:absolute;
  top:44px;
  right:12px;
  z-index:10;
  display:flex;
  gap:6px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.note-tools-menu[hidden]{display:none!important}
.note-tools-menu button{
  padding:6px 9px;
  font-size:11px;
  white-space:nowrap;
}
.note-clear-button{
  font-weight:900;
}

@media(max-width:640px){
  .calendar-speed-panel{
    align-items:stretch;
    flex-direction:column;
    gap:6px;
  }
  .calendar-speed-control{
    width:100%;
  }
  .calendar-speed-value{
    white-space:normal;
  }
}

.device-tools{display:flex;justify-content:flex-end;margin-top:4px}
.device-tools button{padding:0;border:0;background:transparent;box-shadow:none;font:inherit;line-height:1;min-width:0;color:inherit;appearance:none;-webkit-appearance:none}
html.dark{--bg:#111;--panel:#1b1b1b;--text:#f3f3ef;--muted:#aaa;--line:#444;--danger:#ff5a5a}
html.dark body,html.dark .panel,html.dark .upcoming-box,html.dark .calendar-ticker,html.dark .calendar-picker,html.dark .calendar-speed-panel,html.dark .system-details{background:var(--bg);color:var(--text)}
html.dark .panel,html.dark .upcoming-box,html.dark .calendar-ticker,html.dark .calendar-picker,html.dark .calendar-speed-panel,html.dark .system-details{background:var(--panel);border-color:var(--line)}
html.dark button,html.dark textarea,html.dark input,html.dark select{background:#222;color:var(--text);border-color:#555}
@media(max-width:760px){.device-tools{justify-content:center}}

#weekday,
#solar-date,
#lunar-date,
#battery,
#network{
  font-family:"Times New Roman",Times,serif !important;
}

.device-tools{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:3px;
  min-height:1.28em;
}
#theme-toggle{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:1em !important;
  height:1em !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0;
  background:transparent !important;
  box-shadow:none !important;
  color:inherit;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;
  font-size:1em !important;
  font-weight:400 !important;
  line-height:1 !important;
  opacity:.92;
  appearance:none;
  -webkit-appearance:none;
}

.app-settings{
  position:fixed;
  right:max(14px,env(safe-area-inset-right));
  bottom:max(14px,env(safe-area-inset-bottom));
  z-index:1000;
}

.system-menu-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(120,120,120,.10);
  color:var(--text);
  box-shadow:none;
  font-size:25px;
  line-height:1;
  opacity:.52;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.system-menu-toggle:hover,
.system-menu-toggle:focus-visible,
.system-menu-toggle[aria-expanded="true"]{
  opacity:.9;
  background:rgba(120,120,120,.16);
}

.system-menu{
  position:absolute;
  right:0;
  bottom:50px;
  width:min(280px,calc(100vw - 28px));
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--text);
  box-shadow:0 6px 24px rgba(0,0,0,.18);
}
.system-menu[hidden]{display:none!important}

.system-menu-title{
  padding:2px 4px 8px;
  font-weight:900;
  font-size:14px;
  border-bottom:1px solid var(--line);
}
.system-status-row{
  padding:7px 4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  border-bottom:1px solid var(--line);
}
.system-menu-button{
  display:block;
  width:100%;
  min-height:38px;
  margin:7px 0 0;
  padding:8px 10px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:13px;
  font-weight:800;
}
.system-update-button{
  margin-top:10px;
  border-top-width:2px;
}

.market-heading{
  margin-bottom:4px;
}
.market-source{
  white-space:normal;
  line-height:1.25;
}

html.dark .system-menu{
  background:var(--panel);
  color:var(--text);
  border-color:var(--line);
}
html.dark .system-menu-toggle{
  color:var(--text);
  background:rgba(255,255,255,.08);
}

@media(max-width:760px){
  .device-tools{justify-content:center}
  .app-settings{
    right:max(10px,env(safe-area-inset-right));
    bottom:max(10px,env(safe-area-inset-bottom));
  }
  .system-menu-toggle{
    width:40px;
    height:40px;
    font-size:23px;
  }
}

.user-login-area{
  position:fixed;
  top:max(8px,env(safe-area-inset-top));
  right:max(10px,env(safe-area-inset-right));
  z-index:1500;
}
.user-login-button,
.admin-user-chip{
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(245,245,242,.86);
  color:var(--text);
  font:inherit;
  font-size:11px;
  font-weight:800;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.user-login-button{padding:6px 10px}
.admin-user-chip{
  display:flex;
  align-items:center;
  gap:7px;
  padding:4px 5px 4px 9px;
}
.admin-user-chip[hidden]{display:none!important}
.admin-user-chip button{
  border:0;
  border-radius:999px;
  padding:4px 7px;
  background:rgba(120,120,120,.12);
  color:inherit;
  font:inherit;
  font-size:10px;
}

.managed-section{position:relative}
.section-admin-gear{
  position:absolute;
  top:6px;
  right:7px;
  z-index:20;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(120,120,120,.10);
  color:var(--text);
  font-size:18px;
  line-height:1;
  opacity:.62;
}
.section-admin-gear[hidden]{display:none!important}
.attendance-admin-gear{top:8px;right:9px}

.weather-refresh-button{
  position:absolute;
  top:7px;
  right:8px;
  z-index:8;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text);
  font-size:22px;
  font-weight:700;
  line-height:1;
  opacity:.68;
}
.weather-refresh-button:active{transform:rotate(35deg)}

.admin-modal{
  position:fixed;
  inset:0;
  z-index:3000;
  display:grid;
  place-items:center;
  padding:14px;
}
.admin-modal[hidden]{display:none!important}
.admin-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.38);
}
.admin-dialog{
  position:relative;
  z-index:1;
  width:min(430px,100%);
  max-height:min(86vh,760px);
  overflow:auto;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  color:var(--text);
  box-shadow:0 12px 40px rgba(0,0,0,.26);
}
.admin-wide-dialog{width:min(850px,100%)}
.admin-dialog-close{
  position:absolute;
  top:7px;right:8px;
  width:32px;height:32px;
  border:0;background:transparent;color:inherit;
  font-size:24px;line-height:1;
}
.admin-dialog h2{margin:0 36px 14px 0;font-size:18px}
.inline-admin-form{
  display:grid;
  gap:9px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:10px;
}
.inline-admin-form label{display:grid;gap:4px;font-size:12px;font-weight:800}
.inline-admin-form input,
.inline-admin-form select{
  width:100%;
  box-sizing:border-box;
  min-height:36px;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--panel);
  color:var(--text);
  font:inherit;
}
.admin-form-actions{display:flex;gap:7px;flex-wrap:wrap}
.admin-primary{
  border:1px solid var(--text)!important;
  background:var(--text)!important;
  color:var(--panel)!important;
  font-weight:900!important;
}
.admin-form-message{
  min-height:18px;
  margin:7px 0;
  font-size:12px;
  font-weight:700;
}
.admin-form-message.error{color:#b42318}
.event-admin-list{display:grid;gap:5px}
.inline-event-row{
  display:grid;
  grid-template-columns:60px 48px minmax(0,1fr) auto auto;
  gap:6px;
  align-items:center;
  padding:6px 0;
  border-bottom:1px solid var(--line);
  font-size:11px;
}
.inline-event-row button,
.attendance-file-admin-row button{
  border:1px solid var(--line);
  border-radius:6px;
  padding:5px 7px;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:10px;
}
.danger-mini{font-weight:900;color:#a51d16!important}
.attendance-admin-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.admin-hint{font-size:10px;color:var(--muted)}
.attendance-admin-status{
  margin:10px 0;
  padding:8px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:11px;
}
.attendance-admin-files{display:grid;gap:5px}
.attendance-file-admin-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:7px;
  padding:6px 0;
  border-bottom:1px solid var(--line);
  font-size:11px;
}
.admin-empty{padding:12px;text-align:center;color:var(--muted)}
html.dark .user-login-button,
html.dark .admin-user-chip{background:rgba(30,30,30,.84)}

@media(max-width:640px){
  .inline-event-row{grid-template-columns:52px 42px minmax(0,1fr);align-items:start}
  .inline-event-row button{grid-row:2}
  .attendance-admin-grid{grid-template-columns:1fr}
  .user-login-area{top:max(5px,env(safe-area-inset-top));right:max(6px,env(safe-area-inset-right))}
}

.app-settings{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
}
.floating-tool-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(120,120,120,.08);
  color:var(--text);
  box-shadow:none;
  line-height:1;
  opacity:.48;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.login-key-button{
  font-size:20px;
}
.system-menu-toggle{
  position:static!important;
  width:40px!important;
  height:40px!important;
  font-size:23px!important;
}
.floating-tool-button:hover,
.floating-tool-button:focus-visible{
  opacity:.9;
  background:rgba(120,120,120,.14);
}
.system-menu{
  bottom:94px!important;
}

.system-admin-chip{
  margin:7px 0 3px;
  width:100%;
  box-sizing:border-box;
  justify-content:space-between;
  border-radius:8px;
}

.effects-settings{
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.effects-settings-title{
  margin-bottom:6px;
  font-size:12px;
  font-weight:900;
}
.system-switch-row,
.system-select-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 3px;
  border-bottom:1px solid var(--line);
  font-size:11px;
}
.system-switch-row input{
  width:18px;
  height:18px;
}
.system-select-row select{
  max-width:112px;
  min-height:30px;
  padding:3px 5px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
  color:var(--text);
  font:inherit;
  font-size:11px;
}

.attendance-visibility-inline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 10px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  font-size:12px;
  font-weight:900;
}
.attendance-visibility-inline input{
  width:20px;
  height:20px;
}

.stars-layer,
.fireworks-canvas{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  width:100vw;
  height:100%;
  height:100vh;
  z-index:1900;
  pointer-events:none;
  overflow:hidden;
}
.stars-layer[hidden],
.fireworks-canvas[hidden]{display:none!important}
.stars-layer{z-index:1800}
.fireworks-canvas{z-index:1850}

.falling-star{
  position:absolute;
  top:-28px;
  color:#f5c518;
  text-shadow:0 0 3px rgba(255,193,7,.55);
  animation-name:obslStarFall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}
@keyframes obslStarFall{
  0%{transform:translate3d(0,-40px,0) rotate(0deg)}
  100%{transform:translate3d(22px,calc(100vh + 80px),0) rotate(360deg)}
}

.admin-system-status[hidden],
.admin-only[hidden]{
  display:none!important;
}

.effects-preview-button{
  margin-top:9px;
  text-align:center;
}

#system-attendance-visibility-row{
  margin-top:7px;
  border-top:1px solid var(--line);
}

#system-attendance-visibility-row input{
  width:20px;
  height:20px;
}

.app-settings{
  display:block !important;
}
.login-key-button{
  display:none!important;
}
.system-menu{
  bottom:50px!important;
  width:min(310px,calc(100vw - 24px))!important;
  max-height:min(78vh,660px);
  overflow:auto;
  padding:10px!important;
}

.system-menu-head{
  position:relative;
  display:flex;
  align-items:center;
  min-height:34px;
  padding:0 38px 8px 3px;
  border-bottom:1px solid var(--line);
}
.system-menu-head .system-menu-title{
  padding:0!important;
  border:0!important;
  font-size:14px;
  font-weight:900;
}

.system-theme-toggle{
  position:absolute;
  top:-2px;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  margin:0;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit;
  font-size:18px;
  line-height:1;
  opacity:.8;
  appearance:none;
  -webkit-appearance:none;
}

.system-group{
  margin:7px 0 0;
  border:1px solid var(--line);
  border-radius:9px;
  background:transparent;
  overflow:hidden;
}
.system-group[hidden]{
  display:none!important;
}
.system-group>summary{
  position:relative;
  cursor:pointer;
  list-style:none;
  padding:9px 31px 9px 10px;
  font-size:12px;
  font-weight:900;
  user-select:none;
  -webkit-user-select:none;
}
.system-group>summary::-webkit-details-marker{
  display:none;
}
.system-group>summary::after{
  content:"›";
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%) rotate(90deg);
  font-size:18px;
  line-height:1;
  opacity:.65;
  transition:transform .18s ease;
}
.system-group[open]>summary::after{
  transform:translateY(-50%) rotate(-90deg);
}
.system-group[open]>summary{
  border-bottom:1px solid var(--line);
}
.system-group-body{
  padding:7px 8px 8px;
}
.system-group-body .system-menu-button{
  margin:5px 0 0;
}
.system-group-body .system-menu-button:first-child{
  margin-top:0;
}

.system-info-body .system-status-row{
  padding:7px 3px;
}
.system-info-body .system-status-row:last-child{
  border-bottom:0;
}

.system-login-zone{
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid var(--line);
}
.system-login-form{
  display:grid;
  gap:7px;
}
.system-login-form[hidden]{
  display:none!important;
}
.system-login-title{
  font-size:12px;
  font-weight:900;
}
.system-login-form label{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:700;
}
.system-login-form input{
  width:100%;
  box-sizing:border-box;
  min-height:32px;
  padding:5px 7px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--panel);
  color:var(--text);
  font:inherit;
}
.system-login-submit{
  width:100%;
  min-height:34px;
  border-radius:7px!important;
}
.system-login-form .admin-form-message{
  margin:0;
  min-height:0;
  font-size:10px;
}

.system-admin-chip{
  margin:0!important;
  width:100%;
  box-sizing:border-box;
}

.device-tools{
  display:none!important;
}

@media(max-width:560px){
  .system-menu{
    width:min(300px,calc(100vw - 18px))!important;
    max-height:76vh;
  }
  .system-login-form label{
    grid-template-columns:64px minmax(0,1fr);
  }
}
.pwa-install-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:5000;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);box-shadow:0 6px 24px rgba(0,0,0,.2)}.pwa-install-banner[hidden]{display:none!important}.pwa-install-banner div{display:grid;gap:2px}.pwa-install-banner span{font-size:10px;color:var(--muted)}.pwa-install-banner button{min-height:34px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;font:inherit;font-weight:800}.pwa-install-banner #pwa-install-close{border:0;font-size:20px}@media(max-width:560px){.pwa-install-banner{grid-template-columns:minmax(0,1fr) auto}.pwa-install-banner #pwa-install-close{position:absolute;right:3px;top:1px}.pwa-install-banner #pwa-install-button{grid-column:1/-1;width:100%}}
.seo-title{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.brand-header{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:2px 12px 8px;
  margin:0 auto;
  text-align:center;
  overflow:hidden;
}
.brand-title{
  margin:0;
  max-width:100%;
  color:var(--text);
  font-family:"Dancing Script","Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:clamp(28px,5vw,54px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:.015em;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
}

.pwa-install-banner{
  white-space:normal!important;
}
.pwa-install-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.pwa-install-copy strong,
.pwa-install-copy span{
  overflow-wrap:anywhere;
}
.pwa-install-banner::before,
.pwa-install-banner::after{
  content:none!important;
}

@media(max-width:420px){
  .brand-header{padding-inline:6px}
  .brand-title{
    font-size:clamp(25px,9vw,38px);
    letter-spacing:0;
  }
}

.pwa-install-banner{
  left:12px!important;
  right:auto!important;
  bottom:12px!important;
  width:min(420px,calc(100vw - 84px))!important;
  max-width:calc(100vw - 84px)!important;
  box-sizing:border-box;
  z-index:900!important;
}
.app-settings{
  z-index:1200!important;
}
@media(max-width:520px){
  .pwa-install-banner{
    left:8px!important;
    bottom:8px!important;
    width:calc(100vw - 72px)!important;
    max-width:calc(100vw - 72px)!important;
  }
}

#system-menu-toggle,
.system-menu-toggle{
  width:38px!important;
  height:38px!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:var(--text)!important;
  opacity:.62!important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif!important;
  font-size:27px!important;
  font-weight:400!important;
  line-height:1!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
#system-menu-toggle:hover,
#system-menu-toggle:focus,
#system-menu-toggle:active,
.system-menu-toggle:hover,
.system-menu-toggle:focus,
.system-menu-toggle:active{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:.9!important;
}

.location-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:100%;
}
.location-row .location-status{
  margin:0;
  text-align:center;
}
.location-dropdown-button{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  padding:0 3px!important;
  min-width:20px;
  font-size:19px;
  line-height:1;
  cursor:pointer;
  color:inherit;
  opacity:.72;
}
.location-picker{
  position:fixed;
  inset:0;
  z-index:5000;
  background:rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.location-picker[hidden]{display:none!important}
.location-picker-card{
  position:relative;
  width:min(520px,100%);
  max-height:82vh;
  overflow:auto;
  background:var(--panel,#fff);
  color:var(--text,#111);
  border:1px solid rgba(127,127,127,.35);
  border-radius:14px;
  padding:18px;
  box-sizing:border-box;
}
.location-picker-title{
  text-align:center;
  font-weight:700;
  font-size:18px;
  margin:0 34px 8px;
}
.location-picker-note{
  font-size:13px;
  opacity:.72;
  margin-bottom:14px;
  line-height:1.4;
}
.location-picker-card label{
  display:block;
  margin:10px 0;
  font-weight:600;
}
.location-picker-card select{
  display:block;
  width:100%;
  margin-top:5px;
  padding:10px;
  font:inherit;
  color:inherit;
  background:var(--panel,#fff);
  border:1px solid rgba(127,127,127,.45);
  border-radius:8px;
}
.location-picker-close{
  position:absolute;
  right:10px;
  top:8px;
  border:0;
  background:transparent;
  color:inherit;
  font-size:26px;
  cursor:pointer;
}
.location-picker-status{
  min-height:20px;
  font-size:12px;
  opacity:.78;
  margin:8px 0;
}
.location-apply{
  width:100%;
  padding:10px;
  border-radius:8px;
  cursor:pointer;
}
#system-menu-toggle,
.system-menu-toggle{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  padding:0!important;
}
.system-flag-icon{
  display:block;
  width:34px;
  height:34px;
  object-fit:contain;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.loading,
body.loading,
.dashboard.loading{
  opacity:1!important;
  filter:none!important;
  transition:none!important;
}

#location-dropdown-button,
.location-dropdown-button,
#note-tools-button,
.note-tools-button{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-box-shadow:none!important;
  outline:0!important;
  border-radius:0!important;
  padding:0 4px!important;
  color:inherit!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
#location-dropdown-button,
.location-dropdown-button{
  font-size:18px!important;
}
#note-tools-button,
.note-tools-button{
  font-size:19px!important;
}

.brand-header{
  position:relative;
  display:grid!important;
  grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,150px);
  align-items:center;
  width:100%;
  min-height:46px;
  box-sizing:border-box;
  padding:4px 12px 8px!important;
}
.brand-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:150px;
  max-width:100%;
  min-width:0;
}
.brand-logo{
  display:block;
  width:110px;
  height:110px;
  max-width:150px;
  max-height:150px;
  object-fit:cover;
  object-position:center;
  border:0;
  box-shadow:none;
}
.brand-title{
  grid-column:2;
  justify-self:center;
  width:100%;
  min-width:0;
  max-width:100%;
  text-align:center;
  overflow-wrap:anywhere;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.brand-balance{
  width:150px;
  max-width:100%;
}

.tools-subgroup{
  margin-top:8px;
  border-top:1px solid var(--line);
}
.tools-subgroup>summary{
  cursor:pointer;
  padding:9px 2px 5px;
  font-weight:900;
  font-size:12px;
}
.title-logo-tools-body{
  display:grid;
  gap:9px;
  padding-top:7px;
}
.brand-admin-field{
  display:grid;
  gap:5px;
  font-size:11px;
  font-weight:800;
}
.brand-admin-field input[type="text"],
.brand-admin-field select{
  width:100%;
  min-height:34px;
  box-sizing:border-box;
  padding:6px 7px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--panel);
  color:var(--text);
  font:inherit;
}
.brand-font-preview{
  min-height:54px;
  padding:9px;
  border:1px dashed var(--line);
  border-radius:8px;
  background:transparent;
  font-size:20px;
  line-height:1.25;
  text-align:center;
  overflow-wrap:anywhere;
}
.brand-logo-drop{
  display:grid;
  grid-template-columns:68px 1fr;
  gap:9px;
  align-items:center;
  padding:9px;
  border:1px dashed var(--line);
  border-radius:9px;
  cursor:pointer;
  font-size:10px;
}
.brand-logo-drop.dragover{
  outline:2px solid currentColor!important;
  outline-offset:2px!important;
}
.brand-logo-drop img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:7px;
}
.brand-logo-drop div{
  display:grid;
  gap:3px;
}
.brand-logo-drop span{
  color:var(--muted);
}
.brand-show-row{
  border-top:0!important;
}
.brand-save-status{
  min-height:16px;
  font-size:10px;
  font-weight:700;
}

@media(max-width:760px){
  .brand-header{
    grid-template-columns:72px minmax(0,1fr) 72px;
    padding-inline:8px!important;
  }
  .brand-logo-wrap,.brand-balance{width:72px}
  .brand-logo{
    width:min(var(--brand-logo-size,72px),72px)!important;
    height:min(var(--brand-logo-size,72px),72px)!important;
  }
}
@media(max-width:420px){
  .brand-header{
    grid-template-columns:52px minmax(0,1fr) 52px;
  }
  .brand-logo-wrap,.brand-balance{width:52px}
  .brand-logo{
    width:min(var(--brand-logo-size,50px),50px)!important;
    height:min(var(--brand-logo-size,50px),50px)!important;
  }
}

#system-menu-toggle,
.system-menu-toggle{
  width:36px!important;
  height:36px!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:var(--text)!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:25px!important;
  font-weight:400!important;
  line-height:1!important;
  opacity:.72!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
#system-menu-toggle:hover,
#system-menu-toggle:focus,
#system-menu-toggle:active{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
}

.system-admin-chip{
  display:flex!important;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.system-admin-chip[hidden]{
  display:none!important;
}
.admin-timeout-control{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:9px;
  font-weight:700;
  margin-left:auto;
}
.admin-timeout-control select{
  min-height:26px;
  padding:2px 4px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
  color:var(--text);
  font:inherit;
  font-size:9px;
}

#system-menu-toggle,
#pwa-install-banner{
  transition:opacity .18s ease, visibility .18s ease!important;
}
#system-menu-toggle.ui-auto-hidden,
#pwa-install-banner.ui-auto-hidden{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#system-menu-toggle.ui-auto-visible,
#pwa-install-banner.ui-auto-visible{
  visibility:visible!important;
}

.market-card,.market-body,#market-content{max-height:none!important;height:auto!important;overflow:visible!important}.market-panel{position:relative}.market-refresh-button{position:absolute;right:10px;top:8px;border:0!important;background:transparent!important;box-shadow:none!important;font-size:20px}.app-uptime-item{white-space:nowrap}.admin-frozen{position:sticky!important;top:0!important;z-index:1100!important;background:var(--bg,#fff)!important}.brand-freeze-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border:1px solid var(--line);font-size:10px}.site-footer{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px 8px;border-top:1px solid var(--line);font:12px "Times New Roman",serif}.footer-links{display:flex;gap:7px}.footer-links a{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;text-decoration:none;color:inherit}.footer-admin-preview,.note-style-preview{padding:8px;border:1px dashed var(--line);text-align:center}.notify-toggle-row{display:flex!important;justify-content:space-between}.note-advanced{display:grid;gap:8px;margin:10px 0;padding:9px;border-top:1px solid var(--line)}#system-menu-toggle.ui-auto-hidden,#pwa-install-banner.ui-auto-hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.market-one-frame,.market-no-scroll{display:block!important;max-height:none!important;height:auto!important;overflow:visible!important}
.market-scroll{max-height:none!important;overflow:visible!important;padding-right:0!important}
.market-section{break-inside:avoid}.market-refresh-button.is-loading{animation:obslSpin .7s linear infinite}@keyframes obslSpin{to{transform:rotate(360deg)}}
.footer-links a img{width:20px;height:20px;object-fit:contain;display:block}.footer-links a{border:0!important;background:none!important;box-shadow:none!important}
.note-tools-menu{max-height:min(70vh,520px);overflow:auto}.note-advanced select,.note-advanced input[type=range]{width:100%}
.admin-frozen{position:sticky!important;top:var(--freeze-top,0)!important;z-index:1100!important}

.site-footer{display:flex!important;visibility:visible!important;opacity:1!important}
.obsl-frozen{position:fixed!important;top:var(--f-top)!important;left:var(--f-left)!important;width:var(--f-width)!important;min-height:var(--f-height)!important;z-index:5000!important;background:var(--bg,#fff)!important;margin:0!important}
.app-uptime-item{font-family:"Times New Roman",serif;white-space:nowrap}

.site-footer{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  width:100%!important;
  min-height:44px!important;
  padding:10px 12px!important;
  margin:8px 0 0!important;
  border-top:1px solid var(--line)!important;
  color:var(--text)!important;
  background:var(--bg)!important;
  position:relative!important;
  z-index:2!important;
}
.site-footer .footer-links{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}
.site-footer .footer-links a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:24px!important;
  height:24px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
  text-decoration:none!important;
}
.app-uptime-item{
  display:block!important;
  font-family:"Times New Roman",Times,serif!important;
  font-size:1em!important;
  line-height:1.28!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
.obsl-freeze-placeholder{
  display:block!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.obsl-frozen{
  position:fixed!important;
  top:var(--f-top)!important;
  left:var(--f-left)!important;
  width:var(--f-width)!important;
  height:var(--f-height)!important;
  z-index:4900!important;
  background:var(--bg)!important;
  margin:0!important;
  box-sizing:border-box!important;
}

.header-frame{width:100%;margin:0 0 10px;padding:8px 10px 10px;border:1.5px solid var(--line);border-radius:14px;background:var(--panel);box-sizing:border-box;box-shadow:0 1px 0 rgba(0,0,0,.08)}.header-frame .brand-header{margin:0!important;padding:2px 4px 6px!important}.header-frame .topbar{margin:0!important;border:0!important;padding:4px 0 0!important;background:transparent!important}.header-frame.header-pinned{position:sticky!important;top:0!important;z-index:4800!important;box-shadow:0 2px 10px rgba(0,0,0,.14)!important}
.note-tools-menu{width:min(760px,calc(100vw - 28px))!important;max-width:760px!important;padding:12px!important}.note-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}.note-editor-controls{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;min-width:0}.note-editor-controls label{display:grid;grid-template-columns:minmax(100px,.85fr) minmax(120px,1.15fr);gap:8px;align-items:center;font-size:11px;font-weight:800;min-width:0}.note-editor-controls select,.note-editor-controls input[type="range"]{width:100%;min-width:0}.note-editor-preview-column{display:grid;grid-template-rows:minmax(112px,1fr) auto;gap:9px;min-width:0}.note-editor-preview-column .note-style-preview{height:100%;min-height:112px;margin:0!important;display:flex;align-items:flex-start;justify-content:flex-start;text-align:left;overflow:auto;white-space:pre-wrap}.note-editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.note-editor-actions button{width:100%;min-height:38px}.location-setting-row{display:grid!important;grid-template-columns:1fr minmax(150px,1fr);gap:8px;align-items:center;margin:9px 0;font-size:11px;font-weight:800}.location-setting-row select{width:100%}.footer-admin-item{display:grid;gap:6px;padding:8px;border:1px solid var(--line);border-radius:8px}.footer-admin-item>label:not(.system-switch-row){display:grid;gap:4px;font-size:10px;font-weight:700}.obsl-frozen,.admin-frozen{position:static!important;top:auto!important;left:auto!important;width:auto!important;height:auto!important;z-index:auto!important}.obsl-freeze-placeholder{display:none!important}.site-footer .footer-links img{display:block;width:22px;height:22px;object-fit:contain}
@media(max-width:760px){.header-frame{padding:7px 8px}.header-frame .brand-header{grid-template-columns:68px minmax(0,1fr) 68px!important}.header-frame .topbar{grid-template-columns:1fr!important;gap:5px!important}.header-frame .clock{order:-1!important;margin:2px auto 4px!important}.header-frame .date-panel,.header-frame .device-panel{text-align:center!important}.header-frame .device-panel{display:flex!important;justify-content:center!important;gap:10px!important;flex-wrap:wrap!important}.note-editor-layout{grid-template-columns:1fr}.note-editor-controls label,.location-setting-row{grid-template-columns:1fr}}@media(max-width:420px){.header-frame .brand-header{grid-template-columns:50px minmax(0,1fr) 50px!important}.note-tools-menu{width:calc(100vw - 16px)!important}}

.header-frame.header-pinned{position:sticky!important;top:0!important;z-index:6000!important;background:var(--bg)!important;isolation:isolate;box-shadow:0 2px 10px rgba(0,0,0,.16)!important}
.header-runtime-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin:0 4px}.header-runtime-icon img{display:block;width:var(--header-icon-size,20px);height:var(--header-icon-size,20px);object-fit:contain;border-radius:var(--header-icon-radius,50%)}
.header-status-line{display:flex;align-items:center;justify-content:flex-end;gap:2px;min-width:0}.header-custom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.header-custom-group{min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px;display:grid;gap:6px}.header-custom-group legend{font-size:11px;font-weight:900;padding:0 5px}.header-custom-group label{display:grid;grid-template-columns:minmax(100px,.9fr) minmax(120px,1.1fr);gap:7px;align-items:center;font-size:10px;font-weight:700}.header-custom-group input,.header-custom-group select{width:100%;min-width:0;box-sizing:border-box}.brand-seo-group{border:1px solid var(--line);border-radius:8px;padding:6px;margin-top:6px}.brand-seo-group>summary{cursor:pointer;font-weight:900;font-size:11px}.brand-admin-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.site-footer .footer-links img{width:24px!important;height:24px!important;object-fit:contain!important;border-radius:50%!important}
.note-editor-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
@media(max-width:760px){.header-custom-grid{grid-template-columns:1fr}.header-custom-group label{grid-template-columns:minmax(85px,.85fr) minmax(90px,1.15fr)}.note-editor-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:6px!important}.note-editor-controls{padding:6px!important;gap:5px!important}.note-editor-controls label{grid-template-columns:minmax(70px,.85fr) minmax(75px,1.15fr)!important;gap:4px!important;font-size:9px!important}.note-editor-preview-column{min-width:0!important}.note-tools-menu{width:calc(100vw - 12px)!important;padding:7px!important}}
@media(max-width:420px){.note-editor-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:4px!important}.note-editor-controls label{grid-template-columns:1fr!important;font-size:8px!important}.note-editor-actions{gap:4px!important}.note-editor-actions button{font-size:9px!important;padding:5px 3px!important}}

.weather-updated-status{margin-left:auto;margin-right:8px;font-size:11px;font-family:"Times New Roman",Times,serif;opacity:.78;white-space:nowrap}
@media(max-width:560px){.weather-updated-status{font-size:9px;white-space:normal;text-align:right;line-height:1.15}}

#calendar-settings{border:0!important;background:transparent!important;box-shadow:none!important;font-size:20px!important;padding:0 4px!important}
.calendar-connect-inside{margin-top:8px;width:100%;min-height:34px}
.weather-updated-status{margin:10px auto 0!important;text-align:center!important;width:100%;font-size:11px;font-family:"Times New Roman",Times,serif;opacity:.78;white-space:normal}
.site-footer .footer-links a[hidden]{display:none!important}

.dashboard{width:100%;max-width:100%;box-sizing:border-box}
.event-frame,.footer-frame{position:relative;width:100%!important;max-width:100%!important;box-sizing:border-box;margin:12px 0 0;padding:10px;border:1.5px solid var(--line);border-radius:12px;background:var(--panel);overflow:visible}
.event-frame .upcoming-wrap,.event-frame .calendar-ticker{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;box-sizing:border-box}
.event-frame .upcoming-box{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box}
.event-frame .calendar-ticker{margin-top:8px!important}
.footer-frame .site-footer{width:100%!important;max-width:100%!important;margin:0!important;padding:12px!important;border:1px solid var(--line)!important;border-radius:9px!important;background:var(--panel)!important;box-sizing:border-box!important}
.section-editor-pencil{font-size:18px!important;border:0!important;background:transparent!important;box-shadow:none!important}
.section-config-panel{width:100%;max-width:100%;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-sizing:border-box;overflow:hidden}
.section-config-panel[hidden]{display:none!important}
.section-config-panel .tools-subgroup{margin:0!important;border:0!important;padding:0!important}
.section-config-panel .tools-subgroup>summary{display:none!important}
.section-config-panel .title-logo-tools-body{width:100%;max-width:100%;box-sizing:border-box}
.section-config-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
#header-frame{position:relative}
#weather-section-editor,#header-section-editor,#event-section-editor,#footer-section-editor{position:relative}
.footer-frame + .app-settings{width:100%;max-width:100%;margin-top:8px}
@media(max-width:760px){
  .event-frame,.footer-frame{padding:7px;margin-top:9px;border-radius:10px}
  .section-config-panel{padding:7px}
  .event-frame .calendar-ticker{flex-wrap:wrap}
  .event-frame .calendar-window{width:100%;min-width:0}
  .footer-frame .site-footer{padding:10px 8px!important}
}

.event-public-editor{display:block;position:relative;z-index:5;width:100%;max-width:100%;box-sizing:border-box}
.event-public-editor[hidden]{display:none!important}
.event-editor-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.event-editor-group{display:grid;gap:8px;min-width:0;padding:9px;border:1px solid var(--line);border-radius:8px}
.event-editor-group label{display:grid;grid-template-columns:minmax(90px,.65fr) minmax(120px,1.35fr);gap:8px;align-items:center;font-size:11px;font-weight:800}
.event-editor-group select{width:100%;min-width:0}
#calendar-settings{position:relative;z-index:20;pointer-events:auto!important;cursor:pointer}
#calendar-connect,#calendar-picker button{pointer-events:auto!important;position:relative;z-index:10}
@keyframes obsl-cal-rtl{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
@keyframes obsl-cal-ltr{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes obsl-cal-up{from{transform:translateY(100%)}to{transform:translateY(-100%)}}
@keyframes obsl-cal-down{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
.calendar-typewriter{white-space:nowrap!important}
.footer-app-tools{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:8px;min-height:42px}
.footer-tool-button,.footer-app-tools .system-menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:38px!important;height:38px!important;min-width:38px!important;padding:0!important;border:0!important;border-radius:50%!important;background:rgba(120,120,120,.08)!important;box-shadow:none!important;font-size:20px!important;opacity:.65}
.footer-app-tools .app-settings{position:static!important;right:auto!important;bottom:auto!important;z-index:20!important;display:flex;align-items:center;justify-content:center}
.footer-app-tools .system-menu{position:absolute!important;left:50%!important;right:auto!important;bottom:48px!important;transform:translateX(-50%);width:min(320px,calc(100vw - 28px))}
#pwa-install-banner.footer-pwa-banner{position:absolute!important;left:50%!important;right:auto!important;bottom:52px!important;transform:translateX(-50%);width:min(420px,calc(100vw - 24px));z-index:25}
.section-config-panel .tools-subgroup[open]>.title-logo-tools-body{display:grid!important}
@media(max-width:640px){.event-editor-columns{grid-template-columns:1fr}.event-editor-group label{grid-template-columns:1fr}.footer-app-tools{gap:7px}}

#header-admin-editor{
  top:auto!important;
  bottom:7px!important;
  right:7px!important;
}

.footer-app-tools{display:none!important}
.footer-frame .app-settings{position:fixed!important;right:max(14px,env(safe-area-inset-right))!important;bottom:max(14px,env(safe-area-inset-bottom))!important;z-index:1000!important}
.app-settings{position:fixed!important;right:max(14px,env(safe-area-inset-right))!important;bottom:max(14px,env(safe-area-inset-bottom))!important;z-index:1000!important}

.pwa-install-banner{position:fixed!important;right:max(14px,env(safe-area-inset-right))!important;left:auto!important;bottom:66px!important;transform:none!important;z-index:1100!important;width:min(390px,calc(100vw - 28px))!important;max-width:calc(100vw - 28px)!important}

.section-config-panel:not([hidden]){display:block!important}
.section-config-panel .tools-subgroup[open]>.title-logo-tools-body{display:grid!important}
.section-config-panel .tools-subgroup[open]>.system-group-body{display:block!important}

.note-style-preview:empty,.brand-font-preview:empty,.footer-admin-preview:empty{min-height:42px}

#weather-admin-editor{top:auto!important;bottom:7px!important;right:7px!important}
.now-panel{padding-bottom:38px!important}

.brand-font-preview{
  display:block!important;
  min-height:52px!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:8px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  line-height:1.15!important;
}
#brand-title{
  max-width:100%!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
#brand-logo,#brand-logo-admin-preview{
  object-fit:cover!important;
  overflow:hidden!important;
  transition:border-radius .15s ease,width .15s ease,height .15s ease!important;
}

.obsl-toast-track{
  display:inline-block!important;
  width:max-content!important;
  min-width:max-content!important;
  white-space:nowrap!important;
  padding:10px 14px!important;
  font:700 13px/1.2 system-ui,sans-serif!important;
  animation:obsl-toast-marquee var(--obsl-toast-speed,20s) linear infinite!important;
  will-change:transform;
}
@keyframes obsl-toast-marquee{
  from{transform:translateX(100vw)}
  to{transform:translateX(-100%)}
}

.footer-frame{margin-bottom:76px!important}
body.pwa-visible .footer-frame{margin-bottom:170px!important}
.app-settings{
  position:fixed!important;
  right:max(12px,env(safe-area-inset-right))!important;
  bottom:max(12px,env(safe-area-inset-bottom))!important;
}
.pwa-install-banner{
  position:fixed!important;
  left:auto!important;
  right:max(12px,env(safe-area-inset-right))!important;
  bottom:64px!important;
  transform:none!important;
  width:min(390px,calc(100vw - 76px))!important;
  max-width:calc(100vw - 76px)!important;
}
@media(max-width:520px){
  .footer-frame{margin-bottom:72px!important}
  body.pwa-visible .footer-frame{margin-bottom:190px!important}
  .pwa-install-banner{
    right:8px!important;
    bottom:62px!important;
    width:calc(100vw - 70px)!important;
    max-width:calc(100vw - 70px)!important;
    font-size:11px!important;
  }
  
  .obsl-toast-track{font-size:12px!important}
}

.weather-updated-status{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:7px auto 0!important;
  padding:0 8px!important;
  text-align:center!important;
  justify-self:center!important;
  font-family:"Times New Roman",Times,serif!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
}

@keyframes obsl-toast-marquee{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}

.obsl-bottom-tools-row{
  position:fixed!important;left:8px!important;right:8px!important;bottom:8px!important;z-index:5000!important;
  display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;gap:8px!important;
  pointer-events:none!important;max-width:calc(100vw - 16px)!important;
}
.obsl-bottom-tools-row .pwa-install-banner,
.obsl-bottom-tools-row .app-settings{pointer-events:auto!important}
.obsl-bottom-tools-row .app-settings{
  position:relative!important;right:auto!important;bottom:auto!important;left:auto!important;top:auto!important;
  flex:0 0 auto!important;margin:0!important;
}
.obsl-bottom-tools-row .pwa-install-banner{
  position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;
  transform:none!important;margin:0!important;width:min(390px,calc(100vw - 76px))!important;max-width:calc(100vw - 76px)!important;
  min-height:42px!important;padding:5px 7px!important;display:flex;align-items:center;gap:6px;
}
.obsl-bottom-tools-row .pwa-install-banner[hidden]{display:none!important}
.obsl-bottom-tools-row .pwa-install-copy{min-width:0!important;display:flex!important;align-items:center!important;gap:5px!important}
.obsl-bottom-tools-row .pwa-install-copy span{display:none!important}
.obsl-bottom-tools-row .pwa-install-copy strong{white-space:nowrap!important;font-size:11px!important}
.obsl-bottom-tools-row #pwa-install-button{white-space:nowrap!important;padding:5px 7px!important}
.obsl-bottom-tools-row #pwa-install-close{flex:0 0 auto!important}
.footer-frame{margin-bottom:58px!important}
body.pwa-visible .footer-frame{margin-bottom:58px!important}

#brand-font-preview{
  display:block!important;min-height:52px!important;width:100%!important;box-sizing:border-box!important;
  overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;padding:8px!important;
}
#brand-logo,#brand-logo-admin-preview{
  object-fit:cover!important;transition:border-radius .12s ease,width .12s ease,height .12s ease!important;
}
#brand-title{
  min-width:0!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}

@media(max-width:560px){
  .weather-updated-status{font-size:9px!important;white-space:nowrap!important}
  .obsl-bottom-tools-row{left:5px!important;right:5px!important;bottom:5px!important;gap:5px!important}
  .obsl-bottom-tools-row .pwa-install-banner{width:calc(100vw - 64px)!important;max-width:calc(100vw - 64px)!important}
  .footer-frame{margin-bottom:52px!important}
  
  
}

.now-panel{
  position:relative!important;
  padding-bottom:38px!important;
}
#weather-admin-editor{
  top:auto!important;
  right:7px!important;
  bottom:7px!important;
  z-index:30!important;
  pointer-events:auto!important;
}
.now-panel .weather-updated-status{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:8px!important;
  transform:translateX(-50%)!important;
  width:max-content!important;
  max-width:calc(100% - 54px)!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:11px!important;
  line-height:1.15!important;
  z-index:8!important;
}

.section-admin-gear,
.section-editor-pencil{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  cursor:pointer!important;
  z-index:40!important;
}
.section-config-panel:not([hidden]){
  display:block!important;
  position:relative!important;
  z-index:35!important;
  overflow:visible!important;
}
.section-config-panel .tools-subgroup[open]>.title-logo-tools-body{
  display:grid!important;
}

.obsl-bottom-tools-row{
  position:fixed!important;
  left:8px!important;
  right:8px!important;
  bottom:max(8px,env(safe-area-inset-bottom))!important;
  z-index:5000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  max-width:calc(100vw - 16px)!important;
  max-height:58px!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
  pointer-events:none!important;
  transition:opacity .18s ease,visibility .18s ease!important;
}
.obsl-bottom-tools-row.tools-hidden{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.obsl-bottom-tools-row .pwa-install-banner,
.obsl-bottom-tools-row .app-settings{
  pointer-events:auto!important;
}
.obsl-bottom-tools-row .app-settings{
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  margin:0!important;
}
.obsl-bottom-tools-row .pwa-install-banner{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  width:min(390px,calc(100vw - 72px))!important;
  max-width:calc(100vw - 72px)!important;
  min-height:42px!important;
  padding:5px 7px!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
}
.obsl-bottom-tools-row .pwa-install-banner[hidden]{
  display:none!important;
}
.obsl-bottom-tools-row .pwa-install-copy{
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  gap:5px!important;
}
.obsl-bottom-tools-row .pwa-install-copy span{
  display:none!important;
}
.obsl-bottom-tools-row .pwa-install-copy strong{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:11px!important;
}
.obsl-bottom-tools-row #pwa-install-button{
  flex:0 0 auto!important;
  min-height:30px!important;
  padding:4px 7px!important;
  white-space:nowrap!important;
}
.obsl-bottom-tools-row #pwa-install-close{
  flex:0 0 auto!important;
  position:static!important;
}

.footer-frame{
  margin-bottom:0!important;
  transition:margin-bottom .18s ease!important;
}
body.obsl-tools-visible .footer-frame{
  margin-bottom:58px!important;
}

@media(max-width:560px){
  .now-panel .weather-updated-status{
    max-width:calc(100% - 48px)!important;
    font-size:9px!important;
  }
  .obsl-bottom-tools-row{
    left:5px!important;
    right:5px!important;
    bottom:max(5px,env(safe-area-inset-bottom))!important;
    gap:5px!important;
    max-width:calc(100vw - 10px)!important;
  }
  .obsl-bottom-tools-row .pwa-install-banner{
    width:calc(100vw - 62px)!important;
    max-width:calc(100vw - 62px)!important;
    min-height:38px!important;
    padding:4px 6px!important;
  }
  .obsl-bottom-tools-row .pwa-install-copy strong{
    font-size:10px!important;
  }
  .obsl-bottom-tools-row #pwa-install-button{
    font-size:10px!important;
    min-height:28px!important;
    padding:3px 6px!important;
  }
  body.obsl-tools-visible .footer-frame{
    margin-bottom:52px!important;
  }
}

#weekday,#solar-date,#lunar-date,#battery,#network,#app-uptime{
  transition:font-size .12s ease,font-family .12s ease!important;
}

.brand-logo-choose{
  display:inline-flex!important;
  width:auto!important;
  min-height:32px!important;
  margin-top:6px!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
#brand-logo-file{pointer-events:auto!important}

@keyframes obsl-toast-marquee{
  from{transform:translateX(760px)}
  to{transform:translateX(-100%)}
}

#obsl-bottom-tools-row{display:none!important}
.pwa-install-banner{
  position:fixed!important;
  left:12px!important;
  right:auto!important;
  bottom:12px!important;
  transform:none!important;
  width:min(420px,calc(100vw - 84px))!important;
  max-width:calc(100vw - 84px)!important;
  min-height:unset!important;
  height:auto!important;
  margin:0!important;
  padding:8px 10px!important;
  box-sizing:border-box!important;
  z-index:900!important;
  white-space:normal!important;
  display:flex;
  align-items:center;
  gap:8px;
}
.pwa-install-banner[hidden]{display:none!important}
.pwa-install-copy{
  min-width:0!important;
  display:grid!important;
  gap:2px!important;
}
.pwa-install-copy strong,
.pwa-install-copy span{
  overflow-wrap:anywhere!important;
  white-space:normal!important;
}
.pwa-install-banner::before,
.pwa-install-banner::after{content:none!important}

.app-settings{
  position:fixed!important;
  right:max(14px,env(safe-area-inset-right))!important;
  left:auto!important;
  bottom:max(14px,env(safe-area-inset-bottom))!important;
  top:auto!important;
  z-index:1200!important;
  margin:0!important;
}
.footer-frame,
body.obsl-tools-visible .footer-frame,
body.pwa-visible .footer-frame{
  margin-bottom:0!important;
}

@media(max-width:520px){
  .pwa-install-banner{
    left:8px!important;
    right:auto!important;
    bottom:8px!important;
    width:calc(100vw - 72px)!important;
    max-width:calc(100vw - 72px)!important;
    padding:6px 8px!important;
    gap:6px!important;
  }
  .pwa-install-copy strong{font-size:11px!important}
  .pwa-install-copy span{font-size:9px!important;line-height:1.15!important}
  #pwa-install-button{white-space:nowrap!important;padding:5px 7px!important}
  
  @keyframes obsl-toast-marquee{
    from{transform:translateX(100vw)}
    to{transform:translateX(-100%)}
  }
}

.footer-copyright-group{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  min-width:0!important;
}
.footer-admin-pencil{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
  font-size:18px!important;
  line-height:1!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  opacity:.68!important;
}
.footer-admin-pencil[hidden]{display:none!important}
.footer-admin-pencil:hover,.footer-admin-pencil:focus-visible{opacity:1!important}
#footer-section-editor:not([hidden]){
  display:block!important;
  width:100%!important;
  margin-top:8px!important;
}
#footer-section-editor #footer-tools-group{display:block!important}
#footer-section-editor #footer-tools-group[open]>.title-logo-tools-body{display:grid!important}

.brand-logo-drop{cursor:default!important}
.brand-logo-choose{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  max-width:100%!important;
  min-height:32px!important;
  padding:6px 9px!important;
  margin:5px 0 2px!important;
  border:1px solid var(--line)!important;
  border-radius:7px!important;
  background:transparent!important;
  color:inherit!important;
  font-size:10px!important;
  font-weight:800!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
.brand-logo-native-file,
.inline-admin-form input[type="file"]{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  width:100%!important;
  max-width:100%!important;
  min-height:34px!important;
  margin:3px 0 0!important;
  font-size:10px!important;
}

.footer-frame,
body.obsl-tools-visible .footer-frame,
body.pwa-visible .footer-frame{
  margin-bottom:0!important;
  padding-bottom:10px!important;
}

.footer-tools-row{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:100%!important;
  max-width:100%!important;
  max-height:72px!important;
  margin:8px auto 0!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  opacity:1!important;
  visibility:visible!important;
  transition:max-height .18s ease,margin .18s ease,opacity .18s ease,visibility .18s ease!important;
}
.footer-tools-row.tools-hidden{
  max-height:0!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  visibility:hidden!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.footer-tools-row .pwa-install-banner{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  z-index:20!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:7px!important;
  width:min(420px,calc(100% - 50px))!important;
  max-width:calc(100% - 50px)!important;
  min-height:42px!important;
  height:auto!important;
  margin:0!important;
  padding:7px 9px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  box-shadow:0 4px 16px rgba(0,0,0,.14)!important;
  box-sizing:border-box!important;
  white-space:normal!important;
}
.footer-tools-row .pwa-install-banner[hidden]{display:none!important}
.footer-tools-row .pwa-install-copy{
  display:grid!important;
  gap:1px!important;
  min-width:0!important;
  text-align:left!important;
}
.footer-tools-row .pwa-install-copy strong{
  font-size:11px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.footer-tools-row .pwa-install-copy span{
  font-size:9px!important;
  line-height:1.15!important;
  color:var(--muted)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.footer-tools-row #pwa-install-button{
  min-height:27px!important;
  height:27px!important;
  padding:2px 7px!important;
  border:1px solid var(--line)!important;
  border-radius:7px!important;
  background:transparent!important;
  color:inherit!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.footer-tools-row #pwa-install-close{
  position:static!important;
  width:22px!important;
  height:22px!important;
  min-height:22px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  font-size:18px!important;
  line-height:1!important;
}
.footer-tools-row .app-settings{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  z-index:30!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:38px!important;
  height:38px!important;
  margin:0!important;
}
.footer-tools-row #system-menu-toggle{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  font-size:22px!important;
  margin:0!important;
}
.footer-tools-row .system-menu{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:44px!important;
  transform:translateX(-50%)!important;
  width:min(310px,calc(100vw - 24px))!important;
  z-index:60!important;
}

@media(max-width:560px){
  .site-footer{gap:6px!important;padding:8px 6px!important}
  .footer-copyright-group{gap:2px!important}
  .footer-admin-pencil{width:22px!important;height:22px!important;min-width:22px!important;font-size:17px!important}
  .footer-tools-row{gap:5px!important;margin-top:6px!important}
  .footer-tools-row .pwa-install-banner{
    width:calc(100% - 45px)!important;
    max-width:calc(100% - 45px)!important;
    min-height:38px!important;
    padding:5px 6px!important;
    gap:5px!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
  }
  .footer-tools-row .pwa-install-copy strong{font-size:10px!important}
  .footer-tools-row .pwa-install-copy span{display:none!important}
  .footer-tools-row #pwa-install-button{height:25px!important;min-height:25px!important;padding:2px 6px!important;font-size:9px!important}
  .footer-tools-row .app-settings{width:34px!important;height:34px!important}
  .footer-tools-row #system-menu-toggle{width:33px!important;height:33px!important;min-width:33px!important;font-size:20px!important}
}

.footer-tools-row,
.footer-tools-row.tools-hidden{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  width:100%!important;
  min-height:34px!important;
  height:auto!important;
  max-height:none!important;
  margin:5px auto 0!important;
  padding:3px 4px!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
  box-sizing:border-box!important;
  transition:none!important;
  pointer-events:auto!important;
}
.footer-frame{
  margin-bottom:0!important;
  padding-bottom:6px!important;
}
.pwa-install-compact{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  position:static!important;
  inset:auto!important;
  width:auto!important;
  max-width:min(250px,calc(100vw - 70px))!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}
.pwa-install-compact[hidden]{display:none!important}
#pwa-install-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  min-height:28px!important;
  height:28px!important;
  padding:3px 8px!important;
  margin:0!important;
  border:1px solid var(--line)!important;
  border-radius:7px!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#pwa-install-close{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:static!important;
  width:26px!important;
  height:28px!important;
  min-width:26px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:6px!important;
  background:transparent!important;
  color:var(--text)!important;
  font-size:17px!important;
  line-height:1!important;
}

.footer-tools-row .app-settings{
  position:static!important;
  inset:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  z-index:5200!important;
}
.footer-tools-row #system-menu-toggle{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  font-size:20px!important;
  margin:0!important;
}

#system-menu{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:48px!important;
  transform:translateX(-50%)!important;
  width:min(360px,calc(100vw - 16px))!important;
  max-width:calc(100vw - 16px)!important;
  max-height:min(78vh,620px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  box-sizing:border-box!important;
  z-index:9000!important;
}

.admin-editor-root>.title-logo-tools-body,
.admin-accordion{
  display:grid!important;
  gap:7px!important;
}
.admin-subsection{
  width:100%!important;
  margin:0!important;
  border:1px solid var(--line)!important;
  border-radius:8px!important;
  background:var(--panel)!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.admin-subsection>summary{
  cursor:pointer!important;
  list-style:none!important;
  padding:9px 10px!important;
  font-size:12px!important;
  font-weight:900!important;
  user-select:none!important;
}
.admin-subsection>summary::-webkit-details-marker{display:none!important}
.admin-subsection>summary::after{
  content:"⌄";
  float:right;
  opacity:.65;
}
.admin-subsection[open]>summary::after{content:"⌃"}
.admin-subsection-body{
  display:grid!important;
  gap:8px!important;
  padding:8px 10px 10px!important;
  border-top:1px solid var(--line)!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.admin-subsection:not([open])>.admin-subsection-body{display:none!important}
.admin-subsection .header-custom-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.event-admin-motion-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
.event-admin-motion-grid label{
  display:grid!important;
  gap:4px!important;
  min-width:0!important;
  font-size:11px!important;
  font-weight:800!important;
}
.event-admin-motion-grid select{width:100%!important;min-width:0!important}

.weather-admin-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  width:100%!important;
}
.weather-admin-actions .system-menu-button{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}

.footer-copyright-group{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
}
.footer-admin-pencil{
  order:2!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:22px!important;
  height:22px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:16px!important;
  opacity:.72!important;
}
.footer-copyright-group #footer-text{order:1!important}

@media(max-width:640px){
  #system-menu{
    bottom:44px!important;
    width:calc(100vw - 10px)!important;
    max-width:calc(100vw - 10px)!important;
    max-height:76vh!important;
  }
  .admin-subsection .header-custom-grid{
    grid-template-columns:1fr!important;
  }
  .event-admin-motion-grid{
    grid-template-columns:1fr!important;
  }
  .admin-subsection-body{
    padding:7px!important;
  }
  .footer-tools-row{
    gap:3px!important;
    padding:2px!important;
  }
  #pwa-install-button{
    max-width:calc(100vw - 100px)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

#header-section-editor,#calendar-speed-panel,#weather-section-editor,#footer-section-editor,#system-menu{
 box-sizing:border-box!important;max-width:min(94vw,680px)!important;width:min(94vw,680px)!important;
 overflow-x:hidden!important;overflow-y:auto!important;max-height:82vh!important;
}
#header-section-editor input,#header-section-editor select,#header-section-editor textarea,
#calendar-speed-panel input,#calendar-speed-panel select,
#weather-section-editor input,#weather-section-editor select,#weather-section-editor textarea,
#footer-section-editor input,#footer-section-editor select,#footer-section-editor textarea,
#system-menu input,#system-menu select,#system-menu textarea{max-width:100%!important;box-sizing:border-box!important}
#event-frame,#footer-frame{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
@media(max-width:640px){
 #header-section-editor,#calendar-speed-panel,#weather-section-editor,#footer-section-editor,#system-menu{
  left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:94vw!important;max-width:94vw!important;
 }
}

#header-section-editor,#calendar-speed-panel,#weather-section-editor,#note-tools-menu,#footer-section-editor,#system-menu{box-sizing:border-box!important;max-width:min(94vw,680px)!important;min-width:0!important;overflow-x:hidden!important;overflow-y:auto!important}#header-section-editor *,#calendar-speed-panel *,#weather-section-editor *,#note-tools-menu *,#footer-section-editor *,#system-menu *{box-sizing:border-box}@media(max-width:640px){#header-section-editor,#calendar-speed-panel,#weather-section-editor,#note-tools-menu,#footer-section-editor,#system-menu{width:94vw!important;max-width:94vw!important}}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.obsl-statusbar{
  --stt-h:48px;
  --stt-fs:16px;
  --stt-logo-size:28px;
  --stt-logo-radius:50%;
  --stt-opacity:1;
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:100%;
  min-height:var(--stt-effective-h,var(--stt-h));
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center;
  gap:0!important;
  margin:0 0 8px;
  padding:4px 8px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:transparent!important;
  font-family:var(--stt-font,system-ui,sans-serif)!important;
  font-size:var(--stt-effective-fs,var(--stt-fs))!important;
  line-height:1.15;
  z-index:4900;
  overflow:hidden!important;
  box-sizing:border-box;
  white-space:nowrap!important;
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
  contain:layout paint;
}
.obsl-statusbar::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:var(--panel);
  opacity:var(--stt-opacity);
  pointer-events:none;
}
.obsl-statusbar.is-transparent::before{background:transparent!important}
.obsl-statusbar.is-loading .obsl-statusbar-zone{visibility:hidden!important}

.obsl-statusbar.is-loading::after{content:"";position:absolute;inset:0;z-index:2;background:var(--panel);border-radius:inherit;pointer-events:none}
.obsl-statusbar.is-pinned{position:sticky;top:0}
.obsl-statusbar-zone{
  position:relative;
  z-index:1;
  min-width:0;
  max-width:100%;
  height:100%;
  display:flex;
  align-items:center;
  overflow:hidden;
  white-space:nowrap!important;
  font:inherit!important;
}
.obsl-statusbar-left{justify-content:flex-start;gap:4px;padding-right:5px}
.obsl-statusbar-center{justify-content:center;gap:clamp(2px,.55vw,7px);font-weight:800;padding-inline:5px;text-align:center}
.obsl-statusbar-right{justify-content:flex-end;gap:clamp(4px,.8vw,10px);padding-left:5px;padding-right:22px}
.obsl-statusbar-zone span{font:inherit}
.statusbar-title,#statusbar-weather,#statusbar-network-value{min-width:0;overflow:hidden;text-overflow:ellipsis}
.statusbar-title{font-weight:800}
#statusbar-clock{font-variant-numeric:tabular-nums;font-weight:900}
.statusbar-separator{flex:0 0 auto;opacity:.68}
.obsl-statusbar-logo{
  width:var(--stt-effective-logo-size,var(--stt-logo-size))!important;
  height:var(--stt-effective-logo-size,var(--stt-logo-size))!important;
  max-width:52px!important;
  max-height:52px!important;
  flex:0 0 auto;
  object-fit:cover;
  border-radius:var(--stt-logo-radius)!important;
}
.statusbar-adornment{flex:0 0 auto}
.statusbar-runtime-item{display:inline-flex;align-items:center;gap:3px;min-width:0;max-width:50%;overflow:hidden;white-space:nowrap;font:inherit!important}
.statusbar-runtime-item.is-hidden{display:none!important;visibility:hidden!important}
.statusbar-runtime-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.12em;height:1.12em;line-height:1;overflow:hidden}
.statusbar-runtime-icon img{display:block;width:100%;height:100%;object-fit:contain;border-radius:2px}
.statusbar-runtime-item.icons-hidden .statusbar-runtime-icon{display:none!important;visibility:hidden!important}
.statusbar-pencil{
  position:absolute!important;z-index:3!important;top:50%!important;right:2px!important;transform:translateY(-50%)!important;
  width:20px!important;height:20px!important;min-width:20px!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;font-size:14px!important;line-height:1!important;
}
.statusbar-editor{width:min(760px,94vw)!important;max-width:94vw!important;margin:0 auto 9px!important;padding:9px!important;box-sizing:border-box!important}
.statusbar-group{border:1px solid var(--line);border-radius:9px;margin:0 0 7px;overflow:hidden}
.statusbar-group>summary{cursor:pointer;font-weight:900;padding:9px 10px;list-style:none}
.statusbar-group>summary::-webkit-details-marker{display:none}
.statusbar-group-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 9px 9px}
.statusbar-group-body label{display:grid;gap:4px;min-width:0;font-size:10px;font-weight:700}
.statusbar-group-body input,.statusbar-group-body select{width:100%;max-width:100%;box-sizing:border-box;min-width:0}
.statusbar-editor-actions{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,1fr);gap:8px;align-items:center}
#stt-message{font-size:10px;text-align:center;overflow-wrap:anywhere}
@media(max-width:640px){
  .obsl-statusbar{padding:3px 4px;font-size:var(--stt-effective-fs,var(--stt-fs))!important}
  .obsl-statusbar-left{gap:2px;padding-right:2px}.obsl-statusbar-center{gap:2px;padding-inline:2px}.obsl-statusbar-right{gap:3px;padding-left:2px;padding-right:18px}
  .statusbar-pencil{width:17px!important;height:17px!important;min-width:17px!important;font-size:12px!important}
  .statusbar-group-body{grid-template-columns:1fr}.statusbar-editor{width:calc(100vw - 18px)!important;max-width:calc(100vw - 18px)!important}
}
#clear-cache{display:none!important}

.theme-label{font-size:11px;font-weight:800;margin-right:4px}
.tag-editor-list{display:grid;gap:6px}
.tag-editor-row{display:grid;grid-template-columns:minmax(90px,1fr) 42px auto auto;gap:6px;align-items:center}
.tag-auto-row{grid-template-columns:minmax(100px,1fr) auto}
.tag-add-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag-add-row>input[type="text"],.tag-add-row>input:not([type]){flex:1 1 140px}
.tag-blink{animation:obsl-tag-blink .72s steps(2,end) infinite!important;will-change:opacity}
@keyframes obsl-tag-blink{0%,49%{opacity:1}50%,100%{opacity:.18}}

@keyframes toastRtl{from{transform:translateX(min(48vw,380px))}to{transform:translateX(-100%)}}
@keyframes toastLtr{from{transform:translateX(-100%)}to{transform:translateX(min(48vw,380px))}}
@keyframes toastUp{from{transform:translateY(120%)}to{transform:translateY(-120%)}}
@keyframes toastDown{from{transform:translateY(-120%)}to{transform:translateY(120%)}}
@keyframes toastBlink{50%{opacity:.15}}

.attendance-heading{grid-template-columns:1fr!important}
.attendance-title-block{min-width:0;text-align:left}
.attendance-kicker,.attendance-status{display:none!important}

@media(max-width:640px){
  
  
  .tag-editor-row{grid-template-columns:minmax(80px,1fr) 38px auto}.tag-editor-row button{grid-column:1/-1}
  .brand-admin-actions{grid-template-columns:1fr!important}
}

#header-frame.header-frame{
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  padding:clamp(6px,1.2vw,12px)!important;
  border:1.5px solid var(--line)!important;
  border-radius:14px!important;
  background:var(--panel)!important;
}
#header-frame .brand-header{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:var(--brand-logo-effective-size,110px)!important;
  padding:4px calc(var(--brand-logo-effective-size,110px) + 12px) 7px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#header-frame .brand-logo-wrap{
  position:absolute!important;
  left:6px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  width:var(--brand-logo-effective-size,110px)!important;
  height:var(--brand-logo-effective-size,110px)!important;
  min-width:0!important;
  max-width:none!important;
}
#header-frame .brand-logo{
  display:block!important;
  width:var(--brand-logo-effective-size,110px)!important;
  height:var(--brand-logo-effective-size,110px)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
}
#header-frame .brand-title{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0 4px!important;
  text-align:center!important;
  line-height:1.08!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#header-frame .header-time-layout{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(2px,.7vw,7px)!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
}
#header-frame #clock{
  order:0!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  font-family:var(--header-clock-font,"DSEG7Local",monospace)!important;
  font-size:var(--header-clock-effective-size,var(--header-clock-size,72px))!important;
  line-height:1.08!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  font-variant-numeric:tabular-nums!important;
}
#header-frame .header-calendar-row{
  order:1!important;
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:baseline!important;
  justify-content:center!important;
  gap:clamp(2px,.65vw,8px)!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0 2px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  line-height:1.2!important;
  box-sizing:border-box!important;
}
#header-frame #weekday,#header-frame #solar-date{
  flex:0 0 auto!important;
  min-width:0!important;
  font-family:var(--header-date-font,"Times New Roman",serif)!important;
  font-size:var(--header-date-effective-size,var(--header-date-size,24px))!important;
  white-space:nowrap!important;
}
#header-frame #lunar-date{
  flex:0 0 auto!important;
  min-width:0!important;
  font-family:var(--header-lunar-font,"Times New Roman",serif)!important;
  font-size:var(--header-lunar-effective-size,var(--header-lunar-size,18px))!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
#header-frame .header-calendar-dot{flex:0 0 auto!important;font-size:.8em!important;opacity:.65!important}
#header-frame .device-panel,#header-frame #battery,#header-frame #network,#header-frame #app-uptime{display:none!important}
@media(max-width:520px){
  #header-frame.header-frame{padding:6px!important}
  #header-frame .brand-header{padding-top:3px!important;padding-bottom:5px!important}
  #header-frame .brand-logo-wrap{left:3px!important}
  #header-frame .header-calendar-row{gap:2px!important}
}

#attendance-title{color:var(--attendance-title-color,#111111)!important}
.attendance-table tbody tr:nth-child(even) td{background:var(--attendance-alt-color,#f3f5f7)}
.attendance-table thead th{background:var(--attendance-row1-color,#fff4cc)!important}
.attendance-table td.attendance-checkin.is-threshold{box-shadow:inset 0 0 0 2px var(--attendance-checkin-border,#1976d2);font-weight:900}
.attendance-table td.attendance-late.is-threshold{box-shadow:inset 0 0 0 2px var(--attendance-late-border,#d32f2f);font-weight:900}
.attendance-style-admin{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.attendance-style-admin h3{margin:0 0 10px}
.attendance-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:10px}
.attendance-style-grid label{display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(82px,.65fr);gap:6px;align-items:center;font-size:11px;font-weight:800;min-width:0}
.attendance-style-grid input{min-width:0;max-width:100%;box-sizing:border-box}
.attendance-style-grid input[type="color"]{width:42px;height:32px;padding:1px}
.event-weekday,.calendar-weekday{font-weight:900;white-space:nowrap}
.weekend-blink{animation:obsl-weekend-blink .8s steps(2,end) infinite!important}
@keyframes obsl-weekend-blink{0%,49%{opacity:1}50%,100%{opacity:.22}}
.calendar-connect-inside{
  position:relative!important;z-index:50!important;pointer-events:auto!important;touch-action:manipulation!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-height:42px!important;cursor:pointer!important;user-select:none!important;-webkit-user-select:none!important;
  -webkit-tap-highlight-color:rgba(0,0,0,.08);-webkit-appearance:button!important;appearance:button!important
}
.calendar-connect-inside:disabled{opacity:.6;cursor:wait!important}
@media(max-width:720px){
  .attendance-style-grid{grid-template-columns:1fr}
  .attendance-style-grid label{grid-template-columns:minmax(0,1fr) 42px minmax(88px,.8fr)}
}

#statusbar-weather-motion{
  min-width:0!important;
  max-width:min(68%,260px)!important;
  overflow:hidden!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-family:var(--stt-weather-font,var(--stt-font,system-ui,sans-serif))!important;
  line-height:1.15!important;
  contain:paint;
}
#statusbar-weather-content{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(2px,.45vw,6px)!important;
  width:max-content!important;
  min-width:max-content!important;
  white-space:nowrap!important;
  will-change:transform,opacity,clip-path;
}
#statusbar-weather-motion.weather-effect-rtl #statusbar-weather-content{animation:sttWeatherRtl 9s linear infinite!important}
#statusbar-weather-motion.weather-effect-ltr #statusbar-weather-content{animation:sttWeatherLtr 9s linear infinite!important}
#statusbar-weather-motion.weather-effect-up #statusbar-weather-content{animation:sttWeatherUp 6s ease-in-out infinite!important}
#statusbar-weather-motion.weather-effect-down #statusbar-weather-content{animation:sttWeatherDown 6s ease-in-out infinite!important}
#statusbar-weather-motion.weather-effect-typewriter #statusbar-weather-content{animation:sttWeatherType 7s steps(28,end) infinite!important}
#statusbar-weather-motion.weather-effect-blink #statusbar-weather-content{animation:sttWeatherBlink .72s steps(2,end) infinite!important}
#statusbar-weather-motion.weather-effect-none #statusbar-weather-content{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
@keyframes sttWeatherRtl{0%{transform:translateX(105%)}100%{transform:translateX(-105%)}}
@keyframes sttWeatherLtr{0%{transform:translateX(-105%)}100%{transform:translateX(105%)}}
@keyframes sttWeatherUp{0%,12%{transform:translateY(0);opacity:1}48%{transform:translateY(-115%);opacity:.15}52%{transform:translateY(115%);opacity:.15}88%,100%{transform:translateY(0);opacity:1}}
@keyframes sttWeatherDown{0%,12%{transform:translateY(0);opacity:1}48%{transform:translateY(115%);opacity:.15}52%{transform:translateY(-115%);opacity:.15}88%,100%{transform:translateY(0);opacity:1}}
@keyframes sttWeatherType{0%,8%{clip-path:inset(0 100% 0 0)}68%,100%{clip-path:inset(0 0 0 0)}}
@keyframes sttWeatherBlink{0%,49%{opacity:1}50%,100%{opacity:.18}}

#header-frame .header-calendar-row{
  align-items:center!important;
  line-height:1.15!important;
  transform:none!important;
  transition:none!important;
  contain:layout paint;
}
#header-frame #weekday,#header-frame #solar-date,#header-frame #lunar-date,#header-frame .header-calendar-dot{
  line-height:1.15!important;
  transform:none!important;
  transition:none!important;
}

@media(max-width:640px){
  #statusbar-weather-motion{max-width:62%!important}
  
  
}

.falling-star.star-js-driven{top:0!important;left:0!important;animation:none!important;contain:layout style paint;backface-visibility:hidden}
@keyframes obsl-cal-enter-rtl{from{transform:translateX(22%);opacity:.2}to{transform:translateX(0);opacity:1}}
@keyframes obsl-cal-enter-ltr{from{transform:translateX(-22%);opacity:.2}to{transform:translateX(0);opacity:1}}
@keyframes obsl-cal-enter-up{from{transform:translateY(70%);opacity:.2}to{transform:translateY(0);opacity:1}}
@keyframes obsl-cal-enter-down{from{transform:translateY(-70%);opacity:.2}to{transform:translateY(0);opacity:1}}
.calendar-track{will-change:transform,opacity}
#statusbar-logo[style*="pointer"],#brand-logo[style*="pointer"]{touch-action:manipulation}

.account-management{margin-top:8px;border-top:1px solid var(--line);padding-top:7px}
.account-management>summary{cursor:pointer;font-weight:900}
.account-management-body{display:grid;gap:10px;margin-top:8px}
.account-admin-block,.account-add-form{display:grid;gap:7px;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.account-admin-block>label,.account-add-form>label,.account-row>label{display:grid;gap:4px;font-size:11px;font-weight:800}
.account-list{display:grid;gap:8px}
.account-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.account-row-head,.account-row-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:7px}
.account-row-actions{justify-content:flex-end}.account-row input,.account-row select,.account-add-form input,.account-add-form select,.pwa-admin-block input{width:100%;min-width:0}
@media(max-width:620px){.account-row{grid-template-columns:1fr}.account-row-head,.account-row-actions{grid-column:1}.account-row-actions{display:grid;grid-template-columns:1fr 1fr}.account-row-actions button{width:100%}}

.obsl-statusbar{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.55fr) minmax(0,.82fr)!important;
}
.obsl-statusbar-center{
  justify-content:flex-start!important;
  padding-left:clamp(4px,.8vw,10px)!important;
  padding-right:2px!important;
  overflow:hidden!important;
}
#statusbar-clock{flex:0 0 auto!important}
#statusbar-weather-motion{
  flex:1 1 auto!important;
  width:auto!important;
  max-width:none!important;
  justify-content:flex-start!important;
}
.obsl-statusbar-right{
  padding-left:2px!important;
  padding-right:22px!important;
  gap:clamp(3px,.55vw,8px)!important;
}
@media(max-width:640px){
  .obsl-statusbar{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,.78fr)!important;
  }
  #statusbar-weather-motion{max-width:none!important;width:auto!important}
  .obsl-statusbar-right{padding-right:18px!important}
}

.google-calendar-panel{
  display:grid;
  gap:10px;
}
.google-calendar-panel[hidden]{display:none!important}
.google-calendar-panel-head{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
#calendar-panel-state{font-size:11px;color:var(--muted);font-weight:700}
.google-calendar-connect-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.google-calendar-admin-config{
  border-top:1px solid var(--line);
  padding-top:10px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  align-items:end;
}
.google-calendar-admin-config[hidden]{display:none!important}
.google-calendar-admin-config>strong,
.google-calendar-admin-config>#calendar-config-message{
  grid-column:1/-1;
}
.google-calendar-admin-config label{
  display:grid;
  gap:4px;
  min-width:0;
  font-size:11px;
  font-weight:800;
}
.google-calendar-admin-config select{width:100%;min-width:0}
#calendar-config-save{grid-column:1/-1}
@media(max-width:680px){
  .google-calendar-connect-grid,
  .google-calendar-admin-config{grid-template-columns:1fr}
  .google-calendar-admin-config>strong,
  .google-calendar-admin-config>#calendar-config-message,
  #calendar-config-save{grid-column:auto}
}

.location-picker-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.location-auto{font-weight:800}
@media(max-width:420px){.location-picker-actions{grid-template-columns:1fr}}

.attendance-local-form{grid-column:1/-1}
.attendance-local-form input,.attendance-local-form select{width:100%;min-width:0}

.market-gas-title{margin:7px 0 3px;padding-top:6px;border-top:1px solid var(--line);font-weight:900;font-size:12px;letter-spacing:.02em}
.market-gas-row{display:grid;grid-template-columns:minmax(70px,.8fr) minmax(0,1.1fr) minmax(0,1.1fr);gap:5px;align-items:center;padding:3px 0;border-bottom:1px dashed var(--line);font-size:10px}
.market-gas-row strong{min-width:0}.market-gas-row span{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.market-gas-error{padding:2px 0}
@media(max-width:520px){.market-gas-row{grid-template-columns:1fr 1fr}.market-gas-row strong{grid-column:1/-1}.market-gas-row span{text-align:left}}

.calendar-track{
  display:block!important;
  padding-left:0!important;
  animation:none!important;
  transform:none;
  width:max-content;
  max-width:100%;
}
.calendar-track .calendar-item{margin-right:0!important}
.calendar-label-custom-icon{display:block;width:1em;height:1em;object-fit:contain}

.obsl-statusbar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important}
.obsl-statusbar-center{padding-inline:clamp(4px,.7vw,10px)!important}
.obsl-statusbar-right{padding-left:0!important;padding-right:6px!important}
@media(max-width:640px){.obsl-statusbar-right{padding-right:4px!important}}

html.obsl-font-preflight #statusbar,
html.obsl-font-preflight #header-frame,
html.obsl-font-preflight #event-frame{
  visibility:hidden!important;
  opacity:0!important;
  transition:none!important;
}
html.obsl-font-ready #statusbar,
html.obsl-font-ready #header-frame,
html.obsl-font-ready #event-frame{transition:none!important}

.calendar-ticker{overflow:hidden!important}
.calendar-ticker .calendar-window{
  flex:1 1 auto!important;width:auto!important;max-width:none!important;min-width:0!important;
  margin:0!important;overflow:hidden!important;contain:layout paint!important;
}
.calendar-ticker .calendar-track{
  width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;
  animation:none!important;transition:none!important;text-align:center!important;
}
.calendar-ticker .calendar-item{display:block!important;width:100%!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

.attendance-panel{position:relative!important}
.attendance-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
.attendance-title-block{min-width:0;flex:1 1 auto}.attendance-title-line{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-width:0}.attendance-title-line #attendance-title{flex:0 1 auto;min-width:0;margin:2px 0 0!important}.attendance-title-line .attendance-date-button{flex:0 0 auto}
.attendance-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex:0 0 auto}
.attendance-date-button{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);
  font-size:18px;line-height:1;cursor:pointer;padding:0;
}
.attendance-date-popover{
  position:fixed!important;z-index:12000!important;left:8px;right:auto;top:58px;width:min(330px,calc(100vw - 20px));
  max-height:min(78vh,520px);overflow:auto;padding:12px;border:1.5px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);
  box-shadow:0 10px 30px rgba(0,0,0,.22);box-sizing:border-box;
}
.attendance-date-popover[hidden]{display:none!important}
.attendance-date-popover-title{font-weight:700;text-align:center;margin-bottom:8px}
.attendance-date-popover input[type="date"]{width:100%;min-height:40px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit}
.attendance-date-available{font-size:12px;line-height:1.55;color:var(--muted);margin:8px 0;max-height:170px;overflow:auto;overflow-wrap:anywhere}.attendance-date-list-label{font-weight:900;color:var(--text)}.attendance-date-link{display:inline!important;border:0!important;background:transparent!important;color:inherit!important;padding:0!important;margin:0!important;font:inherit!important;line-height:inherit!important;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.attendance-date-link.is-active{font-weight:900;color:var(--text)!important;text-decoration-thickness:2px}.attendance-date-dot{opacity:.75}.attendance-date-none{display:block;text-align:center}
.attendance-date-popover-actions{display:grid;grid-template-columns:1fr;gap:8px}
.attendance-date-popover-actions button{min-height:38px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-weight:700}
.attendance-browser-folder-box{padding:10px;border:1px dashed var(--line);border-radius:10px;margin-bottom:10px}
.attendance-browser-folder-title{font-weight:700;margin-bottom:6px}
.attendance-browser-folder-actions{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}

.obsl-widget-editable{position:relative}
body.obsl-widget-edit-mode .obsl-widget-editable{
  outline:2px dashed currentColor!important;
  outline-offset:-3px;
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  animation:obsl-widget-wiggle .24s ease-in-out infinite alternate;
}
body.obsl-widget-edit-mode .obsl-widget-editable.obsl-widget-dragging{animation:none!important;opacity:.76;z-index:8000!important;box-shadow:0 8px 22px rgba(0,0,0,.20)}
@keyframes obsl-widget-wiggle{from{transform:rotate(-.28deg)}to{transform:rotate(.28deg)}}
.obsl-widget-close{
  display:none;position:absolute;left:50%;bottom:5px;transform:translateX(-50%);z-index:8100;
  width:30px;height:30px;border:1.5px solid currentColor;border-radius:50%;background:var(--panel);color:var(--text);
  align-items:center;justify-content:center;font:700 20px/1 system-ui;cursor:pointer;padding:0;
}
body.obsl-widget-edit-mode .obsl-widget-close{display:flex}
.obsl-widget-hidden{display:none!important}
.obsl-widget-drop-before{box-shadow:inset 0 4px 0 currentColor!important}
.obsl-widget-drop-after{box-shadow:inset 0 -4px 0 currentColor!important}
@media(max-width:600px){
  .attendance-date-button{width:30px;height:30px;font-size:16px}
  .attendance-date-popover{width:min(320px,calc(100vw - 16px))!important}
}

.obsl-statusbar-left{min-width:0!important;overflow:hidden!important}
.obsl-statusbar-center{justify-content:center!important;overflow:visible!important;z-index:2!important}
.obsl-statusbar-right{min-width:0!important;overflow:hidden!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:clamp(3px,.55vw,7px)!important}
#statusbar-clock{display:inline-block!important;white-space:nowrap!important;text-align:center!important;flex:0 0 auto!important}
.statusbar-weather-leading-dot{flex:0 0 auto!important}
#statusbar-weather-motion{flex:1 1 auto!important;width:auto!important;max-width:none!important;min-width:0!important;justify-content:flex-start!important}
#statusbar-weather-content{justify-content:flex-start!important}
#statusbar-battery,#statusbar-network{flex:0 0 auto!important;max-width:none!important}
#statusbar-battery-value,#statusbar-network-value{white-space:nowrap!important}
@media(max-width:560px){
  .obsl-statusbar-left{padding-right:2px!important}.obsl-statusbar-center{padding-inline:3px!important}.obsl-statusbar-right{gap:3px!important}
  #statusbar-weather-motion{min-width:14px!important}
}

.attendance-panel{overflow:visible!important}
.attendance-table-wrap{position:relative!important;z-index:1!important;overflow:auto!important}
.attendance-date-popover{isolation:isolate!important}

.market-gas-title{display:none!important}
.market-gas-heading{margin:0!important;border-top:0!important;padding-top:3px!important}
.market-gas-heading strong{font-size:9px!important;color:var(--muted)!important;font-weight:700!important}
.market-gas-row{margin:0!important;padding:3px 0!important;border-top:0!important;border-bottom:1px dashed var(--line)!important}
.market-gas-error{padding:0!important;margin:0!important}

.calendar-ticker{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.calendar-label,.calendar-actions{flex:0 0 auto!important;min-width:0!important}
.calendar-window{
  position:relative!important;
  flex:1 1 0!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  contain:layout paint!important;
}
.calendar-track{
  position:relative!important;
  display:inline-block!important;
  width:max-content!important;
  max-width:none!important;
  min-width:max-content!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  text-align:left!important;
  animation:none!important;
  transition:none;
  will-change:transform;
}
.calendar-track .calendar-item,
.calendar-item{
  display:inline-block!important;
  width:auto!important;
  max-width:none!important;
  min-width:max-content!important;
  margin:0!important;
  padding:0 8px!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
}
#calendar-speed-panel.calendar-speed-panel{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:8px 0 0!important;
  padding:10px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  box-sizing:border-box!important;
}
#calendar-speed-panel[hidden]{display:none!important}
#calendar-speed-panel *,
.google-calendar-admin-config *,
.google-calendar-connect-grid *{box-sizing:border-box!important;min-width:0!important}
.google-calendar-connect-grid,
.google-calendar-admin-config{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
.google-calendar-admin-config>strong,
.google-calendar-admin-config>#calendar-config-message,
#calendar-config-save{grid-column:1/-1!important}
.google-calendar-admin-config label,
.google-calendar-connect-grid>*{width:100%!important;max-width:100%!important;min-width:0!important}
.google-calendar-admin-config input,
.google-calendar-admin-config select,
.google-calendar-admin-config button,
.google-calendar-connect-grid input,
.google-calendar-connect-grid select,
.google-calendar-connect-grid button{width:100%!important;max-width:100%!important;min-width:0!important}
@media(max-width:760px){
  .google-calendar-connect-grid,.google-calendar-admin-config{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:520px){
  .calendar-ticker{min-height:42px!important}
  .calendar-label{padding:7px 8px!important}
  .calendar-actions{gap:3px!important;padding:3px 4px!important}
  #calendar-state{display:none!important}
  .google-calendar-connect-grid,.google-calendar-admin-config{grid-template-columns:1fr!important}
  .google-calendar-admin-config>strong,.google-calendar-admin-config>#calendar-config-message,#calendar-config-save{grid-column:auto!important}
  #calendar-speed-panel.calendar-speed-panel{padding:8px!important}
}

.attendance-config-stack{display:grid;gap:8px;width:100%;min-width:0}
.attendance-config-section{
  width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden;
}
.attendance-config-section>summary{
  list-style:none;cursor:pointer;padding:10px 12px;font-weight:900;display:flex;align-items:center;justify-content:space-between;gap:8px;user-select:none;
}
.attendance-config-section>summary::-webkit-details-marker{display:none}
.attendance-config-section>summary::after{content:"⌄";flex:0 0 auto;transition:transform .16s ease}
.attendance-config-section[open]>summary::after{transform:rotate(180deg)}
.attendance-config-body{padding:0 10px 10px;min-width:0}
.attendance-config-body .attendance-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;min-width:0}
.attendance-config-body form{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.attendance-config-body input,.attendance-config-body select,.attendance-config-body button{max-width:100%;min-width:0;box-sizing:border-box}
.attendance-status-lines{display:grid;gap:3px;line-height:1.45}
.attendance-status-source{overflow-wrap:anywhere}
@media(max-width:700px){.attendance-config-body .attendance-admin-grid{grid-template-columns:1fr}}

.calendar-ticker{
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;gap:clamp(5px,1vw,10px)!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  min-height:48px!important;padding:5px 7px!important;box-sizing:border-box!important;
  overflow:hidden!important;border:0!important;background:transparent!important;
}
.calendar-brand{display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:1.4em}
.calendar-brand #calendar-label-icon{display:inline-flex;align-items:center;justify-content:center;font-size:1.15em;line-height:1}
.calendar-window{position:relative!important;display:block!important;width:100%!important;min-width:0!important;max-width:none!important;height:1.8em!important;overflow:hidden!important;white-space:nowrap!important;contain:layout paint!important;border:0!important;background:transparent!important;padding:0!important;margin:0!important}
.calendar-track{position:absolute!important;left:0!important;top:0!important;display:inline-flex!important;align-items:center!important;height:100%!important;width:max-content!important;min-width:max-content!important;max-width:none!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;transform:translate3d(0,0,0);visibility:hidden;line-height:1.45!important;padding:0!important;margin:0!important;animation:none!important;will-change:transform}
.calendar-track .calendar-item{display:inline-block!important;width:max-content!important;min-width:max-content!important;max-width:none!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;padding:0!important;margin:0!important}
.calendar-meta-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0;white-space:nowrap}
.calendar-count{font-size:.72em;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.calendar-state-compact{display:none!important}
.calendar-settings-button{flex:0 0 auto;width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
#calendar-speed-panel.calendar-speed-panel{width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;padding:10px!important;margin:7px 0 0!important;box-sizing:border-box!important}
.google-calendar-panel-head,.google-calendar-connect-grid,.google-calendar-admin-config{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
.google-calendar-admin-config{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))!important}
.google-calendar-admin-config label,.google-calendar-admin-config select,.google-calendar-admin-config input,.google-calendar-admin-config button{min-width:0!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important}
@media(max-width:680px){
 .calendar-ticker{grid-template-columns:auto minmax(0,1fr) auto!important;gap:4px!important;padding:4px 5px!important;min-height:44px!important}
 .calendar-count{font-size:9px!important;max-width:74px;overflow:hidden;text-overflow:ellipsis}
 .calendar-settings-button{width:29px!important;height:29px!important;min-width:29px!important}
 .google-calendar-admin-config,.google-calendar-connect-grid{grid-template-columns:1fr!important}
}
@media(max-width:390px){.calendar-count{max-width:56px;font-size:8px!important}.calendar-brand{min-width:1.1em}.calendar-ticker{gap:3px!important}}

.guest-notify-settings{display:grid;gap:7px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.webpush-tag-row{grid-template-columns:minmax(80px,.65fr) 42px auto minmax(140px,1.35fr) auto!important}
.webpush-tag-row [data-push-message]{min-width:0;width:100%}
@media(max-width:620px){.webpush-tag-row{grid-template-columns:minmax(0,1fr) 42px auto!important}.webpush-tag-row [data-push-message]{grid-column:1/-1}.webpush-tag-row button{grid-column:1/-1}}

.page-ontop-button{position:fixed!important;right:calc(14px + 46px)!important;bottom:14px!important;z-index:1200!important;font-weight:900!important;font-size:20px!important}
@media(max-width:520px){.page-ontop-button{right:calc(9px + 43px)!important;bottom:9px!important}}

.market-gas-more{margin:2px 0 0;border-top:1px dashed var(--line);padding-top:2px}
.market-gas-more>summary{cursor:pointer;font-size:10px;font-weight:800;color:var(--muted);list-style:none;padding:3px 0}
.market-gas-more>summary::-webkit-details-marker{display:none}.market-gas-more>summary::after{content:" ⌄"}.market-gas-more[open]>summary::after{content:" ⌃"}
.market-gas-hcm{font-weight:800}

.calendar-ticker .calendar-window{position:relative!important;display:block!important;width:100%!important;min-width:0!important;max-width:none!important;height:1.8em!important;overflow:hidden!important;white-space:nowrap!important;contain:layout paint!important;border:0!important;background:transparent!important;padding:0!important;margin:0!important}
.calendar-ticker .calendar-track{position:absolute!important;left:0!important;top:0!important;display:inline-flex!important;align-items:center!important;height:100%!important;width:max-content!important;min-width:max-content!important;max-width:none!important;overflow:visible!important;text-align:left!important;white-space:nowrap!important;padding:0!important;margin:0!important;animation:none!important;transition:none;will-change:transform}
.calendar-ticker .calendar-track .calendar-item{display:inline-block!important;width:max-content!important;min-width:max-content!important;max-width:none!important;overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important;padding:0!important;margin:0!important}

.calendar-day-badge{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-weight:800;min-width:3.8em;font-variant-numeric:tabular-nums}
.birthday-event-panel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:58px;overflow:hidden;padding:10px 14px;margin-top:14px}
.birthday-event-label{font-weight:800;white-space:nowrap}
.birthday-event-window{position:relative;min-width:0;overflow:hidden;height:34px;display:flex;align-items:center}
.birthday-event-track{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;width:max-content;will-change:transform;font-weight:650;max-width:none}
.birthday-event-actions{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:.9em}
.birthday-name,.birthday-date{font-weight:900}
.birthday-name-blink{animation:birthday-name-blink 1s steps(2,end) infinite}
@keyframes birthday-name-blink{50%{opacity:.18}}
.birthday-event-empty{opacity:.68;font-weight:500}
.birthday-config-body{display:grid;gap:10px}
.birthday-upload-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.birthday-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.birthday-settings-grid>label{min-width:0}
.tag-auto-row{grid-template-columns:minmax(110px,.7fr) minmax(220px,2fr) auto!important}
.page-ontop-button[hidden]{display:none!important}
.page-ontop-button.is-visible{display:inline-flex!important}
@media(max-width:760px){
  .birthday-event-panel{grid-template-columns:auto minmax(0,1fr) auto;gap:7px;padding:9px 10px;min-height:52px}
  .birthday-event-label{font-size:.9em}
  .birthday-event-actions{font-size:.78em;gap:4px}
  .birthday-event-window{height:30px}
  .birthday-settings-grid{grid-template-columns:1fr 1fr}
  .birthday-upload-row{grid-template-columns:1fr}
}
@media(max-width:430px){
  .birthday-event-panel{grid-template-columns:auto minmax(0,1fr) auto;gap:4px;padding-inline:7px}
  .birthday-event-label{font-size:.78em;max-width:54px;overflow:hidden;text-overflow:ellipsis}
  .birthday-event-actions{font-size:.68em;gap:2px}
  .birthday-settings-grid{grid-template-columns:1fr}
  .tag-auto-row{grid-template-columns:1fr!important}
}

.calendar-day-badge{min-width:1.75em!important;width:1.75em!important;padding:0!important;font-size:1.12em!important;line-height:1!important;text-align:center!important}
.birthday-event-panel{display:grid!important;grid-template-columns:38px minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;min-height:54px!important;height:auto!important;padding:8px 10px!important;overflow:hidden!important}
.birthday-event-panel[hidden]{display:none!important}
.birthday-event-label{display:flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:34px!important;min-width:38px!important;font-size:24px!important;line-height:1!important;overflow:visible!important;max-width:none!important}
.birthday-event-window{height:34px!important;min-width:0!important;display:flex!important;align-items:center!important;overflow:hidden!important}
.birthday-event-track{top:50%!important;line-height:1.35!important;display:inline-flex!important;align-items:center!important;min-height:30px!important}
.birthday-event-item{display:inline-flex!important;align-items:center!important;line-height:1.35!important;white-space:nowrap!important}
.birthday-event-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;height:34px!important;margin:0!important;font-size:inherit!important}
.birthday-event-date-picker{width:126px!important;max-width:126px!important;height:32px!important;box-sizing:border-box!important;padding:3px 5px!important;margin:0!important;border:1px solid var(--line)!important;border-radius:8px!important;background:var(--panel)!important;color:inherit!important;font:inherit!important;font-size:12px!important;line-height:1!important}
.birthday-event-actions .section-admin-gear{position:static!important;inset:auto!important;transform:none!important;flex:0 0 auto!important;margin:0!important;width:32px!important;height:32px!important;min-width:32px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
.birthday-days-number,.birthday-date{font-weight:900!important}
@media(max-width:620px){
 .birthday-event-panel{grid-template-columns:34px minmax(0,1fr) auto!important;gap:5px!important;padding:7px!important;min-height:50px!important}
 .birthday-event-label{width:34px!important;min-width:34px!important;height:32px!important;font-size:21px!important}
 .birthday-event-actions{height:32px!important;gap:3px!important}
 .birthday-event-date-picker{width:108px!important;max-width:108px!important;height:30px!important;font-size:10px!important;padding-inline:3px!important}
 .birthday-event-actions .section-admin-gear{width:30px!important;height:30px!important;min-width:30px!important}
 .birthday-event-window{height:32px!important}
}
@media(max-width:390px){
 .birthday-event-panel{grid-template-columns:30px minmax(0,1fr) auto!important;gap:3px!important;padding:6px 5px!important}
 .birthday-event-label{width:30px!important;min-width:30px!important;font-size:19px!important}
 .birthday-event-date-picker{width:98px!important;max-width:98px!important;font-size:9px!important}
}

.birthday-event-item{
  display:inline-block!important;
  white-space:nowrap!important;
  line-height:1.35!important;
  vertical-align:middle!important;
}
.birthday-today-lead,.birthday-days-number,.birthday-name,.birthday-date{font-weight:900!important}
.birthday-event-empty{display:inline-block!important;white-space:nowrap!important;font-weight:600!important;opacity:.78!important}
.birthday-event-actions{gap:2px!important}
.birthday-event-date-picker{
  width:112px!important;
  max-width:112px!important;
  height:30px!important;
  padding:2px 3px!important;
  font-size:10px!important;
}
.birthday-event-actions .section-admin-gear{margin-left:0!important}

.calendar-day-badge{
  display:inline-flex!important;
  align-items:baseline!important;
  justify-content:center!important;
  gap:1px!important;
  width:auto!important;
  min-width:42px!important;
  padding:0 2px!important;
  white-space:nowrap!important;
  font-weight:900!important;
  font-variant-numeric:tabular-nums!important;
  line-height:1!important;
}
.calendar-day-main{font-weight:950!important;font-size:1.22em!important;line-height:1!important}
.calendar-month-sub{font-weight:900!important;font-size:.64em!important;line-height:1!important;position:relative;bottom:-.22em}
.calendar-year-sup{font-weight:900!important;font-size:.58em!important;line-height:1!important;position:relative;top:-.34em}
@media(max-width:560px){
  .birthday-event-panel{grid-template-columns:28px minmax(0,1fr) auto!important;gap:3px!important;padding:6px!important}
  .birthday-event-label{width:28px!important;min-width:28px!important;font-size:18px!important}
  .birthday-event-date-picker{width:94px!important;max-width:94px!important;height:28px!important;font-size:8.5px!important}
  .birthday-event-actions .section-admin-gear{width:28px!important;height:28px!important;min-width:28px!important}
  .birthday-event-empty{font-size:.86em!important}
  .calendar-day-badge{min-width:36px!important}
}

.birthday-event-actions{gap:1px!important}
.birthday-event-date-picker{margin-right:-1px!important}
@media(max-width:560px){
  .birthday-event-actions{gap:0!important}
  .birthday-event-date-picker{margin-right:-2px!important}
}

.notification-app-settings{margin-top:8px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.notification-app-settings>summary{cursor:pointer;padding:10px 12px;font-weight:800}
.notification-app-body{display:grid;gap:10px;padding:10px}
.notification-channel-card{border:1px solid var(--line);border-radius:10px;padding:10px;min-width:0}
.notification-channel-card h4{margin:0 0 8px;font-size:1em}
.notification-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.notification-category-grid label{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}
@media(max-width:520px){
 
 
 .notification-category-grid{grid-template-columns:1fr}
 .notification-app-body{padding:7px}.notification-channel-card{padding:8px}
}

#obsl-toast-stack{
  position:fixed;left:50%;bottom:max(62px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:12050;
  width:100vw;max-height:min(72vh,620px);overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:7px;align-items:center;pointer-events:none;padding:4px 6px;
  box-sizing:border-box;scrollbar-width:thin;
}
.obsl-toast-item{
  position:relative;pointer-events:auto;width:auto;max-width:calc(100vw - 12px);min-width:160px;min-height:42px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:flex-start;overflow:hidden;white-space:nowrap!important;
  border:1px solid var(--line);border-radius:13px;background:var(--panel);box-shadow:0 5px 16px rgba(0,0,0,.15);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.obsl-toast-item.no-frame{border:0;box-shadow:none;background:transparent}
.obsl-toast-item-track{
  display:inline-block;flex:0 0 auto;width:max-content;max-width:none;white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;
  line-height:1.15;padding:9px 14px;font-size:clamp(12px,1.35vw,17px);font-weight:650;text-align:left;
  will-change:transform;transform:translateX(0);font-variant-numeric:tabular-nums;
}
.obsl-toast-item-track .obsl-notify-tag{font-weight:900!important;white-space:nowrap!important}
.obsl-notify-tag-blink,.statusbar-notify-tag-blink{animation:obslTagBlink .72s steps(2,end) infinite!important}
.obsl-toast-whole-blink{animation:obslTagBlink .72s steps(2,end) infinite!important}
.obsl-toast-css-rtl{animation:obslToastRtl var(--toast-duration,10s) linear forwards}
.obsl-toast-css-ltr{animation:obslToastLtr var(--toast-duration,10s) linear forwards}
@keyframes obslTagBlink{50%{opacity:.18}}
@keyframes obslToastRtl{from{transform:translateX(var(--toast-from,0px))}to{transform:translateX(var(--toast-to,-100%))}}
@keyframes obslToastLtr{from{transform:translateX(var(--toast-from,0px))}to{transform:translateX(var(--toast-to,100%))}}
@media(max-width:640px){
  #obsl-toast-stack{bottom:max(56px,env(safe-area-inset-bottom));gap:5px;padding-inline:4px}
  .obsl-toast-item{max-width:calc(100vw - 8px);min-width:150px;min-height:38px;border-radius:10px}
  .obsl-toast-item-track{padding:7px 10px;font-size:12px}
}

.event-notification-rule-list{display:grid;gap:9px;min-width:0;max-width:100%;overflow:hidden}
.event-notification-rule-row{
  display:grid;grid-template-columns:minmax(120px,1fr) 74px minmax(110px,auto) auto;
  grid-template-areas:"tag color blink del" "toast toast toast toast" "push push push push";
  gap:7px;align-items:end;border:1px solid var(--line);border-radius:10px;padding:9px;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden;
}
.event-notification-rule-row label{display:grid;gap:4px;min-width:0;max-width:100%;font-size:10px;font-weight:800}
.event-notification-rule-row input{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.event-notification-rule-row input[type=color]{min-height:34px;padding:2px}
.event-rule-tag{grid-area:tag}.event-rule-color{grid-area:color}.event-rule-check{grid-area:blink}.event-rule-delete{grid-area:del}.event-rule-toast{grid-area:toast}.event-rule-push{grid-area:push}
.event-rule-check{align-self:center!important;display:flex!important;align-items:center;gap:5px;white-space:nowrap}
.event-rule-check input{width:auto!important;flex:0 0 auto}
.event-rule-delete{min-width:56px;max-width:100%;align-self:end}
.event-notification-add{margin-top:8px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;min-width:0}
.event-notification-add input{min-width:0;width:100%;box-sizing:border-box}
@media(max-width:700px){
 .event-notification-rule-row{grid-template-columns:minmax(0,1fr) 68px;grid-template-areas:"tag color" "blink del" "toast toast" "push push"}
 .event-rule-delete{width:100%}.event-rule-check{min-height:34px}
}
@media(max-width:430px){
 .event-notification-rule-row{padding:7px;gap:6px;grid-template-columns:minmax(0,1fr) 58px}
 .event-notification-rule-row label{font-size:9px}.event-notification-add{grid-template-columns:1fr}.event-notification-add button{width:100%}
}

.statusbar-notification-window{display:block;min-width:0;width:100%;overflow:hidden;white-space:nowrap;height:1.35em;line-height:1.35em;position:relative}
.statusbar-notification-window[hidden]{display:none!important}
.statusbar-notification-track{position:absolute;left:0;top:0;width:max-content;max-width:none;white-space:nowrap;font:inherit;font-weight:750;will-change:transform;transform:translateX(100%)}
.statusbar-notify-tag{font-weight:900;color:#d32f2f;white-space:nowrap}
.obsl-statusbar.notification-mode{grid-template-columns:max-content minmax(0,1fr) max-content!important}
.obsl-statusbar.notification-mode .obsl-statusbar-left{max-width:44vw!important;min-width:0!important;overflow:hidden!important}
.obsl-statusbar.notification-mode .obsl-statusbar-center{justify-content:stretch!important;overflow:hidden!important;padding-inline:5px!important;min-width:0!important}
.obsl-statusbar.notification-mode #statusbar-clock{display:none!important}
.obsl-statusbar.notification-mode .statusbar-weather-leading-dot,
.obsl-statusbar.notification-mode #statusbar-weather-motion{display:none!important}
.obsl-statusbar.notification-mode .obsl-statusbar-right{padding-left:3px!important;padding-right:4px!important;gap:clamp(4px,.7vw,9px)!important;overflow:visible!important;white-space:nowrap!important}
.obsl-statusbar.notification-mode .statusbar-runtime-item{max-width:none!important;flex:0 0 auto!important}
.statusbar-notification-hint{grid-column:1/-1}
@media(max-width:640px){
 .obsl-statusbar.notification-mode{grid-template-columns:max-content minmax(0,1fr) max-content!important}
 .obsl-statusbar.notification-mode .obsl-statusbar-left{max-width:36vw!important}
 .obsl-statusbar.notification-mode .statusbar-title{max-width:27vw!important;text-overflow:ellipsis!important;overflow:hidden!important}
 .statusbar-notification-track{font-size:inherit}
}

#obsl-toast-stack{
  gap:5px!important;
  padding:2px 4px!important;
  max-height:min(68vh,560px)!important;
}
.obsl-toast-item{
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  border-radius:10px!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:0!important;
}
.obsl-toast-item-track{
  padding:5px 10px!important;
  line-height:1.05!important;
  font-size:clamp(11px,1.2vw,16px)!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
}
.statusbar-notification-track{font-family:var(--stt-notification-font,var(--stt-font))!important}
@media(max-width:640px){
  #obsl-toast-stack{gap:4px!important;padding:2px!important}
  .obsl-toast-item{border-radius:8px!important;max-width:calc(100vw - 6px)!important}
  .obsl-toast-item-track{padding:4px 8px!important;font-size:11.5px!important;line-height:1.02!important}
}

#obsl-toast-stack{
  width:100vw!important;
  max-width:100vw!important;
  gap:4px!important;
  padding:2px 3px!important;
}
.obsl-toast-item{
  width:fit-content;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  max-width:calc(100vw - 8px)!important;
  padding:0!important;
  border-radius:8px!important;
  line-height:1!important;
}
.obsl-toast-item-track{
  display:inline-block!important;
  width:max-content!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  padding:3px 8px!important;
  margin:0!important;
  line-height:1.08!important;
  font-size:clamp(11px,1.15vw,15px)!important;
  white-space:nowrap!important;
}

.statusbar-notification-window{height:1.2em!important;line-height:1.2em!important}
.statusbar-notification-track{top:0!important;line-height:1.2em!important}
@media(max-width:640px){
  #obsl-toast-stack{gap:3px!important;padding:1px 2px!important}
  .obsl-toast-item{max-width:calc(100vw - 4px)!important;border-radius:7px!important}
  .obsl-toast-item-track{padding:3px 7px!important;font-size:11px!important;line-height:1.05!important}
  
  
}

.birthday-event-panel{grid-template-columns:28px minmax(0,1fr) auto!important;gap:4px!important;padding:6px 8px!important;min-height:46px!important}
.birthday-event-label{width:28px!important;min-width:28px!important;height:28px!important;font-size:18px!important}
.birthday-event-window{height:30px!important}
.birthday-event-actions{justify-content:flex-start!important;gap:2px!important;min-width:0!important}
.birthday-event-date-picker{width:112px!important;max-width:112px!important;height:30px!important;padding:2px 4px!important;margin-right:0!important;border-radius:8px!important}
.birthday-event-actions .section-admin-gear{width:30px!important;height:30px!important;min-width:30px!important}
@media(max-width:640px){
 .birthday-event-panel{grid-template-columns:24px minmax(0,1fr) auto!important;gap:3px!important;padding:6px!important}
 .birthday-event-label{width:24px!important;min-width:24px!important;height:24px!important;font-size:16px!important}
 .birthday-event-date-picker{width:102px!important;max-width:102px!important;height:28px!important;font-size:10px!important}
 .birthday-event-actions .section-admin-gear{width:28px!important;height:28px!important;min-width:28px!important}
}
.statusbar-title{font-family:var(--stt-title-font,var(--stt-font))!important}
.statusbar-notification-window,.statusbar-notification-track{min-width:0!important;display:block!important;overflow:hidden!important;white-space:nowrap!important}
.statusbar-notification-track{font-family:var(--stt-notification-font,var(--stt-font))!important}
.statusbar-notify-card{display:grid;grid-template-columns:minmax(0,1fr) 92px 78px;gap:6px;align-items:end;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.statusbar-notify-card strong{grid-column:1/-1;font-size:11px}
.statusbar-notify-card label{display:grid;gap:4px;font-size:10px;font-weight:700}
.statusbar-notify-admin-grid>.admin-hint{grid-column:1/-1}
@media(max-width:700px){.statusbar-notify-card{grid-template-columns:1fr}}

.obsl-toast-item{display:flex!important;align-items:stretch!important;overflow:hidden!important}
.obsl-toast-content{flex:1 1 auto;min-width:0;overflow:hidden;display:flex;align-items:center}
.obsl-toast-close{
  flex:0 0 24px;width:24px;min-width:24px;align-self:stretch;border:0;border-left:1px solid var(--line);
  background:transparent;color:inherit;font:700 16px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;cursor:pointer;touch-action:manipulation;
}
.obsl-toast-item.no-frame .obsl-toast-close{border-left:0}
.obsl-toast-close:active{transform:scale(.92)}
@media(max-width:640px){.obsl-toast-close{flex-basis:22px;width:22px;min-width:22px;font-size:15px}}
.statusbar-notify-card{grid-template-columns:minmax(0,1fr) 78px 70px minmax(112px,.7fr) minmax(112px,.7fr)!important;cursor:grab}
.statusbar-notify-card.is-dragging{opacity:.55;cursor:grabbing}
.statusbar-drag-handle{display:inline-block;cursor:grab;font-weight:900;margin-right:3px;user-select:none}
.statusbar-whole-blink{animation:statusbarWholeBlink .72s steps(2,end) infinite!important}
@keyframes statusbarWholeBlink{50%{opacity:.15}}
@media(max-width:900px){.statusbar-notify-card{grid-template-columns:1fr 82px 72px!important}.statusbar-notify-card label:nth-last-child(-n/**/+2){grid-column:auto}}
@media(max-width:620px){.statusbar-notify-card{grid-template-columns:1fr!important}}

#obsl-toast-stack{position:fixed!important;left:0!important;right:0!important;bottom:max(56px,env(safe-area-inset-bottom))!important;z-index:2147483200!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;pointer-events:none!important;width:100vw!important;max-width:100vw!important;padding:2px 3px!important;box-sizing:border-box!important}
.obsl-toast-item{display:flex!important;align-items:stretch!important;justify-content:flex-start!important;box-sizing:border-box!important;width:auto;min-width:174px!important;max-width:calc(100vw - 8px)!important;min-height:0!important;height:auto!important;padding:0!important;overflow:hidden!important;pointer-events:auto!important;border-radius:9px!important}
.obsl-toast-content{position:relative!important;display:block!important;flex:1 1 auto!important;min-width:0!important;overflow:hidden!important;white-space:nowrap!important}
.obsl-toast-item-track{position:relative!important;display:inline-block!important;width:max-content!important;max-width:none!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:5px 8px!important;white-space:nowrap!important;line-height:1.08!important;animation:none!important;will-change:transform!important}
.obsl-toast-close{position:relative!important;z-index:2!important;flex:0 0 25px!important;width:25px!important;min-width:25px!important;align-self:stretch!important;border:0!important;border-left:1px solid var(--line)!important;border-radius:0!important;background:var(--panel)!important;color:inherit!important;padding:0!important;margin:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
.obsl-toast-item.no-frame .obsl-toast-close{background:transparent!important;border-left:0!important}

.obsl-toast-item-track.obsl-toast-css-rtl,.obsl-toast-item-track.obsl-toast-css-ltr{animation:none!important}

.birthday-event-panel{grid-template-columns:24px minmax(0,1fr) auto!important;gap:3px!important;padding:5px 7px!important;min-height:44px!important}
.birthday-event-label{width:24px!important;min-width:24px!important;height:26px!important;font-size:17px!important}
.birthday-event-window{height:29px!important}
.birthday-event-actions{height:29px!important;gap:2px!important;margin:0!important}
.birthday-event-date-picker{box-sizing:border-box!important;width:100px!important;max-width:100px!important;height:29px!important;padding:1px 2px 1px 4px!important;margin:0!important;font-size:11px!important;letter-spacing:-.15px!important}
.birthday-event-date-picker::-webkit-calendar-picker-indicator{margin:0!important;padding:1px!important;width:15px!important;height:15px!important}
.birthday-event-actions .section-admin-gear{width:29px!important;height:29px!important;min-width:29px!important}

.statusbar-notification-window{position:relative!important;display:block!important;width:100%!important;min-width:0!important;overflow:hidden!important;white-space:nowrap!important}
.statusbar-notification-track{position:absolute!important;left:0!important;top:0!important;width:max-content!important;max-width:none!important;overflow:visible!important;white-space:nowrap!important;animation:none!important;will-change:transform!important}

#event-section-editor .event-admin-motion-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
#event-section-editor select,#event-section-editor input{max-width:100%!important;box-sizing:border-box!important}
@media(max-width:640px){
 .obsl-toast-item{min-width:154px!important;max-width:calc(100vw - 4px)!important}
 .obsl-toast-item-track{padding:4px 7px!important;font-size:11px!important}
 .obsl-toast-close{flex-basis:23px!important;width:23px!important;min-width:23px!important}
 .birthday-event-panel{grid-template-columns:22px minmax(0,1fr) auto!important;padding:5px!important;gap:2px!important}
 .birthday-event-label{width:22px!important;min-width:22px!important;font-size:16px!important}
 .birthday-event-date-picker{width:94px!important;max-width:94px!important;height:27px!important;font-size:10px!important;padding-left:3px!important}
 .birthday-event-actions .section-admin-gear{width:27px!important;height:27px!important;min-width:27px!important}
 #event-section-editor .event-admin-motion-grid{grid-template-columns:1fr!important}
}

#obsl-toast-stack{overflow:hidden!important;contain:layout style!important}
.obsl-toast-item{position:relative!important;left:auto!important;right:auto!important;margin-left:auto!important;margin-right:auto!important;touch-action:pan-y!important;max-width:calc(100vw - 8px)!important}
.obsl-toast-content{overflow:hidden!important}

#obsl-toast-stack{
  position:fixed!important;
  inset:auto 0 max(56px,env(safe-area-inset-bottom)) 0!important;
  width:100vw!important;
  max-width:100vw!important;
  margin:0!important;
  transform:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  overflow:hidden!important;
  pointer-events:none!important;
  box-sizing:border-box!important;
}
.obsl-toast-item{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
  flex:none!important;
  pointer-events:auto!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  touch-action:pan-y!important;
}
.obsl-toast-content{position:relative!important;min-width:0!important;overflow:hidden!important;contain:paint!important}
.obsl-toast-item-track{position:relative!important;left:0!important;right:auto!important;margin:0!important;white-space:nowrap!important}
.obsl-toast-item.is-swipe-detecting{cursor:grabbing}

/* ===== OBSLAPPClocks v3.0 FUNCTIONAL STABILITY — authoritative final rules ===== */
:root{--obsl-toast-fixed-width:min(560px,calc(100vw - 12px))}
#obsl-toast-stack{width:100vw!important;max-width:100vw!important;align-items:center!important;padding-inline:6px!important;overflow:hidden!important}
#obsl-toast-stack>.obsl-toast-item{
  width:var(--obsl-toast-fixed-width)!important;
  min-width:var(--obsl-toast-fixed-width)!important;
  max-width:var(--obsl-toast-fixed-width)!important;
  margin-left:auto!important;margin-right:auto!important;
  transform:none;
}
#obsl-toast-stack>.obsl-toast-item>.obsl-toast-content{width:auto!important;flex:1 1 auto!important;min-width:0!important;overflow:hidden!important}
#obsl-toast-stack>.obsl-toast-item>.obsl-toast-close{flex:0 0 28px!important;width:28px!important;min-width:28px!important}
@media(max-width:640px){
 :root{--obsl-toast-fixed-width:calc(100vw - 8px)}
 #obsl-toast-stack{padding-inline:4px!important}
 #obsl-toast-stack>.obsl-toast-item>.obsl-toast-close{flex-basis:26px!important;width:26px!important;min-width:26px!important}
}

/* Statusbar Notification editor: every per-category card uses the whole editor width. */
#statusbar-editor .statusbar-notify-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;min-width:0!important;overflow:hidden!important}
#statusbar-editor .statusbar-notify-admin-grid>.statusbar-notify-card,
#statusbar-editor .statusbar-notify-admin-grid>.statusbar-notification-hint,
#statusbar-editor .statusbar-notify-admin-grid>.admin-hint{grid-column:1/-1!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important}
#statusbar-editor .statusbar-notify-card{
 display:grid!important;
 grid-template-columns:minmax(180px,1.6fr) 84px 76px minmax(125px,1fr) minmax(125px,1fr)!important;
 gap:7px!important;align-items:end!important;overflow:hidden!important;
}
#statusbar-editor .statusbar-notify-card label,
#statusbar-editor .statusbar-notify-card input,
#statusbar-editor .statusbar-notify-card select{min-width:0!important;max-width:100%!important;box-sizing:border-box!important;width:100%!important}
#statusbar-editor .statusbar-notify-card input[type=color]{min-height:34px!important;padding:2px!important}
@media(max-width:900px){
 #statusbar-editor .statusbar-notify-card{grid-template-columns:minmax(0,1fr) 82px 72px!important}
 #statusbar-editor .statusbar-notify-card label:nth-of-type(4),#statusbar-editor .statusbar-notify-card label:nth-of-type(5){grid-column:auto!important}
}
@media(max-width:680px){
 #statusbar-editor .statusbar-notify-admin-grid{grid-template-columns:1fr!important}
 #statusbar-editor .statusbar-notify-card{grid-template-columns:1fr 72px!important}
 #statusbar-editor .statusbar-notify-card strong{grid-column:1/-1!important}
 #statusbar-editor .statusbar-notify-card label{grid-column:1/-1!important}
}
@media(max-width:460px){#statusbar-editor .statusbar-notify-card{grid-template-columns:1fr!important}#statusbar-editor .statusbar-notify-card label{grid-column:1!important}}

/* ===== OBSLAPPClocks v3.0.1 — notification compact width + admin refinements ===== */
:root{--obsl-toast-fixed-width:clamp(210px,42vw,340px);--obsl-toast-font-size:13px}
#obsl-toast-stack>.obsl-toast-item{
  width:var(--obsl-toast-fixed-width)!important;
  min-width:var(--obsl-toast-fixed-width)!important;
  max-width:var(--obsl-toast-fixed-width)!important;
}
#obsl-toast-stack>.obsl-toast-item>.obsl-toast-content{min-width:0!important;overflow:hidden!important}
#obsl-toast-stack>.obsl-toast-item .obsl-toast-item-track{
  font-size:var(--obsl-toast-font-size)!important;
  line-height:1.08!important;
  padding:5px 7px!important;
}
#obsl-toast-stack>.obsl-toast-item>.obsl-toast-close{flex:0 0 26px!important;width:26px!important;min-width:26px!important}
@media(max-width:640px){
 :root{--obsl-toast-fixed-width:clamp(210px,54vw,280px)}
 #obsl-toast-stack{padding-inline:3px!important}
 #obsl-toast-stack>.obsl-toast-item>.obsl-toast-close{flex-basis:24px!important;width:24px!important;min-width:24px!important}
}
@media(max-width:340px){:root{--obsl-toast-fixed-width:210px}}
.statusbar-custom-apply{grid-column:1/-1!important;width:100%!important;margin-top:2px!important}
.google-calendar-admin-config .google-calendar-wide{grid-column:1/-1!important;width:100%!important;min-width:0!important}
.google-calendar-admin-config .google-calendar-wide input{width:100%!important;min-width:0!important;box-sizing:border-box!important}
#birthday-event-editor{display:none!important}


/* ===== OBSLAPPClocks v3.0 hotfix 2026-08-15.3 ===== */
/* Event ticker must inherit the Admin-selected Font/Cỡ from .upcoming-box. */
.upcoming-box .upcoming-slide{
  font-family:inherit!important;
  font-size:inherit!important;
}
/* Google Calendar: independent visible border on every viewport. */
.event-frame .calendar-ticker{
  border:2px solid var(--line)!important;
  border-radius:10px!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 5%,transparent)!important;
  padding:3px 6px!important;
  background:var(--panel)!important;
}
@supports not (color:color-mix(in srgb,black 50%,white)){
  .event-frame .calendar-ticker{box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)!important}
}
/* Weather settings remain available in Tools; remove the pencil from current weather card. */
#weather-admin-editor{display:none!important;visibility:hidden!important}
.now-panel{padding-bottom:10px!important}


/* ===== OBSL v3.0 APK-ready weather responsive hotfix ===== */
.now-panel{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(150px,.9fr) minmax(220px,1.1fr)!important;
  grid-template-areas:"temp summary" "updated updated"!important;
  align-items:center!important;
  gap:clamp(8px,1.4vw,18px)!important;
  padding:clamp(12px,1.8vw,20px)!important;
  padding-bottom:clamp(12px,1.8vw,20px)!important;
  min-width:0!important;
}
.now-panel .temperature{grid-area:temp!important;min-width:0!important;text-align:center!important;font-size:clamp(58px,8.2vw,108px)!important;line-height:.9!important}
.now-panel .weather-summary{grid-area:summary!important;min-width:0!important;align-self:center!important}
.now-panel .weather-desc{font-size:clamp(18px,2.1vw,28px)!important;line-height:1.15!important;overflow-wrap:anywhere!important}
.now-panel .weather-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(5px,.8vw,10px) clamp(8px,1.4vw,20px)!important;min-width:0!important}
.now-panel .weather-meta span{min-width:0!important;white-space:normal!important;line-height:1.25!important}
.now-panel .weather-updated-status{
  grid-area:updated!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:100%!important;
  margin:2px 0 0!important;
  padding:0!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:clamp(9px,1.2vw,12px)!important;
  line-height:1.2!important;
}
/* Weather editor pencil is intentionally hidden; configuration remains in Tools/Admin. */
#weather-admin-editor{display:none!important;visibility:hidden!important;pointer-events:none!important}
@media(max-width:760px){
  .weather-grid{grid-template-columns:1fr!important}
  .now-panel{grid-template-columns:minmax(120px,.82fr) minmax(170px,1.18fr)!important;gap:8px!important;padding:11px!important}
  .now-panel .temperature{font-size:clamp(54px,18vw,88px)!important}
  .now-panel .weather-desc{font-size:clamp(17px,5vw,24px)!important}
  .now-panel .weather-meta{font-size:clamp(12px,3.4vw,15px)!important;gap:6px 9px!important}
}
@media(max-width:430px){
  .now-panel{grid-template-columns:1fr!important;grid-template-areas:"temp" "summary" "updated"!important;text-align:center!important}
  .now-panel .temperature{font-size:clamp(68px,26vw,104px)!important}
  .now-panel .weather-summary{text-align:center!important}
  .now-panel .weather-meta{max-width:330px!important;margin:8px auto 0!important;text-align:left!important}
  .now-panel .weather-updated-status{white-space:normal!important}
}


/* ===== OBSL v3.0 weather balance + larger status/icon ===== */
.now-panel .weather-summary{display:grid!important;grid-template-rows:auto auto!important;gap:clamp(10px,1.2vw,16px)!important;width:100%!important;min-width:0!important}
.now-panel .weather-desc{font-size:clamp(22px,2.5vw,34px)!important;font-weight:900!important;line-height:1.12!important;text-align:center!important;white-space:normal!important}
.now-panel .weather-meta{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(34px,auto)!important;gap:clamp(8px,1vw,14px) clamp(12px,1.6vw,24px)!important;width:100%!important;margin:0!important;font-size:clamp(15px,1.55vw,20px)!important;align-items:center!important}
.now-panel .weather-meta span{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:8px!important;width:100%!important;min-width:0!important;padding:2px 0!important;line-height:1.25!important;white-space:nowrap!important}
.now-panel .weather-meta b{font-size:1.08em!important;flex:0 0 auto!important}
@media(min-width:1200px){
  .now-panel .weather-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .now-panel .weather-desc{font-size:clamp(21px,5.8vw,30px)!important}
  .now-panel .weather-meta{font-size:clamp(14px,3.9vw,18px)!important;gap:8px 14px!important}
}
@media(max-width:430px){
  .now-panel .weather-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:100%!important;margin:6px 0 0!important;text-align:initial!important;gap:8px 10px!important}
  .now-panel .weather-meta span{white-space:normal!important;align-items:center!important}
}

/* ===== OBSL v3.0.20260815.7 — restore classic weather layout, reserve update row ===== */
.now-panel{
  position:relative!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  grid-template-areas:"temp summary"!important;
  align-items:center!important;
  column-gap:clamp(12px,1.5vw,20px)!important;
  row-gap:0!important;
  padding:clamp(12px,1.7vw,18px)!important;
  padding-bottom:52px!important;
  min-width:0!important;
}
.now-panel .temperature{
  grid-area:temp!important;
  min-width:0!important;
  text-align:left!important;
  font-size:clamp(58px,9vw,110px)!important;
  line-height:.9!important;
}
.now-panel .weather-summary{
  grid-area:summary!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  align-self:center!important;
  transform:translateY(-10px)!important;
}
.now-panel .weather-desc{
  font-size:clamp(20px,2.2vw,30px)!important;
  font-weight:900!important;
  line-height:1.1!important;
  text-align:left!important;
  white-space:normal!important;
  margin:0 0 10px!important;
}
.now-panel .weather-meta{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px clamp(12px,1.6vw,24px)!important;
  width:100%!important;
  margin:0!important;
  font-size:clamp(14px,1.5vw,19px)!important;
  align-items:center!important;
}
.now-panel .weather-meta span{
  display:block!important;
  min-width:0!important;
  padding:0!important;
  line-height:1.25!important;
  white-space:nowrap!important;
}
.now-panel .weather-meta b{font-size:1.08em!important;color:var(--text)!important}
.now-panel .weather-updated-status{
  position:absolute!important;
  left:12px!important;
  right:12px!important;
  bottom:10px!important;
  transform:none!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:clamp(10px,1.15vw,12px)!important;
  line-height:1.2!important;
  z-index:2!important;
}
#weather-admin-editor{display:none!important;visibility:hidden!important;pointer-events:none!important}
@media(max-width:760px){
  .weather-grid{grid-template-columns:1fr!important}
  .now-panel{grid-template-columns:auto minmax(0,1fr)!important;padding-bottom:48px!important;column-gap:10px!important}
  .now-panel .temperature{font-size:clamp(56px,18vw,90px)!important}
  .now-panel .weather-summary{transform:translateY(-8px)!important}
  .now-panel .weather-desc{font-size:clamp(18px,5vw,25px)!important;margin-bottom:8px!important}
  .now-panel .weather-meta{font-size:clamp(12px,3.5vw,16px)!important;gap:7px 12px!important}
}
@media(max-width:430px){
  .now-panel{grid-template-columns:minmax(112px,.85fr) minmax(0,1.15fr)!important;grid-template-areas:"temp summary"!important;text-align:left!important;padding:10px 10px 46px!important}
  .now-panel .temperature{font-size:clamp(54px,20vw,82px)!important;text-align:left!important}
  .now-panel .weather-summary{text-align:left!important;transform:translateY(-7px)!important}
  .now-panel .weather-desc{font-size:clamp(17px,5vw,23px)!important;text-align:left!important}
  .now-panel .weather-meta{grid-template-columns:1fr 1fr!important;font-size:clamp(11px,3.2vw,14px)!important;gap:6px 8px!important}
  .now-panel .weather-meta span{white-space:normal!important}
  .now-panel .weather-updated-status{left:8px!important;right:8px!important;bottom:8px!important;font-size:9px!important}
}

/* ===== OBSL v3.0.20260815.7 — CLASSIC WEATHER ONLY + Toast Icon + Popup ===== */
/* Keep the original classic weather composition: big temperature left, condition/meta right,
   update line reserved at the bottom. No alternative stacked redesign. */
.now-panel{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(118px,.86fr) minmax(190px,1.14fr)!important;
  grid-template-areas:"temp summary"!important;
  align-items:center!important;
  column-gap:clamp(10px,1.35vw,18px)!important;
  padding:clamp(12px,1.55vw,18px)!important;
  padding-bottom:clamp(62px,7vw,78px)!important;
  min-width:0!important;
  overflow:hidden!important;
}
.now-panel .temperature{
  grid-area:temp!important;
  align-self:center!important;
  text-align:center!important;
  font-size:clamp(62px,9vw,112px)!important;
  line-height:.86!important;
  margin:0!important;
}
.now-panel .weather-summary{
  grid-area:summary!important;
  display:block!important;
  min-width:0!important;
  width:100%!important;
  align-self:center!important;
  transform:translateY(-16px)!important;
}
.now-panel .weather-desc{
  margin:0 0 clamp(10px,1vw,14px)!important;
  font-size:clamp(21px,2.3vw,31px)!important;
  line-height:1.08!important;
  font-weight:900!important;
  text-align:left!important;
  white-space:normal!important;
}
.now-panel .weather-meta{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(8px,1vw,12px) clamp(14px,1.5vw,22px)!important;
  width:100%!important;
  margin:0!important;
  font-size:clamp(14px,1.45vw,19px)!important;
}
.now-panel .weather-meta span{
  display:block!important;
  min-width:0!important;
  line-height:1.22!important;
  white-space:nowrap!important;
}
.now-panel .weather-meta b{font-size:1.08em!important;font-weight:900!important}
.now-panel .weather-updated-status{
  position:absolute!important;
  left:12px!important;right:12px!important;bottom:14px!important;
  width:auto!important;margin:0!important;padding:0!important;
  text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  font-size:clamp(10px,1.15vw,13px)!important;line-height:1.2!important;
}
@media(max-width:900px){
  .now-panel{grid-template-columns:minmax(112px,.82fr) minmax(170px,1.18fr)!important;padding-bottom:62px!important;column-gap:9px!important}
  .now-panel .temperature{font-size:clamp(58px,12vw,92px)!important}
  .now-panel .weather-summary{transform:translateY(-14px)!important}
  .now-panel .weather-desc{font-size:clamp(18px,3.2vw,25px)!important;margin-bottom:9px!important}
  .now-panel .weather-meta{font-size:clamp(12px,2.2vw,16px)!important;gap:7px 10px!important}
}
@media(max-width:560px){
  .weather-grid{grid-template-columns:1fr!important}
  .now-panel{grid-template-columns:minmax(105px,.8fr) minmax(0,1.2fr)!important;padding:10px 10px 58px!important;column-gap:8px!important}
  .now-panel .temperature{font-size:clamp(54px,19vw,84px)!important;text-align:center!important}
  .now-panel .weather-summary{transform:translateY(-12px)!important}
  .now-panel .weather-desc{font-size:clamp(17px,5vw,23px)!important;margin-bottom:8px!important}
  .now-panel .weather-meta{font-size:clamp(11px,3.2vw,14px)!important;gap:6px 8px!important}
  .now-panel .weather-meta span{white-space:normal!important}
  .now-panel .weather-updated-status{left:8px!important;right:8px!important;bottom:10px!important;font-size:9.5px!important}
}
#weather-admin-editor{display:none!important;visibility:hidden!important;pointer-events:none!important}

/* Fixed Toast icon lane. Icon never participates in marquee. */
.obsl-toast-item{display:flex!important;align-items:stretch!important}
.obsl-toast-icon-lane{flex:0 0 calc(var(--obsl-toast-icon-size,24px) + 10px)!important;width:calc(var(--obsl-toast-icon-size,24px) + 10px)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;padding-left:5px!important;box-sizing:border-box!important}
.obsl-toast-icon-lane[hidden]{display:none!important}
.obsl-toast-fixed-icon{width:var(--obsl-toast-icon-size,24px)!important;height:var(--obsl-toast-icon-size,24px)!important;object-fit:cover!important;border-radius:5px!important;display:block!important;flex:none!important}
.obsl-toast-content{flex:1 1 auto!important;min-width:0!important;overflow:hidden!important}
.obsl-toast-close{flex:none!important}

/* Tools: script editors */
#script-tools-group textarea,#popup-tools-group textarea{width:100%!important;min-height:90px!important;resize:vertical!important;box-sizing:border-box!important;font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace!important}
#popup-tools-group input,#popup-tools-group select,#script-tools-group input{max-width:100%!important;box-sizing:border-box!important}

/* Public popup runtime */
#obsl-popup-layer{position:fixed;inset:0;z-index:2147482500;pointer-events:none;display:flex;padding:12px;box-sizing:border-box}
#obsl-popup-layer.has-backdrop{background:rgba(0,0,0,.34);pointer-events:auto}
#obsl-popup-layer.pos-center{align-items:center;justify-content:center}
#obsl-popup-layer.pos-top{align-items:flex-start;justify-content:center}
#obsl-popup-layer.pos-bottom{align-items:flex-end;justify-content:center}
#obsl-popup-layer.pos-bottom-right{align-items:flex-end;justify-content:flex-end}
#obsl-popup-layer.pos-bottom-left{align-items:flex-end;justify-content:flex-start}
.obsl-popup-card{position:relative;width:min(var(--popup-width,420px),calc(100vw - 24px));max-height:min(82vh,720px);overflow:auto;background:var(--panel,#fff);color:var(--text,#111);border:1px solid var(--line,#ccc);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.24);padding:16px;pointer-events:auto;box-sizing:border-box}
.obsl-popup-card.type-promotion{border-width:2px}.obsl-popup-card.type-notification{border-left-width:5px}
.obsl-popup-card h3{margin:0 34px 10px 0;font-size:1.25em}.obsl-popup-image{display:block;max-width:100%;max-height:280px;object-fit:contain;margin:0 auto 12px;border-radius:10px}.obsl-popup-content{line-height:1.5;overflow-wrap:anywhere}.obsl-popup-close{position:absolute;right:7px;top:7px;width:30px;height:30px;border:1px solid var(--line,#ccc);border-radius:50%;background:var(--panel,#fff);font-size:20px;cursor:pointer}.obsl-popup-action{display:inline-flex;margin-top:12px;padding:9px 14px;border-radius:9px;text-decoration:none;background:#1769d1;color:#fff;font-weight:800}
.obsl-popup-card.effect-fade{animation:obslPopupFade .22s ease-out}.obsl-popup-card.effect-scale{animation:obslPopupScale .22s ease-out}.obsl-popup-card.effect-slide-up{animation:obslPopupSlide .25s ease-out}
@keyframes obslPopupFade{from{opacity:0}to{opacity:1}}@keyframes obslPopupScale{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}@keyframes obslPopupSlide{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media(max-width:520px){.obsl-popup-card{padding:13px;border-radius:11px}.obsl-popup-card h3{font-size:1.12em}}

/* ===== OBSLAPPClocks v3.0 — FINAL CLASSIC WEATHER + DETACHED TOAST ICON HOTFIX ===== */
/* Weather: preserve the classic composition. The update row is normal document flow, never absolute. */
.now-panel{
  position:relative!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  grid-template-areas:"temp summary" "updated updated"!important;
  align-items:center!important;
  gap:clamp(10px,1.4vw,18px) clamp(12px,1.8vw,24px)!important;
  padding:clamp(12px,1.55vw,18px)!important;
  overflow:hidden!important;
  min-width:0!important;
}
.now-panel .temperature{
  grid-area:temp!important;
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
  text-align:center!important;
  font-size:clamp(62px,9vw,112px)!important;
  line-height:.88!important;
}
.now-panel .weather-summary{
  grid-area:summary!important;
  align-self:center!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  transform:none!important;
  text-align:left!important;
}
.now-panel .weather-desc{
  margin:0 0 clamp(8px,1vw,12px)!important;
  text-align:left!important;
  font-size:clamp(20px,2.25vw,31px)!important;
  line-height:1.1!important;
  font-weight:900!important;
  white-space:normal!important;
}
.now-panel .weather-meta{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(7px,.9vw,11px) clamp(12px,1.5vw,22px)!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  font-size:clamp(14px,1.45vw,19px)!important;
  color:var(--muted)!important;
}
.now-panel .weather-meta span{
  display:block!important;
  min-width:0!important;
  padding:0!important;
  line-height:1.22!important;
  white-space:nowrap!important;
}
.now-panel .weather-meta b{font-size:1.08em!important;font-weight:900!important;color:var(--text)!important}
.now-panel .weather-updated-status{
  grid-area:updated!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:100%!important;
  margin:clamp(3px,.55vw,7px) 0 0!important;
  padding:0!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:clamp(10px,1.12vw,13px)!important;
  line-height:1.25!important;
  z-index:auto!important;
}
#weather-admin-editor{display:none!important;visibility:hidden!important;pointer-events:none!important}

/* Old portrait/tablet appearance from the user's reference: centered temperature, condition and stats below. */
@media(max-width:1100px){
  .now-panel{
    grid-template-columns:1fr!important;
    grid-template-areas:"temp" "summary" "updated"!important;
    row-gap:clamp(8px,1.2vw,14px)!important;
    text-align:center!important;
    padding:clamp(12px,2vw,20px)!important;
  }
  .now-panel .temperature{
    font-size:clamp(76px,18vw,150px)!important;
    text-align:center!important;
  }
  .now-panel .weather-summary{
    text-align:center!important;
  }
  .now-panel .weather-desc{
    text-align:center!important;
    font-size:clamp(22px,4.6vw,34px)!important;
    margin-bottom:clamp(10px,1.6vw,16px)!important;
  }
  .now-panel .weather-meta{
    max-width:min(720px,92%)!important;
    margin:0 auto!important;
    font-size:clamp(15px,2.7vw,23px)!important;
    gap:clamp(8px,1.4vw,15px) clamp(18px,4vw,54px)!important;
    text-align:left!important;
  }
  .now-panel .weather-meta span{white-space:nowrap!important}
  .now-panel .weather-updated-status{
    margin-top:clamp(6px,1.2vw,12px)!important;
    font-size:clamp(10px,2vw,14px)!important;
  }
}
@media(max-width:560px){
  .weather-grid{grid-template-columns:1fr!important}
  .now-panel{padding:12px 10px!important;row-gap:8px!important}
  .now-panel .temperature{font-size:clamp(72px,27vw,116px)!important}
  .now-panel .weather-desc{font-size:clamp(20px,7vw,28px)!important;margin-bottom:10px!important}
  .now-panel .weather-meta{
    max-width:96%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    font-size:clamp(13px,4.2vw,17px)!important;
    gap:8px 14px!important;
  }
  .now-panel .weather-meta span{white-space:normal!important}
  .now-panel .weather-updated-status{font-size:10px!important;white-space:nowrap!important;margin-top:7px!important}
}
@media(max-width:360px){
  .now-panel .temperature{font-size:clamp(66px,25vw,94px)!important}
  .now-panel .weather-meta{font-size:12px!important;gap:6px 9px!important}
  .now-panel .weather-updated-status{font-size:9px!important}
}

/* Toast icon is visually outside the Toast frame and is removed from layout sizing.
   Increasing icon size never changes the frame width/height or marquee lane. */
#obsl-toast-stack{overflow:visible!important}
#obsl-toast-stack>.obsl-toast-item{
  position:relative!important;
  overflow:visible!important;
  align-items:center!important;
  width:var(--obsl-toast-fixed-width)!important;
  min-width:var(--obsl-toast-fixed-width)!important;
  max-width:var(--obsl-toast-fixed-width)!important;
}
#obsl-toast-stack>.obsl-toast-item>.obsl-toast-icon-lane{
  position:absolute!important;
  right:calc(100% + 8px)!important;
  left:auto!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:var(--obsl-toast-icon-size,24px)!important;
  height:var(--obsl-toast-icon-size,24px)!important;
  min-width:0!important;
  flex:none!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:none!important;
  z-index:3!important;
}
#obsl-toast-stack>.obsl-toast-item>.obsl-toast-icon-lane[hidden]{display:none!important}
#obsl-toast-stack>.obsl-toast-item>.obsl-toast-icon-lane>.obsl-toast-fixed-icon{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  display:block!important;
}
#obsl-toast-stack>.obsl-toast-item>.obsl-toast-content{
  position:relative!important;
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  align-self:stretch!important;
}
#obsl-toast-stack>.obsl-toast-item>.obsl-toast-close{align-self:stretch!important}
@media(max-width:640px){
  /* keep enough left safe-area for a 48px detached icon while preserving the frame size itself */
  #obsl-toast-stack{padding-left:58px!important;padding-right:4px!important;box-sizing:border-box!important}
}


/* ===== v3.0 Weather alignment + Popup close HOTFIX ===== */
@media(max-width:1100px){
  .weather-grid{width:100%!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important}
  .now-panel{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"temp" "summary" "updated"!important;
    justify-items:center!important;
    align-items:center!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding:clamp(16px,2.4vw,26px) clamp(18px,4vw,42px) clamp(14px,2vw,22px)!important;
    margin:0!important;
    row-gap:clamp(7px,1.2vw,12px)!important;
    text-align:center!important;
  }
  .now-panel .temperature{
    grid-area:temp!important;width:100%!important;margin:0!important;padding:0!important;
    text-align:center!important;justify-self:center!important;transform:none!important;
    font-size:clamp(76px,18vw,150px)!important;line-height:.94!important;
  }
  .now-panel .weather-summary{
    grid-area:summary!important;width:min(100%,760px)!important;max-width:760px!important;
    margin:0 auto!important;padding:0!important;transform:none!important;text-align:center!important;
    justify-self:center!important;box-sizing:border-box!important;
  }
  .now-panel .weather-desc{
    width:100%!important;margin:0 auto clamp(9px,1.5vw,14px)!important;text-align:center!important;
    font-size:clamp(22px,4.7vw,35px)!important;line-height:1.08!important;
  }
  .now-panel .weather-meta{
    display:grid!important;grid-template-columns:1fr 1fr!important;
    width:min(100%,700px)!important;max-width:700px!important;margin:0 auto!important;
    padding:0!important;box-sizing:border-box!important;
    column-gap:clamp(24px,6vw,76px)!important;row-gap:clamp(8px,1.4vw,14px)!important;
    font-size:clamp(15px,2.8vw,23px)!important;text-align:left!important;
  }
  .now-panel .weather-meta span{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    align-items:baseline!important;gap:8px!important;min-width:0!important;width:100%!important;
    margin:0!important;padding:0!important;line-height:1.25!important;white-space:nowrap!important;
  }
  .now-panel .weather-updated-status{
    grid-area:updated!important;position:static!important;inset:auto!important;transform:none!important;
    width:100%!important;max-width:760px!important;justify-self:center!important;
    margin:clamp(5px,1vw,9px) auto 0!important;padding:0!important;box-sizing:border-box!important;
    text-align:center!important;line-height:1.3!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    font-size:clamp(10px,2vw,14px)!important;
  }
}
@media(max-width:560px){
  .now-panel{padding:13px 14px 12px!important;row-gap:7px!important}
  .now-panel .temperature{font-size:clamp(70px,26vw,112px)!important}
  .now-panel .weather-summary{width:100%!important;max-width:100%!important}
  .now-panel .weather-desc{font-size:clamp(20px,7vw,28px)!important;margin-bottom:9px!important}
  .now-panel .weather-meta{width:100%!important;max-width:100%!important;column-gap:16px!important;row-gap:7px!important;font-size:clamp(12px,4vw,16px)!important}
  .now-panel .weather-meta span{gap:5px!important;white-space:nowrap!important}
  .now-panel .weather-updated-status{width:100%!important;max-width:100%!important;font-size:10px!important;margin-top:6px!important}
}
@media(max-width:360px){
  .now-panel{padding-inline:10px!important}
  .now-panel .weather-meta{column-gap:10px!important;font-size:11px!important}
  .now-panel .weather-meta span{gap:3px!important}
  .now-panel .weather-updated-status{font-size:9px!important}
}

/* Widget Popup close: tiny, borderless, transparent, shadowless. */
.obsl-popup-close{
  position:absolute!important;right:8px!important;top:7px!important;
  width:auto!important;height:auto!important;min-width:18px!important;min-height:18px!important;
  padding:1px 3px!important;margin:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;outline:none!important;
  color:inherit!important;font:700 18px/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;z-index:3!important;
}
.obsl-popup-close:hover,.obsl-popup-close:focus{background:transparent!important;box-shadow:none!important;border:0!important}
.obsl-popup-close img{display:block!important;width:18px!important;height:18px!important;object-fit:contain!important;border:0!important;background:transparent!important}


/* ===== v3.0.20260815.9 Toast rounded close + WebPush admin ===== */
#obsl-toast-stack>.obsl-toast-item>.obsl-toast-close{
  align-self:stretch!important;
  border-radius:0 9px 9px 0!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
#obsl-toast-stack>.obsl-toast-item.no-frame>.obsl-toast-close{border-radius:9px!important}
@media(max-width:640px){#obsl-toast-stack>.obsl-toast-item>.obsl-toast-close{border-radius:0 8px 8px 0!important}}
#notification-tools-group .admin-actions-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#notification-tools-group .admin-actions-row>.system-menu-button{flex:0 1 auto}
@media(max-width:620px){#notification-tools-group .admin-actions-row>.system-menu-button{flex:1 1 100%}}


/* =====================================================================
   v3.0.20260815.10 — FINAL CURRENT WEATHER LAYOUT
   One authoritative responsive layout. This block intentionally overrides
   all previous Weather hotfixes without changing the visual language.
   ===================================================================== */
.location-row{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  padding:0 clamp(8px,1.4vw,18px)!important;
  box-sizing:border-box!important;
}
.location-row .location-status,
#location-status{
  min-width:0!important;
  margin:8px 0 7px!important;
  text-align:center!important;
  font-size:clamp(22px,2.25vw,34px)!important;
  font-weight:900!important;
  line-height:1.12!important;
  letter-spacing:-.01em!important;
  overflow-wrap:anywhere!important;
}

.weather-grid{
  display:grid!important;
  grid-template-columns:minmax(380px,.92fr) minmax(0,1.58fr)!important;
  align-items:stretch!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.weather-grid > *{min-width:0!important;box-sizing:border-box!important}

.now-panel{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(150px,.82fr) minmax(205px,1.18fr)!important;
  grid-template-areas:"temp summary" "updated updated"!important;
  align-items:center!important;
  justify-items:stretch!important;
  column-gap:clamp(10px,1.2vw,20px)!important;
  row-gap:7px!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  padding:clamp(12px,1.25vw,18px) clamp(12px,1.35vw,20px) 10px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.now-panel .temperature{
  grid-area:temp!important;
  align-self:center!important;
  justify-self:center!important;
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  text-align:center!important;
  font-size:clamp(64px,6.4vw,102px)!important;
  line-height:.88!important;
  letter-spacing:-.06em!important;
  white-space:nowrap!important;
}
.now-panel .weather-summary{
  grid-area:summary!important;
  align-self:center!important;
  justify-self:stretch!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  text-align:left!important;
}
.now-panel .weather-desc{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  margin:0 0 9px!important;
  padding:0!important;
  text-align:left!important;
  font-size:clamp(21px,2.05vw,30px)!important;
  font-weight:900!important;
  line-height:1.08!important;
  white-space:normal!important;
}
.now-panel .weather-desc img,
.now-panel .weather-desc .weather-icon{width:1.15em!important;height:1.15em!important;object-fit:contain!important;flex:0 0 auto!important;vertical-align:middle!important}
.now-panel .weather-meta{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  column-gap:clamp(12px,1.6vw,24px)!important;
  row-gap:7px!important;
  color:var(--muted)!important;
  font-size:clamp(14px,1.28vw,18px)!important;
  text-align:left!important;
}
.now-panel .weather-meta span{
  display:flex!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  gap:5px!important;
  min-width:0!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  line-height:1.18!important;
  white-space:nowrap!important;
}
.now-panel .weather-meta b{
  flex:0 0 auto!important;
  margin:0!important;
  font-size:1.04em!important;
  font-weight:900!important;
  color:var(--text)!important;
}
.now-panel .weather-updated-status{
  grid-area:updated!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  justify-self:center!important;
  align-self:end!important;
  width:100%!important;
  max-width:100%!important;
  min-height:16px!important;
  margin:2px 0 0!important;
  padding:0!important;
  text-align:center!important;
  font-size:clamp(10px,1vw,13px)!important;
  font-weight:400!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Medium landscape / BOOX landscape: keep old two-column current-weather look,
   but prevent the current panel from being squeezed below a safe width. */
@media (min-width:901px) and (max-width:1280px){
  .weather-grid{grid-template-columns:minmax(360px,.98fr) minmax(0,1.42fr)!important;gap:10px!important}
  .now-panel{grid-template-columns:minmax(140px,.82fr) minmax(190px,1.18fr)!important;padding:12px 13px 9px!important;column-gap:10px!important}
  .now-panel .temperature{font-size:clamp(62px,7.2vw,92px)!important}
  .now-panel .weather-desc{font-size:clamp(20px,2.35vw,27px)!important;margin-bottom:8px!important}
  .now-panel .weather-meta{font-size:clamp(13px,1.55vw,17px)!important;column-gap:12px!important;row-gap:6px!important}
}

/* Portrait tablet / BOOX / phone: same old visual hierarchy, compact and centered. */
@media(max-width:900px){
  .location-row .location-status,#location-status{font-size:clamp(22px,4.3vw,32px)!important;margin:7px 0 6px!important}
  .weather-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .now-panel{
    grid-template-columns:1fr!important;
    grid-template-areas:"temp" "summary" "updated"!important;
    justify-items:center!important;
    row-gap:5px!important;
    padding:13px clamp(14px,4vw,30px) 10px!important;
    text-align:center!important;
  }
  .now-panel .temperature{
    justify-self:center!important;
    font-size:clamp(76px,19vw,132px)!important;
    line-height:.9!important;
  }
  .now-panel .weather-summary{
    width:min(100%,700px)!important;
    max-width:700px!important;
    margin:0 auto!important;
    text-align:center!important;
  }
  .now-panel .weather-desc{
    justify-content:center!important;
    text-align:center!important;
    font-size:clamp(23px,5vw,34px)!important;
    margin:0 0 8px!important;
  }
  .now-panel .weather-meta{
    width:min(100%,650px)!important;
    max-width:650px!important;
    margin:0 auto!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:clamp(18px,5vw,56px)!important;
    row-gap:7px!important;
    font-size:clamp(15px,3vw,21px)!important;
  }
  .now-panel .weather-meta span{justify-content:center!important;gap:6px!important}
  .now-panel .weather-updated-status{margin-top:4px!important;font-size:clamp(10px,2vw,13px)!important}
}

@media(max-width:560px){
  .location-row{padding-inline:8px!important}
  .location-row .location-status,#location-status{font-size:clamp(21px,6vw,28px)!important;line-height:1.08!important}
  .now-panel{padding:11px 12px 9px!important;row-gap:4px!important}
  .now-panel .temperature{font-size:clamp(72px,24vw,112px)!important}
  .now-panel .weather-desc{font-size:clamp(21px,7vw,29px)!important;margin-bottom:7px!important}
  .now-panel .weather-meta{width:100%!important;column-gap:12px!important;row-gap:6px!important;font-size:clamp(13px,4vw,17px)!important}
  .now-panel .weather-meta span{justify-content:flex-start!important;gap:4px!important}
  .now-panel .weather-updated-status{font-size:10px!important;margin-top:4px!important}
}

@media(max-width:360px){
  .location-row .location-status,#location-status{font-size:20px!important}
  .now-panel{padding-inline:9px!important}
  .now-panel .temperature{font-size:72px!important}
  .now-panel .weather-desc{font-size:20px!important}
  .now-panel .weather-meta{font-size:12px!important;column-gap:8px!important;row-gap:5px!important}
  .now-panel .weather-meta span{gap:3px!important}
  .now-panel .weather-updated-status{font-size:9px!important}
}

/* === HOTFIX 3.0.20260815.11 — WEATHER ORIGINAL ALIGNMENT ONLY ===
   Keep the original visual hierarchy. Do not redesign the widget.
   Left column: Cảm nhận / Gió flush left. Right column: Độ ẩm / Mưa flush right.
*/
.weather-grid{align-items:stretch!important}
.now-panel{
  box-sizing:border-box!important;
  position:relative!important;
  overflow:hidden!important;
}
.now-panel .weather-summary{min-width:0!important}
.now-panel .weather-meta{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  column-gap:clamp(18px,3.2vw,48px)!important;
  row-gap:clamp(6px,1vw,10px)!important;
  box-sizing:border-box!important;
}
.now-panel .weather-meta span{
  display:flex!important;
  align-items:baseline!important;
  gap:6px!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
}
/* Cảm nhận + Gió: sát trái */
.now-panel .weather-meta span:nth-child(1),
.now-panel .weather-meta span:nth-child(3){
  justify-content:flex-start!important;
  text-align:left!important;
}
/* Độ ẩm + Mưa: sát phải */
.now-panel .weather-meta span:nth-child(2),
.now-panel .weather-meta span:nth-child(4){
  justify-content:flex-end!important;
  text-align:right!important;
}
.now-panel .weather-meta b{margin:0!important;flex:0 0 auto!important}
.now-panel .weather-updated-status{
  position:static!important;
  transform:none!important;
  width:100%!important;
  margin-top:8px!important;
  text-align:center!important;
  white-space:nowrap!important;
}

/* Desktop / wide: original two-column current-weather composition. */
@media(min-width:901px){
  .weather-grid{grid-template-columns:minmax(390px,.96fr) minmax(520px,1.44fr)!important;gap:12px!important}
  .now-panel{
    display:grid!important;
    grid-template-columns:minmax(150px,.82fr) minmax(220px,1.18fr)!important;
    grid-template-areas:"temp summary" "updated updated"!important;
    align-items:center!important;
    column-gap:14px!important;
    row-gap:4px!important;
    padding:12px 16px 10px!important;
    min-width:0!important;
  }
  .now-panel .temperature{grid-area:temp!important;justify-self:center!important;text-align:center!important;font-size:clamp(70px,6.4vw,108px)!important;line-height:.88!important}
  .now-panel .weather-summary{grid-area:summary!important;width:100%!important;align-self:center!important;text-align:left!important}
  .now-panel .weather-desc{justify-content:flex-start!important;text-align:left!important;margin:0 0 8px!important;font-size:clamp(22px,2.2vw,31px)!important;line-height:1.05!important}
  .now-panel .weather-meta{font-size:clamp(14px,1.35vw,19px)!important}
  .now-panel .weather-updated-status{grid-area:updated!important;font-size:clamp(10px,.95vw,13px)!important;margin-top:2px!important}
}

/* Tablet / BOOX portrait / phone: original centered temperature + status, then balanced 2x2 metrics. */
@media(max-width:900px){
  .weather-grid{grid-template-columns:1fr!important;gap:10px!important}
  .now-panel{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"temp" "summary" "updated"!important;
    justify-items:stretch!important;
    align-items:start!important;
    padding:12px clamp(18px,5vw,34px) 10px!important;
    row-gap:4px!important;
  }
  .now-panel .temperature{grid-area:temp!important;justify-self:center!important;text-align:center!important;font-size:clamp(84px,20vw,132px)!important;line-height:.9!important}
  .now-panel .weather-summary{grid-area:summary!important;width:100%!important;max-width:760px!important;margin:0 auto!important}
  .now-panel .weather-desc{justify-content:center!important;text-align:center!important;margin:0 0 10px!important;font-size:clamp(25px,5.5vw,36px)!important;line-height:1.04!important}
  .now-panel .weather-meta{font-size:clamp(17px,3.4vw,23px)!important;column-gap:clamp(20px,7vw,72px)!important;row-gap:8px!important}
  .now-panel .weather-updated-status{grid-area:updated!important;margin-top:8px!important;font-size:clamp(11px,2.3vw,14px)!important}
}

@media(max-width:560px){
  .now-panel{padding:10px 14px 9px!important}
  .now-panel .temperature{font-size:clamp(78px,25vw,112px)!important}
  .now-panel .weather-desc{font-size:clamp(23px,7vw,30px)!important;margin-bottom:9px!important}
  .now-panel .weather-meta{font-size:clamp(14px,4.2vw,18px)!important;column-gap:18px!important;row-gap:7px!important}
  .now-panel .weather-meta span{gap:4px!important}
  .now-panel .weather-updated-status{font-size:10px!important;margin-top:7px!important}
}

@media(max-width:360px){
  .now-panel{padding-inline:10px!important}
  .now-panel .temperature{font-size:74px!important}
  .now-panel .weather-desc{font-size:21px!important}
  .now-panel .weather-meta{font-size:12px!important;column-gap:12px!important;row-gap:6px!important}
}

/* ===== v3.0.20260815.12 — landscape safe padding + WebPush Broadcast ===== */
html,body{max-width:100%;overflow-x:hidden}
.dashboard{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  padding-left:max(12px,env(safe-area-inset-left))!important;
  padding-right:max(12px,env(safe-area-inset-right))!important;
}
.dashboard>*,.managed-section,.panel,.weather-grid,.attendance-panel,.birthday-event-panel,.event-frame,.google-calendar-wrap{
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.weather-grid,.forecast-panel,.upcoming-wrap,.google-calendar-wrap{overflow-x:hidden!important}
@media (orientation:landscape) and (max-height:620px){
  .dashboard{padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important}
  .panel,.managed-section{margin-left:0!important;margin-right:0!important}
  .weather-grid{gap:8px!important}
}
@media(max-width:700px){
  .dashboard{padding-left:max(8px,env(safe-area-inset-left))!important;padding-right:max(8px,env(safe-area-inset-right))!important}
}
.webpush-broadcast-card{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-width:0}
.webpush-broadcast-card h4,.webpush-broadcast-card .admin-hint,.webpush-broadcast-card .admin-actions-row,.webpush-broadcast-card .admin-form-message{grid-column:1/-1;margin:0}
.webpush-broadcast-card textarea,.webpush-broadcast-card input,.webpush-broadcast-card select{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
@media(max-width:640px){.webpush-broadcast-card{grid-template-columns:1fr;padding:8px}.webpush-broadcast-card>*{grid-column:1!important}}

/* ===== v3.0.20260815.14 — weather landscape safe inset + WebPush image UI ===== */
/* Keep the original weather composition, but pull all four metrics inward so
   narrow landscape screens never clip the right column. */
.now-panel .weather-summary{box-sizing:border-box!important;overflow:visible!important}
.now-panel .weather-meta{
  box-sizing:border-box!important;
  padding-left:clamp(8px,1.6vw,18px)!important;
  padding-right:clamp(8px,1.6vw,18px)!important;
}
.now-panel .weather-meta span:nth-child(1),
.now-panel .weather-meta span:nth-child(3){padding-left:0!important}
.now-panel .weather-meta span:nth-child(2),
.now-panel .weather-meta span:nth-child(4){padding-right:0!important}

/* Phone / BOOX landscape: stay two-column like the old layout, but reduce
   typography before it can collide with the forecast panel. */
@media (orientation:landscape) and (min-width:701px) and (max-width:1180px){
  .weather-grid{grid-template-columns:minmax(330px,40%) minmax(0,60%)!important;gap:8px!important}
  .now-panel{
    grid-template-columns:minmax(112px,.76fr) minmax(190px,1.24fr)!important;
    column-gap:8px!important;
    padding:10px 12px 9px!important;
  }
  .now-panel .temperature{font-size:clamp(60px,8.2vw,82px)!important;line-height:.9!important}
  .now-panel .weather-summary{padding-inline:4px!important}
  .now-panel .weather-desc{font-size:clamp(17px,2.5vw,23px)!important;margin-bottom:6px!important}
  .now-panel .weather-meta{
    font-size:clamp(11px,1.65vw,15px)!important;
    column-gap:clamp(8px,1.8vw,18px)!important;
    row-gap:5px!important;
    padding-inline:clamp(10px,1.8vw,18px)!important;
  }
  .now-panel .weather-meta span{gap:3px!important}
  .now-panel .weather-updated-status{font-size:9px!important;margin-top:4px!important}
}
@media (orientation:landscape) and (max-width:820px){
  .weather-grid{grid-template-columns:minmax(300px,42%) minmax(0,58%)!important}
  .now-panel{grid-template-columns:minmax(100px,.72fr) minmax(176px,1.28fr)!important;padding-inline:10px!important}
  .now-panel .weather-meta{padding-inline:12px!important;font-size:11px!important;column-gap:8px!important}
}

.webpush-broadcast-card .brand-admin-field{min-width:0}

/* ===== v3.0.20260815.14 — iOS/Safari landscape weather hardening ===== */
/* Keep the original two-column current-weather composition on landscape,
   but reserve enough width for the right-side data and never allow labels to overlap. */
@media (orientation:landscape) and (max-height:520px),
       (min-width:700px) and (max-width:1100px) {
  .weather-grid{grid-template-columns:minmax(400px,46%) minmax(0,1fr)!important;gap:12px!important}
  .now-panel{
    grid-template-columns:minmax(148px,38%) minmax(232px,1fr)!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    grid-template-areas:"temp summary" "updated updated"!important;
    column-gap:12px!important;
    row-gap:4px!important;
    padding:12px 16px 10px!important;
    overflow:hidden!important;
  }
  .now-panel .temperature{
    grid-area:temp!important;align-self:center!important;justify-self:center!important;
    min-width:0!important;width:100%!important;margin:0!important;
    font-size:clamp(82px,15vw,150px)!important;line-height:.88!important;text-align:center!important;
  }
  .now-panel .weather-summary{
    grid-area:summary!important;align-self:center!important;justify-self:stretch!important;
    min-width:0!important;width:100%!important;margin:0!important;padding:0 4px!important;
  }
  .now-panel .weather-desc{
    justify-content:center!important;text-align:center!important;margin:0 0 7px!important;
    font-size:clamp(21px,3vw,31px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  .now-panel .weather-meta{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:16px!important;row-gap:8px!important;width:100%!important;min-width:0!important;
    font-size:clamp(12px,1.75vw,17px)!important;
  }
  .now-panel .weather-meta span{
    display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;align-items:baseline!important;
    width:100%!important;min-width:0!important;gap:5px!important;padding:0!important;white-space:nowrap!important;
  }
  .now-panel .weather-meta span:nth-child(1),
  .now-panel .weather-meta span:nth-child(3){text-align:left!important;padding-left:2px!important}
  .now-panel .weather-meta span:nth-child(2),
  .now-panel .weather-meta span:nth-child(4){text-align:left!important;padding-right:2px!important}
  .now-panel .weather-meta b{justify-self:end!important;white-space:nowrap!important;min-width:max-content!important}
  .now-panel .weather-updated-status{
    grid-area:updated!important;position:static!important;transform:none!important;width:100%!important;
    margin:2px 0 0!important;padding:0 4px!important;text-align:center!important;
    font-size:clamp(9px,1.3vw,12px)!important;line-height:1.15!important;white-space:nowrap!important;
  }
}

/* Very narrow Safari landscape (iPhone mini/SE class). Forecast may stay beside it,
   so reduce the temperature first instead of squeezing/overlapping metrics. */
@media (orientation:landscape) and (max-height:430px) and (max-width:850px){
  .weather-grid{grid-template-columns:minmax(360px,48%) minmax(0,1fr)!important;gap:10px!important}
  .now-panel{grid-template-columns:minmax(132px,36%) minmax(218px,1fr)!important;padding:10px 12px 9px!important;column-gap:9px!important}
  .now-panel .temperature{font-size:clamp(72px,14vw,118px)!important}
  .now-panel .weather-desc{font-size:clamp(18px,2.8vw,25px)!important;margin-bottom:5px!important}
  .now-panel .weather-meta{font-size:clamp(11px,1.65vw,14px)!important;column-gap:12px!important;row-gap:6px!important}
  .now-panel .weather-meta span{gap:3px!important}
}


/* ===== 3.0.20260815.15 FINAL — Weather + Market hardening =====
   One deterministic layer based on the ACTUAL current-weather panel width.
   It intentionally overrides previous weather hotfixes. */
.now-panel{
  container-type:inline-size!important;
  container-name:obsl-current-weather!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.now-panel .weather-summary,.now-panel .weather-meta,.now-panel .weather-metric{box-sizing:border-box!important;min-width:0!important}
.now-panel .weather-meta em{font-style:normal!important;font-weight:400!important;color:var(--muted)!important;white-space:nowrap!important}
.now-panel .weather-meta b{font-weight:800!important;color:var(--text)!important;white-space:nowrap!important}

/* Wide current-weather CARD (not viewport): old 2-column composition. */
@container obsl-current-weather (min-width: 520px){
  .now-panel{
    display:grid!important;
    grid-template-columns:minmax(170px,42%) minmax(260px,58%)!important;
    grid-template-areas:"temp summary" "updated updated"!important;
    grid-template-rows:1fr auto!important;
    align-items:center!important;
    column-gap:14px!important;
    row-gap:4px!important;
    padding:12px 18px 10px!important;
  }
  .now-panel .temperature{
    grid-area:temp!important;width:100%!important;min-width:0!important;margin:0!important;
    justify-self:center!important;align-self:center!important;text-align:center!important;
    font-size:clamp(76px,19cqw,132px)!important;line-height:.86!important;
  }
  .now-panel .weather-summary{
    grid-area:summary!important;width:100%!important;margin:0!important;padding:0 8px!important;
    align-self:center!important;overflow:visible!important;
  }
  .now-panel .weather-desc{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    width:100%!important;margin:0 0 10px!important;padding:0!important;
    font-size:clamp(22px,4.2cqw,31px)!important;line-height:1.05!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  .now-panel .weather-meta{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:9px 20px!important;width:100%!important;margin:0!important;padding:0 4px!important;
    font-size:clamp(14px,2.65cqw,18px)!important;
  }
  .now-panel .weather-metric{
    display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;
    align-items:baseline!important;gap:5px!important;width:100%!important;margin:0!important;padding:0!important;
  }
  .now-panel .weather-metric-feels,.now-panel .weather-metric-wind{text-align:left!important}
  .now-panel .weather-metric-humidity,.now-panel .weather-metric-rain{text-align:left!important}
  .now-panel .weather-metric b{justify-self:end!important}
  .now-panel .weather-updated-status{
    grid-area:updated!important;position:static!important;inset:auto!important;transform:none!important;
    width:100%!important;margin:5px 0 0!important;padding:0 6px!important;text-align:center!important;
    font-size:clamp(10px,1.8cqw,13px)!important;line-height:1.15!important;white-space:nowrap!important;
    overflow:hidden!important;text-overflow:ellipsis!important;
  }
}

/* Narrow current-weather CARD (e.g. iPhone landscape while forecast stays beside it).
   Still old left-temp/right-details layout, but with fixed-safe typography. */
@container obsl-current-weather (min-width: 350px) and (max-width: 519px){
  .now-panel{
    display:grid!important;
    grid-template-columns:minmax(118px,42%) minmax(190px,58%)!important;
    grid-template-areas:"temp summary" "updated updated"!important;
    grid-template-rows:1fr auto!important;
    align-items:center!important;column-gap:8px!important;row-gap:3px!important;
    padding:10px 12px 8px!important;
  }
  .now-panel .temperature{
    grid-area:temp!important;width:100%!important;margin:0!important;text-align:center!important;
    font-size:clamp(64px,25cqw,98px)!important;line-height:.86!important;
  }
  .now-panel .weather-summary{grid-area:summary!important;width:100%!important;margin:0!important;padding:0 5px!important;overflow:visible!important}
  .now-panel .weather-desc{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    width:100%!important;margin:0 0 7px!important;padding:0!important;
    font-size:clamp(19px,5.8cqw,25px)!important;line-height:1.03!important;white-space:nowrap!important;
    overflow:hidden!important;text-overflow:ellipsis!important;
  }
  .now-panel .weather-meta{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:6px 10px!important;width:100%!important;margin:0!important;padding:0!important;
    font-size:clamp(11px,3.25cqw,14px)!important;
  }
  .now-panel .weather-metric{
    display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;
    align-items:baseline!important;gap:3px!important;width:100%!important;min-width:0!important;
    margin:0!important;padding:0!important;white-space:nowrap!important;
  }
  .now-panel .weather-metric em{overflow:hidden!important;text-overflow:ellipsis!important}
  .now-panel .weather-metric b{justify-self:end!important;font-size:1em!important}
  .now-panel .weather-updated-status{
    grid-area:updated!important;position:static!important;transform:none!important;width:100%!important;
    margin:5px 0 0!important;padding:0 4px!important;text-align:center!important;font-size:9px!important;
    line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
}

/* Very narrow card: stack so collision is mathematically impossible. */
@container obsl-current-weather (max-width: 349px){
  .now-panel{
    display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"temp" "summary" "updated"!important;
    justify-items:stretch!important;row-gap:4px!important;padding:10px 12px 8px!important;
  }
  .now-panel .temperature{grid-area:temp!important;justify-self:center!important;margin:0!important;font-size:76px!important;line-height:.88!important;text-align:center!important}
  .now-panel .weather-summary{grid-area:summary!important;width:100%!important;margin:0!important;padding:0 6px!important}
  .now-panel .weather-desc{justify-content:center!important;text-align:center!important;margin:0 0 7px!important;font-size:21px!important;line-height:1.05!important}
  .now-panel .weather-meta{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px 12px!important;width:100%!important;margin:0!important;padding:0 4px!important;font-size:12px!important}
  .now-panel .weather-metric{display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;gap:3px!important;min-width:0!important}
  .now-panel .weather-metric b{justify-self:end!important}
  .now-panel .weather-updated-status{grid-area:updated!important;position:static!important;transform:none!important;margin:5px 0 0!important;text-align:center!important;font-size:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
}

/* Fallback for engines without container queries: never let metrics overlap. */
@supports not (container-type:inline-size){
  .now-panel .weather-meta{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px 12px!important;padding-inline:8px!important}
  .now-panel .weather-meta span{display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;gap:3px!important;min-width:0!important;font-size:12px!important}
  .now-panel .weather-meta b{justify-self:end!important}
}

/* Market: compact, wrap-safe, no bold content/values. */
.market-panel,.market-sections,.market-section,#market-fuel,#market-gold,#market-currency{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
.market-row{
  display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;
  align-items:start!important;gap:4px 8px!important;width:100%!important;min-width:0!important;
  font-weight:400!important;
}
.market-row>span:first-child{min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.25!important;font-weight:400!important}
.market-row strong,.market-row .market-value{font-weight:400!important;white-space:normal!important;text-align:right!important;overflow-wrap:anywhere!important;line-height:1.25!important}
.market-section h3,.market-gold-name{font-weight:700!important}
.market-gold-grid strong,.market-rate-row strong{font-weight:400!important;white-space:normal!important}
.market-gas-heading,.market-gas-title{display:none!important}
.market-gas-cityblock{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(92px,auto)!important;gap:8px!important;align-items:start!important;width:100%!important;min-width:0!important;padding:4px 0!important;border-top:1px solid var(--line)!important;font-size:11px!important;font-weight:400!important}
.market-gas-city{min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.25!important;font-weight:400!important}
.market-gas-prices{display:grid!important;grid-template-columns:1fr!important;gap:3px!important;min-width:0!important;font-weight:400!important}
.market-gas-prices>div{display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;gap:5px!important;align-items:baseline!important;min-width:0!important}
.market-gas-prices span{font-weight:400!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:right!important;line-height:1.2!important}
.market-gas-other{display:grid!important;grid-template-columns:1fr!important;gap:2px!important;padding:4px 0!important;font-size:10px!important;font-weight:400!important}
.market-gas-other span{white-space:normal!important;overflow-wrap:anywhere!important;font-weight:400!important}
@media(max-width:520px){
  .market-row{grid-template-columns:minmax(0,1fr) minmax(74px,42%)!important}
  .market-gas-cityblock{grid-template-columns:minmax(0,1fr) minmax(86px,44%)!important;gap:6px!important}
  .market-gas-prices>div{grid-template-columns:30px minmax(0,1fr)!important;gap:4px!important}
}

/* ===== OBSL v3.0 WEATHER REWRITE 2026-08-16 =====
   Single deterministic layout. The card itself decides wide/stack through
   weather-layout.js, so Safari/BOOX landscape cannot squeeze the metrics. */
#weather-widget.weather-grid{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  gap:12px!important;
  align-items:stretch!important;
}
@media (min-width:960px){
  #weather-widget.weather-grid{
    grid-template-columns:minmax(430px,42%) minmax(0,58%)!important;
  }
}
@media (max-width:959px){
  #weather-widget.weather-grid{grid-template-columns:minmax(0,1fr)!important}
}

#weather-widget .now-panel{
  position:relative!important;
  display:grid!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  padding:14px 18px 12px!important;
  gap:8px 16px!important;
  align-content:center!important;
}
#weather-widget .now-panel .temperature,
#weather-widget .now-panel .weather-summary,
#weather-widget .now-panel .weather-desc,
#weather-widget .now-panel .weather-meta,
#weather-widget .now-panel .weather-metric,
#weather-widget .now-panel .weather-updated-status{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
}

/* Wide card: classic temperature-left/details-right composition. */
#weather-widget .now-panel.weather-card-wide{
  grid-template-columns:minmax(190px,43%) minmax(280px,57%)!important;
  grid-template-areas:'temp summary' 'updated updated'!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  align-items:center!important;
}
#weather-widget .now-panel.weather-card-wide .temperature{
  grid-area:temp!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  font-size:clamp(78px,10vw,132px)!important;
  line-height:.86!important;
  letter-spacing:-.045em!important;
  white-space:nowrap!important;
}
#weather-widget .now-panel.weather-card-wide .weather-summary{
  grid-area:summary!important;
  width:100%!important;
  margin:0!important;
  padding:0 4px!important;
  align-self:center!important;
}
#weather-widget .now-panel.weather-card-wide .weather-desc{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  margin:0 0 10px!important;
  padding:0!important;
  font-size:clamp(22px,2.4vw,31px)!important;
  line-height:1.08!important;
  font-weight:800!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#weather-widget .now-panel.weather-card-wide .weather-meta{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-areas:'feels humidity' 'wind rain'!important;
  gap:9px 22px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  font-size:clamp(13px,1.45vw,18px)!important;
  line-height:1.2!important;
}
#weather-widget .now-panel .weather-metric-feels{grid-area:feels!important}
#weather-widget .now-panel .weather-metric-humidity{grid-area:humidity!important}
#weather-widget .now-panel .weather-metric-wind{grid-area:wind!important}
#weather-widget .now-panel .weather-metric-rain{grid-area:rain!important}
#weather-widget .now-panel .weather-metric{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) max-content!important;
  align-items:baseline!important;
  gap:6px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
}
#weather-widget .now-panel .weather-metric em{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  font-style:normal!important;
  font-weight:400!important;
  color:var(--muted)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#weather-widget .now-panel .weather-metric b{
  justify-self:end!important;
  margin:0!important;
  padding:0!important;
  font-size:1em!important;
  line-height:inherit!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
#weather-widget .now-panel .weather-updated-status{
  grid-area:updated!important;
  width:100%!important;
  margin:4px 0 0!important;
  padding:0 4px!important;
  text-align:center!important;
  font-size:clamp(10px,1.05vw,13px)!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Stack card: used whenever the real card width is too small. No overlap possible. */
#weather-widget .now-panel.weather-card-stack{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:'temp' 'summary' 'updated'!important;
  grid-template-rows:auto auto auto!important;
  justify-items:stretch!important;
  padding:12px 16px 10px!important;
  row-gap:7px!important;
}
#weather-widget .now-panel.weather-card-stack .temperature{
  grid-area:temp!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  font-size:clamp(68px,22vw,112px)!important;
  line-height:.88!important;
  letter-spacing:-.045em!important;
  white-space:nowrap!important;
}
#weather-widget .now-panel.weather-card-stack .weather-summary{
  grid-area:summary!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}
#weather-widget .now-panel.weather-card-stack .weather-desc{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  margin:0 0 8px!important;
  padding:0!important;
  text-align:center!important;
  font-size:clamp(20px,6vw,28px)!important;
  line-height:1.08!important;
  font-weight:800!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#weather-widget .now-panel.weather-card-stack .weather-meta{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-areas:'feels humidity' 'wind rain'!important;
  gap:8px 22px!important;
  width:100%!important;
  margin:0!important;
  padding:0 6px!important;
  font-size:clamp(12px,3.6vw,17px)!important;
  line-height:1.2!important;
}
#weather-widget .now-panel.weather-card-stack .weather-updated-status{
  grid-area:updated!important;
  width:100%!important;
  margin:3px 0 0!important;
  padding:0 4px!important;
  text-align:center!important;
  font-size:clamp(9px,2.5vw,12px)!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Location title: readable but never pushes the page sideways. */
#location-status.location-status{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  padding-inline:14px!important;
  text-align:center!important;
  font-size:clamp(18px,2.1vw,31px)!important;
  line-height:1.12!important;
  overflow-wrap:anywhere!important;
}

/* Hard safety for very small screens. */
@media (max-width:420px){
  #weather-widget .now-panel{padding:10px 12px 9px!important}
  #weather-widget .now-panel.weather-card-stack .weather-meta{gap:7px 14px!important;padding:0 2px!important;font-size:12px!important}
  #weather-widget .now-panel .weather-metric{gap:4px!important}
  #location-status.location-status{font-size:18px!important;padding-inline:10px!important}
}

/* ===== 3.0.20260816.3 WEATHER COMPACT GAP FIX =====
   Keep the current layout, only remove wasted horizontal space. */
#weather-widget .now-panel.weather-card-wide{
  grid-template-columns:max-content minmax(0,1fr)!important;
  grid-template-areas:'temp summary' 'updated updated'!important;
  column-gap:clamp(6px,1.2cqw,10px)!important;
  row-gap:2px!important;
  padding:10px 12px 8px!important;
  justify-content:start!important;
}
#weather-widget .now-panel.weather-card-wide .temperature{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  justify-self:start!important;
  text-align:left!important;
  font-size:clamp(82px,22cqw,126px)!important;
  line-height:.84!important;
  letter-spacing:-.055em!important;
}
#weather-widget .now-panel.weather-card-wide .weather-summary{
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  align-self:center!important;
}
#weather-widget .now-panel.weather-card-wide .weather-desc{
  margin:0 0 5px!important;
  font-size:clamp(20px,4.4cqw,29px)!important;
  line-height:1!important;
}
#weather-widget .now-panel.weather-card-wide .weather-meta{
  gap:5px clamp(8px,1.5cqw,14px)!important;
  padding:0!important;
  font-size:clamp(12px,2.5cqw,16px)!important;
}
#weather-widget .now-panel.weather-card-wide .weather-metric{
  gap:4px!important;
}
#weather-widget .now-panel.weather-card-wide .weather-updated-status{
  margin-top:2px!important;
  font-size:clamp(9px,1.6cqw,11px)!important;
}

/* Medium/narrow card: still two columns while it fits, but keep them tight. */
#weather-widget .now-panel.weather-card-stack{
  padding:10px 12px 8px!important;
}
@media (min-width:420px){
  #weather-widget .now-panel.weather-card-stack{
    grid-template-columns:max-content minmax(0,1fr)!important;
    grid-template-areas:'temp summary' 'updated updated'!important;
    column-gap:6px!important;
    row-gap:2px!important;
    align-items:center!important;
  }
  #weather-widget .now-panel.weather-card-stack .temperature{
    grid-area:temp!important;
    width:auto!important;
    justify-self:start!important;
    font-size:clamp(70px,22cqw,96px)!important;
    line-height:.84!important;
    letter-spacing:-.05em!important;
    white-space:nowrap!important;
  }
  #weather-widget .now-panel.weather-card-stack .weather-summary{
    grid-area:summary!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  #weather-widget .now-panel.weather-card-stack .weather-desc{
    justify-content:flex-start!important;
    text-align:left!important;
    margin:0 0 5px!important;
    font-size:clamp(18px,5cqw,23px)!important;
  }
  #weather-widget .now-panel.weather-card-stack .weather-meta{
    grid-template-columns:1fr 1fr!important;
    gap:5px 8px!important;
    padding:0!important;
    font-size:clamp(11px,3cqw,13px)!important;
  }
  #weather-widget .now-panel.weather-card-stack .weather-updated-status{
    grid-area:updated!important;
    margin-top:2px!important;
    font-size:9px!important;
  }
}

/* ======================================================================
   OBSLAPPClocks v3.0.20260816.3 — FIXED CURRENT-WEATHER BLOCK
   One stable composition on every device. Current Weather has a bounded
   width; Forecast receives the extra desktop space. On tiny screens the
   same composition is kept and only typography/gaps compact.
   ====================================================================== */
#weather-widget.weather-grid{
  display:grid!important;
  width:100%!important;
  min-width:0!important;
  gap:10px!important;
  align-items:stretch!important;
  box-sizing:border-box!important;
}
#weather-widget[data-weather-layout="side"]{
  grid-template-columns:clamp(350px,36vw,430px) minmax(0,1fr)!important;
}
#weather-widget[data-weather-layout="stack"]{
  grid-template-columns:minmax(0,1fr)!important;
}
#weather-widget > .now-panel,
#weather-widget > .forecast-panel{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Current Weather is ONE fixed block. Its internal topology never changes. */
#weather-widget .now-panel{
  container-type:normal!important;
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(116px,42%) minmax(0,58%)!important;
  grid-template-areas:"temp summary" "updated updated"!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  align-items:center!important;
  justify-items:stretch!important;
  column-gap:6px!important;
  row-gap:4px!important;
  width:100%!important;
  min-width:0!important;
  height:178px!important;
  min-height:178px!important;
  max-height:178px!important;
  padding:11px 12px 9px!important;
  overflow:hidden!important;
  text-align:left!important;
}
#weather-widget .now-panel .temperature{
  grid-area:temp!important;
  align-self:center!important;
  justify-self:end!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  font-size:88px!important;
  line-height:.82!important;
  letter-spacing:-.055em!important;
  text-align:right!important;
  white-space:nowrap!important;
}
#weather-widget .now-panel .weather-summary{
  grid-area:summary!important;
  align-self:center!important;
  justify-self:stretch!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  text-align:left!important;
  overflow:hidden!important;
}
#weather-widget .now-panel .weather-desc{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0 0 7px!important;
  padding:0!important;
  font-size:23px!important;
  line-height:1.05!important;
  font-weight:900!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#weather-widget .now-panel .weather-meta{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-areas:"feels humidity" "wind rain"!important;
  grid-auto-rows:24px!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  gap:4px 8px!important;
  font-size:13px!important;
  line-height:1.12!important;
  overflow:hidden!important;
}
#weather-widget .now-panel .weather-metric-feels{grid-area:feels!important}
#weather-widget .now-panel .weather-metric-humidity{grid-area:humidity!important}
#weather-widget .now-panel .weather-metric-wind{grid-area:wind!important}
#weather-widget .now-panel .weather-metric-rain{grid-area:rain!important}
#weather-widget .now-panel .weather-metric{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) max-content!important;
  align-items:baseline!important;
  gap:3px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
#weather-widget .now-panel .weather-metric em{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-style:normal!important;
  font-weight:400!important;
  color:var(--muted)!important;
}
#weather-widget .now-panel .weather-metric b{
  justify-self:end!important;
  margin:0!important;
  padding:0!important;
  font-size:1em!important;
  line-height:inherit!important;
  font-weight:800!important;
  color:var(--text)!important;
  white-space:nowrap!important;
}
#weather-widget .now-panel .weather-updated-status{
  grid-area:updated!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  align-self:end!important;
  justify-self:stretch!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0 2px!important;
  text-align:center!important;
  font-size:10px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Medium block: same exact layout, just proportionally tighter. */
#weather-widget .now-panel[data-weather-size="md"]{
  height:166px!important;min-height:166px!important;max-height:166px!important;
  grid-template-columns:minmax(124px,41%) minmax(0,59%)!important;
  padding:10px 11px 8px!important;column-gap:5px!important;
}
#weather-widget .now-panel[data-weather-size="md"] .temperature{font-size:80px!important}
#weather-widget .now-panel[data-weather-size="md"] .weather-desc{font-size:21px!important;margin-bottom:6px!important}
#weather-widget .now-panel[data-weather-size="md"] .weather-meta{font-size:12px!important;grid-auto-rows:22px!important;gap:3px 7px!important}
#weather-widget .now-panel[data-weather-size="md"] .weather-updated-status{font-size:9.5px!important}

/* Small 360–419px: iPhone/compact Android. Same positions, no reflow. */
#weather-widget .now-panel[data-weather-size="sm"]{
  height:154px!important;min-height:154px!important;max-height:154px!important;
  grid-template-columns:minmax(112px,40%) minmax(0,60%)!important;
  padding:9px 9px 7px!important;column-gap:4px!important;row-gap:3px!important;
}
#weather-widget .now-panel[data-weather-size="sm"] .temperature{font-size:70px!important}
#weather-widget .now-panel[data-weather-size="sm"] .weather-desc{font-size:18px!important;margin-bottom:5px!important}
#weather-widget .now-panel[data-weather-size="sm"] .weather-meta{font-size:11px!important;grid-auto-rows:20px!important;gap:2px 6px!important}
#weather-widget .now-panel[data-weather-size="sm"] .weather-metric{gap:2px!important}
#weather-widget .now-panel[data-weather-size="sm"] .weather-updated-status{font-size:8.8px!important}

/* iPod / very small ≤359px. Never change topology; only compact dimensions. */
#weather-widget .now-panel[data-weather-size="xs"]{
  height:144px!important;min-height:144px!important;max-height:144px!important;
  grid-template-columns:minmax(98px,39%) minmax(0,61%)!important;
  padding:8px 7px 6px!important;column-gap:3px!important;row-gap:2px!important;
}
#weather-widget .now-panel[data-weather-size="xs"] .temperature{font-size:62px!important;letter-spacing:-.06em!important}
#weather-widget .now-panel[data-weather-size="xs"] .weather-desc{font-size:16px!important;margin-bottom:4px!important}
#weather-widget .now-panel[data-weather-size="xs"] .weather-meta{font-size:9.8px!important;grid-auto-rows:18px!important;gap:2px 4px!important}
#weather-widget .now-panel[data-weather-size="xs"] .weather-metric{gap:1px!important}
#weather-widget .now-panel[data-weather-size="xs"] .weather-updated-status{font-size:8px!important;padding:0!important}

/* Forecast is the flexible sibling. It can stretch, never Current Weather. */
#weather-widget .forecast-panel{
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
#weather-widget .forecast-panel .hours{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
}

/* Location stays readable, but cannot expand the document. */
#location-status.location-status{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding-inline:12px!important;
  box-sizing:border-box!important;
  text-align:center!important;
  font-size:clamp(18px,2vw,30px)!important;
  line-height:1.08!important;
  overflow-wrap:anywhere!important;
}
@media(max-width:359px){
  #location-status.location-status{font-size:17px!important;padding-inline:8px!important}
}

/* ======================================================================
   OBSLAPPClocks v3.0.20260816.4 — FIXED WEATHER BLOCK + MATCHED HEIGHTS
   Current Weather keeps one stable composition. Forecast always matches
   its height. Labels and values stay compact (Cảm nhận 32°C), never stretch.
   ====================================================================== */
#weather-widget{
  --weather-card-h:178px;
  align-items:stretch!important;
}
#weather-widget > .now-panel,
#weather-widget > .forecast-panel{
  height:var(--weather-card-h)!important;
  min-height:var(--weather-card-h)!important;
  max-height:var(--weather-card-h)!important;
}
#weather-widget .now-panel{
  grid-template-columns:max-content minmax(0,1fr)!important;
  grid-template-areas:"temp summary" "updated updated"!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  column-gap:10px!important;
  padding:10px 12px 8px!important;
}
#weather-widget .now-panel .temperature{
  justify-self:start!important;
  align-self:center!important;
  font-size:86px!important;
  line-height:.84!important;
}
#weather-widget .now-panel .weather-summary{
  align-self:center!important;
  justify-self:start!important;
  width:max-content!important;
  max-width:100%!important;
  padding-left:2px!important;
  overflow:visible!important;
}
#weather-widget .now-panel .weather-desc{
  width:max-content!important;
  max-width:100%!important;
  margin:0 0 6px!important;
  font-size:24px!important;
  line-height:1!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#weather-widget .now-panel .weather-meta{
  display:grid!important;
  grid-template-columns:max-content max-content!important;
  grid-template-areas:"feels humidity" "wind rain"!important;
  justify-content:start!important;
  align-items:center!important;
  width:max-content!important;
  max-width:100%!important;
  grid-auto-rows:auto!important;
  column-gap:22px!important;
  row-gap:6px!important;
  font-size:13px!important;
  overflow:visible!important;
}
#weather-widget .now-panel .weather-metric{
  display:inline-flex!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  width:max-content!important;
  max-width:100%!important;
  gap:4px!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
#weather-widget .now-panel .weather-metric em,
#weather-widget .now-panel .weather-metric b{
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}
#weather-widget .now-panel .weather-metric b{
  justify-self:auto!important;
}
#weather-widget .forecast-panel{
  display:flex!important;
  flex-direction:column!important;
  padding:10px 10px 8px!important;
}
#weather-widget .forecast-panel .panel-title{
  flex:0 0 auto!important;
  margin-bottom:6px!important;
}
#weather-widget .forecast-panel .hours{
  flex:1 1 auto!important;
  min-height:0!important;
  align-items:stretch!important;
}

/* Fixed size profiles. Topology never changes. */
#weather-widget .now-panel[data-weather-size="md"]{--_unused:0}
#weather-widget:has(.now-panel[data-weather-size="md"]){--weather-card-h:166px}
#weather-widget:has(.now-panel[data-weather-size="sm"]){--weather-card-h:154px}
#weather-widget:has(.now-panel[data-weather-size="xs"]){--weather-card-h:144px}

#weather-widget .now-panel[data-weather-size="md"] .temperature{font-size:78px!important}
#weather-widget .now-panel[data-weather-size="md"] .weather-desc{font-size:22px!important}
#weather-widget .now-panel[data-weather-size="md"] .weather-meta{font-size:12px!important;column-gap:16px!important;row-gap:5px!important}

#weather-widget .now-panel[data-weather-size="sm"] .temperature{font-size:68px!important}
#weather-widget .now-panel[data-weather-size="sm"] .weather-desc{font-size:19px!important}
#weather-widget .now-panel[data-weather-size="sm"] .weather-meta{font-size:11px!important;column-gap:12px!important;row-gap:4px!important}
#weather-widget .now-panel[data-weather-size="sm"] .weather-metric{gap:3px!important}

#weather-widget .now-panel[data-weather-size="xs"] .temperature{font-size:60px!important}
#weather-widget .now-panel[data-weather-size="xs"] .weather-desc{font-size:17px!important}
#weather-widget .now-panel[data-weather-size="xs"] .weather-meta{font-size:10px!important;column-gap:8px!important;row-gap:3px!important}
#weather-widget .now-panel[data-weather-size="xs"] .weather-metric{gap:2px!important}

/* Fallback where :has() is unavailable: JS writes --weather-card-h directly. */

/* ===== v3.1 Content Protection ===== */
.obsl-content-protected body,
.obsl-content-protected body *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]){
  -webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;
}
.obsl-content-protected input,.obsl-content-protected textarea,.obsl-content-protected select,.obsl-content-protected [contenteditable="true"],
.obsl-content-protected .admin-panel,.obsl-content-protected .admin-panel *{ -webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important; }

/* v3.1.20260817.5 — Statusbar notification-center integration + hard pin */
.obsl-statusbar.is-pinned{
  position:sticky!important;
  top:0!important;
  z-index:2147481000!important;
  align-self:start!important;
}
.obsl-statusbar-right{
  padding-right:26px!important;
  overflow:visible!important;
}
.obsl-statusbar-right .notification-center-bell{
  position:relative!important;
  flex:0 0 auto!important;
  width:1.75em!important;
  height:1.75em!important;
  min-width:1.75em!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  line-height:1!important;
  font-size:1em!important;
}
.notification-bell-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:1.2em;height:1.2em;line-height:1!important;transform:none!important}
.notification-bell-icon img{display:block;width:100%;height:100%;object-fit:contain;border-radius:3px}
@media(max-width:640px){.obsl-statusbar-right{padding-right:20px!important}.obsl-statusbar-right .notification-center-bell{width:1.55em!important;height:1.55em!important;min-width:1.55em!important}}
/* Sticky-safe horizontal clipping: overflow:hidden on body can cancel sticky in Safari/WebView. */
html,body{overflow-x:clip!important}

/* PWA APK direct download */
#pwa-apk-download{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;min-width:0!important;min-height:28px!important;height:28px!important;padding:3px 8px!important;margin:0!important;border:1px solid var(--line)!important;border-radius:7px!important;background:var(--panel)!important;color:var(--text)!important;font-size:10px!important;font-weight:800!important;line-height:1!important;white-space:nowrap!important;text-decoration:none!important}
#pwa-apk-download[hidden]{display:none!important}

/* OBSL v3 compact Settings navigation — Notification Center style */
#system-menu.settings-tabbed{padding:8px!important;}
.settings-main-tabs,.settings-sub-tabs{
  display:flex!important;align-items:center;gap:5px;width:100%;overflow-x:auto;overflow-y:hidden;
  padding:5px 1px 7px;margin:0 0 7px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.settings-main-tab,.settings-sub-tab{
  flex:0 0 auto;min-height:30px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:inherit;font:inherit;font-size:11px;font-weight:800;line-height:1.1;
  box-shadow:none;cursor:pointer;
}
.settings-main-tab.is-active,.settings-sub-tab.is-active{background:rgba(90,120,160,.12);border-color:currentColor;}
.settings-main-tab[hidden],.settings-sub-tab[hidden]{display:none!important}
#system-menu.settings-tabbed > details.system-group{display:none!important;margin:0!important;border:0!important;border-radius:0!important;overflow:visible!important}
#system-menu.settings-tabbed > details.system-group.settings-tab-active{display:block!important}
#system-menu.settings-tabbed > details.system-group>summary{display:none!important}
#system-menu.settings-tabbed > details.system-group>.system-group-body{padding:2px 1px 5px!important}
.settings-subtabbed>.tools-subgroup{display:none!important;margin:0!important;border:0!important;overflow:visible!important}
.settings-subtabbed>.tools-subgroup.settings-subtab-active{display:block!important}
.settings-subtabbed>.tools-subgroup>summary{display:none!important}
.settings-subtabbed>.tools-subgroup>.title-logo-tools-body{display:grid!important;gap:7px!important;padding:2px 0 5px!important}
@media(max-width:640px){
 .settings-main-tabs,.settings-sub-tabs{gap:4px;padding-bottom:6px}
 .settings-main-tab,.settings-sub-tab{min-height:28px;padding:4px 8px;font-size:10.5px}
 #system-menu.settings-tabbed{padding:6px!important}
}

/* OBSL v3.0 Settings Workspace — full-width like Notifications */
#system-menu.settings-tabbed{
  position:fixed!important;
  inset:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  transform:none!important;
  width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;
  padding:0!important;overflow:hidden!important;
  display:flex!important;flex-direction:column!important;
  border:1px solid var(--line)!important;border-radius:12px!important;background:var(--panel)!important;
  box-shadow:0 14px 44px rgba(0,0,0,.2)!important;z-index:2147482400!important;
}
#system-menu.settings-tabbed[hidden]{display:none!important}
#system-menu.settings-tabbed>.system-menu-head{
  flex:0 0 auto;min-height:48px!important;padding:8px 52px 8px 14px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border-bottom:1px solid var(--line)!important;background:var(--panel)!important;
}
#system-menu.settings-tabbed>.system-menu-head .system-menu-title::before{content:"Settings"}
#system-menu.settings-tabbed>.system-menu-head .system-menu-title{font-size:17px!important;font-weight:900!important;text-align:center!important}
#system-menu.settings-tabbed>.system-menu-head .system-theme-toggle{right:44px!important;top:8px!important}
.settings-workspace-close{
  position:absolute;right:8px;top:8px;width:32px;height:32px;padding:0;border:0!important;background:transparent!important;
  box-shadow:none!important;border-radius:50%;font:700 24px/32px system-ui,sans-serif;color:inherit;cursor:pointer;z-index:2
}
#system-menu.settings-tabbed>.settings-main-tabs{
  flex:0 0 auto;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(118px,1fr))!important;
  gap:6px!important;width:100%!important;overflow:visible!important;padding:8px 10px!important;margin:0!important;
  border-bottom:1px solid var(--line)!important;background:rgba(248,248,245,.96)!important;white-space:normal!important;
}
#system-menu.settings-tabbed .settings-main-tab,
#system-menu.settings-tabbed .settings-sub-tab{
  min-width:0!important;width:100%!important;min-height:40px!important;padding:8px 10px!important;
  border:1px solid var(--line)!important;border-radius:9px!important;background:var(--panel)!important;color:inherit!important;
  font:inherit!important;font-size:13px!important;font-weight:800!important;line-height:1.15!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-shadow:none!important;
}
#system-menu.settings-tabbed .settings-main-tab.is-active,
#system-menu.settings-tabbed .settings-sub-tab.is-active{background:#111!important;color:#fff!important;border-color:#111!important}
#system-menu.settings-tabbed > details.system-group.settings-tab-active{
  flex:1 1 auto!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain!important;
  padding:14px!important;background:var(--panel)!important;
}
#system-menu.settings-tabbed > details.system-group>.system-group-body{padding:0!important;width:100%!important;max-width:none!important}
#system-menu.settings-tabbed .settings-sub-tabs{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(125px,1fr))!important;
  gap:6px!important;width:100%!important;overflow:visible!important;padding:0 0 12px!important;margin:0 0 12px!important;
  border-bottom:1px solid var(--line)!important;white-space:normal!important;
}
#system-menu.settings-tabbed .settings-subtabbed>.tools-subgroup.settings-subtab-active{width:100%!important;max-width:none!important}
#system-menu.settings-tabbed .settings-subtabbed>.tools-subgroup>.title-logo-tools-body{width:100%!important;max-width:none!important;padding:0!important}
#system-menu.settings-tabbed input,#system-menu.settings-tabbed select,#system-menu.settings-tabbed textarea{font-size:14px!important}
@media(max-width:640px){
  #system-menu.settings-tabbed{inset:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))!important}
  #system-menu.settings-tabbed>.settings-main-tabs{display:flex!important;overflow-x:auto!important;padding:6px!important;-webkit-overflow-scrolling:touch}
  #system-menu.settings-tabbed>.settings-main-tabs .settings-main-tab{flex:0 0 auto!important;width:auto!important;min-width:100px!important;min-height:36px!important;font-size:12px!important}
  #system-menu.settings-tabbed .settings-sub-tabs{display:flex!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  #system-menu.settings-tabbed .settings-sub-tab{flex:0 0 auto!important;width:auto!important;min-width:105px!important;min-height:34px!important;font-size:11.5px!important}
  #system-menu.settings-tabbed > details.system-group.settings-tab-active{padding:9px!important}
}


/* OBSL Settings workspace emergency fix 2026-08-17
   Portal is attached directly to BODY; these rules intentionally override every
   legacy #system-menu width/max-height rule. */
html body > #system-menu.settings-tabbed{
  position:fixed!important;
  top:max(8px,env(safe-area-inset-top))!important;
  right:max(8px,env(safe-area-inset-right))!important;
  bottom:max(8px,env(safe-area-inset-bottom))!important;
  left:max(8px,env(safe-area-inset-left))!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  transform:none!important;
  overflow:hidden!important;
  z-index:2147483600!important;
}
html body > #system-menu.settings-tabbed > .system-menu-head{flex:0 0 auto!important}
html body > #system-menu.settings-tabbed > .settings-main-tabs{
  position:relative!important;z-index:3!important;flex:0 0 auto!important;
  visibility:visible!important;opacity:1!important;
}
html body > #system-menu.settings-tabbed > details.system-group.settings-tab-active{
  display:block!important;flex:1 1 0!important;min-height:0!important;
  overflow:auto!important;-webkit-overflow-scrolling:touch!important;
}
@media(max-width:640px){
 html body > #system-menu.settings-tabbed{
  top:max(4px,env(safe-area-inset-top))!important;
  right:max(4px,env(safe-area-inset-right))!important;
  bottom:max(4px,env(safe-area-inset-bottom))!important;
  left:max(4px,env(safe-area-inset-left))!important;
 }
}

/* OBSL Settings 2026-08-17: only the selected top-level Settings group is rendered.
   This removes legacy accordion rows that used to remain below the workspace. */
html body > #system-menu.settings-tabbed > details.system-group{display:none!important}
html body > #system-menu.settings-tabbed > details.system-group.settings-tab-active{display:block!important}
html body > #system-menu.settings-tabbed > details.system-group > summary{display:none!important}

/* OBSL 22.08.2026: Báo cáo chấm công phải vuốt/cuộn ngang được trên WebView + mobile. */
.attendance-table-wrap{
  overflow-x:auto!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y!important;
  overscroll-behavior:contain!important;
  max-width:100%!important;
}
.attendance-table{width:max-content!important;min-width:100%!important;}


/* ===== OBSL 22.08.2026 HOTFIX 3 — Attendance horizontal swipe ===== */
.attendance-table-wrap{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:scroll!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y!important;
  overscroll-behavior-x:contain!important;
  scrollbar-width:thin!important;
  scrollbar-gutter:stable both-edges!important;
}
.attendance-table{
  width:max-content!important;
  min-width:760px!important;
}
@media(max-width:700px){
  .attendance-table{min-width:760px!important}
}


/* ===== OBSL 22.08.2026 HOTFIX 4 — Attendance full-width + complete columns ===== */
.attendance-table-wrap{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y!important;
}
.attendance-table{
  width:100%!important;
  min-width:1520px!important;
  table-layout:auto!important;
}
.attendance-table th,.attendance-table td{width:auto!important;white-space:nowrap!important}
.attendance-table th:nth-child(1),.attendance-table td:nth-child(1){min-width:220px!important}
.attendance-table th:nth-child(2),.attendance-table td:nth-child(2){min-width:135px!important}
.attendance-table th:nth-child(3),.attendance-table td:nth-child(3){min-width:90px!important}
.attendance-table th:nth-child(4),.attendance-table td:nth-child(4){min-width:110px!important}
.attendance-table th:nth-child(5),.attendance-table td:nth-child(5){min-width:76px!important}
.attendance-table th:nth-child(n+6),.attendance-table td:nth-child(n+6){min-width:82px!important}
.attendance-table th:nth-child(11),.attendance-table td:nth-child(11){min-width:115px!important}
.attendance-table th:nth-child(13),.attendance-table td:nth-child(13){min-width:96px!important}
.attendance-table th:nth-child(14),.attendance-table td:nth-child(14){min-width:82px!important}
.attendance-table th:nth-child(15),.attendance-table td:nth-child(15){min-width:58px!important}
@media(min-width:1700px){.attendance-table{min-width:100%!important}}
@media(max-width:700px){.attendance-table{width:100%!important;min-width:1520px!important}}
.birthday-tomorrow-lead{font-weight:900!important;color:inherit!important}