/* Stoner Bot v2.3 | Unified iPhone design system. Single source of truth. */
:root {
  --sb-font:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  --sb-text:#f7f4fb;--sb-secondary:#b3aabc;--sb-accent:#b388eb;
  --sb-glass:linear-gradient(157deg,rgba(220,215,235,.125),rgba(96,86,116,.095) 30%,rgba(30,27,40,.17) 73%,rgba(18,16,26,.13));
  --sb-border:rgba(250,245,255,.105);--sb-top-edge:rgba(255,255,255,.24);
  --sb-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 42px rgba(0,0,0,.30),0 0 25px rgba(156,108,213,.04);
  --sb-radius:23px;--sb-gap:15px;--sb-inset:19px;
  font-family:var(--sb-font);
}
body,button,input,textarea,select {font-family:var(--sb-font)}
#screen {color:var(--sb-text)}
#screen h1 {font-family:var(--sb-font);font-size:32px!important;font-weight:750!important;letter-spacing:-1.25px!important;line-height:1.14!important;margin:0!important}
#screen .home-intro,#screen .page-heading {margin:0 0 22px!important}
#screen h2 {font-family:var(--sb-font);font-size:18px!important;font-weight:700!important;letter-spacing:-.45px!important;line-height:1.25!important;margin:0!important}
#screen .section-head {margin:26px 0 13px!important;display:flex;align-items:center;min-height:23px}
#screen .card,#screen .home-status,#screen .tile {
  border-radius:var(--sb-radius)!important;
  background:var(--sb-glass)!important;
  border:1px solid var(--sb-border)!important;
  border-top-color:var(--sb-top-edge)!important;
  box-shadow:var(--sb-shadow)!important;
  -webkit-backdrop-filter:blur(28px) saturate(125%)!important;
  backdrop-filter:blur(28px) saturate(125%)!important;
}
#screen .card {padding:var(--sb-inset)!important;margin-bottom:var(--sb-gap)!important}
#screen .tile {padding:17px!important;min-height:104px!important;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left}
#screen .tile span {font-size:14px!important;font-weight:650!important;letter-spacing:-.25px!important}
#screen .tile svg {width:23px!important;height:23px!important}
#screen .hint,#screen .item small {color:var(--sb-secondary)!important;font-size:13px!important;line-height:1.5!important}
#screen .item {padding:15px 0!important}
#screen .item:first-child {padding-top:0!important}
#screen .item:last-child {padding-bottom:0!important;border-bottom:0!important}
#screen .item strong {font-size:14px!important;font-weight:650!important;letter-spacing:-.2px!important}
#screen .field {display:block;font-size:12px!important;font-weight:650!important;color:#c6bbd2!important;letter-spacing:.01em!important;margin:16px 0 8px!important}
#screen input,#screen select,#screen textarea,#screen .preview {
  width:100%;font-size:16px!important;line-height:1.4!important;
  border-radius:14px!important;border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(14,12,22,.24)!important;color:var(--sb-text)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035)!important;
}
#screen input,#screen select {min-height:48px!important;padding:11px 13px!important}
#screen textarea {min-height:110px!important;padding:13px!important;resize:vertical}
#screen .preview {min-height:75px!important;padding:14px!important;white-space:pre-wrap;overflow-wrap:anywhere}
#screen button.primary,#screen button.secondary,#screen button.control {min-height:48px!important;font-size:13px!important;font-weight:650!important;letter-spacing:-.1px!important;border-radius:14px!important}
#screen button.primary {width:100%;margin-top:18px!important}
#screen .control {height:49px!important}
#screen .control:disabled {cursor:not-allowed}
#screen .statusline strong {font-size:20px!important;font-weight:700!important}
#screen .eyebrow {font-size:10px!important;font-weight:750!important;letter-spacing:1.55px!important}
#screen .status-meta {font-size:10px!important;letter-spacing:1px!important}
nav button {font-family:var(--sb-font);font-weight:600!important;letter-spacing:0!important}
nav button svg {width:22px!important;height:22px!important;stroke-width:1.8!important}
@media(max-width:365px){:root{--sb-inset:16px}#screen .tile{padding:14px!important}}
@media(prefers-reduced-motion:reduce){#screen button,nav button{transition:none!important}}
@media(prefers-reduced-transparency:reduce){#screen .card,#screen .tile{background:rgba(31,27,40,.94)!important}}

/* v2.4 | Single optical system across every screen. All values live here. */
:root{
  --sb-page-inset:20px;--sb-section-gap:24px;--sb-card-pad:19px;
  --sb-glass:linear-gradient(157deg,rgba(220,215,235,.125) 0%,rgba(96,86,116,.095) 30%,rgba(30,27,40,.17) 73%,rgba(18,16,26,.13) 100%);
  --sb-edge:rgba(250,245,255,.105);--sb-highlight:rgba(255,255,255,.24);
  --sb-radius:23px;--sb-field-radius:14px;
}
html,body{max-width:100%;overflow-x:clip}
.app,#screen{min-width:0;max-width:100%}
#screen{width:100%;padding:25px var(--sb-page-inset) calc(210px + env(safe-area-inset-bottom))!important;min-height:calc(100dvh - 80px)}
#screen *,#screen *::before,#screen *::after{box-sizing:border-box}
#screen .home-intro,#screen .page-heading{display:flex;align-items:center;min-height:37px;margin:0 0 22px!important}
#screen h1{font-size:32px!important;font-weight:750!important;letter-spacing:-1.25px!important;line-height:1.14!important}
#screen .section-head{margin:var(--sb-section-gap) 0 13px!important;min-height:24px}
#screen h2{font-size:18px!important;font-weight:700!important;letter-spacing:-.45px!important}
/* Do not give the embedded Preview heading a full-page section gap. */
#screen .card .section-head{margin:22px 0 12px!important}
#screen .card,#screen .home-status,#screen .tile{
  background:var(--sb-glass)!important;
  border:1px solid var(--sb-edge)!important;border-top-color:var(--sb-highlight)!important;
  border-radius:var(--sb-radius)!important;
  box-shadow:var(--sb-shadow)!important;
  -webkit-backdrop-filter:blur(28px) saturate(125%)!important;backdrop-filter:blur(28px) saturate(125%)!important;
}
#screen .card::before,#screen .home-status::before,#screen .tile::before{
  content:""!important;display:block!important;position:absolute;inset:0 0 auto!important;
  height:36%!important;background:linear-gradient(180deg,rgba(255,255,255,.055),transparent)!important;
  opacity:1!important;pointer-events:none;z-index:-1;
}
#screen .card::after,#screen .home-status::after,#screen .tile::after{
  content:""!important;display:block!important;position:absolute;right:-75px!important;top:-95px!important;
  width:210px!important;height:210px!important;border-radius:50%!important;
  background:radial-gradient(circle,rgba(242,221,255,.085),transparent 74%)!important;
  opacity:.42!important;pointer-events:none;z-index:-1;
}
#screen .card,#screen .home-status{padding:var(--sb-card-pad)!important;margin-bottom:15px!important}
#screen .tile{padding:17px!important;min-height:104px!important;box-shadow:var(--sb-shadow)!important}
#screen .tile:nth-child(2),#screen .tile:nth-child(3){box-shadow:var(--sb-shadow)!important}
#screen .statusline{margin:18px 0 7px!important}
#screen .home-status .hint{font-size:13px!important;color:var(--sb-secondary)!important}
#screen .home-status .rule{margin:19px 0 16px!important}
#screen .field{display:block;margin:18px 0 8px!important;font-size:12px!important;line-height:1.4!important;font-weight:650!important;color:#c6bbd2!important}
#screen .card>.field:first-child{margin-top:0!important}
#screen input,#screen select,#screen textarea,#screen .preview{
  display:block;max-width:100%;min-width:0;width:100%!important;
  border-radius:var(--sb-field-radius)!important;
  background:rgba(14,12,22,.24)!important;border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035)!important;
  color:var(--sb-text)!important;font-size:16px!important;line-height:1.4!important;
}
#screen input,#screen select{height:48px!important;min-height:48px!important;padding:10px 13px!important}
#screen input[type="datetime-local"]{min-width:0!important;max-width:100%!important;-webkit-appearance:none;appearance:none;overflow:hidden;color-scheme:dark}
#screen input[type="datetime-local"]::-webkit-datetime-edit{min-width:0;max-width:100%;overflow:hidden}
#screen input[type="datetime-local"]::-webkit-calendar-picker-indicator{margin:0 0 0 4px;flex-shrink:0}
#screen textarea{min-height:110px!important;padding:13px!important}
#screen .preview{min-height:75px!important;padding:14px!important}
#screen .item{min-width:0;padding:16px 0!important}
#screen .item:first-child{padding-top:0!important}
#screen .item:last-child{padding-bottom:0!important}
#screen .item strong,#screen .card .row>strong{font-size:14px!important;font-weight:650!important;letter-spacing:-.2px!important}
#screen .item small{font-size:13px!important;line-height:1.5!important}
#screen .item.row>div{min-width:0;flex:1}
#screen .item.row button{flex-shrink:0}
#screen button.secondary,#screen button.primary,#screen button.control{min-height:48px!important;border-radius:14px!important;font-size:13px!important;font-weight:650!important}
#screen button.secondary{margin:0!important}
#screen button.primary{margin:18px 0 0!important;width:100%!important}
#screen .chip{font-size:11px!important;white-space:nowrap}
#screen .tiles{gap:12px!important}
nav{bottom:calc(14px + env(safe-area-inset-bottom))!important}
@media(max-width:365px){:root{--sb-page-inset:15px;--sb-card-pad:16px}#screen .tile{padding:14px!important}}
@media(prefers-reduced-transparency:reduce){#screen .card,#screen .home-status,#screen .tile{background:rgba(31,27,40,.94)!important}}


/* v2.5 | Home is the single visual reference for every screen. */
:root{
 --sb-home-glass:linear-gradient(157deg,rgba(220,215,235,.125) 0%,rgba(96,86,116,.095) 30%,rgba(30,27,40,.17) 73%,rgba(18,16,26,.13) 100%);
 --sb-home-border:rgba(250,245,255,.105);
 --sb-home-edge:rgba(255,255,255,.24);
 --sb-home-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 42px rgba(0,0,0,.30),0 0 25px rgba(156,108,213,.04);
}
/* Both the outer card and its reflections are identical across pages. */
#screen .card,#screen .home-status,#screen .tile{
 position:relative!important;isolation:isolate!important;overflow:hidden!important;
 background:var(--sb-home-glass)!important;
 border:1px solid var(--sb-home-border)!important;
 border-top-color:var(--sb-home-edge)!important;
 box-shadow:var(--sb-home-shadow)!important;
 border-radius:23px!important;
 -webkit-backdrop-filter:blur(28px) saturate(125%)!important;
 backdrop-filter:blur(28px) saturate(125%)!important;
}
#screen .card::before,#screen .home-status::before,#screen .tile::before{
 content:""!important;display:block!important;position:absolute!important;
 inset:0 0 auto!important;height:36%!important;
 background:linear-gradient(180deg,rgba(255,255,255,.055),transparent)!important;
 opacity:1!important;pointer-events:none!important;z-index:-1!important;
}
#screen .card::after,#screen .home-status::after,#screen .tile::after{
 content:""!important;display:block!important;position:absolute!important;
 right:-75px!important;top:-95px!important;width:210px!important;height:210px!important;
 border-radius:50%!important;background:radial-gradient(circle,rgba(242,221,255,.085),transparent 74%)!important;
 opacity:.42!important;pointer-events:none!important;z-index:-1!important;
}
/* Forms stay recessed and neutral, with the same lavender interaction language. */
#screen input,#screen select,#screen textarea{
 background:rgba(11,9,19,.38)!important;
 border:1px solid rgba(245,239,255,.12)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
 transition:border-color .18s ease,box-shadow .18s ease!important;
}
#screen input:focus,#screen select:focus,#screen textarea:focus,
#screen button:focus-visible,nav button:focus-visible{
 outline:2px solid rgba(179,136,235,.85)!important;outline-offset:2px!important;
 border-color:rgba(179,136,235,.64)!important;
 box-shadow:0 0 0 4px rgba(179,136,235,.12),0 0 22px rgba(179,136,235,.12)!important;
}
/* Brand is a luminous wordmark, not another page heading. */
.topbar .brand{position:relative;isolation:isolate;overflow:visible!important}
.topbar .brand::before{
 content:"";position:absolute;left:-12px;right:-13px;top:-14px;bottom:-14px;
 background:radial-gradient(ellipse 65% 55% at 48% 50%,rgba(179,136,235,.22),rgba(179,136,235,.085) 48%,transparent 83%);
 filter:blur(12px);pointer-events:none;z-index:-1;
}
.topbar .brand strong{
 position:relative;display:inline-block;
 font-weight:800!important;letter-spacing:-1.05px!important;
 color:#fdfaff!important;
 text-shadow:0 0 8px rgba(202,158,255,.33),0 0 20px rgba(179,136,235,.26),0 0 38px rgba(179,136,235,.13)!important;
}
/* Section icons and text accents retain the restrained lavender system. */
#screen .eyebrow,#screen .status-meta,#screen .tile svg{color:#c5a2e9!important}
@media(prefers-reduced-transparency:reduce){#screen .card,#screen .home-status,#screen .tile{background:rgba(31,27,40,.94)!important}}


/* v2.6 | Height-independent smoked glass: the Home card is the reference. */
:root{--sb-v26-glass:linear-gradient(180deg,rgba(100,89,119,.16) 0px,rgba(58,49,75,.13) 86px,rgba(25,22,35,.18) 240px,rgba(19,17,29,.20) 410px),rgba(26,23,36,.32)}
#screen .card,#screen .home-status,#screen .tile{
 background:var(--sb-v26-glass)!important;
 border:1px solid rgba(250,245,255,.105)!important;
 border-top-color:rgba(255,255,255,.24)!important;
 box-shadow:var(--sb-home-shadow)!important;
}
#screen .card::before,#screen .home-status::before,#screen .tile::before{
 height:145px!important;inset:0 0 auto!important;
 background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018) 50px,transparent 145px)!important;
}
#screen .card::after,#screen .home-status::after,#screen .tile::after{
 top:-95px!important;right:-75px!important;width:210px!important;height:210px!important;
 background:radial-gradient(circle,rgba(242,221,255,.085),transparent 74%)!important;opacity:.42!important;
}
/* Same lavender light behind the actual transparent leaf and wordmark. */
.topbar .brandmark{position:relative!important;isolation:isolate!important;overflow:visible!important}
.topbar .brandmark::before{
 content:"";position:absolute;inset:6px 3px;
 background:radial-gradient(ellipse at center,rgba(179,136,235,.36) 0%,rgba(179,136,235,.15) 48%,transparent 77%);
 filter:blur(13px);pointer-events:none;z-index:-1;
}
.topbar .brandmark img{position:relative;filter:drop-shadow(0 0 7px rgba(179,136,235,.37)) drop-shadow(0 0 15px rgba(179,136,235,.17));}
#screen .status-meta{display:inline-flex!important;align-items:center!important;gap:6px!important}
#screen .offline-indicator{display:inline-block;width:7px;height:7px;flex:none;border-radius:50%;background:#b8a6c8;box-shadow:0 0 0 3px rgba(179,136,235,.10)}
#screen .controls .control svg{width:17px!important;height:17px!important;stroke-width:1.9!important}
@media(prefers-reduced-transparency:reduce){#screen .card,#screen .home-status,#screen .tile{background:rgba(31,27,40,.94)!important}}

/* v2.7 Command Center: inherits existing Midnight Glass material */
.settings-link{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;background:transparent;border:0;color:inherit;font:inherit;padding-left:0;padding-right:0;cursor:pointer}.settings-link span{display:flex;flex-direction:column}.settings-link svg{width:22px;height:22px;color:#b388eb}.back-link{border:0;background:none;color:#bda0d7;font:inherit;font-size:15px;padding:0 0 12px;cursor:pointer}.command-summary .hint{margin:20px 0 0;line-height:1.55}.command-list{padding-top:0;padding-bottom:0}.command-row{padding:24px 0;border-bottom:1px solid rgba(200,180,230,.12)}.command-row:last-child{border-bottom:0}.command-main{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.command-name{font-weight:750;color:#f5edff;font-size:18px}.command-tag{font-size:11px;letter-spacing:.05em;color:#c6a5e7;border:1px solid rgba(179,136,235,.3);border-radius:999px;padding:4px 9px}.command-description{color:#b7aabe;font-size:14px;margin:9px 0 16px;line-height:1.5}.command-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.command-switch{display:flex;align-items:center;gap:9px;font-size:13px;color:#d4c7df}.command-switch input{width:20px;height:20px;accent-color:#b388eb}.cooldown-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#b7aabe}.cooldown-label select{width:auto;min-width:96px;height:40px;padding:0 24px 0 10px;font-size:13px;color:#eee4f7;background-color:#1b1425;border:1px solid rgba(179,136,235,.3);border-radius:12px}.command-footnote{font-size:12px;color:#9e91aa;line-height:1.5;margin:16px 8px 0;padding-bottom:24px}.settings-link:focus-visible,.back-link:focus-visible,.command-switch input:focus-visible,.cooldown-label select:focus-visible{outline:2px solid #b388eb;outline-offset:3px}

/* v2.7.1: Command Center iPhone sizing refinement */
#screen .page-heading:has(.back-link){display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;min-height:0}
#screen .page-heading:has(.back-link) .back-link{padding:0;font-size:13px;line-height:1.35}
#screen .page-heading:has(.back-link) h1{font-size:26px!important;letter-spacing:-.8px!important;line-height:1.2!important}
#screen .command-switch input[type="checkbox"]{appearance:none;-webkit-appearance:none;box-sizing:border-box;flex:none;width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;margin:0!important;border:1.5px solid rgba(179,136,235,.65)!important;border-radius:7px!important;background:rgba(12,9,19,.75)!important;display:grid;place-items:center;box-shadow:none!important;transform:none!important}
#screen .command-switch input[type="checkbox"]:checked{background:#b388eb!important;border-color:#b388eb!important}
#screen .command-switch input[type="checkbox"]:checked:after{content:"";width:10px;height:6px;border-left:2px solid #190f25;border-bottom:2px solid #190f25;transform:translateY(-1px) rotate(-45deg)}
#screen .command-actions{flex-wrap:wrap;gap:12px 16px}
#screen .command-switch{gap:10px;white-space:nowrap}
#screen .cooldown-label{white-space:nowrap}
@media(max-width:390px){#screen .command-actions{align-items:flex-start;flex-direction:column}}

/* v2.7.2: compact iOS-style switches instead of oversized checkmarks. */
#screen .command-switch input[type="checkbox"]{
 -webkit-appearance:none!important;appearance:none!important;
 position:relative!important;display:inline-block!important;
 width:38px!important;height:22px!important;min-width:38px!important;min-height:22px!important;
 border-radius:999px!important;border:1px solid rgba(179,136,235,.42)!important;
 background:rgba(90,78,105,.45)!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.25)!important;
 margin:0!important;padding:0!important;vertical-align:middle!important;cursor:pointer;
 transition:background .18s ease!important;
}
#screen .command-switch input[type="checkbox"]::after,
#screen .command-switch input[type="checkbox"]:checked::after{
 content:""!important;position:absolute!important;top:2px!important;left:2px!important;
 width:16px!important;height:16px!important;border:0!important;border-radius:50%!important;
 background:#f9f4ff!important;box-shadow:0 1px 3px rgba(0,0,0,.35)!important;
 transform:none!important;transition:transform .18s ease!important;
}
#screen .command-switch input[type="checkbox"]:checked{background:#9d6ad8!important;border-color:#b388eb!important}
#screen .command-switch input[type="checkbox"]:checked::after{transform:translateX(16px)!important}

/* v2.8.2: single stronger border, diffuse glow without a second ring. */
#screen input:not([type="checkbox"]):focus,
#screen textarea:focus,
#screen select:focus {
  outline:none!important;
  border:2px solid rgba(179,136,235,.96)!important;
  box-shadow:0 0 14px 3px rgba(179,136,235,.24),0 0 30px 7px rgba(179,136,235,.09)!important;
}

/* v2.8.3: subtle unified selection glow; retain approved input focus treatment. */
nav button.active{color:#ead5ff!important;background:radial-gradient(ellipse 75% 75% at 50% 50%,rgba(179,136,235,.17),transparent 85%)!important;text-shadow:0 0 9px rgba(190,146,255,.48);box-shadow:none!important}
nav button.active svg{filter:drop-shadow(0 0 5px rgba(197,148,255,.82)) drop-shadow(0 0 11px rgba(179,136,235,.38))!important}
#screen button[aria-pressed="true"],#screen button[aria-selected="true"],#screen .selected:not(.card):not(.tile){box-shadow:0 0 15px rgba(179,136,235,.18);border-color:rgba(179,136,235,.58)}
#screen .command-switch input:checked{filter:drop-shadow(0 0 6px rgba(179,136,235,.42))}
#screen button:focus-visible,nav button:focus-visible{outline:2px solid #b388eb;outline-offset:3px;filter:drop-shadow(0 0 6px rgba(179,136,235,.34))}

/* v2.8.4: illuminate active dock glyphs without a rectangular button wash. */
nav button.active{background:transparent!important;box-shadow:none!important;text-shadow:0 0 7px rgba(190,146,255,.38)!important}
nav button.active svg{filter:drop-shadow(0 0 5px rgba(207,165,255,.90)) drop-shadow(0 0 11px rgba(179,136,235,.48))!important}

/* v2.8.5: isolate glow to actual dock SVG strokes, never the button box. */
#nav button.active, #nav button.active:hover, #nav button.active:focus, #nav button.active:focus-visible {background:none!important;background-image:none!important;box-shadow:none!important;filter:none!important;outline:none!important;}
#nav button.active::before,#nav button.active::after {background:none!important;box-shadow:none!important;filter:none!important;}
#nav button.active svg {filter:drop-shadow(0 0 3px rgba(210,170,255,.85)) drop-shadow(0 0 7px rgba(179,136,235,.42))!important;}
#nav button.active span {text-shadow:0 0 6px rgba(190,146,255,.38)!important;}
#nav button:focus-visible:not(.active){outline:2px solid #b388eb!important;outline-offset:2px!important;}