/* =========================================================
   GLASS: a page theme in the style of Apple software.
   Frosted, translucent panels over a soft colour wash, a system blue
   accent, hairline edges with a light top highlight and large radii.
   Like every theme it only changes colours, shadows and radii, never
   fonts, sizes or layout. Loaded last, so it can restyle surfaces.
   ========================================================= */
html[data-skin="glass"]{
  color-scheme:light;
  /* shared */
  --ink:#1D1D1F; --ink-2:#3A3A3C; --muted:#636366; --faint:#8E8E93; --line:rgba(60,60,67,.16); --line-2:rgba(60,60,67,.09);
  --glass:rgba(255,255,255,.66); --glass-strong:rgba(255,255,255,.82); --glass-edge:inset 0 0 0 .5px rgba(255,255,255,.75),inset 0 1px 0 rgba(255,255,255,.9);
  --wash:radial-gradient(48% 42% at 8% 4%,rgba(120,180,255,.55),transparent 70%),radial-gradient(42% 40% at 96% 8%,rgba(190,150,255,.45),transparent 70%),radial-gradient(46% 44% at 90% 96%,rgba(255,170,205,.42),transparent 70%),radial-gradient(40% 40% at 6% 92%,rgba(130,230,205,.40),transparent 70%),#EEF0F7;
  --sh-1:0 1px 2px rgba(20,30,80,.05),0 0 0 .5px rgba(60,60,67,.16),inset 0 1px 0 rgba(255,255,255,.85);
  --sh-2:0 12px 32px -14px rgba(30,40,100,.26),0 0 0 .5px rgba(60,60,67,.14),inset 0 1px 0 rgba(255,255,255,.9);
  --sh-3:0 34px 80px -28px rgba(30,40,110,.45),0 0 0 .5px rgba(60,60,67,.16),inset 0 1px 0 rgba(255,255,255,.9);
  /* builder */
  --acc:#007AFF; --acc-d:#1D1D1F; --acc-h:#0062CC; --acc-bg:rgba(0,122,255,.12); --acc-bg2:rgba(0,122,255,.06);
  --bg:#EEF0F7; --side:rgba(255,255,255,.55); --field:rgba(120,120,128,.12); --white:rgba(255,255,255,.7);
  --plum:#D70015; --plum-bg:rgba(255,59,48,.13); --lime:#FF9F0A; --amber:#B25000; --amber-bg:rgba(255,159,10,.16); --blue:#0062CC; --blue-bg:rgba(0,122,255,.12);
  --sh-card:var(--sh-2); --sh-pop:0 22px 50px -16px rgba(30,40,100,.4),0 0 0 .5px rgba(60,60,67,.18),inset 0 1px 0 rgba(255,255,255,.9);
  --sh-panel:0 30px 70px -26px rgba(30,40,110,.45),0 0 0 .5px rgba(60,60,67,.16),inset 0 1px 0 rgba(255,255,255,.9); --sh-dock:1px 0 0 var(--line),24px 0 50px -34px rgba(30,40,110,.35);
  --bar-bg:rgba(255,255,255,.7); --bar-edge:0 .5px 0 var(--line);
  --rail-bg:rgba(255,255,255,.7); --rail-edge:none; --rail-fg:#48484A; --rail-hover:rgba(0,0,0,.05); --rail-on-bg:rgba(0,122,255,.14); --rail-on-fg:#0062CC; --rail-on-sh:none;
  --rail-accent-bg:linear-gradient(180deg,#3D9BFF,#007AFF); --rail-accent-fg:#fff; --rail-accent-sh:0 10px 22px -10px rgba(0,122,255,.8); --rail-ring:rgba(0,122,255,.6);
  --float-bg:rgba(255,255,255,.78); --float-on-bg:rgba(0,122,255,.14); --float-on-fg:#0062CC;
  --panel-bg:rgba(255,255,255,.8); --panel-x-bg:rgba(120,120,128,.14); --panel-x-hover:rgba(120,120,128,.24); --scrim:rgba(20,24,50,.28);
  --r-panel:24px; --r-ctl:12px; --r-card:22px;
  --page-bg:var(--wash);
  --hero-bg:radial-gradient(60% 90% at 95% 0%,rgba(190,150,255,.7),transparent 70%),radial-gradient(50% 80% at 0% 100%,rgba(90,200,250,.6),transparent 70%),linear-gradient(135deg,#0A84FF,#5E5CE6);
  --hero-fg:#FFFFFF; --hero-sub:#E6F0FF; --hero-tag-bg:rgba(255,255,255,.2); --hero-tag-fg:#FFFFFF; --sh-hero:0 30px 60px -28px rgba(10,80,200,.6);
  --hero-btn-bg:#FFFFFF; --hero-btn-fg:#0062CC; --hero-btn2-bg:rgba(255,255,255,.2); --hero-btn2-fg:#FFFFFF; --hero-btn2-ring:inset 0 0 0 1px rgba(255,255,255,.4);
  --btn-primary-bg:linear-gradient(180deg,#3D9BFF 0%,#007AFF 100%); --btn-primary-hover:linear-gradient(180deg,#52A7FF 0%,#1A8AFF 100%); --btn-primary-h:linear-gradient(180deg,#52A7FF 0%,#1A8AFF 100%); --btn-primary-sh:0 8px 20px -8px rgba(0,122,255,.75),inset 0 1px 0 rgba(255,255,255,.35);
  --icon-chip:linear-gradient(135deg,#0A84FF,#5E5CE6); --seg-bg:rgba(120,120,128,.14);
  --how-1:rgba(255,255,255,.7); --how-2:rgba(255,255,255,.7); --how-3:rgba(255,255,255,.7); --how-4:rgba(255,255,255,.7);
  /* site */
  --surface:rgba(255,255,255,.72);
  --brand:#007AFF; --brand-d:#0062CC; --brand-t:rgba(0,122,255,.1); --brand-ring:rgba(0,122,255,.22);
  --green:#1E8E3E; --green-t:rgba(52,199,89,.16); --red:#D70015; --red-t:rgba(255,59,48,.13); --amber-t:rgba(255,159,10,.18); --amber-fg:#7A3E00; --sky-t:rgba(90,200,250,.2); --sky-fg:#0A6CA8; --violet-t:rgba(175,82,222,.14); --violet-fg:#8944AB;
  --grad:linear-gradient(135deg,#0A84FF 0%,#5E5CE6 55%,#BF5AF2 110%);
  --g1:linear-gradient(135deg,#0A84FF,#5E5CE6); --g2:linear-gradient(135deg,#FF9F0A,#FF6A3D); --g3:linear-gradient(135deg,#5AC8FA,#0A84FF); --g4:linear-gradient(135deg,#30D158,#00B8A9); --g5:linear-gradient(135deg,#BF5AF2,#5E5CE6);
  --ico-fg:#FFFFFF;
  --sh-btn:inset 0 0 0 .5px rgba(60,60,67,.2),0 1px 2px rgba(20,30,80,.08),inset 0 1px 0 rgba(255,255,255,.9); --sh-btn-h:inset 0 0 0 .5px rgba(60,60,67,.3),0 6px 14px -6px rgba(20,30,80,.25),inset 0 1px 0 rgba(255,255,255,.9);
  --ring:inset 0 0 0 .5px rgba(60,60,67,.3); --ring-h:inset 0 0 0 .5px rgba(60,60,67,.5); --ring-f:inset 0 0 0 1.5px var(--brand),0 0 0 4px var(--brand-ring); --ring-bad:inset 0 0 0 1.5px #D70015,0 0 0 4px rgba(255,59,48,.16);
  --btn-lift:none; --btn-press:scale(.98);
  --accent-bg:linear-gradient(180deg,#FFB340,#FF9500); --accent-fg:#1D1D1F; --accent-sh:0 8px 20px -8px rgba(255,149,0,.7);
  --r:12px; --r-l:22px; --r-pill:999px;
  --mark-bg:var(--grad); --mark-clip:text; --mark-fg:transparent; --mark-fill:transparent; --mark-bg-dark:linear-gradient(135deg,#8AC7FF,#C9A7FF);
  --nav-bg:rgba(255,255,255,.7); --nav-edge:0 .5px 0 var(--line);
  --hero-bg:radial-gradient(60% 55% at 88% 0%,rgba(190,150,255,.45),transparent 70%),radial-gradient(45% 50% at 4% 18%,rgba(90,200,250,.4),transparent 70%),transparent;
  --mock-hero:linear-gradient(135deg,#0A84FF 0%,#5E5CE6 60%,#BF5AF2 120%);
  --band-bg:rgba(255,255,255,.45); --dark-bg:radial-gradient(60% 40% at 50% 0%,rgba(10,132,255,.4),transparent 70%),linear-gradient(180deg,#1C1C1E,#2C2C2E); --dark-fg:#FFFFFF; --dark-sub:#C7D9FF; --dark-card-sh:0 0 0 .5px rgba(255,255,255,.18),0 24px 50px -24px rgba(0,0,0,.6);
  --plan-hi-bg:linear-gradient(160deg,#0A84FF 0%,#5E5CE6 60%,#BF5AF2 130%); --plan-hi-fg:#FFFFFF; --plan-hi-sub:#E6F0FF; --plan-hi-btn-bg:#FFFFFF; --plan-hi-btn-fg:#0050B3; --plan-hi-sh:0 0 0 .5px rgba(255,255,255,.4),0 30px 70px -20px rgba(10,100,230,.7);
  --coin-bg:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05)); --coin-sh:inset 0 0 0 .5px rgba(255,255,255,.25); --coin-fg:#FFFFFF; --coin-sub:#C7D9FF; --coin-row:rgba(255,255,255,.1); --coin-accent:#8AE0FF;
  --cta-bg:radial-gradient(60% 90% at 90% 0%,rgba(191,90,242,.6),transparent 70%),radial-gradient(50% 80% at 0% 100%,rgba(90,200,250,.6),transparent 70%),linear-gradient(135deg,#0A84FF,#5E5CE6); --cta-sh:0 30px 70px -28px rgba(10,100,230,.8); --cta-fg:#FFFFFF; --cta-sub:#E6F0FF; --cta-btn-bg:#FFFFFF; --cta-btn-fg:#0050B3;
  --footer-bg:#1C1C1E; --footer-fg:#A1A1A6; --footer-head:#F5F5F7;
  --auth-bg:radial-gradient(55% 45% at 85% 0%,rgba(191,90,242,.55),transparent 70%),radial-gradient(60% 50% at 0% 100%,rgba(90,200,250,.5),transparent 70%),linear-gradient(135deg,#0A84FF 0%,#5E5CE6 100%);
  --srail-bg:rgba(255,255,255,.7); --srail-edge:inset -.5px 0 0 var(--line); --srail-fg:#48484A; --srail-hover:rgba(0,0,0,.05); --srail-on-bg:rgba(0,122,255,.14); --srail-on-fg:#0062CC; --srail-on-sh:none; --srail-label:var(--faint); --srail-user-bg:rgba(255,255,255,.6); --srail-user-sh:inset 0 0 0 .5px var(--line); --srail-brand:var(--ink);
  --topbar-bg:rgba(255,255,255,.7); --topbar-edge:0 .5px 0 var(--line);
  --kpi-bar:var(--g1);
  --tile-bg:rgba(255,255,255,.66); --th-bg:rgba(120,120,128,.08); --th-fg:var(--muted); --row-h:rgba(0,122,255,.05); --toast-bg:rgba(30,30,32,.88); --toast-fg:#FFFFFF;
}

/* ---------- the colour wash behind everything ---------- */
html[data-skin="glass"] body{background:var(--wash);background-attachment:fixed}
html[data-skin="glass"] .home,html[data-skin="glass"] .hd-main{background:transparent}
html[data-skin="glass"] .tb-strip{background:rgba(255,255,255,.35);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 .5px 0 var(--line)}
html[data-skin="glass"] .ls-add{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(0,122,255,.4),-14px 0 12px 2px rgba(255,255,255,0)}

/* ---------- frosted surfaces ---------- */
/* blur only on the few big surfaces that sit over other content; many small blurred cards are slow */
html[data-skin="glass"] :is(.topbar,.hd-side,.tb-bar,.tb-float,.tsw-pop,.menu,.sh,.dlg,.insp,.panel,.side,.lib,.toast,.kg,.modal,.srail,.tour-card){
  -webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8)
}
html[data-skin="glass"] :is(.sh,.dlg,.tsw-pop,.menu,.insp,.panel,.modal,.kg){background:var(--glass-strong)}
html[data-skin="glass"] :is(.hd-row,.hd-table[data-view="grid"] .hd-row){background:var(--glass)}
html[data-skin="glass"] .hd-table[data-view="list"] .hd-row{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-skin="glass"] .hd-th{background:rgba(120,120,128,.08)}
html[data-skin="glass"] .hd-row:hover{background:rgba(0,122,255,.06)}
html[data-skin="glass"] .hd-table[data-view="grid"] .hd-row:hover{background:var(--glass-strong)}
html[data-skin="glass"] .hd-side{background:var(--side);box-shadow:inset -.5px 0 0 var(--line)}
html[data-skin="glass"] .tb-bar{background:var(--bar-bg)}
html[data-skin="glass"] .hd-new,html[data-skin="glass"] .b-btn.primary,html[data-skin="glass"] .btn-primary{box-shadow:var(--btn-primary-sh)}
html[data-skin="glass"] .ls-chip.on,html[data-skin="glass"] .ls-chip.on:hover{background:linear-gradient(180deg,#3D9BFF,#007AFF);color:#fff;box-shadow:0 10px 20px -10px rgba(0,122,255,.8)}
html[data-skin="glass"] .ls-chip.on .ls-dot{box-shadow:0 0 0 2px #1A8AFF}
html[data-skin="glass"] .hd-nav .on{background:rgba(0,122,255,.12)}
html[data-skin="glass"] .hd-bar u,html[data-skin="glass"] .hd-empty-art i:nth-child(1){background:var(--btn-primary-bg)}
html[data-skin="glass"] .hd-cover{border-radius:15px}
html[data-skin="glass"] .tsw-opt:hover{background:rgba(0,122,255,.08)}
html[data-skin="glass"] input,html[data-skin="glass"] select,html[data-skin="glass"] textarea{background-color:rgba(255,255,255,.55)}
html[data-skin="glass"] .tb-save{background:rgba(255,255,255,.5)}

/* the builder uses --hero-bg for solid banners (the website uses it for a light wash) */
html[data-skin="glass"] body[data-view]{--hero-bg:radial-gradient(60% 90% at 95% 0%,rgba(191,90,242,.7),transparent 70%),radial-gradient(50% 80% at 0% 100%,rgba(90,200,250,.6),transparent 70%),linear-gradient(135deg,#0A84FF,#5E5CE6)}

@media (max-width:900px){html[data-skin="glass"] :is(.topbar,.hd-side,.tb-bar,.tb-float,.tsw-pop,.menu,.sh,.dlg,.insp,.panel,.side,.lib,.toast,.kg,.modal,.srail){-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5)}}