/* =====================================================================
   OneTab Studio — Apple-style theme for the app shell + dashboard (2026-11-05)
   Same language as assets/onetab-admin-apple.css (macOS System Settings, dark).
   Loaded LAST (after onetab-theme-v2.css). theme-v2 forces most shell/component
   styles with !important, so this layer uses `html body` (+0,0,2 specificity) and
   !important on the properties it overrides. Presentation only — no ids/JS touched.
   Admin panel (#adminOverlay) has its own file and is not targeted here.
   ===================================================================== */
/* ---- design tokens of the older layers (theme-v2 + design-system set them on :root !important).
   html:root (0,1,1) beats :root (0,1,0), so every page and overlay inherits the Apple palette/fonts. ---- */
html:root{
  --ot-bg-base:#161617!important; --ot-bg:#161617!important; --ot-bg-surface:#1d1d1f!important; --ot-bg-elevated:#222224!important;
  --ot-bg-subtle:#2a2a2c!important; --ot-bg-hover:#2c2c2e!important; --ot-bg-active:#3a3a3c!important;
  --ot-border:rgba(255,255,255,.08)!important; --ot-border-strong:rgba(255,255,255,.14)!important; --ot-border-focus:#0a84ff!important;
  --ot-text:rgba(255,255,255,.92)!important; --ot-text-primary:rgba(255,255,255,.92)!important; --ot-text-secondary:rgba(235,235,245,.62)!important;
  --ot-text-tertiary:rgba(235,235,245,.48)!important; --ot-text-muted:rgba(235,235,245,.38)!important;
  --ot-accent:#0a84ff!important; --ot-accent-hover:#409cff!important; --ot-accent-soft:rgba(10,132,255,.16)!important;
  --ot-brand:#0a84ff!important; --ot-brand-dim:#0071e3!important; --ot-brand-soft:rgba(10,132,255,.16)!important;
  --ot-green:#30d158!important; --ot-green-soft:rgba(48,209,88,.16)!important; --ot-red:#ff453a!important; --ot-red-soft:rgba(255,69,58,.16)!important;
  --ot-amber:#ff9f0a!important; --ot-amber-soft:rgba(255,159,10,.16)!important; --ot-purple:#bf5af2!important; --ot-purple-soft:rgba(191,90,242,.16)!important;
  --ot-status-success:#30d158!important; --ot-status-warning:#ff9f0a!important; --ot-status-danger:#ff453a!important;
  --ot-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI","Noto Sans Bengali","Hind Siliguri",system-ui,sans-serif!important;
  --ot-font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI","Noto Sans Bengali","Hind Siliguri",system-ui,sans-serif!important;
  --ot-font-mono:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI","Noto Sans Bengali",system-ui,sans-serif!important;
  --ot-mono:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI","Noto Sans Bengali",system-ui,sans-serif!important;
  --ot-radius:12px!important; --ot-radius-sm:8px!important; --ot-radius-lg:14px!important;
  --ot-shadow-1:0 1px 2px rgba(0,0,0,.25)!important; --ot-shadow-2:0 8px 24px -12px rgba(0,0,0,.6)!important; --ot-shadow-3:0 12px 32px -14px rgba(0,0,0,.7)!important;
  --ot-glass-bg:#222224!important; --ot-glass-blur:none!important; --ot-glass-shadow:none!important;
  --ot-glass-border:1px solid rgba(255,255,255,.06)!important; --ot-glass-border-glow:1px solid rgba(255,255,255,.08)!important;
}
/* real code / logs keep a monospace face (the mono token above now means "numbers", not "code") */
html body pre,html body code,html body kbd,html body samp,html body textarea.ot-mono-keep{font-family:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace!important}
html body{font-variant-numeric:tabular-nums}

html body{
  --ap-window:#161617; --ap-sidebar:#1d1d1f; --ap-group:#222224; --ap-group-hi:#2a2a2c;
  --ap-field:#1a1a1c; --ap-field-line:rgba(255,255,255,.12);
  --ap-sep:rgba(255,255,255,.08); --ap-line:rgba(255,255,255,.06);
  --ap-l1:rgba(255,255,255,.92); --ap-l2:rgba(235,235,245,.62); --ap-l3:rgba(235,235,245,.38);
  --ap-fill:rgba(120,120,128,.22); --ap-fill-2:rgba(120,120,128,.34);
  --ap-blue:#0a84ff; --ap-green:#30d158; --ap-red:#ff453a; --ap-orange:#ff9f0a; --ap-yellow:#ffd60a;
  --ap-purple:#bf5af2; --ap-pink:#ff375f; --ap-indigo:#5e5ce6; --ap-teal:#30b0c7; --ap-cyan:#64d2ff; --ap-gray:#8e8e93;
  --ap-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI","Noto Sans Bengali","Hind Siliguri",system-ui,sans-serif;
  --ap-mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  background:var(--ap-window)!important;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
html body .ot-app,html body .ot-main,html body .ot-content,html body #ot-studio-dashboard{background:var(--ap-window)!important;font-family:var(--ap-font)!important}
/* Full-height shell: body.ot-body (theme) painted #0a0b10 below a content-height app, so on tall
   windows the sidebar + background visibly "stopped" half-way. Same colour everywhere + the app
   always reaches the bottom of the window (display is NOT touched — pin-lock hides #mainApp). */
html,html body,html body.ot-body,html body.ot-shell-locked{background:#161617!important}
html body.ot-body::before,html body.ot-shell-locked::before{display:none!important}
/* the shell CSS pins these to min-height:0 with #mainApp.ot-dashboard-layout > #ot-shell-mounted (2 ids).
   Only where the sidebar is visible (≥1025px) — there the top bar is always one 64px row; below that
   the sidebar is a drawer (nothing to "cut") and the top bar can wrap, so the original sizing stays. */
@media (min-width:1025px){
  html body #mainApp.ot-dashboard-layout>#ot-shell-mounted,
  html body #mainApp.ot-dashboard-layout>#ot-shell-mounted .ot-app{min-height:calc(100vh - 64px)!important}
}

/* ---------------- sidebar ---------------- */
html body .ot-sidebar{background:var(--ap-sidebar)!important;border-right:1px solid var(--ap-line)!important;box-shadow:none!important}
html body .ot-sb-nav{gap:0!important;padding-top:10px!important}
html body .ot-sb-group{margin-bottom:14px!important;gap:1px!important}
html body .ot-sb-group-label{text-transform:none!important;letter-spacing:0!important;font:600 11px var(--ap-font)!important;
  color:var(--ap-l3)!important;padding:0 18px!important;margin:0 0 4px!important}
html body .ot-nav-item{gap:10px!important;padding:5px 10px!important;margin:0 8px!important;min-height:32px;border-radius:7px!important;
  font:500 13px var(--ap-font)!important;letter-spacing:-.005em!important;color:var(--ap-l1)!important;background:transparent!important;
  transition:background .12s ease!important}
html body .ot-nav-item::before,html body .ot-nav-item.active::before{display:none!important}
html body .ot-nav-item:hover{background:rgba(255,255,255,.06)!important;color:var(--ap-l1)!important}
html body .ot-nav-item.active,html body .ot-nav-item.active:hover{background:var(--ap-blue)!important;color:#fff!important;box-shadow:none!important}
html body .ot-nav-icon,html body .ot-nav-item.active .ot-nav-icon{width:22px!important;height:22px!important;border-radius:6px!important;
  background:var(--tile,var(--ap-gray))!important;color:#fff!important;filter:none!important;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2)}
html body .ot-nav-icon svg,html body .ot-nav-icon .ot-icon{width:13px!important;height:13px!important}
html body .ot-nav-item[data-page="dashboard"]{--tile:var(--ap-blue)}
html body .ot-nav-item[data-page="upload"]{--tile:var(--ap-red)}
html body .ot-nav-item[data-page="ai"]{--tile:var(--ap-purple)}
html body .ot-nav-item[data-page="templates"]{--tile:var(--ap-orange)}
html body .ot-nav-item[data-page="oauth"]{--tile:var(--ap-green)}
html body .ot-nav-item[data-page="ci"]{--tile:var(--ap-indigo)}
html body .ot-nav-item[data-page="intel"]{--tile:var(--ap-teal)}
html body .ot-nav-item[data-page="paglu"]{--tile:var(--ap-pink)}
html body .ot-nav-item[data-page="playlist"]{--tile:#32d74b}
html body .ot-nav-item[data-page="dataset"]{--tile:var(--ap-cyan)}
html body .ot-nav-item[data-page="backfill"]{--tile:#ac8e68}
html body .ot-nav-item[data-page="autoclean"]{--tile:#ff6482}
html body .ot-nav-item[data-page="admin"]{--tile:#636366}
html body .ot-sb-footer{border-top:1px solid var(--ap-line)!important;background:none!important}

/* ---------------- top bar ---------------- */
html body #studio-header,html body .ot-topbar{background:rgba(22,22,23,.82)!important;-webkit-backdrop-filter:saturate(180%) blur(20px)!important;
  backdrop-filter:saturate(180%) blur(20px)!important;border:0!important;border-bottom:1px solid var(--ap-line)!important;box-shadow:none!important}
html body #studio-header::after,html body #studio-header::before{display:none!important}
html body .status-pill{display:inline-flex!important;align-items:center;gap:6px;font:500 12px var(--ap-font)!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--ap-l2)!important;background:var(--ap-fill)!important;border:0!important;border-radius:999px!important;
  padding:3px 10px!important;box-shadow:none!important}
html body .status-pill.done{color:var(--ap-green)!important;background:rgba(48,209,88,.12)!important}
html body .hdr-toolbar{gap:6px!important;background:none!important;border:0!important;padding:0!important;box-shadow:none!important}
html body .nav-group-divider{width:1px!important;height:20px!important;background:var(--ap-sep)!important;margin:0 4px!important}

/* ---------------- buttons / fields / badges (shared components) ---------------- */
html body .ot-btn-v2{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 12px!important;border:0!important;border-radius:8px!important;
  font:500 13px var(--ap-font)!important;letter-spacing:-.005em!important;text-transform:none!important;box-shadow:inset 0 .5px 0 rgba(255,255,255,.07)!important;
  transition:background .15s ease,filter .15s ease!important;transform:none!important}
html body .ot-btn-v2 svg{width:14px;height:14px}
html body .ot-btn-secondary{background:var(--ap-fill)!important;color:var(--ap-l1)!important}
html body .ot-btn-secondary:hover{background:var(--ap-fill-2)!important;color:var(--ap-l1)!important}
html body .ot-btn-primary{background:var(--ap-blue)!important;color:#fff!important;box-shadow:inset 0 .5px 0 rgba(255,255,255,.25)!important}
html body .ot-btn-primary:hover{background:var(--ap-blue)!important;filter:brightness(1.12)}
html body .ot-btn-ai{background:rgba(191,90,242,.16)!important;color:#da8fff!important}
html body .ot-btn-ai:hover{background:rgba(191,90,242,.26)!important}
html body .ot-btn-neural{background:rgba(94,92,230,.2)!important;color:#a5a3ff!important}
html body .ot-btn-neural:hover{background:rgba(94,92,230,.3)!important}
html body .ot-btn-v2:disabled{opacity:.5;cursor:not-allowed}
html body .ot-btn-v2:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(10,132,255,.45)!important}
html body #ot-notif-mount button,html body .hdr-right .nav-group .ot-btn-v2{min-width:32px;min-height:32px;padding:0!important;justify-content:center;border-radius:50%!important}

html body .ot-input-v2{background:var(--ap-field)!important;border:1px solid var(--ap-field-line)!important;border-radius:8px!important;min-height:30px;
  padding:5px 10px!important;font:400 13px var(--ap-font)!important;color:var(--ap-l1)!important;box-shadow:inset 0 1px 0 rgba(0,0,0,.14)!important}
html body .ot-input-v2::placeholder{color:var(--ap-l3)!important}
html body .ot-input-v2:focus{outline:none!important;border-color:var(--ap-blue)!important;box-shadow:0 0 0 3px rgba(10,132,255,.35)!important}
html body select.ot-input-v2{-webkit-appearance:none;appearance:none;padding-right:28px!important;cursor:pointer;
  background:var(--ap-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center!important}
html body select.ot-input-v2 option{background:#2c2c2e;color:#fff}

html body .ot-badge-v2{font:600 11px var(--ap-font)!important;letter-spacing:0!important;text-transform:none!important;border:0!important;border-radius:999px!important;
  padding:3px 9px!important;background:var(--ap-fill)!important;color:var(--ap-l2)!important;box-shadow:none!important}
html body .ot-badge-info{background:rgba(10,132,255,.16)!important;color:#409cff!important}
html body .ot-badge-success{background:rgba(48,209,88,.16)!important;color:var(--ap-green)!important}
html body .ot-badge-warning{background:rgba(255,159,10,.16)!important;color:var(--ap-orange)!important}
html body .ot-badge-danger{background:rgba(255,69,58,.16)!important;color:#ff6961!important}

/* ---------------- cards (KPIs and every .ot-card-v2) ---------------- */
html body .ot-card-v2{background:var(--ap-group)!important;border:1px solid var(--ap-line)!important;border-radius:12px!important;box-shadow:none!important;
  transform:none!important}
html body .ot-card-v2:hover{border-color:var(--ap-line)!important;box-shadow:none!important;transform:none!important}
html body .ot-card-v2-title{font:500 12px var(--ap-font)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ap-l2)!important}
html body .ot-card-v2-header [data-oti],html body .ot-card-v2-header svg{color:var(--ap-l3)!important;transform:none!important}
html body #dashKpis{gap:14px!important}
html body #dashKpis .ana-kpi-val{font:600 30px/1.1 var(--ap-font)!important;letter-spacing:-.025em!important;color:var(--ap-l1)!important;
  font-variant-numeric:tabular-nums;margin:6px 0 2px!important}
html body #dashKpis .ana-kpi-sub,html body .ana-kpi-sub{font:400 12px var(--ap-font)!important;letter-spacing:0!important;color:var(--ap-l3)!important}

/* ---------------- dashboard filter row ---------------- */
html body #ot-studio-dashboard .count-chip{font-variant-numeric:tabular-nums}
html body #progressText,html body .progress-label{font:500 12.5px var(--ap-font)!important;color:var(--ap-l2)!important;font-variant-numeric:tabular-nums;letter-spacing:0!important}
html body .progress-strip{height:2px!important;background:transparent!important;border:0!important}
html body .progress-strip .progress-fill,html body #progressBar{background:var(--ap-blue)!important;box-shadow:none!important}
html body #ot-studio-dashboard .filter-wrap .ot-input-v2{min-width:200px}

/* ---------------- table (grouped list) ---------------- */
html body .ot-table-wrapper{background:var(--ap-group)!important;border:1px solid var(--ap-line)!important;border-radius:12px!important;box-shadow:none!important}
html body .ot-table-v2{font-family:var(--ap-font)!important;background:transparent!important}
html body .ot-table-v2 thead th{background:var(--ap-group)!important;color:var(--ap-l2)!important;font:500 11.5px var(--ap-font)!important;
  letter-spacing:0!important;text-transform:none!important;border:0!important;border-bottom:1px solid var(--ap-sep)!important;padding:10px 10px!important;white-space:nowrap}
html body .ot-table-v2 tbody td{border:0!important;border-bottom:1px solid var(--ap-line)!important;padding:9px 10px!important;color:var(--ap-l1);
  font-size:13px;vertical-align:middle!important}
html body .ot-table-v2 tbody tr,html body .ot-table-v2 tbody tr[class*="rank"]{background:transparent!important;box-shadow:none!important}
html body .ot-table-v2 tbody tr:last-child td{border-bottom:0!important}
html body .ot-table-v2 tbody tr:hover td{background:rgba(255,255,255,.035)!important}
/* rank circle */
html body #tableBody td:first-child>span{display:inline-flex!important;align-items:center;justify-content:center;width:22px!important;height:22px!important;
  border-radius:50%!important;font:600 11.5px var(--ap-font)!important;background:var(--ap-fill)!important;color:var(--ap-l2)!important;border:0!important;box-shadow:none!important}
html body #tableBody td:first-child>span.gold-badge{background:var(--ap-yellow)!important;color:#3a2c00!important}
html body #tableBody td:first-child>span.silver-badge{background:#c7c7cc!important;color:#1d1d1f!important}
html body #tableBody td:first-child>span.bronze-badge{background:#c08552!important;color:#fff!important}
/* channel */
html body .ch-logo-img{width:32px!important;height:32px!important;border-radius:50%!important;border:0!important;box-shadow:0 0 0 .5px rgba(255,255,255,.12)!important}
html body .ch-name{font:600 13.5px var(--ap-font)!important;letter-spacing:-.01em!important;color:var(--ap-l1)!important}
html body .pc-badge{font:600 11px var(--ap-font)!important;letter-spacing:0!important;border:0!important;border-radius:6px!important;padding:2px 7px!important;
  background:var(--ap-fill)!important;color:var(--ap-l2)!important;box-shadow:none!important}
/* last upload */
html body .date-split{display:flex;flex-direction:column;gap:3px}
html body .date-row{display:flex;align-items:center;gap:6px}
html body .date-type{font:600 10.5px var(--ap-font)!important;letter-spacing:0!important;text-transform:none!important;border:0!important;border-radius:5px!important;
  padding:1px 6px!important;box-shadow:none!important}
html body .date-type.shorts{background:rgba(255,55,95,.16)!important;color:#ff6482!important}
html body .date-type.long{background:rgba(10,132,255,.16)!important;color:#409cff!important}
html body .date-val{font:400 12px var(--ap-font)!important;color:var(--ap-l2)!important;font-variant-numeric:tabular-nums;letter-spacing:0!important}
/* numbers */
html body .views-num,html body .subs-num,html body .vhr-cell{font:500 13px var(--ap-font)!important;font-variant-numeric:tabular-nums;letter-spacing:0!important;color:var(--ap-l1)!important}
html body .views-dim{color:var(--ap-l2)!important}
html body .views-dim2{color:var(--ap-l3)!important}
html body .vhr-na,html body .growth-na{color:var(--ap-l3)!important}
html body .td-thumb img{border-radius:6px!important;border:0!important;box-shadow:0 0 0 .5px rgba(255,255,255,.1)!important}
/* status pills */
html body .age-pill{border:0!important;border-radius:999px!important;font:600 11.5px var(--ap-font)!important;letter-spacing:0!important;text-transform:none!important}
html body .miss-badge,html body .restrict-badge{display:inline-flex!important;align-items:center;gap:4px;border:0!important;border-radius:999px!important;
  padding:3px 9px!important;font:600 11px var(--ap-font)!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important;white-space:nowrap}
html body .miss-badge{background:rgba(255,69,58,.14)!important;color:#ff6961!important}
html body .restrict-badge{background:rgba(48,209,88,.14)!important;color:var(--ap-green)!important}

/* theme-v2 targets the dashboard table by id (#dataTable … !important). Its measured
   column widths / alignment stay untouched — only fonts and row tints are replaced. */
html body #dataTable th,html body #dataTable td,html body #dataTable td.views-num,html body #dataTable td.subs-num,
html body #dataTable td.vhr-cell{font-family:var(--ap-font)!important;letter-spacing:0!important}
html body #dataTable td.views-num,html body #dataTable td.subs-num,html body #dataTable td.vhr-cell{font-weight:500!important}
html body #dataTable tr.rank1-row,html body #dataTable tr.rank1-row td{background-color:transparent!important}
html body #dataTable tr.overdue-row,html body #dataTable tr.overdue-row td{background-color:rgba(255,69,58,.07)!important}
html body #dataTable tbody tr:hover td,html body #dataTable tr.rank1-row:hover td{background-color:rgba(255,255,255,.035)!important}
html body #dataTable tr.overdue-row:hover td{background-color:rgba(255,69,58,.11)!important}
html body #ot-studio-dashboard>.ot-flex,html body #ot-studio-dashboard>.ot-flex span:not(.ot-badge-v2){font-family:var(--ap-font)!important;letter-spacing:0!important}
html body #ot-studio-dashboard>.ot-flex>.ot-flex>span:first-child{font-size:12.5px!important;color:var(--ap-l2)!important}

/* ---------------- dashboard pop-ups (Channels, Analytics, Monetize; others follow the tokens) ---------------- */
html body .panel-box{background:#1f1f21!important;background-image:none!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:14px!important;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8)!important}
html body .panel-tab{font-family:var(--ap-font)!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;border-radius:7px!important;
  border-color:transparent!important}
html body .panel-tab.active{background:rgba(255,255,255,.16)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 1px 2px rgba(0,0,0,.3)!important}
html body .info-box{background:rgba(10,132,255,.08)!important;border:1px solid rgba(10,132,255,.22)!important;color:var(--ap-l2)!important;border-radius:10px!important}
html body .panel-section-title{text-transform:none!important;letter-spacing:0!important;font:600 12px var(--ap-font)!important;color:var(--ap-l2)!important}
html body #panelOverlay strong,html body .saved-hint{font-family:var(--ap-font)!important}
html body .ana-main{background:#161617!important;background-image:none!important}
html body .ana-kpi{background:#222224!important;background-image:none!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:12px!important;box-shadow:none!important}
html body .ana-kpi-label,html body .ana-section-title{text-transform:none!important;letter-spacing:0!important;font-family:var(--ap-font)!important}
html body .ana-kpi-label{font-weight:500!important;font-size:12px!important;color:var(--ap-l2)!important}
html body .ana-section-title{font-weight:600!important;font-size:13px!important;color:var(--ap-l1)!important}
html body #monetProgress{background:var(--ap-blue)!important;background-image:none!important;box-shadow:none!important}
/* Analytics Hub sidebar — same look as the main / admin sidebars */
html body .ana-sb-name{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;color:var(--ap-l1)!important;font:700 18px var(--ap-font)!important;letter-spacing:-.02em!important}
html body .ana-sb-sub,html body .ana-sb-label{text-transform:none!important;letter-spacing:0!important;font:600 11px var(--ap-font)!important;color:var(--ap-l3)!important}
html body .ana-sb-sub{font-weight:500!important;font-size:12px!important;color:var(--ap-l2)!important}
html body .ana-sb-item{border:0!important;border-radius:7px!important;font:500 13px var(--ap-font)!important;color:var(--ap-l1)!important}
html body .ana-sb-item.active,html body .ana-sb-item.active:hover{background:var(--ap-blue)!important;color:#fff!important;border:0!important;box-shadow:none!important}
html body .ana-sb-item::before{display:none!important}
html body .ana-sb-item.active .ana-sb-icon{color:#fff!important;filter:none!important}
html body .ana-sb-close{border:0!important;background:transparent!important;color:var(--ap-l2)!important;border-radius:7px!important}
html body .ana-sb-close:hover{background:rgba(255,255,255,.06)!important;color:var(--ap-l1)!important}
html body .ana-sb-footer{border-top:1px solid var(--ap-line)!important}

/* ---------------- Passcode screens — iOS-style (site lock #pinLock, page gate #ota-pin-gate, Admin #adminGate) ---------------- */
html body #pinLock{background:#0e0e0f!important}
/* onetab-auth.js builds the gate with class .ot-modal-bg, which is display:none until .open — and nothing
   adds .open, so a logged-out visit to ai/ci/templates… was a blank screen. The gate node is removed on unlock. */
html body #ota-pin-gate{display:flex!important;position:fixed!important;inset:0!important;z-index:999999!important;
  align-items:center!important;justify-content:center!important}
html body #ota-pin-gate,html body #adminGate.ap-passcode-screen{background:rgba(12,12,13,.88)!important;
  -webkit-backdrop-filter:blur(28px) saturate(140%)!important;backdrop-filter:blur(28px) saturate(140%)!important}
html body #pinLock .lock-card,html body #ota-pin-gate>div,html body #adminGate .ap-passcode{background:transparent!important;border:0!important;
  box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;width:auto!important;max-width:340px!important;padding:0!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important}
html body #pinLock .ot-modal-body,html body #ota-pin-gate .ot-modal-body,html body #ota-pin-gate>div:not(.ot-modal){display:flex!important;flex-direction:column!important;align-items:center!important;
  padding:0!important;background:none!important}
html body #pinLock .lock-brand{margin:0 0 26px!important}
html body #pinLock .lock-logo img{height:30px!important;width:auto!important;opacity:.92}
html body #adminGate .ap-pc-icon{color:rgba(255,255,255,.9);margin-bottom:12px}
html body #pinLock .lock-subtitle,html body #adminGate .ap-pc-title,html body #ota-pin-gate .ot-modal-body>div:first-child,html body #ota-pin-gate>div:not(.ot-modal)>div:first-child{
  font:500 20px var(--ap-font)!important;color:#fff!important;letter-spacing:-.01em!important;margin:0 0 6px!important;text-transform:none!important}
html body #ota-pin-gate .ot-modal-body>div:nth-child(2),html body #ota-pin-gate>div:not(.ot-modal)>div:nth-child(2),html body #adminGate .ap-pc-sub{font:400 13px var(--ap-font)!important;color:rgba(235,235,245,.6)!important;
  margin:0 0 24px!important}
html body #pinLock .lock-subtitle{margin-bottom:24px!important}
html body #pinLock .pin-dots,html body #ota-pin-gate #ota-pin-dots,html body #adminGate .ap-pc-dots{display:flex!important;gap:22px!important;
  justify-content:center!important;height:14px;margin:0 0 12px!important}
html body #pinLock .pin-dot,html body #ota-pin-gate #ota-pin-dots>span,html body #adminGate .ap-pc-dots i{display:block;width:13px!important;height:13px!important;
  border-radius:50%!important;border:1.5px solid rgba(255,255,255,.92)!important;background:transparent!important;box-shadow:none!important;transform:none;
  transition:background .12s ease!important;margin:0!important}
html body #pinLock .pin-dot.filled,html body #ota-pin-gate #ota-pin-dots>span.filled,html body #ota-pin-gate #ota-pin-dots>span[style*="ot-accent"],html body #adminGate .ap-pc-dots i.on{background:#fff!important}
html body #pinLock .pin-dot.error{border-color:#ff453a!important;background:#ff453a!important;animation:apShake .42s ease both}
html body #adminGate .ap-pc-dots.shake i{border-color:#ff453a!important;animation:apShake .42s ease both}
html body #ota-pin-gate #ota-pin-dots.ap-shake{animation:apShake .42s ease both}
html body #ota-pin-gate #ota-pin-dots.ap-shake>span{border-color:#ff453a!important}
@keyframes apShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-11px)}30%{transform:translateX(10px)}45%{transform:translateX(-7px)}
  60%{transform:translateX(5px)}75%{transform:translateX(-2px)}}
html body #lockError,html body #ota-pin-gate #ota-pin-error,html body #adminGate .ap-pc-error{min-height:18px;margin:0 0 18px!important;text-align:center;
  font:500 13px var(--ap-font)!important;color:#ff6961!important;letter-spacing:0!important}
html body #pinLock .pin-numpad,html body #ota-pin-gate .ota-numpad,html body #ota-pin-gate>div:not(.ot-modal)>div:last-child,html body #adminGate .ap-pc-pad{display:grid!important;grid-template-columns:repeat(3,78px)!important;
  gap:16px 26px!important;justify-content:center!important;margin:0!important;padding:0!important;background:none!important}
html body #pinLock .pin-btn,html body #ota-pin-gate button[data-pin],html body #adminGate .ap-pc-pad button{width:78px!important;height:78px!important;
  min-height:0!important;border-radius:50%!important;border:0!important;background:rgba(255,255,255,.14)!important;color:#fff!important;
  font:300 34px/1 var(--ap-font)!important;letter-spacing:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;gap:2px!important;padding:0!important;margin:0!important;box-shadow:none!important;transform:none!important;cursor:pointer;
  transition:background .12s ease!important;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html body #pinLock .pin-btn:hover,html body #ota-pin-gate button[data-pin]:hover,html body #adminGate .ap-pc-pad button:hover{background:rgba(255,255,255,.2)!important}
html body #pinLock .pin-btn:active,html body #ota-pin-gate button[data-pin]:active,html body #adminGate .ap-pc-pad button:active{background:rgba(255,255,255,.4)!important}
html body #pinLock .pin-btn .sub,html body #adminGate .ap-pc-pad button span{display:block!important;min-height:11px;font:600 9.5px var(--ap-font)!important;
  letter-spacing:.18em!important;color:rgba(255,255,255,.85)!important;margin:0!important}
html body #pinLock .pin-btn.empty-btn{visibility:hidden!important}
html body #pinLock .pin-btn.del-btn,html body #ota-pin-gate button[data-pin="del"],html body #adminGate .ap-pc-pad .ap-pc-text{
  background:transparent!important;font:400 16px var(--ap-font)!important;color:#fff!important}
html body #pinLock .pin-btn.del-btn:active,html body #adminGate .ap-pc-pad .ap-pc-text:active{background:rgba(255,255,255,.1)!important}
html body #pinLock .pin-btn:focus-visible,html body #adminGate .ap-pc-pad button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(10,132,255,.6)!important}
html body #adminGate .ap-pc-input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none;border:0!important;padding:0!important}
/* theme-v2 glass card wins on specificity (#pinLock .ot-modal-pin .ot-modal-body) — beat it: no card, no sheen,
   no 280px box (3 × 78px keys overflowed it and drew a horizontal scrollbar under the keypad) */
html body #pinLock .ot-modal-pin.lock-card,html body #ota-pin-gate>div,html body #adminGate .clock-box.ap-passcode{
  width:min(340px,calc(100vw - 32px))!important;min-width:0!important;max-width:none!important;overflow:visible!important;
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html body #pinLock .ot-modal-pin.lock-card::before,html body #pinLock .ot-modal-pin.lock-card::after,
html body #ota-pin-gate>div::before,html body #ota-pin-gate>div::after{display:none!important;content:none!important}
html body #pinLock .ot-modal-pin.lock-card .ot-modal-body{
  padding:0!important;overflow:visible!important;background:none!important;border:0!important;width:100%!important;max-width:none!important}
html body #pinLock,html body #ota-pin-gate,html body #adminGate.ap-passcode-screen{overflow-y:auto!important;padding:24px 16px!important}
html body #pinLock .lock-logo{width:auto!important;margin:0!important}
html body #pinLock .lock-logo img{max-height:30px!important;filter:none!important}
/* page gate extras: the shell bundles' gate is all inline styles (max-width:220px pad, 44px ghost buttons, icon delete) */
html body #ota-pin-gate .ot-modal-body,html body #ota-pin-gate>div:not(.ot-modal){padding:0!important;overflow:visible!important;background:none!important;border:0!important;max-width:none!important;text-align:center!important}
html body #ota-pin-gate .ota-numpad,html body #ota-pin-gate>div:not(.ot-modal)>div:last-child{max-width:none!important;width:auto!important}
html body #ota-pin-gate button[data-pin]::after{content:"";display:block;min-height:11px;font:600 9.5px var(--ap-font);letter-spacing:.18em;color:rgba(255,255,255,.85)}
html body #ota-pin-gate button[data-pin="2"]::after{content:"ABC"}html body #ota-pin-gate button[data-pin="3"]::after{content:"DEF"}html body #ota-pin-gate button[data-pin="4"]::after{content:"GHI"}
html body #ota-pin-gate button[data-pin="5"]::after{content:"JKL"}html body #ota-pin-gate button[data-pin="6"]::after{content:"MNO"}html body #ota-pin-gate button[data-pin="7"]::after{content:"PQRS"}
html body #ota-pin-gate button[data-pin="8"]::after{content:"TUV"}html body #ota-pin-gate button[data-pin="9"]::after{content:"WXYZ"}
html body #ota-pin-gate button[data-pin="del"]>*{display:none!important}
html body #ota-pin-gate button[data-pin="del"]::after{content:"Delete";min-height:0;font:400 16px var(--ap-font);letter-spacing:0;color:#fff}
html body #ota-pin-gate button[data-pin].ap-press{background:rgba(255,255,255,.4)!important}
html body #ota-pin-gate button[data-pin="del"].ap-press{background:rgba(255,255,255,.1)!important}
html body #ota-pin-gate button[data-pin]:focus-visible{outline:none!important;box-shadow:0 0 0 3px rgba(10,132,255,.6)!important}
@media (max-width:360px){
  html body #pinLock .pin-numpad,html body #ota-pin-gate .ota-numpad,html body #ota-pin-gate>div:not(.ot-modal)>div:last-child,html body #adminGate .ap-pc-pad{grid-template-columns:repeat(3,70px)!important;gap:14px 20px!important}
  html body #pinLock .pin-btn,html body #ota-pin-gate button[data-pin],html body #adminGate .ap-pc-pad button{width:70px!important;height:70px!important}
}
@media (max-height:700px){            /* laptops with short viewports / phones in landscape */
  html body #pinLock .pin-numpad,html body #ota-pin-gate .ota-numpad,html body #ota-pin-gate>div:not(.ot-modal)>div:last-child,html body #adminGate .ap-pc-pad{grid-template-columns:repeat(3,64px)!important;gap:10px 22px!important}
  html body #pinLock .pin-btn,html body #ota-pin-gate button[data-pin],html body #adminGate .ap-pc-pad button{width:64px!important;height:64px!important;font-size:28px!important}
  html body #pinLock .lock-brand{margin:0 0 14px!important}
  html body #pinLock .lock-subtitle,html body #adminGate .ap-pc-sub,html body #ota-pin-gate .ot-modal-body>div:nth-child(2),html body #ota-pin-gate>div:not(.ot-modal)>div:nth-child(2){margin-bottom:16px!important}
  html body #adminGate .ap-pc-icon{display:none}
}

/* ---------------- scrollbars ---------------- */
html body ::-webkit-scrollbar{width:10px;height:10px}
html body ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border:3px solid transparent;border-radius:10px;background-clip:padding-box}
html body ::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion:reduce){html body .ot-nav-item,html body .ot-btn-v2{transition:none!important}}

/* ---------------- One frame on every page — exactly the dashboard's (2026-11-06) ----------------
   The dashboard has a full-width 64px header with the logo centred over the 216px menu, and the
   menu starts under it. The other pages (OTS shell / bundle shell, mounted in #ot-app-root) put the
   menu at the very top and the logo in a header beside it — so every page change moved the whole
   menu 64px and the logo ~170px: the "jolt". Desktop only; phones keep their drawer.
   (CI Studio and Paglu have their own navigation and are left alone.) */
@media (min-width:1025px){
  html body #ot-app-root > .ot-app > .ot-main > .ot-topbar{position:fixed!important;top:0!important;left:0!important;right:0!important;
    width:auto!important;height:64px!important;padding-left:0!important;z-index:210!important;
    -webkit-backdrop-filter:saturate(1.8) blur(20px)!important;backdrop-filter:saturate(1.8) blur(20px)!important}
  html body #ot-app-root > .ot-app > .ot-main{padding-top:64px!important}
  html body #ot-app-root > .ot-app > .ot-sidebar{margin-top:64px!important;height:calc(100vh - 64px)!important}
  html body #ot-app-root .ot-topbar-brand{flex:0 0 216px!important;width:216px!important;justify-content:center!important;margin:0!important;padding:0!important}
  html body #ot-app-root .ot-topbar-logo{height:32px!important;width:auto!important}
  html body #ot-app-root .ot-topbar-brand-divider{display:none!important}
  html body #ot-app-root .ot-sb-footer{display:none!important}
  /* before the page's script builds the shell: paint the same empty frame, so nothing jumps in */
  html body:has(> #ot-app-root:empty)::before{content:"";position:fixed;left:0;top:64px;bottom:0;width:216px;z-index:1;pointer-events:none;
    background:#1d1d1f;border-right:1px solid rgba(255,255,255,.06)}
  html body:has(> #ot-app-root:empty)::after{content:"";position:fixed;left:0;right:0;top:0;height:64px;z-index:1;pointer-events:none;
    background:rgba(22,22,23,.82) url("logo-DAnOiI03.png") no-repeat 65px 16px/auto 32px;border-bottom:1px solid rgba(255,255,255,.06)}
}