/* KeepEye "Glass" theme (preview). A clear-glass layer over the existing design: every page, component and
   piece of content stays the same; only surfaces, colour and motion change. Scoped to html.glass.
   Colour: Telegram's night palette (deep navy, Telegram blue #2AABEE), and a bright day variant.
   Glass: translucent panels with backdrop blur, a light top edge, a soft inner glow and a faint grain,
   floating over a slowly drifting aurora. Motion: drifting light, sheen sweeps, springy presses, a blinking eye. */

/* ------------------------------------------------------------------ tokens: night (default) */
:root.glass,:root.glass[data-theme]{
  --tg:#2AABEE; --tg2:#229ED9; --tg3:#7CC9F5; --tg-violet:#7B6CF6; --tg-teal:#22D3C5;
  --bg:#17212B; --panel:rgba(var(--tint),.52); --panel2:rgba(255,255,255,.055); --panel3:rgba(255,255,255,.09); --well:rgba(6,14,24,.42);
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.16);
  --fg:#F2F7FC; --text2:#D2DDE8; --muted:#8FA3B8; --faint:#5D7187;
  --accent:#2AABEE; --accent-ink:#FFFFFF; --accent-2:#5BC0F5; --accent-soft:rgba(42,171,238,.16); --accent-line:rgba(42,171,238,.55); --accent-txt:#6CC6F7; --link:#6CC6F7;
  --up:#3DDC97; --down:#FF6B7A; --warn:#FFB547; --info:#7CC9F5;
  --up-soft:rgba(61,220,151,.13); --down-soft:rgba(255,107,122,.13); --warn-soft:rgba(255,181,71,.14); --info-soft:rgba(124,201,245,.14);
  --hdr:rgba(var(--deep),.88); --scrim:rgba(8,12,17,.55);
  --solid:rgba(23,33,43,.96);            /* frosted but opaque: sticky table column, menus */
  --gl-edge:rgba(255,255,255,.22);       /* lit top edge of glass */
  --gl-shade:rgba(0,0,0,.28);
  --gl-blur:blur(22px) saturate(170%);
  --gl-sh:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px rgba(255,255,255,.035) inset,0 18px 40px -18px rgba(0,0,0,.55);
  --sh-pop:0 1px 0 rgba(255,255,255,.1) inset,0 24px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);
  color-scheme:dark;
}
/* day */
:root.glass.day,:root.glass.day[data-theme]{
  --bg:#EDF2F8; --panel:rgba(255,255,255,.72); --panel2:rgba(255,255,255,.5); --panel3:rgba(255,255,255,.75); --well:rgba(220,232,244,.55);
  --line:rgba(20,52,90,.09); --line2:rgba(20,52,90,.16);
  --fg:#0F2237; --text2:#2C4258; --muted:#5C7389; --faint:#93A6B9;
  --accent:#2AABEE; --accent-ink:#FFFFFF; --accent-soft:rgba(42,171,238,.14); --accent-line:rgba(34,158,217,.5); --accent-txt:#1180BF; --link:#1180BF;
  --up:#0E9F6E; --down:#E5484D; --warn:#C27A00; --info:#1D7FC4;
  --hdr:rgba(241,246,251,.9); --scrim:rgba(15,34,55,.32); --solid:rgba(244,249,253,.95);
  --gl-edge:rgba(255,255,255,.95); --gl-shade:rgba(20,52,90,.08);
  --gl-sh:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(255,255,255,.4) inset,0 18px 40px -20px rgba(20,60,110,.28);
  --sh-pop:0 1px 0 rgba(255,255,255,.9) inset,0 24px 60px -24px rgba(20,60,110,.4),0 0 0 1px rgba(20,52,90,.06);
  color-scheme:light;
}

/* ------------------------------------------------------------------ the sky behind the glass */
html.glass,html.glass body{background:var(--bg)}
html.glass body{background:transparent}
/* the background colour: three stops, a top light and a panel tint (swap these to change the mood) */
/* Telegram's own night colour (#17212B) */
:root.glass{--sky1:#1E2A36;--sky2:#17212B;--sky3:#111921;--sky-lamp:rgba(42,171,238,.08);--deep:23,33,43;--tint:38,52,66}
html.glass::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%,var(--sky-lamp),transparent 60%),
    radial-gradient(90% 60% at 50% 115%,rgba(0,0,0,.45),transparent 70%),
    linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 55%,var(--sky3) 100%);
  animation:glLamp 14s ease-in-out infinite alternate}
html.glass.day::before{background:
    radial-gradient(120% 70% at 50% -10%,var(--day-lamp,rgba(42,171,238,.12)),transparent 60%),
    linear-gradient(180deg,var(--day1,#F4F7FB) 0%,var(--day2,#EDF2F8) 60%,var(--day3,#E6EDF5) 100%)}

/* fine grain and a faint grid of light, so the glass has something to refract */
html.glass::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;mix-blend-mode:overlay;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.08),transparent 55%)}
@keyframes glLamp{from{opacity:.92}to{opacity:1}}

/* ------------------------------------------------------------------ glass surfaces */
html.glass :is(.card,.tbox,.hl,.banner,.adcard,.filters,.prod,.promo,.mcard,.rd-card,.rd-sum,.kpis,.gcard,.src-card,.swc,.swp-share,.pfw,.prf-hero,.prf-sec,.x-stats,.x-search,.ov-links a,.lg-doc,.cotok-on,.cotok-res,.tp-box,.slot,.disc-chip,.ctx-i,.adprev,.adprev-tok,.pack,.adplan,.shc,.sres,.wmenu,.bpop){
  background:var(--panel);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--line);border-top-color:var(--gl-edge);
  box-shadow:var(--gl-sh)}
html.glass :is(.card,.tbox,.hl,.banner,.adcard,.prod,.promo,.prf-sec,.prf-hero,.swc,.tp-box,.mcard,.rd-card){border-radius:18px;position:relative}
html.glass .tbox{overflow-x:auto}
/* light sweeping across a panel on hover */
html.glass :is(.card,.banner,.adcard,.prod,.mcard,.rd-card,.hl,.prf-sec,.tp-box)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.09) 45%,rgba(255,255,255,.02) 52%,transparent 62%);
  background-size:250% 100%;background-position:120% 0;opacity:0;transition:opacity .3s}
@media (hover:hover){html.glass :is(.card,.banner,.adcard,.prod,.mcard,.rd-card,.hl,.prf-sec,.tp-box):hover::after{opacity:1;animation:glSheen 1.1s cubic-bezier(.2,.7,.2,1) forwards}}
@keyframes glSheen{from{background-position:120% 0}to{background-position:-30% 0}}
/* panels inside panels stay clear, not double-frosted */
html.glass :is(.card,.tbox,.hl,.prf-sec) :is(.card,.tbox,.pack,.adplan){-webkit-backdrop-filter:none;backdrop-filter:none}
html.glass .hcard{background:transparent;border-color:var(--line)}

/* ------------------------------------------------------------------ shell: sidebar, header, tab bar */
html.glass .side{background:rgba(var(--deep),.38);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border-right:1px solid var(--line);box-shadow:1px 0 0 rgba(255,255,255,.04) inset}
html.glass.day .side{background:rgba(255,255,255,.45)}
html.glass .snav a{border-radius:12px;transition:background .2s,color .2s,transform .2s cubic-bezier(.3,1.6,.5,1)}
html.glass .snav a:hover{background:var(--panel2);transform:translateX(2px)}
html.glass .snav a[aria-current="page"],html.glass .snav a.on{background:linear-gradient(135deg,rgba(42,171,238,.28),rgba(42,171,238,.08));color:var(--fg);box-shadow:0 0 0 1px rgba(42,171,238,.35) inset,0 8px 24px -10px rgba(42,171,238,.6)}
html.glass .snav a[aria-current="page"] svg,html.glass .snav a.on svg{color:var(--tg3);filter:drop-shadow(0 0 6px rgba(42,171,238,.7))}
html.glass header{background:var(--hdr);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 30px -20px rgba(0,0,0,.6)}
html.glass .mbar{border-top-color:var(--line)}
html.glass .tabbar{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));border-radius:24px;
  background:rgba(var(--deep),.8);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--line2);border-top-color:var(--gl-edge);box-shadow:var(--sh-pop);padding:4px 6px}
html.glass.day .tabbar{background:rgba(255,255,255,.84)}
html.glass .tabbar a{border-radius:18px;transition:transform .25s cubic-bezier(.3,1.6,.5,1),color .2s}
html.glass .tabbar a:active{transform:scale(.9)}
html.glass .tabbar a[aria-current="page"]{color:var(--tg3)}
html.glass .tabbar a[aria-current="page"] svg{filter:drop-shadow(0 0 8px rgba(42,171,238,.8))}
html.glass .tabbar a[aria-current="page"]::before{background:linear-gradient(90deg,transparent,var(--tg),transparent)!important;box-shadow:0 0 12px var(--tg)}
html.glass .mad{bottom:calc(84px + env(safe-area-inset-bottom,0px));border-radius:18px;background:rgba(var(--deep),.86);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border:1px solid var(--line2);border-top-color:var(--gl-edge)}
html.glass.day .mad{background:rgba(255,255,255,.88)}
html.glass .topad{background:rgba(42,171,238,.08);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
html.glass .ticker,html.glass .mbar .wrap{color:var(--muted)}

/* the KeepEye eye: floats gently and blinks now and then */
html.glass .logo svg{animation:glFloat 6s ease-in-out infinite,glBlink 7s infinite;transform-origin:50% 50%;filter:drop-shadow(0 4px 14px rgba(252,213,53,.35))}
@keyframes glFloat{0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes glBlink{0%,92%,100%{scale:1 1}94%{scale:1 .08}96%{scale:1 1}}

/* ------------------------------------------------------------------ controls */
html.glass :is(.pill,.wallet,.btn.pri){background:linear-gradient(135deg,#3DB8F5 0%,#2AABEE 45%,#1E8FD6 100%);color:#fff;border:0;border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -1px 0 rgba(0,0,0,.15) inset,0 10px 24px -10px rgba(42,171,238,.75);position:relative;overflow:hidden;isolation:isolate;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
html.glass :is(.pill,.wallet)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);background-size:250% 100%;background-position:130% 0;animation:glShine 4.5s ease-in-out infinite}
@keyframes glShine{0%,60%{background-position:130% 0}85%,100%{background-position:-40% 0}}
@media (hover:hover){html.glass :is(.pill,.wallet):hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 16px 32px -12px rgba(42,171,238,.9)}}
html.glass :is(.pill,.wallet):active{transform:scale(.95)}
html.glass .pill.ghost,html.glass .tool,html.glass .morebtn,html.glass .ibtn,html.glass .sbtn,html.glass .presets button,html.glass .shl-net,html.glass .soc,html.glass .tp-act,html.glass .tp-back{
  background:var(--panel2);color:var(--fg);border:1px solid var(--line);border-top-color:var(--gl-edge);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.05) inset;border-radius:14px}
html.glass .pill.ghost::after{display:none}
html.glass .wallet.on,html.glass .wallet.tgp,html.glass .wallet.wprof{background:var(--panel2);color:var(--fg);border:1px solid var(--line2);box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
html.glass .wallet.on::after,html.glass .wallet.tgp::after,html.glass .wallet.wprof::after{display:none}
html.glass :is(.seg,.tseg){background:var(--well);border:1px solid var(--line);border-radius:14px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.glass :is(.seg,.tseg) button{border-radius:11px;transition:background .25s,color .2s,box-shadow .25s}
html.glass :is(.seg,.tseg) button[aria-pressed="true"]{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));color:var(--fg);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -8px rgba(0,0,0,.6)}
html.glass.day :is(.seg,.tseg) button[aria-pressed="true"]{background:#fff}
html.glass .tabs{border-bottom-color:var(--line)}
html.glass .tabs button[aria-selected="true"],html.glass .tabs a[aria-selected="true"]{color:var(--fg)}
html.glass .tabs [aria-selected="true"]::after{background:linear-gradient(90deg,var(--tg),var(--tg-violet))!important;height:3px!important;border-radius:3px;box-shadow:0 0 14px rgba(42,171,238,.8)}
html.glass .presets button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--fg);box-shadow:0 0 0 1px rgba(42,171,238,.25) inset,0 6px 18px -10px rgba(42,171,238,.8)}
html.glass :is(.fld input,.fld select,.fld textarea,.cs-f input,.cs-f textarea){background:var(--well);border:1px solid var(--line2);border-radius:12px;color:var(--fg);transition:border-color .2s,box-shadow .2s}
html.glass :is(.fld input,.fld select,.fld textarea):focus{border-color:var(--accent-line);box-shadow:0 0 0 4px rgba(42,171,238,.18);outline:0}
html.glass .adtag{background:rgba(42,171,238,.14);color:var(--tg3);border-color:rgba(42,171,238,.35)}

/* ------------------------------------------------------------------ tables and lists */
html.glass thead th,html.glass th{background:rgba(var(--deep),.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--muted)}
html.glass.day thead th,html.glass.day th{background:rgba(240,246,252,.85)}
html.glass td,html.glass th{border-color:var(--line)}
/* the pinned token column is never see-through */
html.glass td.col-tok,html.glass th.col-tok{background:var(--solid)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
html.glass tbody tr{transition:background .2s,transform .25s cubic-bezier(.3,1.4,.5,1)}
@media (hover:hover){html.glass tbody tr:hover{background:rgba(42,171,238,.07)}html.glass tbody tr:hover td.col-tok{background:rgba(var(--deep),.96)!important}}
html.glass .hrow{border-radius:12px;transition:background .2s,transform .25s cubic-bezier(.3,1.5,.5,1)}
@media (hover:hover){html.glass .hrow:hover{background:var(--panel3);transform:translateX(2px)}}
html.glass .lg{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 4px 12px -4px rgba(0,0,0,.6)}
html.glass .hcard h4 .hgo,html.glass .hcard h4{color:var(--fg)}
/* score chips and change colours glow a little */
html.glass .up{text-shadow:0 0 14px rgba(61,220,151,.35)}
html.glass .down{text-shadow:0 0 14px rgba(255,107,122,.3)}
html.glass.day .up,html.glass.day .down{text-shadow:none}

/* ------------------------------------------------------------------ live bits */
html.glass .live{position:relative}
html.glass .live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:glPing 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes glPing{0%{transform:scale(.6);opacity:.7}80%,100%{transform:scale(1.8);opacity:0}}

/* ------------------------------------------------------------------ overlays */
html.glass .scrim{background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.glass :is(.modal,.drawer,.sheet){background:rgba(var(--deep),.72);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--line2);border-top-color:var(--gl-edge);box-shadow:var(--sh-pop)}
html.glass.day :is(.modal,.drawer,.sheet){background:rgba(255,255,255,.78)}
html.glass .modal{border-radius:24px}
html.glass .toast{background:rgba(var(--deep),.75);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border:1px solid var(--line2);border-radius:16px}

/* ------------------------------------------------------------------ entrance: panels rise in, one after another */
@media (prefers-reduced-motion:no-preference){
  html.glass main>*,html.glass .hl>.hcol>.hcard,html.glass .hl>.hcard,html.glass .prf-sec,html.glass .tp-box{animation:glRise .7s cubic-bezier(.2,.8,.2,1) both}
  html.glass main>*:nth-child(2){animation-delay:.06s}html.glass main>*:nth-child(3){animation-delay:.12s}html.glass main>*:nth-child(4){animation-delay:.18s}html.glass main>*:nth-child(5){animation-delay:.24s}
  html.glass tbody tr{animation:glRow .5s cubic-bezier(.2,.8,.2,1) both}
  html.glass tbody tr:nth-child(2){animation-delay:.03s}html.glass tbody tr:nth-child(3){animation-delay:.06s}html.glass tbody tr:nth-child(4){animation-delay:.09s}html.glass tbody tr:nth-child(5){animation-delay:.12s}html.glass tbody tr:nth-child(6){animation-delay:.15s}html.glass tbody tr:nth-child(7){animation-delay:.18s}html.glass tbody tr:nth-child(8){animation-delay:.21s}html.glass tbody tr:nth-child(n+9){animation-delay:.24s}
}
@keyframes glRise{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes glRow{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.glass::before,html.glass .logo svg,html.glass :is(.pill,.wallet)::after,html.glass .live::after{animation:none}}

/* ------------------------------------------------------------------ colour styles (chosen under Theme → Style)
   "glass" is Telegram night/day; these swap only the background and its tint. */
:root.glass[data-sky="graphite"]{--sky1:#1B1D21;--sky2:#15171A;--sky3:#0F1012;--sky-lamp:rgba(255,255,255,.05);--deep:22,24,27;--tint:42,45,51;--bg:#15171A;--solid:rgba(22,24,27,.96);--hdr:rgba(22,24,27,.88)}
:root.glass[data-sky="emerald"]{--sky1:#11271F;--sky2:#0C1D17;--sky3:#08140F;--sky-lamp:rgba(61,220,151,.10);--deep:12,30,24;--tint:30,58,48;--bg:#0C1D17;--solid:rgba(12,30,24,.96);--hdr:rgba(12,30,24,.88)}
:root.glass[data-sky="wine"]{--sky1:#2B1219;--sky2:#210E14;--sky3:#16090D;--sky-lamp:rgba(255,120,140,.09);--deep:36,14,20;--tint:66,30,40;--bg:#210E14;--solid:rgba(36,14,20,.96);--hdr:rgba(36,14,20,.88)}
:root.glass[data-sky="indigo"]{--sky1:#1D1835;--sky2:#16122A;--sky3:#0E0B1D;--sky-lamp:rgba(150,130,255,.11);--deep:25,20,46;--tint:50,42,86;--bg:#16122A;--solid:rgba(25,20,46,.96);--hdr:rgba(25,20,46,.88)}
:root.glass.day[data-sky="graphite"]{--hdr:rgba(239,240,242,.9);--day1:#F5F6F7;--day2:#EFF0F2;--day3:#E8EAED;--day-lamp:rgba(0,0,0,.03);--bg:#EFF0F2}
:root.glass.day[data-sky="emerald"]{--hdr:rgba(233,243,238,.9);--day1:#F1F8F4;--day2:#E9F3EE;--day3:#E1EEE7;--day-lamp:rgba(14,159,110,.10);--bg:#E9F3EE}
:root.glass.day[data-sky="wine"]{--hdr:rgba(246,236,239,.9);--day1:#FBF3F5;--day2:#F6ECEF;--day3:#F0E3E7;--day-lamp:rgba(229,72,77,.08);--bg:#F6ECEF}
:root.glass.day[data-sky="indigo"]{--hdr:rgba(237,235,249,.9);--day1:#F4F3FC;--day2:#EDEBF9;--day3:#E5E2F5;--day-lamp:rgba(123,108,246,.10);--bg:#EDEBF9}

/* the Style picker itself (works in the classic look too, so it lives here and in the markup) */
.stylepick{display:flex;flex-wrap:wrap;gap:6px}
.stylepick button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px 0 7px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--text2);font-size:13.5px;font-weight:500;white-space:nowrap}
.stylepick button i{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12) inset}
.stylepick button[aria-pressed="true"]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--fg)}
.tmp-style{display:grid;gap:7px;margin-top:4px;padding:9px 6px 5px;border-top:1px solid var(--line)}
.tmp-style>span{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em;text-transform:uppercase}
#themeM{min-width:270px}
#themeM .stylepick button{height:30px;font-size:13px}
.dtheme.dstyle{flex-direction:column;align-items:flex-start}
.prf-stylepick{padding:0 14px 12px}
/* dropdown menus (theme, wallet): frosted but solid, never see-through */
html.glass .tmp{background:var(--solid);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border:1px solid var(--line2);border-top-color:var(--gl-edge);border-radius:16px;box-shadow:var(--sh-pop)}
html.glass .tmp{background:rgb(var(--deep))}
html.glass.day .tmp{background:#F8FBFE}
/* inputs that sit inside a bordered wrapper (search boxes, paste fields, swap amounts): the wrapper is the field */
html.glass :is(.pfw,.x-search,.sq,.swc,.tsearch,.shl-url) :is(input,textarea){background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0}
html.glass .pfw{background:var(--well);border:1px solid var(--line2);border-radius:12px;box-shadow:none}
html.glass .pfw:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 4px rgba(42,171,238,.18)}