/* 12-silk.css — Arvix Silk, the Max plan look (js/src/77-silk.js). Everything is scoped to html.silk, so the normal look is untouched.
   Black, white and glass. Pistachio green and red stay only where they carry meaning: profit, money and status. */

/* ── tokens: the app already draws from these variables, so most screens follow on their own ── */
html.silk{
  --bg:#08090b;--bg2:rgba(255,255,255,.045);--bg3:rgba(255,255,255,.06);--bg4:rgba(255,255,255,.09);
  --gold:#c8ccd4;--gold2:#f4f5f6;--terra:rgba(255,255,255,.14);
  --cream:#f4f5f6;--cream2:#a9adb4;--muted:#7a7e86;
  --border:rgba(255,255,255,.1);--green:#a9d977;--red:#b8423d;--blue:#8b98ad;
  --silver:#a9adb4;--silver2:#d6d9de;--pop-bg:#16171b;--card:#16171b;--text:#f4f5f6;
  --glass-blur:0px;--glass-blur-sm:0px;--glass-hl:rgba(255,255,255,.06);--g1:232,238,250;--g2:200,210,225;
  --s-page:linear-gradient(155deg,#1d1f25 0%,#0b0c0f 36%,#050506 62%,#15161b 100%);
  --s-panel:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.025) 55%,rgba(165,190,235,.05));
  --s-ink:linear-gradient(150deg,#ffffff 0%,#c8ccd4 58%,#f0f1f4 100%);--s-on-ink:#0a0b0d;
  --s-pill:linear-gradient(170deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
  --s-tile:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.04));
  --s-text:linear-gradient(170deg,#ffffff 20%,#9a9ea7);
  --s-rim:linear-gradient(135deg,rgba(255,255,255,.65),rgba(255,255,255,.05) 38%,rgba(165,190,235,.12) 62%,rgba(255,255,255,.34));
  --s-glass:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.025) 45%,rgba(165,195,245,.09));
  --s-tab:rgba(205,220,245,.06);--s-glow:rgba(225,236,255,.075);--s-sheen:rgba(225,236,255,.26);--s-shade:rgba(0,0,0,.5);--s-hi:rgba(255,255,255,.11);--s-spot:rgba(255,255,255,.6);--s-press:rgba(255,255,255,.07);
  --s-good:#a9d977;--s-good-rgb:169,217,119;--s-bad:#ff8f8f;--s-bad-rgb:255,143,143;--s-warn:#e6c88f;--s-warn-rgb:230,200,143;
  --s-ease:cubic-bezier(.2,.9,.25,1);
  --s-blur:30px;
}
html.silk.light{
  --bg:#eceef0;--bg2:rgba(255,255,255,.62);--bg3:rgba(255,255,255,.5);--bg4:rgba(255,255,255,.75);
  --gold:#33363c;--gold2:#101114;--terra:rgba(16,17,20,.12);
  --cream:#101114;--cream2:#4a4e55;--muted:#7d828a;
  --border:rgba(16,17,20,.11);--green:#4f8a1f;--red:#c23a3a;--blue:#566175;
  --silver:#5a5e66;--silver2:#33363c;--pop-bg:#ffffff;--card:#ffffff;--text:#101114;
  --glass-hl:rgba(255,255,255,.5);--g1:40,44,54;--g2:70,76,90;
  --s-page:linear-gradient(155deg,#fdfdff 0%,#e9ebf0 34%,#d7dae1 62%,#f1f2f6 100%);
  --s-panel:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.42) 55%,rgba(232,236,244,.55));
  --s-ink:linear-gradient(150deg,#34363d 0%,#0c0d10 62%,#25272d 100%);--s-on-ink:#ffffff;
  --s-pill:linear-gradient(170deg,#ffffff,#eceef3);
  --s-tile:linear-gradient(145deg,#ffffff,#dfe2e9);
  --s-text:linear-gradient(170deg,#050506 20%,#5c6069);
  --s-rim:linear-gradient(135deg,#ffffff,rgba(255,255,255,.2) 38%,rgba(150,170,205,.28) 62%,rgba(255,255,255,.9));
  --s-glass:linear-gradient(140deg,rgba(255,255,255,.62),rgba(255,255,255,.2) 45%,rgba(205,222,250,.26));
  --s-tab:rgba(255,255,255,.5);--s-glow:rgba(112,142,196,.13);--s-sheen:rgba(255,255,255,.75);--s-shade:rgba(30,34,42,.14);--s-hi:rgba(255,255,255,.9);--s-spot:rgba(16,17,20,.5);--s-press:rgba(16,17,20,.06);
  --s-good:#4f8a1f;--s-good-rgb:79,138,31;--s-bad:#c23a3a;--s-bad-rgb:194,58,58;--s-warn:#8a6a1f;--s-warn-rgb:138,106,31;
}
html.silk body,html.silk button,html.silk input,html.silk select,html.silk textarea,html.silk .btn,html.silk .qinp,html.silk .cbtn{font-family:'Readex Pro','Tajawal','Noto Sans',Tahoma,sans-serif}
html.silk body{font-weight:300}

/* ── the ground: a graded page, with the live field drawn over it ── */
html.silk #app-aurora{display:block!important;background:var(--s-page)}
html.silk #app-aurora > *{display:none}
html.silk .app{position:relative;z-index:1}   /* the field and the page sit behind the app, at every width */
#silk-field{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;display:none}
html.silk #silk-field{display:block}
html.silk[data-silk-motion="fast"] #silk-field,html.silk[data-silk-motion="fast"] #silk-cur,html.silk[data-silk-motion="fast"] #silk-cur2{display:none}

/* ── real glass only on the top layers. Everything else is drawn, so the screen stays light ── */
html.silk .card,html.silk .stat,html.silk .pos-left,html.silk .inv-panel,html.silk .pos-card,html.silk th,html.silk .fc,html.silk select.fc,html.silk .qinp,html.silk .mix-ing-row,html.silk .mix-unit-note,html.silk .toast-item,html.silk .csel-dd,html.silk .prod-pick-dd,html.silk .rate-card,html.silk .sub-plan-card,html.silk .sub-plan-card-v2,html.silk #done-body{-webkit-backdrop-filter:none;backdrop-filter:none}
html.silk .sidebar,html.silk .modal,html.silk .mobile-bar{position:relative;background:var(--s-glass);isolation:isolate;
  -webkit-backdrop-filter:blur(var(--s-blur)) saturate(1.6) brightness(1.04);backdrop-filter:blur(var(--s-blur)) saturate(1.6) brightness(1.04);
  backdrop-filter:url(#silk-lg) blur(var(--s-blur)) saturate(1.6) brightness(1.04);
  box-shadow:0 22px 60px var(--s-shade),inset 0 1px 0 var(--s-hi),inset 0 -14px 30px -18px var(--s-sheen)}
html.silk .modal{border:0;border-radius:24px}
html.silk .sidebar::before,html.silk .modal::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--s-rim);pointer-events:none;z-index:1;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.silk .sidebar::after,html.silk .modal::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(360px 300px at var(--s-gx,20%) var(--s-gy,0%),var(--s-sheen),transparent 70%) fixed}
html.silk .ov{background:rgba(0,0,0,.36)}
html.silk.light .ov{background:rgba(40,44,54,.16)}
@media (min-width:769px){
  html.silk .sidebar{margin:10px;margin-inline-end:0;height:calc(100vh - 20px)!important;border-radius:24px;border:0}
}

/* ── panels: graded tones with a soft top light ── */
html.silk .card,html.silk .stat,html.silk .pos-left,html.silk .inv-panel,html.silk .qa-subcard,html.silk .dw-card,html.silk .dh-tile,html.silk .pos-card,html.silk .dh-chq-tile,html.silk .rate-card,html.silk .sub-plan-card,html.silk .sub-plan-card-v2{
  background:var(--s-panel);border-color:var(--border);box-shadow:inset 0 1px 0 var(--s-hi)}
html.silk .card,html.silk .pos-left,html.silk .inv-panel{border-radius:18px}
html.silk #pg-dashboard .stat{--stat-c:var(--gold2);background:var(--s-panel);border-color:var(--border);box-shadow:inset 0 1px 0 var(--s-hi);border-radius:18px}
html.silk #pg-dashboard .stat::before{display:none}
html.silk #pg-dashboard .stat .val:not(.t-green):not(.t-red){background:var(--s-text);-webkit-background-clip:text;background-clip:text;color:transparent}
html.silk .stat-ico{background:var(--s-tile);border-color:var(--border);color:var(--gold2)}
html.silk .t-green{color:var(--s-good)} html.silk .t-red{color:var(--s-bad)} html.silk .t-gold{color:var(--gold2)}
html.silk #pg-dashboard .pg-title::after{background:var(--s-ink)}
html.silk .pg-title{font-weight:400;color:var(--gold2)}
html.silk .sec-title{font-weight:400}

/* ── the light that follows the pointer along a panel's edge ── */
html.silk .card::after,html.silk .pos-card::after,html.silk .dh-tile::after,html.silk .qa-subcard::after,html.silk .dw-card::after,html.silk #pg-dashboard .stat::after{
  content:"";position:absolute;inset:0;width:auto;height:auto;top:0;left:0;right:0;bottom:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:var(--s-lit,0);transition:opacity .35s;filter:none;
  background:radial-gradient(180px 180px at var(--s-x,50%) var(--s-y,50%),var(--s-spot),transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.silk .card,html.silk .qa-subcard,html.silk .dw-card{position:relative}

/* ── buttons and switches ── */
html.silk .btn-gold,html.silk .ax-panel .btn-gold,html.silk .qa-btn.btn-gold{background:var(--s-ink);color:var(--s-on-ink);box-shadow:0 8px 22px var(--s-shade)}
html.silk .btn-gold:hover{background:var(--s-ink);filter:brightness(1.08)}
html.silk .btn-terra,html.silk #pg-dashboard .qa-btn.btn-terra{background:var(--s-pill);color:var(--gold2);border:1px solid var(--border)}
html.silk .btn-out{border-color:var(--border);color:var(--cream2)}
html.silk .btn-out:hover{border-color:var(--cream2);color:var(--gold2)}
html.silk .btn,html.silk .cbtn,html.silk .fc,html.silk .ubtn{border-radius:12px;transition:transform .55s var(--s-ease),background .25s,color .25s,border-color .25s,box-shadow .3s,filter .2s}
html.silk .btn:hover{transform:translateY(-1px)}
html.silk .btn:active,html.silk .cbtn:active,html.silk .ubtn:active{transform:scale(.97);transition-duration:.16s}
html.silk .cbtn.on,html.silk .ubtn.on,html.silk .size-btn.on{background:var(--s-ink);color:var(--s-on-ink);border-color:transparent;box-shadow:none}
html.silk .utog{border-radius:12px}
html.silk .switch input:checked + .switch-track{background:var(--s-ink)}
html.silk .csel-item.sel{background:var(--s-press);color:var(--gold2)}
html.silk .fc:focus,html.silk .qinp:focus{border-color:var(--cream2);box-shadow:0 0 0 4px var(--s-press);outline:0}
html.silk .btn-red{background:linear-gradient(150deg,#d05a54,#a33530);color:#fff}
html.silk .btn-gold.has-own-sound{border-radius:15px}

/* ── sliding markers (js/src/77-silk.js) ── */
html.silk .nav{position:relative}
#silk-nav-ind{position:absolute;top:0;left:8px;right:8px;height:40px;border-radius:13px;background:var(--s-ink);box-shadow:0 8px 22px var(--s-shade);pointer-events:none;will-change:transform;display:none}
html.silk #silk-nav-ind{display:block}
html.silk .ni{position:relative;margin:1px 8px;padding:9px 10px;border-radius:13px;border:0;font-weight:300;transition:color .25s,background .25s}
html.silk .ni:hover{background:var(--s-press)}
html.silk .ni.on,html.silk .ni.on:hover{background:transparent;color:var(--s-on-ink);border:0;font-weight:400}
html.silk .ni.on .ni-icon svg{stroke:var(--s-on-ink)}
html.silk .ni.on .sh-badge{border-color:transparent;background:rgba(127,127,127,.25);color:var(--s-on-ink)}
html.silk #pos-type-filter-bar{position:relative;background:var(--s-press);border-radius:12px;padding:3px;gap:0}
#silk-tab-pill{position:absolute;top:3px;bottom:3px;left:0;border-radius:9px;background:var(--s-pill);box-shadow:0 2px 10px var(--s-shade),inset 0 1px 0 var(--s-hi);pointer-events:none;will-change:transform;display:none}
html.silk #silk-tab-pill{display:block}
html.silk #pos-type-filter-bar .cbtn{position:relative;border:0;background:transparent;box-shadow:none;color:var(--cream2);border-radius:9px}
html.silk #pos-type-filter-bar .cbtn.on{background:transparent;color:var(--gold2);font-weight:400}

/* ── sales screen: each item keeps its own tone (v1.19.203, css/13-r203.css), the chip says the type ── */
html.silk #pg-pos .pos-card{border-radius:15px}
html.silk #pg-pos .pos-card-price{color:var(--gold2);font-weight:300}
html.silk #pg-pos .pos-card-qty.pc-out{color:var(--s-bad);background:transparent;padding:0}
html.silk #pg-pos #inv-total{font-weight:300;background:var(--s-text);-webkit-background-clip:text;background-clip:text;color:transparent}
html.silk .pos-empty-ico{background:var(--s-tile);box-shadow:none;color:var(--gold2)}
html.silk .inv-line-price{color:var(--gold2)}
html.silk .inv-row{background:var(--s-press)}

/* ── home tiles and cheques card go monochrome; urgency keeps its meaning ── */
html.silk .dh-tile{--tone:var(--gold2)}
html.silk .dh-tile-ico{background:var(--s-tile);border-color:var(--border);color:var(--gold2)}
html.silk .dh-tile::before{display:none}
html.silk .dh-chq-kind,html.silk .dh-chq-kind.issued{color:var(--cream2);background:var(--s-press);border-color:var(--border)}
html.silk .dh-chq-ico,html.silk .dh-chq-count{color:var(--gold2);background:var(--s-tile);border-color:var(--border);box-shadow:none}
html.silk .card.dh-chq{background-image:var(--s-panel)}
html.silk .card.dh-chq::after{opacity:var(--s-lit,0);height:auto}
html.silk .dw-chip{color:var(--gold2)}
html.silk .ni-soon{background:var(--s-press);color:var(--cream2)}
html.silk ::selection{background:var(--gold2);color:var(--s-on-ink)}
html.silk #sb-profile-btn{background:var(--s-ink)!important;color:var(--s-on-ink)!important;box-shadow:0 8px 22px var(--s-shade)!important}
html.silk #sb-plan-badge{background:var(--s-press);color:var(--gold2);border-color:var(--border)}
/* status chips: readable in both looks; green and red keep their meaning, the rest goes neutral */
html.silk .bg-green{background:rgba(var(--s-good-rgb),.14);color:var(--s-good)}
html.silk .bg-red{background:rgba(var(--s-bad-rgb),.13);color:var(--s-bad)}
html.silk .bg-blue{background:var(--s-press);color:var(--cream2)}

/* ── windows open from where you pressed (the origin is set by js/src/77-silk.js) ── */
@keyframes silkPop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
@keyframes silkFade{from{opacity:0}to{opacity:1}}
html.silk:not([data-silk-motion="fast"]) .ov.on{animation:silkFade .22s ease-out}
html.silk:not([data-silk-motion="fast"]) .ov.on .modal:not(.wn-modal){animation:silkPop .52s var(--s-ease) both}
html.silk[data-silk-motion="fast"] *{transition-duration:0s!important}
html.silk[data-silk-motion="fast"] .ov.on,html.silk[data-silk-motion="fast"] .ov.on .modal,html.silk[data-silk-motion="fast"] .page.on{animation:none!important}

/* ── live details ── */
.silk-rip{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--gold2);pointer-events:none;z-index:100002;will-change:transform,opacity}
#silk-cur,#silk-cur2{position:fixed;top:0;left:0;pointer-events:none;z-index:100003;border-radius:50%;will-change:transform;opacity:0;display:none}
html.silk #silk-cur,html.silk #silk-cur2{display:block}
/* the only pointer: a dot exactly at the hand and a ring that follows it. "difference" keeps them visible on black and on white */
#silk-cur{width:30px;height:30px;margin:-15px 0 0 -15px;border:1.5px solid #fff;mix-blend-mode:difference}
#silk-cur2{width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;mix-blend-mode:difference}
html.silk.silk-ptr #silk-cur{opacity:.8} html.silk.silk-ptr #silk-cur2{opacity:1}
@media (hover:hover) and (pointer:fine){
  html.silk.silk-ptr:not([data-silk-motion="fast"]),html.silk.silk-ptr:not([data-silk-motion="fast"]) *{cursor:none!important}
}
@media (hover:none),(pointer:coarse){#silk-cur,#silk-cur2,html.silk #silk-cur,html.silk #silk-cur2{display:none}}
@media (prefers-reduced-motion:reduce){html.silk .btn,html.silk .cbtn,html.silk .fc,html.silk .ubtn{transition:none}}

/* ── no green anywhere (css/11z-silk-colors.css covers the style sheets; this covers images, inline styles and the rest) ── */
html.silk img[src*="assets/logos/"]{filter:grayscale(1) brightness(1.18) contrast(1.05)}
html.silk.light img[src*="assets/logos/"]{filter:grayscale(1) brightness(.72) contrast(1.15)}
html.silk img[src^="data:image/svg"]{filter:grayscale(1) brightness(1.1)}
html.silk [style*="#0d9e6e"],html.silk [style*="13,158,110"]{background:var(--s-ink)!important;color:var(--s-on-ink)!important;border-color:transparent!important}
html.silk [style*="color:#12c887"],html.silk [style*="color: #12c887"]{color:var(--gold2)!important}
html.silk [style*="color:#4a7a65"]{color:var(--muted)!important}
html.silk [style*="color:#8ab8a8"]{color:var(--cream2)!important}
html.silk [style*="color:#e0f0ea"]{color:var(--cream)!important}
html.silk [style*="#1a3d2e"]{border-color:var(--border)!important}
html.silk [style*="background:#0d1a15"],html.silk [style*="background:#080f0d"],html.silk [style*="#112218"]{background:var(--s-panel)!important}
html.silk [style*="accent-color:#12c887"],html.silk input[type="checkbox"],html.silk input[type="radio"],html.silk input[type="range"]{accent-color:var(--gold2)!important}
html.silk [style*="rgb(125, 202, 125)"]{color:var(--s-good)!important}
html.silk [stroke="#12c887"],html.silk [stroke="#0d9e6e"]{stroke:var(--gold2)}
html.silk [fill="#12c887"],html.silk [fill="#0d9e6e"]{fill:var(--gold2)}
html.silk #auth-screen{background:var(--s-page)!important}
html.silk .sub-plan-card-v2.sub-plan-target{animation:none}
html.silk .inv-row.mv-row-flash{animation-name:silkFlash}
@keyframes silkFlash{0%{background:rgba(var(--g1),.2)}100%{background:var(--s-press)}}
html.silk .splash-logo-check{animation-name:silkCheckIn;filter:grayscale(1) brightness(1.2)}
@keyframes silkCheckIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* ── notices: the meaning stays, in the theme's tones ── */
html.silk .toast-item{background:var(--pop-bg);border:1px solid var(--border);color:var(--cream);border-radius:14px;font-weight:400;box-shadow:0 18px 44px var(--s-shade),inset 0 1px 0 var(--s-hi)}
html.silk .toast-item svg{color:var(--cream2)}
html.silk .toast-item.ok{border-color:rgba(var(--s-good-rgb),.45)} html.silk .toast-item.ok svg{color:var(--s-good)}
html.silk .toast-item.err{border-color:rgba(var(--s-bad-rgb),.5)} html.silk .toast-item.err svg{color:var(--s-bad)}
html.silk .toast-item.warn{border-color:rgba(var(--s-warn-rgb),.5)} html.silk .toast-item.warn svg{color:var(--s-warn)}
html.silk .toast-item.cash{border-color:var(--gold2)} html.silk .toast-item.cash svg{color:var(--gold2)}
html.silk .alert{border-radius:14px;font-weight:400;background:var(--s-panel);border:1px solid var(--border);color:var(--cream)}
html.silk .al-ok{border-color:rgba(var(--s-good-rgb),.34);color:var(--s-good);background:linear-gradient(160deg,rgba(var(--s-good-rgb),.1),rgba(var(--s-good-rgb),.03))}
html.silk .al-warn{border-color:rgba(var(--s-warn-rgb),.38);color:var(--s-warn);background:linear-gradient(160deg,rgba(var(--s-warn-rgb),.1),rgba(var(--s-warn-rgb),.03))}
html.silk .al-danger{border-color:rgba(var(--s-bad-rgb),.36);color:var(--s-bad);background:linear-gradient(160deg,rgba(var(--s-bad-rgb),.1),rgba(var(--s-bad-rgb),.03))}
html.silk .conn-wifi{color:var(--gold2)}

/* ── calculator and currency windows: the same glass, keys as soft pebbles ── */
html.silk .float-win{--fw-rgb:24,25,29;--g1:232,238,250;--g2:175,195,235;--fw-key:rgba(255,255,255,.075);--fw-key-hi:rgba(255,255,255,.16);--fw-line:rgba(255,255,255,.1);--fw-txt:#f4f5f6;--fw-dim:#a9adb4;--fw-field:rgba(0,0,0,.28);
  border:0;border-radius:24px;background:var(--s-glass);box-shadow:0 26px 70px var(--s-shade),inset 0 1px 0 var(--s-hi),inset 0 -14px 30px -18px var(--s-sheen);
  -webkit-backdrop-filter:blur(var(--s-blur)) saturate(1.6) brightness(1.04);backdrop-filter:blur(var(--s-blur)) saturate(1.6) brightness(1.04);backdrop-filter:url(#silk-lg) blur(var(--s-blur)) saturate(1.6) brightness(1.04)}
html.silk.light .float-win{--fw-rgb:244,245,247;--g1:40,44,54;--g2:90,104,130;--fw-key:rgba(255,255,255,.72);--fw-key-hi:rgba(255,255,255,.95);--fw-line:rgba(16,17,20,.1);--fw-txt:#101114;--fw-dim:#4a4e55;--fw-field:rgba(255,255,255,.6);background:var(--s-glass)}
html.silk #float-currency{--g2:175,195,235}
html.silk .float-win::before{animation:none;filter:none;inset:0;width:auto;height:auto;left:0;right:0;top:0;bottom:0;border-radius:inherit;padding:1px;background:var(--s-rim);z-index:1;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.silk .float-win::after{animation:none;filter:none;inset:0;width:auto;height:auto;left:0;right:0;top:0;bottom:0;border-radius:inherit;background:radial-gradient(360px 300px at var(--s-gx,20%) var(--s-gy,0%),var(--s-sheen),transparent 70%) fixed}
html.silk .float-win-head{background:transparent;border-bottom:1px solid var(--fw-line);padding:13px 14px}
html.silk .float-win-title{font-weight:400;font-size:13.5px}
html.silk .float-win-title svg{color:var(--fw-txt);filter:none}
html.silk .float-win-close{border-radius:10px;transition:background .25s,color .25s}
html.silk .float-win-close:hover{background:var(--s-press);box-shadow:none;color:var(--fw-txt)}
html.silk .float-win-close.active{background:var(--s-ink);color:var(--s-on-ink);box-shadow:none}
html.silk .float-ext-toast{background:var(--pop-bg);color:var(--cream);border-color:var(--border);box-shadow:none}
html.silk body.float-ext-body{background:var(--s-page)}
html.silk .calc-modes{border:0;background:var(--s-press);border-radius:13px}
html.silk .calc-mode{font-weight:300;border-radius:10px;transition:background .25s,color .25s}
html.silk .calc-mode.on{background:var(--s-pill);color:var(--fw-txt);box-shadow:0 2px 10px var(--s-shade),inset 0 1px 0 var(--s-hi);font-weight:400;opacity:1}
html.silk .calc-expr{color:var(--fw-dim)}
html.silk .calc-prev{color:var(--fw-dim);text-shadow:none;font-weight:400}
html.silk .calc-display{border:0;border-radius:16px;background:var(--fw-field);box-shadow:inset 0 1px 6px var(--s-shade);min-height:72px}
html.silk .calc-display,html.silk .calc-display *{font-weight:200;text-shadow:none;color:var(--fw-txt)}
html.silk .calc-copy-btn{border:0;background:var(--s-press);color:var(--fw-dim);border-radius:12px;box-shadow:none}
html.silk .calc-copy-btn:hover{color:var(--fw-txt);box-shadow:none;background:var(--fw-key-hi)}
html.silk .calc-grid{gap:8px}
html.silk .calc-btn{border:0;border-radius:16px;background:var(--fw-key);color:var(--fw-txt);font-weight:300;font-size:17px;box-shadow:inset 0 1px 0 var(--fw-key-hi);transition:transform .55s var(--s-ease),background .22s}
html.silk .calc-btn:hover{background:var(--fw-key-hi);border:0;box-shadow:inset 0 1px 0 var(--fw-key-hi);transform:translateY(-1px)}
html.silk .calc-btn:active{transform:scale(.93);transition-duration:.14s}
html.silk .calc-btn-op,html.silk .calc-btn-sci,html.silk .calc-btn-mem{color:var(--fw-dim);background:rgba(var(--g1),.04)}
html.silk .calc-btn-gold,html.silk .calc-btn-gold:hover{background:var(--s-ink);color:var(--s-on-ink);border:0;box-shadow:0 8px 22px var(--s-shade);font-weight:400}
html.silk .calc-mem-badge{background:var(--s-press);color:var(--fw-txt);box-shadow:none}
html.silk .calc-hist-result{color:var(--fw-txt);text-shadow:none}
html.silk .fx-hero-row,html.silk .fx-hero-row.sell{border:0;border-radius:14px;background:var(--fw-key);box-shadow:inset 0 1px 0 var(--fw-key-hi)}
html.silk .fx-hero-row:hover{background:var(--fw-key-hi);box-shadow:inset 0 1px 0 var(--fw-key-hi)}
html.silk .fx-hero-v,html.silk .fx-hero-row.sell .fx-hero-v{color:var(--fw-txt);text-shadow:none;font-weight:300}
html.silk .fx-hero-k{font-weight:400}
html.silk .fx-row{border-radius:13px}
html.silk .fx-row:hover{background:var(--fw-key);border-color:transparent}
html.silk .fx-badge{background:var(--s-tile);color:var(--fw-txt);box-shadow:none;border:0;font-weight:500}
html.silk .fx-pin.on{color:var(--fw-txt)}
html.silk .fw-opa{background:transparent}
/* accounts keep their colour in the data; the Max look replaces the revenue green on screen only */
html.silk .stat[style*="#22c55e"]{border-top-color:var(--s-good)!important}
html.silk .acct-row[style*="#22c55e"]{--ac:var(--s-good)!important}
html.silk .acct-ic[style*="#22c55e"]{background:rgba(var(--s-good-rgb),.15)!important}
/* v1.19.202: a faint light follows the pointer over the whole app. Only a transform moves, so nothing is repainted. */
#silk-glow{display:none}
html.silk #silk-glow{display:block;position:fixed;top:0;left:0;width:1000px;height:1000px;margin:-500px 0 0 -500px;border-radius:50%;pointer-events:none;z-index:100002;opacity:0;will-change:transform;transition:opacity .45s ease;background:radial-gradient(closest-side,var(--s-glow),transparent)}
html.silk.silk-ptr #silk-glow{opacity:1}
html.silk[data-silk-motion="fast"] #silk-glow{display:none}
@media (hover:none),(pointer:coarse){html.silk #silk-glow{display:none}}
@media print{html.silk #silk-glow{display:none}}
/* v1.19.202: the sidebar button grows out of the glass edge as one shape */
@media (min-width:769px){
  html.silk .sidebar{transition:width .42s cubic-bezier(.22,.9,.28,1),margin .42s cubic-bezier(.22,.9,.28,1),opacity .3s ease,visibility 0s}
  html.silk .app.sb-collapsed .sidebar{margin:0}
  html.silk .sb-handle,html.silk .sb-handle:hover,html.silk .sb-handle:focus-visible{inset-inline-start:calc(var(--sbw) + 10px);width:26px;height:104px;padding:0;padding-inline-end:9px;background:transparent;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--s-mid,var(--cream2));isolation:isolate;transition:inset-inline-start .42s cubic-bezier(.22,.9,.28,1),color .2s ease,padding .3s var(--s-ease)}
  html.silk .sb-handle:hover,html.silk .sb-handle:focus-visible{padding-inline-end:3px;color:var(--s-ink)}
  html.silk .app.sb-collapsed .sb-handle{inset-inline-start:0}
  html.silk .sb-handle::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(360px 300px at var(--s-gx,20%) var(--s-gy,0%),var(--s-sheen),transparent 70%) fixed,var(--s-tab);-webkit-backdrop-filter:blur(var(--s-blur)) saturate(1.6) brightness(1.04);backdrop-filter:blur(var(--s-blur)) saturate(1.6) brightness(1.04);clip-path:path("M0 0C0 24 17 28 17 46V58C17 76 0 80 0 104Z");transition:clip-path .3s var(--s-ease)}
  html.silk .sb-handle:hover::before,html.silk .sb-handle:focus-visible::before{clip-path:path("M0 0C0 22 24 26 24 46V58C24 78 0 82 0 104Z")}
  html[dir="rtl"].silk .sb-handle::before{clip-path:path("M26 0C26 24 9 28 9 46V58C9 76 26 80 26 104Z")}
  html[dir="rtl"].silk .sb-handle:hover::before,html[dir="rtl"].silk .sb-handle:focus-visible::before{clip-path:path("M26 0C26 22 2 26 2 46V58C2 78 26 82 26 104Z")}
}
/* v1.19.202: the Max card kept the gold ring from the normal look, and it filled the see-through card */
html.silk .spl-max{background:var(--s-glass);border:1.5px solid var(--s-ink);box-shadow:0 18px 50px var(--s-shade),inset 0 1px 0 var(--s-hi)}
html.silk .spl-badge-max{background:var(--s-ink);color:var(--s-on-ink)}