/* ==========================================================================
   OneTab — Upload Schedule, Apple style (2026-11-06)
   Covers the whole #calOverlay modal (Weekly View, Edit Schedule, Peak
   Optimizer) and the #clockModal time picker. Loaded LAST on index.html, so
   every rule is scoped "html body #calOverlay …" / "html body #clockModal …"
   with !important to beat the bundle CSS, theme-v2 and inline styles.
   No emoji: the old ▼ ✕ ⚠ glyphs are hidden and redrawn as line icons
   (CSS masks below); onetab-schedule-apple.js tidies the dynamic bits.
   ========================================================================== */

html body #calOverlay,html body #clockModal{
  --sa-bg:#1c1c1e; --sa-bg2:#2c2c2e; --sa-bg3:#3a3a3c;
  --sa-sep:rgba(255,255,255,.08); --sa-sep2:rgba(255,255,255,.12);
  --sa-fill:rgba(118,118,128,.24); --sa-fill2:rgba(118,118,128,.36); --sa-thumb:#636366;
  --sa-l1:rgba(255,255,255,.92); --sa-l2:rgba(235,235,245,.62); --sa-l3:rgba(235,235,245,.38);
  --sa-blue:#0a84ff; --sa-blue-hi:#409cff; --sa-blue-tx:#64b5ff;
  --sa-pink:#ff375f; --sa-pink-tx:#ff6482;
  --sa-orange:#ff9f0a; --sa-orange-tx:#ffb340; --sa-red:#ff453a; --sa-green:#30d158; --sa-indigo:#5e5ce6;
  --sa-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI","Noto Sans Bengali","Hind Siliguri",system-ui,sans-serif;
  --sa-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
  --sa-mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  /* line icons (stroke 1.75, round) used as CSS masks */
  --sa-ic-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --sa-ic-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
  --sa-ic-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  --sa-ic-updown:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 9 12 5 16 9'/%3E%3Cpolyline points='8 15 12 19 16 15'/%3E%3C/svg%3E");
}

/* ── 1. sheet ─────────────────────────────────────────────────────────── */
html body #calOverlay{background:rgba(0,0,0,.62)!important;padding:28px 16px 48px!important}
html body #calOverlay .cal-box{
  background:var(--sa-bg)!important;border:.5px solid var(--sa-sep2)!important;border-radius:16px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 .5px rgba(0,0,0,.6)!important;
  font-family:var(--sa-font)!important;color:var(--sa-l1)!important;animation:saIn .22s cubic-bezier(.2,.8,.2,1)!important}
@keyframes saIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

html body #calOverlay .cal-header{
  position:sticky!important;top:-28px!important;z-index:5!important;
  padding:14px 18px 14px 20px!important;gap:16px!important;border-bottom:.5px solid var(--sa-sep)!important;
  border-radius:16px 16px 0 0!important;background:rgba(28,28,30,.86)!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
html body #calOverlay .cal-title{gap:10px!important;font:600 17px/1.2 var(--sa-display)!important;letter-spacing:-.022em!important;color:var(--sa-l1)!important;white-space:nowrap}
html body #calOverlay .cal-title > [data-oti]{
  width:28px;height:28px;border-radius:7px;display:inline-flex!important;align-items:center;justify-content:center;flex:none;
  background:linear-gradient(180deg,#ff5e57,#ff3b30);color:#fff!important;box-shadow:inset 0 .5px 0 rgba(255,255,255,.25)}
html body #calOverlay .cal-title > [data-oti] svg{width:16px!important;height:16px!important;stroke-width:2!important}
html body #calOverlay .cal-title > span[style]{
  font:500 11px/1 var(--sa-font)!important;color:var(--sa-l2)!important;letter-spacing:0!important;margin-left:2px!important;
  padding:4px 7px!important;border-radius:6px!important;background:var(--sa-fill)!important}

/* segmented control (Weekly / Edit / Optimizer) */
html body #calOverlay .cal-view-tabs{
  background:var(--sa-fill)!important;border:0!important;border-radius:9px!important;padding:2px!important;gap:0!important;box-shadow:none!important}
html body #calOverlay .cal-view-tab{
  flex:none!important;white-space:nowrap!important;display:inline-flex!important;align-items:center;gap:6px;
  padding:5px 14px!important;border-radius:7px!important;border:0!important;background:transparent!important;
  font:500 13px/18px var(--sa-font)!important;letter-spacing:-.005em!important;color:var(--sa-l1)!important;box-shadow:none!important;
  transition:background .18s,box-shadow .18s,color .18s!important}
html body #calOverlay .cal-view-tab:hover:not(.active){background:rgba(255,255,255,.05)!important;color:#fff!important}
html body #calOverlay .cal-view-tab.active{background:var(--sa-thumb)!important;color:#fff!important;
  box-shadow:0 3px 8px rgba(0,0,0,.18),0 .5px 0 rgba(255,255,255,.1) inset!important}
html body #calOverlay .cal-view-tab [data-oti] svg{width:13px!important;height:13px!important}

/* Save (primary) + Back (secondary) */
html body #calOverlay .cal-header .btn-green,html body #calOverlay .cal-header .cal-close{
  height:30px!important;min-height:30px!important;display:inline-flex!important;align-items:center!important;gap:5px!important;
  padding:0 14px!important;border-radius:8px!important;border:0!important;font:600 13px/1 var(--sa-font)!important;letter-spacing:-.005em!important;
  box-shadow:none!important;text-transform:none!important;transform:none!important;transition:background .15s,opacity .15s!important}
html body #calOverlay .cal-header .btn-green{background:var(--sa-blue)!important;color:#fff!important}
html body #calOverlay .cal-header .btn-green:hover{background:var(--sa-blue-hi)!important}
html body #calOverlay .cal-header .btn-green:active{opacity:.8!important}
html body #calOverlay .cal-header .cal-close{background:var(--sa-fill)!important;color:var(--sa-l1)!important;padding:0 12px 0 9px!important}
html body #calOverlay .cal-header .cal-close:hover{background:var(--sa-fill2)!important;color:#fff!important}

/* body + legend */
html body #calOverlay .cal-body{padding:14px 20px 22px!important;gap:12px!important}
html body #calOverlay .cal-legend{padding:2px 2px 0!important;gap:18px!important;font:400 12px/1.3 var(--sa-font)!important;color:var(--sa-l2)!important}
html body #calOverlay .cal-legend-item{gap:6px!important}
html body #calOverlay .cal-legend-swatch{display:none!important}
html body #calOverlay .cal-legend-item [data-oti="long-video"]{color:var(--sa-blue)!important}
html body #calOverlay .cal-legend-item [data-oti="shorts"]{color:var(--sa-pink)!important}
html body #calOverlay .cal-legend-item [data-oti] svg{width:14px!important;height:14px!important}
html body #calOverlay .cal-legend-hint{font:400 12px var(--sa-font)!important;color:var(--sa-l3)!important}

/* ── 2. Weekly View — calendar grid ───────────────────────────────────── */
html body #calOverlay .cal-weekly-grid{border:.5px solid var(--sa-sep2)!important;border-radius:12px!important;background:transparent!important;overflow:hidden!important}
html body #calOverlay .cal-wg-header{background:transparent!important;border-bottom:.5px solid var(--sa-sep2)!important;grid-template-columns:150px repeat(7,1fr)!important}
html body #calOverlay .cal-wg-body{background:transparent!important;grid-template-columns:150px repeat(7,1fr)!important}
html body #calOverlay .cal-wg-corner{
  display:flex!important;align-items:flex-end;justify-content:flex-start!important;text-align:left!important;
  padding:0 14px 12px!important;border-right:.5px solid var(--sa-sep)!important;font:500 11px var(--sa-font)!important;color:var(--sa-l3)!important}
html body #calOverlay .cal-wg-day-head{padding:10px 4px 9px!important;border-right:.5px solid var(--sa-sep)!important;background:transparent!important;font-family:var(--sa-font)!important}
html body #calOverlay .cal-wg-day-head:last-child{border-right:0!important}
html body #calOverlay .cal-wg-day-head .day-name{font:600 11px var(--sa-font)!important;letter-spacing:.04em!important;text-transform:uppercase;color:var(--sa-l2)!important}
html body #calOverlay .cal-wg-day-head .day-date{
  width:30px!important;height:30px!important;margin:4px auto 0!important;border-radius:50%!important;
  font:400 19px/1 var(--sa-display)!important;letter-spacing:-.01em!important;color:var(--sa-l1)!important;background:transparent!important}
html body #calOverlay .cal-wg-day-head.today-col{background:transparent!important}
html body #calOverlay .cal-wg-day-head.today-col .day-name{color:var(--sa-blue)!important}
html body #calOverlay .cal-wg-day-head.today-col .day-date{background:var(--sa-blue)!important;color:#fff!important;font-weight:600!important}
html body #calOverlay .cal-wg-ch-label{
  background:transparent!important;border-right:.5px solid var(--sa-sep)!important;border-bottom:.5px solid var(--sa-sep)!important;
  padding:10px 14px!important;gap:9px!important;min-width:0}
html body #calOverlay .cal-wg-ch-label img{width:24px!important;height:24px!important;border:0!important;box-shadow:0 0 0 .5px var(--sa-sep2)}
html body #calOverlay .cal-wg-ch-name{font:500 12.5px/1.3 var(--sa-font)!important;color:var(--sa-l1)!important;letter-spacing:-.005em!important;
  white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
html body #calOverlay .cal-wg-cell{
  border-right:.5px solid var(--sa-sep)!important;border-bottom:.5px solid var(--sa-sep)!important;
  padding:6px 5px!important;min-height:54px!important;display:flex;flex-direction:column;gap:3px}
html body #calOverlay .cal-wg-cell:last-child{border-right:0!important}
html body #calOverlay .cal-wg-body > :nth-last-child(-n+8){border-bottom:0!important}
html body #calOverlay .cal-wg-empty{height:auto!important;flex:1;font-size:0!important;opacity:1!important}
html body #calOverlay .cal-wg-empty::before{content:"";width:10px;height:1px;background:var(--sa-sep2);border-radius:1px}

/* event chips — Calendar style: coloured bar + tinted fill */
html body #calOverlay .cal-wg-event{
  position:relative;display:flex!important;align-items:center;gap:5px;min-width:0;
  margin:0!important;padding:4px 6px 4px 12px!important;border:0!important;border-radius:6px!important;
  font:600 11.5px/1.25 var(--sa-font)!important;letter-spacing:-.005em!important;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:rgba(10,132,255,.17)!important;color:var(--sa-blue-tx)!important;box-shadow:none!important}
html body #calOverlay .cal-wg-event::before{content:"";position:absolute;left:3px;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--sa-blue)}
html body #calOverlay .cal-wg-event.ev-short{background:rgba(255,55,95,.16)!important;color:var(--sa-pink-tx)!important}
html body #calOverlay .cal-wg-event.ev-short::before{background:var(--sa-pink)}
html body #calOverlay .cal-wg-event.ev-overdue{background:rgba(255,159,10,.14)!important;color:var(--sa-orange-tx)!important}
html body #calOverlay .cal-wg-event.ev-overdue::before{background:var(--sa-orange)}
html body #calOverlay .cal-wg-event [data-oti]{display:inline-flex!important;flex:none;opacity:.9;vertical-align:0!important}
html body #calOverlay .cal-wg-event [data-oti] svg{width:12px!important;height:12px!important}
/* live overlay ("→ 7:45 PM" moved-today badge from onetab-schedule-live.js) */
html body #calOverlay .cal-wg-cell span[data-otsl]{
  align-self:flex-start;margin:0 0 0 2px!important;padding:2px 7px!important;border-radius:6px!important;
  background:rgba(94,92,230,.2)!important;color:#a5a4ff!important;font:600 11px/1.3 var(--sa-font)!important;display:inline-flex!important;align-items:center;gap:4px}
html body #calOverlay .cal-wg-cell span[data-otsl] svg{width:11px;height:11px}

/* ── 3. Edit Schedule — grouped list cards ───────────────────────────── */
html body #calOverlay #calRows{gap:10px!important}
html body #calOverlay .cal-ch-card{
  background:var(--sa-bg2)!important;border:0!important;border-radius:12px!important;box-shadow:none!important;transition:background .2s!important}
html body #calOverlay .cal-ch-card:hover{border-color:transparent!important}
html body #calOverlay .cal-ch-top{padding:12px 14px 12px 14px!important;gap:12px!important;align-items:center!important}
html body #calOverlay .cal-ch-top:hover{background:rgba(255,255,255,.025)}
html body #calOverlay .cal-ch-avatar{width:38px!important;height:38px!important;border:0!important;background:var(--sa-bg3)!important;box-shadow:0 0 0 .5px var(--sa-sep2)}
html body #calOverlay .cal-ch-avatar .ot-ic-inline{width:38px!important;height:38px!important;background:transparent!important;color:var(--sa-l2)}
html body #calOverlay .cal-ch-realname{font:600 15px/1.25 var(--sa-font)!important;letter-spacing:-.015em!important;color:var(--sa-l1)!important}
html body #calOverlay .cal-ch-id{font:400 11px/1.4 var(--sa-mono)!important;color:var(--sa-l3)!important;margin-top:2px!important}
html body #calOverlay .cal-ch-badges{gap:8px!important;max-width:46%}
html body #calOverlay .cal-sched-preview{
  max-width:none!important;font:400 12px/1.45 var(--sa-font)!important;color:var(--sa-l2)!important;text-align:right!important;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0}
html body #calOverlay .cal-sched-preview > div,html body #calOverlay .cal-sched-preview .otpd-sum{
  max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
html body #calOverlay .cal-sched-preview [data-oti]{vertical-align:-2px!important;margin-right:3px}
html body #calOverlay .cal-sched-preview [data-oti="long-video"]{color:var(--sa-blue)}
html body #calOverlay .cal-sched-preview [data-oti="shorts"]{color:var(--sa-pink)}
html body #calOverlay .cal-sched-preview [data-oti] svg{width:12px!important;height:12px!important}
/* chevron (was ▼ text) */
html body #calOverlay .cal-ch-expand{
  font-size:0!important;width:12px;height:12px;flex:none;margin-left:2px!important;background:var(--sa-l3);
  -webkit-mask:var(--sa-ic-chev) center/12px no-repeat;mask:var(--sa-ic-chev) center/12px no-repeat;
  transition:transform .25s cubic-bezier(.2,.8,.2,1)!important}
html body #calOverlay .cal-ch-card.expanded .cal-ch-expand{transform:rotate(180deg)!important}

html body #calOverlay .cal-ch-panels{background:transparent!important;border-top:.5px solid var(--sa-sep)!important;padding:14px 16px 16px!important}

/* Long / Short — small segmented control */
html body #calOverlay .cal-type-tabs{
  display:inline-flex!important;gap:0!important;padding:2px!important;margin:0 0 14px!important;border-radius:9px!important;background:var(--sa-fill)!important}
html body #calOverlay .cal-type-tab{
  border:0!important;background:transparent!important;border-radius:7px!important;padding:5px 16px!important;gap:6px!important;
  font:500 13px/18px var(--sa-font)!important;color:var(--sa-l1)!important;box-shadow:none!important;transition:background .18s!important}
html body #calOverlay .cal-type-tab:hover{color:#fff!important;border-color:transparent!important}
html body #calOverlay .cal-type-tab.active{background:var(--sa-thumb)!important;color:#fff!important;box-shadow:0 3px 8px rgba(0,0,0,.18)!important}
html body #calOverlay .cal-type-tab.tab-long [data-oti]{color:var(--sa-blue)}
html body #calOverlay .cal-type-tab.tab-short [data-oti]{color:var(--sa-pink)}
html body #calOverlay .cal-type-tab.active [data-oti]{color:#fff}

html body #calOverlay .cal-panel.active{gap:12px!important}
html body #calOverlay .cal-panel-row{gap:12px!important;align-items:center!important}
html body #calOverlay .cal-panel-lbl{width:58px!important;font:400 13px var(--sa-font)!important;color:var(--sa-l2)!important}

/* day toggles */
html body #calOverlay .cal-days-wrap{gap:6px!important}
html body #calOverlay .cal-day-btn{
  min-width:48px!important;min-height:44px!important;padding:5px 6px!important;gap:2px!important;border:0!important;border-radius:10px!important;
  background:var(--sa-fill)!important;color:var(--sa-l1)!important;box-shadow:none!important;
  font:600 12px/1.1 var(--sa-font)!important;letter-spacing:-.005em!important;transition:background .15s,color .15s,transform .1s!important}
html body #calOverlay .cal-day-btn .cal-day-bn{font:400 10.5px/1.1 var(--sa-font)!important;opacity:1!important;color:var(--sa-l2)!important}
html body #calOverlay .cal-day-btn:hover{background:var(--sa-fill2)!important;color:#fff!important}
html body #calOverlay .cal-day-btn:active{transform:scale(.96)}
html body #calOverlay .cal-day-btn.al{background:var(--sa-blue)!important;color:#fff!important}
html body #calOverlay .cal-day-btn.as{background:var(--sa-pink)!important;color:#fff!important}
html body #calOverlay .cal-day-btn.fxon{background:var(--sa-blue)!important;color:#fff!important}
html body #calOverlay .cal-day-btn.al .cal-day-bn,html body #calOverlay .cal-day-btn.as .cal-day-bn{color:rgba(255,255,255,.82)!important}
html body #calOverlay .fx-days{gap:4px!important}
html body #calOverlay .fx-days .cal-day-btn{min-width:38px!important;min-height:30px!important;border-radius:8px!important;font-size:11.5px!important}

/* time chip (clock-trigger) */
html body #calOverlay .cal-time-wrap{gap:8px!important}
html body #calOverlay .cal-time-lbl{font:500 11px var(--sa-font)!important;letter-spacing:0!important;text-transform:none!important;color:var(--sa-l3)!important}
html body #calOverlay .clock-trigger{
  gap:6px!important;padding:6px 11px!important;border:0!important;border-radius:8px!important;background:var(--sa-fill)!important;
  box-shadow:none!important;transform:none!important;font:400 15px/1.2 var(--sa-font)!important;font-variant-numeric:tabular-nums;color:var(--sa-l1)!important}
html body #calOverlay .clock-trigger:hover{background:var(--sa-fill2)!important;box-shadow:none!important;transform:none!important}
html body #calOverlay .clock-trigger .ct-icon{color:var(--sa-l3)!important;opacity:1!important;margin:0!important}
html body #calOverlay .clock-trigger .ct-icon svg{width:13px!important;height:13px!important}
html body #calOverlay .clock-trigger .ct-time{color:var(--sa-l1)!important;font-weight:500!important;letter-spacing:0!important}
html body #calOverlay .clock-trigger .ct-ampm{background:transparent!important;padding:0!important;color:var(--sa-l2)!important;font:500 13px var(--sa-font)!important}

/* remove (was ✕) — round, quiet until hovered */
html body #calOverlay .cal-slot-x,html body #calOverlay .cal-flex-row > button.btn[style*="var(--red)"]{
  width:28px!important;height:28px!important;min-width:28px!important;padding:0!important;border:0!important;border-radius:50%!important;
  background:transparent!important;font-size:0!important;color:transparent!important;box-shadow:none!important;
  display:inline-flex;align-items:center;justify-content:center;position:relative;transition:background .15s!important}
html body #calOverlay .cal-slot-x::before,html body #calOverlay .cal-flex-row > button.btn[style*="var(--red)"]::before{
  content:"";width:12px;height:12px;background:var(--sa-l3);-webkit-mask:var(--sa-ic-x) center/12px no-repeat;mask:var(--sa-ic-x) center/12px no-repeat}
html body #calOverlay .cal-slot-x:hover,html body #calOverlay .cal-flex-row > button.btn[style*="var(--red)"]:hover{background:rgba(255,69,58,.16)!important}
html body #calOverlay .cal-slot-x:hover::before,html body #calOverlay .cal-flex-row > button.btn[style*="var(--red)"]:hover::before{background:var(--sa-red)}

/* text buttons: + Long স্লট / + Add slot */
html body #calOverlay .cal-slot-add,html body #calOverlay .cal-flex-section .btn.sm:not([style*="var(--red)"]){
  background:transparent!important;border:0!important;box-shadow:none!important;padding:5px 8px!important;border-radius:7px!important;
  color:var(--sa-blue)!important;font:500 13px var(--sa-font)!important;text-transform:none!important;letter-spacing:0!important}
html body #calOverlay .cal-slot-add:hover,html body #calOverlay .cal-flex-section .btn.sm:not([style*="var(--red)"]):hover{background:rgba(10,132,255,.12)!important}

/* per-day Short list + extra slots: inset rows with hairlines, not boxes */
html body #calOverlay .otpd-list,html body #calOverlay .cal-flex-list,html body #calOverlay .sa-lx-list{
  border-radius:10px;overflow:hidden;background:rgba(255,255,255,.035);box-shadow:0 0 0 .5px var(--sa-sep) inset}
html body #calOverlay .otpd-list:empty,html body #calOverlay .cal-flex-list:empty,html body #calOverlay .sa-lx-list:empty{display:none}
html body #calOverlay .cal-flex-row{
  margin:0!important;padding:9px 10px 9px 14px!important;border:0!important;border-radius:0!important;background:transparent!important;
  border-bottom:.5px solid var(--sa-sep)!important;gap:10px!important;min-height:48px}
html body #calOverlay .cal-flex-row:last-child{border-bottom:0!important}
html body #calOverlay .otpd-row > .cal-time-wrap,html body #calOverlay .otpd-row > .clock-trigger{margin-left:auto}
html body #calOverlay .otpd-lbl{min-width:120px!important;font:400 14px var(--sa-font)!important;color:var(--sa-l2)!important;gap:6px!important}
html body #calOverlay .otpd-lbl b{color:var(--sa-l1)!important;font-weight:600!important}
html body #calOverlay .otpd-lbl > span[style*="opacity"]{opacity:.45!important}
html body #calOverlay .otpd-note,html body #calOverlay .otpd-empty,html body #calOverlay .cal-flex-section > div[style*="font-size:10.5px"]{
  font:400 12px/1.5 var(--sa-font)!important;color:var(--sa-l3)!important}
html body #calOverlay .cal-flex-section{border-top:.5px solid var(--sa-sep)!important;margin-top:6px!important;padding-top:14px!important}
html body #calOverlay .cal-flex-section .cal-panel-lbl{color:var(--sa-l2)!important;font:600 13px var(--sa-font)!important;width:auto!important}
html body #calOverlay .cal-time-inp.fx-type{
  width:auto!important;min-width:92px!important;
  -webkit-appearance:none;appearance:none;border:0!important;border-radius:8px!important;background-color:var(--sa-fill)!important;
  color:var(--sa-l1)!important;font:500 13px var(--sa-font)!important;padding:6px 26px 6px 10px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ebebf5' stroke-opacity='.6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 9 12 5 16 9'/%3E%3Cpolyline points='8 15 12 19 16 15'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 7px center!important;background-size:12px!important}

/* each extra-slot section owns one type (Long panel / Short panel), so the
   per-row Long/Short picker stays hidden (onetab-long-extra.js moves rows) */
html body #calOverlay .cal-flex-row .fx-type{display:none!important}

/* gap notice (was a wall of ⚠ lines) */
html body #calOverlay .cal-gap-warn{
  background:rgba(255,159,10,.1)!important;border:0!important;border-radius:10px!important;padding:10px 12px!important;margin:0 0 4px!important;
  font:400 12.5px/1.5 var(--sa-font)!important;color:var(--sa-l1)!important}
html body #calOverlay .cal-gap-warn b{font-weight:600!important;color:#fff!important}
html body #calOverlay .cal-gap-warn > div > span:first-child{
  font-size:0!important;width:14px;height:14px;flex:none;margin-top:2px;background:var(--sa-orange)!important;
  -webkit-mask:var(--sa-ic-warn) center/14px no-repeat;mask:var(--sa-ic-warn) center/14px no-repeat}
/* structure written by onetab-schedule-apple.js */
html body #calOverlay .sa-gap-head{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--sa-l1)}
html body #calOverlay .sa-gap-head .sa-ic{color:var(--sa-orange);display:inline-flex}
html body #calOverlay .sa-gap-list{margin:6px 0 0 22px;display:flex;flex-direction:column;gap:4px;color:var(--sa-l2)}
html body #calOverlay .sa-gap-list .sa-gap-ai{color:var(--sa-l3)}
html body #calOverlay .sa-gap-more{margin:6px 0 0 22px;padding:0;border:0;background:none;color:var(--sa-blue);font:500 12.5px var(--sa-font);cursor:pointer}
html body #calOverlay .sa-gap-more:hover{text-decoration:underline}
html body #calOverlay .sa-gap-foot{margin:6px 0 0 22px;color:var(--sa-l3)}
html body #calOverlay .cal-gap-warn:not(.sa-open) .sa-gap-x{display:none}

/* weekly extras: audience-signal dot (was ◆) and the per-day "+12%" hint */
html body #calOverlay .cal-wg-ch-label > span[title]:not(.cal-wg-ch-name){
  font-size:0!important;width:6px;height:6px;flex:none;border-radius:50%;background:var(--sa-green);margin-left:0!important;opacity:.9}
html body #calOverlay .cal-wg-cell > div[title][style*="font-size:9px"]{
  font:600 10.5px/1.2 var(--sa-font)!important;letter-spacing:0!important;margin:0 0 1px 2px!important}

/* ── 4. Peak Optimizer ────────────────────────────────────────────────── */
html body #calOverlay .sa-opt-card{display:flex;align-items:center;gap:14px;padding:16px;border-radius:12px;background:var(--sa-bg2)}
html body #calOverlay .sa-opt-icon{
  width:40px;height:40px;flex:none;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(180deg,#7d7aff,#5e5ce6);box-shadow:inset 0 .5px 0 rgba(255,255,255,.25)}
html body #calOverlay .sa-opt-icon svg{width:20px!important;height:20px!important}
html body #calOverlay .sa-opt-text{flex:1;min-width:240px}
html body #calOverlay .sa-opt-title{font:600 15px/1.3 var(--sa-font);letter-spacing:-.012em;color:var(--sa-l1)}
html body #calOverlay .sa-opt-desc{margin-top:3px;font:400 13px/1.5 var(--sa-font);color:var(--sa-l2)}
html body #calOverlay #btnRunOptimizer{
  flex:none;height:32px;padding:0 16px!important;border:0!important;border-radius:8px!important;background:var(--sa-blue)!important;color:#fff!important;
  font:600 13px var(--sa-font)!important;box-shadow:none!important;cursor:pointer;white-space:nowrap;transition:background .15s}
html body #calOverlay #btnRunOptimizer:hover{background:var(--sa-blue-hi)!important}
html body #calOverlay #btnRunOptimizer:disabled{background:var(--sa-fill)!important;color:var(--sa-l2)!important;cursor:default}
html body #calOverlay #optimizerLoading{padding:36px 0!important;font:400 13px var(--sa-font)!important;color:var(--sa-l2)!important}
html body #calOverlay .sa-spin{
  display:inline-block;width:16px;height:16px;margin-right:9px;vertical-align:-3px;border-radius:50%;
  border:2px solid rgba(255,255,255,.16);border-top-color:var(--sa-l1);animation:saSpin .8s linear infinite}
@keyframes saSpin{to{transform:rotate(360deg)}}
html body #calOverlay #optimizerResults > div[style*="text-align:center"]{
  padding:40px 16px!important;font:400 13px/1.5 var(--sa-font)!important;color:var(--sa-l2)!important}
html body #calOverlay #optimizerResults > div[style*="#f87171"]{color:var(--sa-red)!important}
html body #calOverlay #optimizerResults .adm-table{
  border-collapse:separate!important;border-spacing:0!important;background:var(--sa-bg2)!important;border-radius:12px!important;overflow:hidden;
  font:400 13px var(--sa-font)!important}
html body #calOverlay #optimizerResults .adm-table th{
  background:transparent!important;color:var(--sa-l3)!important;font:500 12px var(--sa-font)!important;text-transform:none!important;letter-spacing:0!important;
  padding:11px 14px!important;border-bottom:.5px solid var(--sa-sep2)!important}
html body #calOverlay #optimizerResults .adm-table td{
  padding:11px 14px!important;border-top:0!important;border-bottom:.5px solid var(--sa-sep)!important;color:var(--sa-l1)!important;font-variant-numeric:tabular-nums}
html body #calOverlay #optimizerResults .adm-table tr:last-child td{border-bottom:0!important}
html body #calOverlay #optimizerResults .adm-table td strong,html body #calOverlay #optimizerResults .adm-table td span[style]{
  font:500 13px var(--sa-font)!important;color:var(--sa-l2)!important}
html body #calOverlay #optimizerResults .adm-table td span[style*="#a855f7"]{color:var(--sa-blue-tx)!important;font-weight:600!important}
html body #calOverlay #optimizerResults .badge{
  border:0!important;border-radius:999px!important;padding:3px 9px!important;font:600 11.5px var(--sa-font)!important}
html body #calOverlay #optimizerResults .badge[style*="250,204,21"]{background:rgba(255,159,10,.16)!important;color:var(--sa-orange-tx)!important}
html body #calOverlay #optimizerResults .badge[style*="74,222,128"]{background:rgba(48,209,88,.16)!important;color:var(--sa-green)!important}
html body #calOverlay #optimizerResults .btn{
  border:0!important;border-radius:8px!important;box-shadow:none!important;font:600 12.5px var(--sa-font)!important;padding:6px 12px!important;
  background:rgba(10,132,255,.16)!important;color:var(--sa-blue-tx)!important}
html body #calOverlay #optimizerResults .btn:hover{background:rgba(10,132,255,.26)!important}
html body #calOverlay #optimizerResults .btn-green{background:var(--sa-blue)!important;color:#fff!important;padding:8px 16px!important}
html body #calOverlay #optimizerResults .btn-green:hover{background:var(--sa-blue-hi)!important}

/* ── 5. Time picker (#clockModal) ─────────────────────────────────────── */
html body #clockModal{background:rgba(0,0,0,.5)!important}
html body #clockModal .clock-box{
  width:min(336px,calc(100vw - 32px))!important;padding:16px 20px 20px!important;border-radius:20px!important;
  background:var(--sa-bg)!important;border:.5px solid var(--sa-sep2)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.6)!important;font-family:var(--sa-font)!important;animation:saIn .2s cubic-bezier(.2,.8,.2,1)}
html body #clockModal .clock-header{margin-bottom:4px!important}
html body #clockModal .clock-header-title{
  font:600 17px/1.2 var(--sa-display)!important;letter-spacing:-.022em!important;text-transform:none!important;color:var(--sa-l1)!important}
html body #clockModal .clock-close{
  width:30px!important;height:30px!important;padding:0!important;border-radius:50%!important;background:var(--sa-fill)!important;
  display:inline-flex!important;align-items:center;justify-content:center;color:var(--sa-l2)!important;font-size:0!important}
html body #clockModal .clock-close:hover{background:var(--sa-fill2)!important;color:#fff!important}
html body #clockModal .clock-close svg{width:13px;height:13px}
html body #clockModal .clock-mode-hint{margin:0 0 14px!important;align-self:flex-start;font:400 13px var(--sa-font)!important;letter-spacing:0!important;color:var(--sa-l2)!important}
html body #clockModal .clock-display{gap:4px!important;margin-bottom:14px!important;font:300 54px/1 var(--sa-display)!important;font-variant-numeric:tabular-nums;color:var(--sa-l1)!important}
html body #clockModal .clock-seg{
  padding:4px 12px!important;border-radius:12px!important;letter-spacing:-.02em!important;background:var(--sa-fill)!important;color:var(--sa-l1)!important;
  box-shadow:none!important;transition:background .18s,color .18s!important}
html body #clockModal .clock-seg:not(.active):hover{background:var(--sa-fill2)!important}
html body #clockModal .clock-seg.active{background:rgba(10,132,255,.2)!important;color:var(--sa-blue-hi)!important}
html body #clockModal .clock-colon{animation:none!important;color:var(--sa-l3)!important;margin-top:-6px}
html body #clockModal .ampm-toggle{
  margin-bottom:18px!important;padding:2px!important;gap:0!important;border:0!important;border-radius:9px!important;background:var(--sa-fill)!important}
html body #clockModal .ampm-btn{
  padding:5px 26px!important;border-radius:7px!important;font:600 13px/18px var(--sa-font)!important;letter-spacing:0!important;
  color:var(--sa-l1)!important;background:transparent!important;box-shadow:none!important}
html body #clockModal .ampm-btn:not(.active):hover{background:rgba(255,255,255,.05)!important}
html body #clockModal .ampm-btn.active{background:var(--sa-thumb)!important;color:#fff!important;box-shadow:0 3px 8px rgba(0,0,0,.18)!important}
html body #clockModal .clock-face{
  width:236px!important;height:236px!important;background:var(--sa-bg2)!important;border:0!important;box-shadow:none!important}
/* SVG drawn by the bundle: quiet the rings/ticks, blue hand */
html body #clockModal #clkSvg circle[r="102"],html body #clockModal #clkSvg circle[r="95"]{stroke:transparent!important}
html body #clockModal #clkSvg line[stroke-width="1"]{stroke:transparent!important}
html body #clockModal #clkSvg line[stroke="rgba(245,197,24,.25)"]{stroke:rgba(255,255,255,.14)!important}
html body #clockModal #clkSvg line[stroke-width="8"]{stroke:transparent!important}
html body #clockModal #clkSvg line[stroke="#4cc2ff"],html body #clockModal #clkSvg line[stroke="rgba(245,197,24,.4)"]{stroke:var(--sa-blue)!important;stroke-width:2!important}
html body #clockModal #clkSvg circle[fill="#4cc2ff"]{fill:var(--sa-blue)!important;stroke:none!important}
html body #clockModal #clkSvg circle[r="2"]{fill:var(--sa-blue)!important}
html body #clockModal .clock-num{
  width:34px!important;height:34px!important;font:400 15px var(--sa-font)!important;font-variant-numeric:tabular-nums;color:var(--sa-l1)!important;
  background:transparent!important;box-shadow:none!important;transition:background .15s,color .15s!important}
html body #clockModal .clock-num:hover{background:rgba(255,255,255,.08)!important;transform:translate(-50%,-50%)!important}
html body #clockModal .clock-num.selected{background:var(--sa-blue)!important;color:#fff!important;font-weight:600!important;transform:translate(-50%,-50%)!important}
html body #clockModal .clock-actions{gap:10px!important;margin-top:20px!important}
html body #clockModal .clock-cancel,html body #clockModal .clock-ok{
  height:44px;padding:0 16px!important;border:0!important;border-radius:12px!important;font:600 15px var(--sa-font)!important;letter-spacing:-.01em!important;
  box-shadow:none!important;transform:none!important;transition:background .15s,opacity .15s!important}
html body #clockModal .clock-cancel{flex:1!important;background:var(--sa-fill)!important;color:var(--sa-l1)!important}
html body #clockModal .clock-cancel:hover{background:var(--sa-fill2)!important}
html body #clockModal .clock-ok{flex:1!important;background:var(--sa-blue)!important;color:#fff!important}
html body #clockModal .clock-ok:hover{background:var(--sa-blue-hi)!important}
html body #clockModal .clock-ok:active,html body #clockModal .clock-cancel:active{opacity:.8}

/* inline display:none must win over any theme ".btn{display:…!important}" */
html body #calOverlay [style*="display:none"],html body #calOverlay [style*="display: none"]{display:none!important}

/* ── 6. narrow screens ────────────────────────────────────────────────── */
@media (max-width:900px){
  html body #calOverlay .cal-header{flex-wrap:wrap!important}
  html body #calOverlay .cal-header > div{flex-wrap:wrap;width:100%;justify-content:flex-start}
  html body #calOverlay .cal-wg-header,html body #calOverlay .cal-wg-body{grid-template-columns:110px repeat(7,minmax(84px,1fr))!important}
  html body #calOverlay .cal-weekly-grid{min-width:720px}
  html body #calOverlay .cal-ch-top{flex-wrap:wrap}
  html body #calOverlay .cal-ch-badges{max-width:100%;order:3;width:100%;justify-content:flex-start!important}
  html body #calOverlay .cal-sched-preview{align-items:flex-start;text-align:left!important}
}
@media (prefers-reduced-motion:reduce){
  html body #calOverlay .cal-box,html body #clockModal .clock-box{animation:none!important}
  html body #calOverlay .sa-spin{animation-duration:2s}
}