/* ==========================================================================
   DashView — Settings additions (Appearance surface style, app download,
   AI↔Odoo connect + scope, response behaviour, security checklist,
   data/version updates). Loaded after security.css; uses the same tokens
   from css/base.css. Paired with js/settings-pro.js.
   ========================================================================== */

.apr-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--line,rgba(231,237,231,.1));}
.apr-row:first-of-type{padding-top:2px;}
.apr-row.no-border{border-bottom:none;}
.stg-card-subhead{margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--line,rgba(231,237,231,.1));}
.stg-card-subhead h4{margin:0;color:var(--ink);font-size:13px;font-weight:700;}
.stg-card-subhead p{margin:3px 0 0;color:var(--ink-50);font-size:12px;line-height:1.45;}
.stg-content .stg-field-grid+.stg-card-subhead{margin-top:20px;}
.stg-content .surface-opts{margin-top:8px;}
.stg-content .stg-field-help{line-height:1.5;}
.apr-txt b{display:block;font-size:13.5px;margin-bottom:2px;color:var(--ink);}
.apr-txt span{display:block;font-size:12px;color:var(--ink-50);max-width:40ch;line-height:1.4;}

.pro-seg{display:flex;border:1px solid var(--line,rgba(231,237,231,.14));border-radius:7px;overflow:hidden;flex-shrink:0;}
.pro-seg button{font-size:12.5px;padding:8px 14px;color:var(--ink-70);border:none;background:none;
  border-right:1px solid var(--line,rgba(231,237,231,.14));cursor:pointer;font-family:inherit;}
.pro-seg button:last-child{border-right:none;}
.pro-seg button.active{background:var(--signal);color:#1a1204;font-weight:600;}

.pro-swatches{display:flex;gap:10px;}
.pro-swatch{width:26px;height:26px;border-radius:50%;display:inline-block;cursor:pointer;
  border:2px solid transparent;box-shadow:0 0 0 1px var(--line,rgba(231,237,231,.14)) inset;}
.pro-swatch.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper-soft),0 0 0 3px var(--sw-c,var(--signal));}

.surface-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px;}
.surface-opt{position:relative;min-width:0;min-height:136px;border:1px solid var(--line,rgba(231,237,231,.14));border-radius:14px;
  padding:12px;cursor:pointer;background:var(--paper-soft);text-align:left;font-family:inherit;color:var(--ink);
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.surface-opt:hover{border-color:var(--signal);transform:translateY(-1px);}
.surface-opt:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
.surface-opt.active{border-color:var(--signal);background:var(--signal-10,rgba(232,163,61,.1));box-shadow:0 0 0 1px var(--signal-10,rgba(232,163,61,.1)),0 8px 20px -16px rgba(0,0,0,.65);}
.surface-swatch{position:relative;height:52px;overflow:hidden;border-radius:9px;margin-bottom:10px;border:1px solid var(--line);}
.surface-swatch.flat{background:var(--paper);}
.surface-swatch.glass{isolation:isolate;background:radial-gradient(ellipse at 18% 0%,rgba(91,143,174,.42),transparent 48%),radial-gradient(ellipse at 90% 100%,rgba(var(--sg,232,163,61),.38),transparent 50%),var(--paper-alt);border-color:rgba(255,255,255,.22);}
.surface-swatch.glass i{position:absolute;inset:8px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.23);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 5px 12px rgba(0,0,0,.16);backdrop-filter:blur(8px) saturate(155%);-webkit-backdrop-filter:blur(8px) saturate(155%);}
.surface-swatch.glass i:nth-child(2){inset:15px 34px 4px 25px;background:rgba(255,255,255,.12);}
.surface-swatch.glass i:nth-child(3){inset:4px 7px 22px 58px;border-color:rgba(255,255,255,.58);background:rgba(255,255,255,.14);}
.surface-opt b{display:block;font-size:12.5px;margin-bottom:2px;}
.surface-opt span{display:block;font-size:11px;color:var(--ink-50);}

.glass-demo{position:relative;isolation:isolate;overflow:hidden;background:var(--paper-soft);border:1px solid var(--line-strong);
  box-shadow:0 18px 44px -28px rgba(0,0,0,.5);}
.glass-demo::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse at 8% 0%,rgba(91,143,174,.22),transparent 52%),radial-gradient(ellipse at 95% 100%,rgba(var(--sg,232,163,61),.2),transparent 55%);}
.glass-demo .stg-card-head{background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(16px) saturate(165%);backdrop-filter:blur(16px) saturate(165%);}
html[data-theme="light"] .glass-demo .stg-card-head{background:rgba(255,255,255,.68);}
html[data-theme="dark"] .glass-demo .stg-card-head{background:rgba(10,12,11,.62);}
.glass-demo .stg-card-icon{background:rgba(255,255,255,.24)!important;border-color:rgba(255,255,255,.32);}
.glass-demo .stg-card-head-text h3,.glass-demo .stg-card-head-text p{color:var(--ink);}
.glass-demo .stg-card-head-text p{opacity:.82;}
.glass-preview{position:relative;isolation:isolate;min-height:116px;margin:0 18px 18px;overflow:hidden;border:1px solid var(--line-strong);
  border-radius:14px;background:linear-gradient(135deg,#35495a,#718c96 46%,#d2a25e);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.glass-preview::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,rgba(16,24,32,.24),transparent 52%,rgba(255,255,255,.12));}
.glass-preview-orb{position:absolute;width:150px;height:150px;border-radius:50%;filter:blur(1px);opacity:.82;}
.glass-preview-orb.orb-blue{left:12%;top:-72px;background:radial-gradient(circle at 35% 35%,#d8f2ff,#5285a6 72%);}
.glass-preview-orb.orb-amber{right:8%;bottom:-106px;background:radial-gradient(circle at 35% 35%,#fff0c8,#db9748 72%);}
.glass-preview-panel{position:absolute;inset:19px 22% 19px 8%;border:1px solid rgba(255,255,255,.56);border-radius:12px;
  background:rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.68),0 10px 22px rgba(15,24,32,.2);
  -webkit-backdrop-filter:blur(15px) saturate(175%);backdrop-filter:blur(15px) saturate(175%);}
.glass-preview-panel i{position:absolute;left:14px;right:30%;height:5px;border-radius:5px;background:rgba(255,255,255,.68);}
.glass-preview-panel i:nth-child(1){top:14px;width:32%;right:auto;height:7px;}
.glass-preview-panel i:nth-child(2){top:31px;}
.glass-preview-panel i:nth-child(3){top:43px;right:48%;}
.glass-preview-float{position:absolute;right:9%;top:28px;width:64px;height:54px;border:1px solid rgba(255,255,255,.64);border-radius:11px;
  background:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.74),0 8px 18px rgba(15,24,32,.18);
  -webkit-backdrop-filter:blur(12px) saturate(170%);backdrop-filter:blur(12px) saturate(170%);}
html[data-theme="light"] .glass-preview{background:linear-gradient(135deg,#8fb4c2,#e7eee8 48%,#e2b369);}
html[data-theme="dark"] .surface-swatch.glass{background:radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.10),transparent 48%),linear-gradient(135deg,#090b0a,#171b19 52%,#0c0f0e);}
html[data-theme="dark"] .surface-swatch.glass i{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.36);}
html[data-theme="dark"] .surface-swatch.glass i:nth-child(2){background:rgba(255,255,255,.06);}
html[data-theme="dark"] .surface-swatch.glass i:nth-child(3){background:rgba(255,255,255,.08);}
html[data-theme="dark"] .glass-preview{background:radial-gradient(ellipse at 18% 0%,rgba(255,255,255,.12),transparent 48%),radial-gradient(ellipse at 95% 100%,rgba(255,255,255,.06),transparent 50%),linear-gradient(135deg,#090b0a,#171b19 52%,#0c0f0e);}
html[data-theme="dark"] .glass-preview-orb.orb-blue{background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.26),rgba(120,130,126,.16) 72%);}
html[data-theme="dark"] .glass-preview-orb.orb-amber{background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.20),rgba(120,130,126,.12) 72%);}
html[data-theme="dark"] .glass-preview-panel{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.38);}
html[data-theme="dark"] .glass-preview-panel i{background:rgba(255,255,255,.68);}
html[data-theme="dark"] .glass-preview-float{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.42);}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .surface-swatch.glass i,.glass-demo .stg-card-head,.glass-preview-panel,.glass-preview-float{background:var(--paper-soft);}
}
@media (prefers-reduced-transparency: reduce){
  .surface-swatch.glass i,.glass-demo .stg-card-head,.glass-preview-panel,.glass-preview-float{background:var(--paper-soft);backdrop-filter:none;-webkit-backdrop-filter:none;}
}
@media (prefers-reduced-motion: reduce){.surface-opt{transition:none;}}
@media (prefers-contrast: more){.surface-opt{border-width:2px;}.glass-preview-panel,.glass-preview-float{border-color:#fff;}}

.app-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;}
.app-tile{border:1px solid var(--line,rgba(231,237,231,.14));border-radius:9px;padding:14px;
  display:flex;gap:12px;align-items:flex-start;}
.app-tile .stg-card-icon{background:var(--paper-soft);width:34px;height:34px;}
.app-tile b{display:block;font-size:13px;margin-bottom:2px;}
.app-tile span{display:block;font-size:11.5px;color:var(--ink-50);line-height:1.4;margin-bottom:8px;}

.chk-list{margin:0;padding:0;list-style:none;}
.chk-row{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line,rgba(231,237,231,.1));}
.chk-row:last-child{border-bottom:none;}
.chk-badge{font-size:10px;padding:2px 7px;border-radius:10px;flex-shrink:0;margin-top:1px;font-weight:600;letter-spacing:.02em;white-space:nowrap;}
.chk-badge.req{background:var(--danger-10);color:var(--danger);}
.chk-badge.rec{background:var(--signal-10);color:var(--signal);}
.chk-badge.opt{background:var(--paper-soft,rgba(128,128,128,.14));color:var(--ink-70,#6b7280);}
.chk-badge.ok{background:color-mix(in srgb,var(--ios-green,#30d158) 14%,transparent);color:var(--ios-green,#30d158);}
.chk-row .chk-txt b{display:block;font-size:13px;color:var(--ink);font-weight:500;}
.chk-row .chk-txt span{display:block;font-size:11.5px;color:var(--ink-50);margin-top:1px;}

.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;}
.scope-item{display:flex;gap:8px;align-items:center;border:1px solid var(--line,rgba(231,237,231,.14));
  border-radius:7px;padding:9px 11px;font-size:12.5px;color:var(--ink);cursor:pointer;background:none;
  font-family:inherit;text-align:left;}
.scope-item input{accent-color:var(--signal);width:14px;height:14px;flex-shrink:0;}
.scope-item.off{color:var(--ink-50);}

@media (max-width:620px){ .app-tiles,.scope-grid,.surface-opts{grid-template-columns:1fr;} .surface-opt{min-height:0;} }

/* Settings control center */
.stgo-search { display: flex; align-items: center; gap: 10px; }
.stgo-search input { min-width: 240px; padding: 9px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: var(--paper, #fff); color: inherit; font: inherit; font-size: .88rem; }
.stgo-search input:focus-visible { outline: 2px solid var(--signal, #6366f1); outline-offset: 1px; }
.stgo-search span { font-size: .78rem; opacity: .65; min-width: 64px; }
.stgo-center { margin: 0 0 16px; display: grid; gap: 12px; }
.stgo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.stgo-card{min-width:0}
.stgo-card { text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line, #e5e7eb); border-left: 4px solid #94a3b8; background: var(--paper, #fff); display: grid; gap: 2px; transition: transform .12s, box-shadow .12s; }
.stgo-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.stgo-card:focus-visible { outline: 2px solid var(--signal, #6366f1); outline-offset: 2px; }
.stgo-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; opacity: .6; }
.stgo-card b { font-size: 1.15rem; font-variant-numeric: tabular-nums; } .stgo-card em { font-style: normal; font-size: .76rem; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stgo-card.tone-good { border-left-color: #16a34a; } .stgo-card.tone-warn { border-left-color: #d97706; } .stgo-card.tone-bad { border-left-color: #dc2626; } .stgo-card.tone-info { border-left-color: #6366f1; }
.stgo-todo { padding: 12px 16px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; background: var(--paper, #fff); }
.stgo-todo h3 { margin: 0 0 8px; font-size: .95rem; } .stgo-todo h3 small { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #d9770622; color: #b45309; }
.stgo-todo summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}
.stgo-todo summary::-webkit-details-marker{display:none}
.stgo-todo summary h3{margin:0}
.stgo-todo summary>span{color:var(--ink-50);font-size:12px}
.stgo-todo[open] ul{margin-top:12px;padding-top:10px;border-top:1px solid var(--line,#e5e7eb)}
.stgo-todo p { margin: 0; font-size: .84rem; opacity: .75; } .stgo-todo.is-clear { border-left: 4px solid #16a34a; }
.stgo-todo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stgo-todo li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; border-left: 3px solid #d97706; background: #94a3b80f; }
.stgo-todo li.tone-bad { border-left-color: #dc2626; } .stgo-todo li b { display: block; font-size: .85rem; } .stgo-todo li span { font-size: .76rem; opacity: .7; }
.stg-version-link { padding: 0; border: 0; background: none; color: var(--signal); font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.stg-version-link:hover { text-decoration: underline; }
.stg-manual-body { padding-top: 0; }
.stg-manual-frame { display: block; width: 100%; height: min(74vh, 900px); min-height: 560px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.stg-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.stg-shortcuts>div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-soft); }
.stg-shortcuts>div>span { flex: 1; min-width: 140px; color: var(--ink-70); font-size: .84rem; }
.stg-shortcuts kbd { padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); color: var(--ink); font: .7rem var(--f-mono); }
/* ---- Release history: iOS-style sheet ("What's new") ----
   Centred card on laptop / tablet, bottom sheet with a grabber on phones. Grouped rows, typed New / Improved / Fixed / Security chips,
   All / New / Improved / Fixed filter, hairline title bar on scroll, glass backdrop, safe-area aware, light + dark. */
.stgo-release-dialog {
  --rel-bg: var(--paper); --rel-card: var(--paper-soft); --rel-thumb: color-mix(in srgb, var(--ink) 20%, var(--paper));
  --rel-hair: color-mix(in srgb, var(--ink) 11%, transparent); --rel-fill: color-mix(in srgb, var(--ink) 8%, transparent);
  position: fixed; inset: 0; margin: auto; /* the global `* { margin: 0 }` reset removed the dialog's auto-centring and pinned it to the top-left corner */
  width: min(600px, calc(100vw - 32px)); max-width: none; height: fit-content; max-height: min(86vh, 780px); max-height: min(86dvh, 780px);
  padding: 0; overflow: hidden; border: 0; border-radius: 28px; background: var(--rel-bg); color: var(--ink);
  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--ink) 16%, transparent), 0 40px 90px -24px rgba(0,0,0,.6), 0 8px 24px -10px rgba(0,0,0,.3);
  -webkit-font-smoothing: antialiased; transition: transform .34s var(--ease, cubic-bezier(.16,1,.3,1));
}
html[data-theme="light"] .stgo-release-dialog { --rel-bg: var(--paper-soft); --rel-card: var(--paper); --rel-thumb: var(--paper); box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 40px 90px -28px rgba(20,28,60,.38), 0 8px 24px -10px rgba(20,28,60,.18); }
.stgo-release-dialog[open] { display: flex; flex-direction: column; animation: stgoRelIn .4s var(--ease, cubic-bezier(.16,1,.3,1)) both; }
.stgo-release-dialog.is-closing { animation: stgoRelOut .24s cubic-bezier(.4,0,1,1) both; pointer-events: none; }
.stgo-release-dialog.is-dragging { transition: none; }
.stgo-release-dialog [hidden] { display: none !important; }
.stgo-release-dialog::backdrop { background: rgba(8,10,14,.46); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
html[data-theme="light"] .stgo-release-dialog::backdrop { background: rgba(110,120,148,.30); }
.stgo-release-dialog[open]::backdrop { animation: stgoRelFade .3s ease both; }
.stgo-release-dialog.is-closing::backdrop { animation: stgoRelFadeOut .24s ease both; }
html.stgo-rel-lock, html.stgo-rel-lock body { overflow: hidden !important; }
html.stgo-rel-lock.stgo-rel-has-sb { scrollbar-gutter: stable; }
@keyframes stgoRelIn { from { opacity: 0; transform: translateY(14px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes stgoRelOut { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes stgoRelUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes stgoRelDown { from { transform: translateY(var(--rel-dy, 0px)); } to { transform: translateY(100%); } }
@keyframes stgoRelFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stgoRelFadeOut { to { opacity: 0; } }
@keyframes stgoRelSpin { to { transform: rotate(360deg); } }
@keyframes stgoRelShimmer { 50% { opacity: .45; } }

/* title bar */
.stgo-rel-top { position: relative; z-index: 2; flex: none; padding: 6px 20px 0; background: var(--rel-bg); touch-action: none; transition: box-shadow .2s ease; }
.stgo-rel-top.is-scrolled { box-shadow: 0 1px 0 var(--rel-hair); }
.stgo-rel-grab { display: none; width: 36px; height: 5px; margin: 2px auto 0; border-radius: 3px; background: var(--ink); opacity: .22; }
.stgo-rel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0 12px; }
.stgo-rel-titles { min-width: 0; }
.stgo-rel-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; color: var(--ink-50); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.5; text-transform: uppercase; }
.stgo-rel-eyebrow>span { display: inline-flex; align-items: center; gap: 6px; }
.stgo-rel-spin { flex: none; width: 10px; height: 10px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: stgoRelSpin .8s linear infinite; }
.stgo-release-dialog h2 { margin: 2px 0 0; color: var(--ink); font-size: 28px; font-weight: 700; letter-spacing: -.022em; line-height: 1.12; }
.stgo-rel-x { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 2px; padding: 0; border: 0; border-radius: 50%; background: var(--rel-fill); color: var(--ink-50); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s ease, color .15s ease, transform .2s var(--ease, cubic-bezier(.16,1,.3,1)); }
.stgo-rel-x::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; } /* 44 px touch target */
.stgo-rel-x:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }
.stgo-rel-x:active { transform: scale(.9); }
.stgo-rel-x:focus-visible, .stgo-rel-seg button:focus-visible, .stgo-rel-retry:focus-visible { outline: 2px solid var(--signal, var(--ios-blue)); outline-offset: 2px; }
.stgo-rel-seg { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 12px; padding: 2px; border-radius: 10px; background: var(--rel-fill); }
.stgo-rel-thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 4); border-radius: 8px; background: var(--rel-thumb); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 .5px 1px rgba(0,0,0,.16); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .32s var(--ease, cubic-bezier(.16,1,.3,1)); pointer-events: none; }
.stgo-rel-seg button { position: relative; z-index: 1; height: 30px; padding: 0 4px; border: 0; border-radius: 8px; background: none; color: var(--ink-70); font-size: 13px; font-weight: 600; letter-spacing: -.005em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s ease; }
.stgo-rel-seg button[aria-pressed="true"] { color: var(--ink); }

/* scrolling list */
.stgo-release-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px)); outline: none; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent; }
.stgo-rel { margin: 0 0 22px; }
.stgo-rel:last-of-type { margin-bottom: 0; }
.stgo-rel-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 0 16px 8px; }
.stgo-rel-hd h3 { margin: 0; color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.stgo-rel-hd time { margin-left: auto; color: var(--ink-50); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stgo-rel-badge { padding: 2px 8px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); font-size: 11px; font-weight: 600; line-height: 1.45; white-space: nowrap; }
.stgo-rel-badge.is-installed { --c: var(--ios-green); } .stgo-rel-badge.is-update { --c: var(--ios-blue); } .stgo-rel-badge.is-critical { --c: var(--ios-orange); }
.stgo-rel-list { margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: 16px; background: var(--rel-card); }
.stgo-rel-list li { position: relative; padding: 11px 16px; list-style: none; }
.stgo-rel-list li:not([hidden]) ~ li:not([hidden])::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--rel-hair); }
.stgo-rel-list p { margin: 0; color: var(--ink); font-size: 15px; letter-spacing: -.01em; line-height: 1.42; overflow-wrap: anywhere; text-wrap: pretty; }
.stgo-rel-list b { font-weight: 600; }
.stgo-rel-chip { display: inline-block; margin-right: 7px; padding: 1px 7px; border-radius: 6px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; vertical-align: 1px; }
.stgo-rel-chip.c-new { --c: var(--ios-blue); } .stgo-rel-chip.c-imp { --c: var(--ios-orange); } .stgo-rel-chip.c-fix { --c: var(--ios-green); } /* same meaning as the Software Update sheet and the Settings update card */
.stgo-rel-chip.c-sec { --c: var(--ios-red); } .stgo-rel-chip.c-des { --c: var(--ios-purple); } .stgo-rel-chip.c-chg, .stgo-rel-chip.c-upd { --c: var(--ios-gray); }
.stgo-rel-list code { padding: 1px 4px; border-radius: 5px; background: var(--rel-fill); color: inherit; font: 500 .86em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.stgo-rel-none { margin: 0; padding: 11px 16px; border-radius: 16px; background: var(--rel-card); color: var(--ink-50); font-size: 15px; }
.stgo-rel-empty, .stgo-rel-state { margin: 0; padding: 48px 16px; color: var(--ink-50); font-size: 15px; text-align: center; }
.stgo-rel-state b { display: block; color: var(--ink); font-size: 17px; font-weight: 600; }
.stgo-rel-state p { margin: 4px 0 16px; }
.stgo-rel-retry { padding: 8px 18px; border: 0; border-radius: 99px; background: var(--signal, var(--ios-blue)); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.stgo-rel-skel { display: grid; gap: 8px; }
.stgo-rel-skel>i { display: block; width: 38%; height: 16px; margin: 6px 16px 0; border-radius: 6px; background: var(--rel-fill); animation: stgoRelShimmer 1.4s ease-in-out infinite; }
.stgo-rel-skel>div { display: grid; gap: 12px; margin-bottom: 14px; padding: 16px; border-radius: 16px; background: var(--rel-card); }
.stgo-rel-skel b { display: block; height: 12px; border-radius: 6px; background: var(--rel-fill); animation: stgoRelShimmer 1.4s ease-in-out infinite; }
.stgo-rel-skel b:nth-child(2) { width: 86%; } .stgo-rel-skel b:nth-child(3) { width: 58%; }

/* phones: bottom sheet */
@media (max-width: 640px) {
  .stgo-release-dialog { width: 100%; max-height: calc(100vh - 28px - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 28px - env(safe-area-inset-top, 0px)); margin: auto 0 0; border-radius: 26px 26px 0 0; }
  .stgo-release-dialog[open] { animation-name: stgoRelUp; animation-duration: .44s; }
  .stgo-release-dialog.is-closing { animation-name: stgoRelDown; animation-duration: .28s; }
  .stgo-rel-top { padding: 6px 16px 0; }
  .stgo-rel-grab { display: block; }
  .stgo-rel-head { padding-top: 10px; }
  .stgo-release-dialog h2 { font-size: 26px; }
  .stgo-release-body { padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .stgo-rel-seg button { height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .stgo-release-dialog, .stgo-release-dialog::backdrop, .stgo-rel-thumb, .stgo-rel-x, .stgo-rel-top, .stgo-rel-spin, .stgo-rel-skel>i, .stgo-rel-skel b { animation: none !important; transition: none !important; }
}
.stg-tab.stgo-nomatch { opacity: .35; }
.stg-card.stgo-hit { outline: 2px solid var(--signal, #6366f1); outline-offset: 2px; } .stg-card.stgo-dim { opacity: .45; }
@media (max-width: 640px) { .stgo-search input { min-width: 0; width: 100%; } .stgo-search { width: 100%; } }
@media print { .stgo-center, .stgo-search { display: none; } }


/* ── Software update card (matches the update popup) ─────────────────────── */
.stg-conn-meta-item span.upd-pill { display: inline-flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%; padding: 3px 10px 3px 9px; border-radius: 14px; font-size: 12px; font-weight: 600; line-height: 1.4; background: color-mix(in srgb,var(--ios-green,#30d158) 12%,transparent); color: var(--ios-green,#30d158); }
.stg-conn-meta-item span.upd-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stg-conn-meta-item span.upd-pill.is-warn { background: rgba(232,163,61,.14); color: #e8a33d; }
.stg-conn-meta-item span.upd-pill.is-info { background: rgba(91,143,174,.16); color: #6fb0dd; }
.stg-conn-meta-item span.upd-pill.is-info::before { animation: upd-blink 1.1s ease-in-out infinite; }
.stg-conn-meta-item span.upd-pill.is-bad  { background: color-mix(in srgb,var(--ios-red,#ff453a) 14%,transparent); color: var(--ios-red,#ff453a); }
.stg-conn-meta-item span.upd-pill.is-ok   { background: color-mix(in srgb,var(--ios-green,#30d158) 12%,transparent); color: var(--ios-green,#30d158); }
html[data-theme="light"] .stg-conn-meta-item span.upd-pill.is-warn { color: #a85d08; }
html[data-theme="light"] .stg-conn-meta-item span.upd-pill.is-info { color: #2563a8; }
html[data-theme="light"] .stg-conn-meta-item span.upd-pill.is-ok, html[data-theme="light"] .stg-conn-meta-item span.upd-pill { color: #17814a; }
html[data-theme="light"] .stg-conn-meta-item span.upd-pill.is-bad { color: #c2362a; }
@keyframes upd-blink { 50% { opacity: .25; } }
.upd-prog { height: 6px; border-radius: 6px; background: var(--line, rgba(150,168,215,.2)); overflow: hidden; margin: 4px 0 14px; }
.upd-prog > i { display: block; height: 100%; width: 0; border-radius: 6px; background: #6fb0dd; transition: width .3s ease; }
.upd-notes { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line-strong, rgba(150,168,215,.25)); border-radius: 12px; background: var(--paper-soft, rgba(150,168,215,.06)); }
.upd-notes[hidden], .upd-prog[hidden] { display: none; }
.upd-notes-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; font-size: 13px; }
.upd-notes-h span { font-size: 11.5px; color: var(--ink-50); }
.upd-notes ul { list-style: none; margin: 0; padding: 0; }
.upd-notes li { padding: 7px 0; font-size: 13px; color: var(--ink-70, inherit); border-bottom: 1px solid var(--line, rgba(150,168,215,.15)); }
.upd-notes li:last-child { border: 0; }
.upd-tag { font-style: normal; display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; background: rgba(111,176,221,.16); color: #6fb0dd; }
.upd-tag.is-improved { background: rgba(232,163,61,.16); color: #e8a33d; }
.upd-tag.is-fixed { background: color-mix(in srgb,var(--ios-green,#30d158) 16%,transparent); color: var(--ios-green,#30d158); }
.upd-tag.is-security { background: color-mix(in srgb,var(--ios-red,#ff453a) 16%,transparent); color: var(--ios-red,#ff453a); }
html[data-theme="light"] .upd-tag { color: #2563a8; }
html[data-theme="light"] .upd-tag.is-improved { color: #a85d08; }
html[data-theme="light"] .upd-tag.is-fixed { color: #17814a; }
@media (max-width:600px){.stgo-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stgo-card{padding:10px 12px}.stgo-card em{white-space:normal}}
@media (max-width:640px){.stg-manual-frame{height:68vh;min-height:460px}.stg-shortcuts{grid-template-columns:1fr}}
html[data-theme="light"] .upd-tag.is-security { color: #c2362a; }
@media (prefers-reduced-motion: reduce) { .stg-conn-meta-item span.upd-pill.is-info::before { animation: none; } }

/* ── Software update card: professional refresh ─────────────────────────── */
.stg-conn-meta-item span.upd-pill { padding: 5px 12px 5px 10px; font-size: 12.5px; }
.upd-prog { position: relative; height: 6px; margin: 6px 0 14px; }
.upd-prog > i { background: var(--signal, #6fb0dd); }
.upd-prog.is-ind > i { position: absolute; width: 34%; animation: upd-slide 1.5s ease-in-out infinite; }
@keyframes upd-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.upd-maint { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 8px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-70, inherit); background: color-mix(in srgb, var(--signal, #e8a33d) 11%, transparent); border: 1px solid color-mix(in srgb, var(--signal, #e8a33d) 34%, transparent); }
.upd-maint[hidden] { display: none; }
.upd-maint::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--signal, #e8a33d); animation: upd-blink 1.1s ease-in-out infinite; }
.upd-notes { padding: 14px 16px; border-radius: 14px; }
.upd-notes-h b { font-size: 13.5px; }
.upd-notes li { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; line-height: 1.5; }
.upd-tag { flex: none; min-width: 66px; margin-right: 0; text-align: center; padding: 2px 8px; }
@media (prefers-reduced-motion: reduce) { .upd-prog.is-ind > i, .upd-maint::before { animation: none; } }

/* ==========================================================================
   Appearance studio  (Settings → Appearance)
   Every colour comes from the live tokens (--signal, --ink, --line, --paper-soft)
   so the studio itself follows the chosen theme, accent and glass.
   ========================================================================== */
.ap-studio{display:grid;gap:16px;margin-bottom:16px}
.ap-legacy{display:none!important}
.ap-studio .stg-card{margin:0}
.ap-sec-head{padding:18px 22px 0}
.ap-sec-head h4{margin:0;font-size:14.5px;font-weight:700;color:var(--ink)}
.ap-sec-head p{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-50);max-width:62ch}
.ap-sec-split{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ap-empty{padding:16px 22px;color:var(--ink-50);font-size:13px;list-style:none}

/* hero: live preview */
.ap-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:20px 22px 0}
.ap-hero-top h3{margin:0;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.ap-hero-top p{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-50);max-width:58ch}
.ap-hero-actions,.ap-looks-tools{display:flex;gap:8px;flex-wrap:wrap}
.ap-hero-body{padding:16px 22px 20px;display:grid;gap:14px}
.apv-stage{position:relative;overflow:hidden;border-radius:16px;padding:22px;border:1px solid var(--line,rgba(231,237,231,.14));
  background:radial-gradient(420px 220px at 10% 0%,color-mix(in srgb,var(--signal) calc(var(--glass-glow,14)*2.2%),transparent),transparent 70%),
             radial-gradient(380px 240px at 100% 100%,color-mix(in srgb,#5b8fae calc(var(--glass-glow,14)*1.8%),transparent),transparent 70%),var(--paper,#0a0c0b)}
.apv-win{display:grid;grid-template-columns:54px minmax(0,1fr);gap:0;border-radius:14px;overflow:hidden;border:1px solid var(--line,rgba(231,237,231,.16));background:var(--paper-soft,#131715);box-shadow:0 18px 40px -22px rgba(0,0,0,.6);min-height:176px}
html[data-surface="glass"] .apv-win{background:color-mix(in srgb,var(--paper-soft,#131715) calc((76 + var(--glass-d,0))*1%),transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur,20px)) saturate(var(--glass-sat,155%));backdrop-filter:blur(var(--glass-blur,20px)) saturate(var(--glass-sat,155%));
  border-color:var(--lg-edge,rgba(255,255,255,.14));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -22px rgba(0,0,0,.6)}
.apv-side{display:flex;flex-direction:column;gap:10px;padding:14px 0;align-items:center;border-right:1px solid var(--line,rgba(231,237,231,.12))}
.apv-side i{width:22px;height:6px;border-radius:4px;background:var(--ink-30,rgba(231,237,231,.3))}
.apv-side i:first-child{background:var(--signal);width:26px}
.apv-main{padding:14px;display:grid;gap:12px;min-width:0}
.apv-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.apv-kpis div{padding:8px 10px;border-radius:10px;border:1px solid var(--line,rgba(231,237,231,.12));background:color-mix(in srgb,var(--ink,#e9ece9) 4%,transparent)}
.apv-kpis small{display:block;font-size:10.5px;color:var(--ink-50);letter-spacing:.02em}
.apv-kpis b{font-size:15px;color:var(--ink);letter-spacing:-.01em}
.apv-kpis div:first-child b{color:var(--signal)}
.apv-chart{position:relative;height:74px;display:flex;align-items:flex-end;gap:7px;padding-top:6px}
.apv-chart i{flex:1;border-radius:5px 5px 2px 2px;min-width:0;transition:height .3s ease,background-color .25s}
.apv-chart svg{position:absolute;inset:6px 0 0;width:100%;height:calc(100% - 6px);pointer-events:none;overflow:visible}
.ap-chips{display:flex;gap:8px;flex-wrap:wrap}
.ap-chip-s{display:inline-flex;flex-direction:column;gap:1px;padding:7px 12px;border-radius:10px;border:1px solid var(--line,rgba(231,237,231,.14));background:color-mix(in srgb,var(--ink,#e9ece9) 3%,transparent)}
.ap-chip-s small{font-size:10.5px;color:var(--ink-50);text-transform:uppercase;letter-spacing:.06em}
.ap-chip-s b{font-size:12.5px;text-transform:capitalize;color:var(--ink)}

/* option cards */
.ap-cards{display:grid;gap:12px;padding:16px 22px 20px}
.ap-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ap-cards-2{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:6px}
.ap-opt{position:relative;display:flex;flex-direction:column;gap:7px;text-align:left;font-family:inherit;color:var(--ink);cursor:pointer;
  padding:12px;border-radius:14px;border:1px solid var(--line,rgba(231,237,231,.14));background:var(--paper-soft);
  transition:border-color .18s,background-color .18s,box-shadow .18s,transform .18s}
.ap-opt:hover{border-color:color-mix(in srgb,var(--signal) 55%,var(--line,#333));transform:translateY(-1px)}
.ap-opt:focus-visible,.ap-acc:focus-visible,.ap-chip:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.ap-opt.active{border-color:var(--signal);background:var(--signal-10,rgba(232,163,61,.1));box-shadow:0 0 0 1px var(--signal-10,rgba(232,163,61,.1)),0 10px 24px -16px rgba(0,0,0,.6)}
.ap-opt-name{display:flex;align-items:center;gap:7px;font-size:13.5px}
.ap-opt-name svg{width:15px;height:15px;color:var(--ink-50);flex:none}
.ap-opt small{font-size:11.5px;color:var(--ink-50);line-height:1.4}
.ap-tick{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--signal);color:#1a1204;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.ap-tick svg{width:11px;height:11px}
.ap-opt.active .ap-tick{opacity:1;transform:none}

/* theme mini mock-ups (fixed colours on purpose: they show each theme, not the current one) */
.apt-mock{display:grid;grid-template-columns:18% 1fr;grid-template-rows:auto 1fr;gap:5px;height:70px;padding:8px;border-radius:10px;border:1px solid rgba(128,128,128,.28);overflow:hidden}
.apt-mock i{display:block;border-radius:3px}
.apt-mock i:nth-child(1){grid-row:1/3;background:var(--m-side)}
.apt-mock i:nth-child(2){height:8px;background:var(--m-line)}
.apt-mock i:nth-child(3){background:linear-gradient(90deg,var(--signal) 0 34%,transparent 34%),var(--m-card);border-radius:5px}
.apt-light{--m-side:#dcdfd8;--m-line:#c5cac1;--m-card:#fff;background:#f2f3ef}
.apt-dark{--m-side:#262b28;--m-line:#343a36;--m-card:#131715;background:#0a0c0b}
.apt-system{--m-side:#8d968f;--m-line:#8d968f;--m-card:#ffffff66;background:linear-gradient(115deg,#f2f3ef 50%,#0a0c0b 50%)}
.aps-mock{position:relative;display:block;height:70px;border-radius:10px;overflow:hidden;border:1px solid var(--line,rgba(231,237,231,.14))}
.aps-flat{background:var(--paper,#0a0c0b)}
.aps-flat i{position:absolute;border-radius:6px;background:var(--paper-soft);border:1px solid var(--line)}
.aps-flat i:nth-child(1){inset:10px 56% 10px 10px}.aps-flat i:nth-child(2){inset:10px 10px 10px 48%}
.aps-glass{background:radial-gradient(90px 60px at 15% 10%,color-mix(in srgb,var(--signal) 55%,transparent),transparent 70%),radial-gradient(90px 60px at 95% 100%,#5b8fae88,transparent 70%),var(--paper-alt,#101312)}
.aps-glass i{position:absolute;border-radius:8px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.55);-webkit-backdrop-filter:blur(7px) saturate(160%);backdrop-filter:blur(7px) saturate(160%)}
.aps-glass i:nth-child(1){inset:10px 56% 10px 10px}.aps-glass i:nth-child(2){inset:10px 10px 10px 48%}

/* accent swatches */
.ap-accents{display:flex;flex-wrap:wrap;gap:10px;padding:16px 22px 20px}
.ap-acc{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border-radius:999px;font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer;
  border:1px solid var(--line,rgba(231,237,231,.16));background:var(--paper-soft);transition:border-color .15s,box-shadow .15s,transform .15s}
.ap-acc:hover{transform:translateY(-1px);border-color:var(--c)}
.ap-acc-dot{width:24px;height:24px;border-radius:50%;background:var(--c);display:grid;place-items:center;color:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.ap-acc-dot svg{width:12px;height:12px;opacity:0;transition:opacity .15s}
.ap-acc.active{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.ap-acc.active .ap-acc-dot svg{opacity:1}

/* glass lab */
.ap-lab{margin:6px 22px 20px;padding:16px;border-radius:14px;border:1px solid var(--line,rgba(231,237,231,.14));background:color-mix(in srgb,var(--ink,#e9ece9) 2.5%,transparent);display:grid;gap:16px;position:relative}
.ap-lab-note{display:none;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ink-50)}
.ap-lab.is-off .ap-lab-note{display:flex}
.ap-lab.is-off .ap-presets,.ap-lab.is-off .ap-sliders,.ap-lab.is-off .ap-lab-foot{opacity:.45;pointer-events:none}
.ap-presets{display:flex;gap:8px;flex-wrap:wrap}
.ap-chip{font-family:inherit;font-size:12.5px;padding:7px 14px;border-radius:999px;cursor:pointer;color:var(--ink-70,var(--ink));border:1px solid var(--line,rgba(231,237,231,.16));background:var(--paper-soft);transition:border-color .15s,background-color .15s}
.ap-chip:hover{border-color:var(--signal)}
.ap-chip.active{border-color:var(--signal);background:var(--signal-10,rgba(232,163,61,.12));color:var(--ink);font-weight:600}
.ap-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
.ap-slider{display:grid;gap:6px;min-width:0}
.ap-slider-t{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink)}
.ap-slider-t output{font-variant-numeric:tabular-nums;color:var(--signal);font-weight:700}
.ap-slider small{font-size:11.5px;color:var(--ink-50);line-height:1.4}
.ap-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:color-mix(in srgb,var(--ink,#e9ece9) 16%,transparent);outline:none;cursor:pointer}
.ap-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--signal);border:2px solid var(--paper-soft,#131715);box-shadow:0 0 0 1px var(--signal),0 3px 8px rgba(0,0,0,.4)}
.ap-slider input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--signal);border:2px solid var(--paper-soft,#131715)}
.ap-slider input[type=range]:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 35%,transparent)}
.ap-lab-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:var(--ink-50)}

/* chart colour schemes */
.ap-seg button{font-size:12px;padding:6px 12px}
.ap-schemes .ap-scheme{gap:8px}
.aps-dots{display:flex;gap:4px}
.aps-dots i{flex:1;height:14px;border-radius:5px;min-width:0}
.aps-bars{display:flex;align-items:flex-end;gap:4px;height:34px;padding:6px;border-radius:9px;background:color-mix(in srgb,var(--ink,#e9ece9) 4%,transparent)}
.aps-bars i{flex:1;border-radius:3px 3px 1px 1px;min-width:0}
.ap-scheme.is-light .aps-bars{background:#f2f3ef}

/* schedule */
.ap-sched{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 26px;padding:16px 22px 20px}
.ap-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;color:var(--ink)}
.ap-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.ap-toggle-ui{position:relative;width:40px;height:22px;border-radius:99px;background:color-mix(in srgb,var(--ink,#e9ece9) 22%,transparent);transition:background-color .18s}
.ap-toggle-ui::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .18s}
.ap-toggle input:checked+.ap-toggle-ui{background:var(--signal)}
.ap-toggle input:checked+.ap-toggle-ui::after{transform:translateX(18px)}
.ap-toggle input:focus-visible+.ap-toggle-ui{outline:2px solid var(--signal);outline-offset:3px}
.ap-time{display:grid;gap:5px;font-size:12px;color:var(--ink-50)}
.ap-time input{font:inherit;font-size:13.5px;padding:7px 10px;border-radius:9px;border:1px solid var(--line,rgba(231,237,231,.16));background:var(--paper-soft);color:var(--ink);color-scheme:light dark}

/* saved looks */
.ap-look-form{display:flex;gap:10px;padding:14px 22px 4px;flex-wrap:wrap}
.ap-look-form .stg-input{flex:1 1 220px;min-width:0}
.ap-looks{list-style:none;margin:0;padding:8px 22px 18px;display:grid;gap:8px}
.ap-look{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line,rgba(231,237,231,.14));background:var(--paper-soft)}
.ap-look-name{min-width:0}.ap-look-name b{display:block;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-look-name small{font-size:11.5px;color:var(--ink-50);text-transform:capitalize}
.ap-del:hover{border-color:#e5484d;color:#e5484d}
.ap-import{cursor:pointer}

@media (max-width:760px){
  .ap-cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-sliders{grid-template-columns:1fr}
  .ap-sec-head,.ap-hero-top{padding-left:16px;padding-right:16px}
  .ap-cards,.ap-accents,.ap-sched,.ap-look-form,.ap-looks,.ap-hero-body{padding-left:16px;padding-right:16px}
  .ap-lab{margin-left:16px;margin-right:16px}
  .ap-look{grid-template-columns:minmax(0,1fr) auto}.ap-look .ap-del{grid-column:1/-1}
}
@media (max-width:420px){.ap-cards-3,.ap-cards-2{grid-template-columns:1fr}.apv-win{grid-template-columns:40px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ap-opt,.ap-acc,.apv-chart i,.ap-toggle-ui::after{transition:none}.ap-opt:hover,.ap-acc:hover{transform:none}}

/* layout fixes: card visuals fill the card; native file input stays invisible */
.ap-opt>.apt-mock,.ap-opt>.aps-mock,.ap-opt>.aps-dots,.ap-opt>.aps-bars{align-self:stretch;width:100%;box-sizing:border-box}
.ap-opt>.aps-dots{min-height:14px}
.ap-import{position:relative;overflow:hidden}
.ap-import input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.ap-studio .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ap-import .vh{width:100%;height:100%;clip:auto}