/* Liquid Glass layer, loaded after theme-sunrise.css.
   Surfaces turn translucent and refract what floats behind them (the coin
   field, the warm washes): a blurred, saturated backdrop, a bright top edge,
   a soft specular sheen and a long low shadow. Buttons and controls are
   smaller lenses of the same glass. Falls back to solid paper where the
   browser cannot blur or the user asks for less transparency. */

:root{
  --glass:rgba(255,255,255,.52);--glass-strong:rgba(255,255,255,.74);
  --glass-edge:rgba(255,255,255,.72);--glass-div:rgba(255,255,255,.60);
  --glass-hi:rgba(255,255,255,.90);--glass-lo:rgba(255,255,255,.28);
  --glass-sheen-a:rgba(255,255,255,.55);--glass-sheen-b:rgba(255,255,255,.10);
  --glass-shadow:rgba(15,23,42,.20);--glass-blur:18px;
  --glass-input:rgba(255,255,255,.46);--glass-dim:rgba(15,23,42,.30);
}
:root[data-theme="dark"]{
  --glass:rgba(17,26,43,.50);--glass-strong:rgba(17,26,43,.72);
  --glass-edge:rgba(255,255,255,.14);--glass-div:rgba(255,255,255,.09);
  --glass-hi:rgba(255,255,255,.22);--glass-lo:rgba(255,255,255,.05);
  --glass-sheen-a:rgba(255,255,255,.12);--glass-sheen-b:rgba(255,255,255,.02);
  --glass-shadow:rgba(0,0,0,.65);
  --glass-input:rgba(0,0,0,.26);--glass-dim:rgba(0,0,0,.45);
}

/* richer backdrop so the blur has something to bend */
body{background:
  radial-gradient(900px 520px at 8% -6%,rgba(30,58,138,.14),transparent 62%),
  radial-gradient(760px 520px at 96% 4%,rgba(6,182,212,.13),transparent 62%),
  radial-gradient(700px 560px at 6% 72%,rgba(2,132,199,.07),transparent 62%),
  radial-gradient(820px 600px at 98% 92%,rgba(103,232,249,.12),transparent 62%),var(--paper)}
[data-theme="dark"] body{background:
  radial-gradient(900px 520px at 8% -6%,rgba(56,189,248,.16),transparent 62%),
  radial-gradient(760px 520px at 96% 4%,rgba(34,211,238,.13),transparent 62%),
  radial-gradient(820px 600px at 98% 92%,rgba(56,189,248,.08),transparent 62%),var(--paper)}

/* the glass itself */
header.top,footer,
.lcard,.card-grid>*,.stats-row,.rates-grid,.grid-stats,.panel,.trade,.chart-box,.pool-box,
.coin-meta,.ca-card,.stat,.tre-cards>div,.fxs-card,.callout,.docs pre,.docs .tbl,
.modal-card,.cookie-note,.ccy-menu,.lfeed-card,.drop,.to-top{
  background-color:var(--glass);
  background-image:linear-gradient(135deg,var(--glass-sheen-a),var(--glass-sheen-b) 38%,rgba(255,255,255,0) 60%,var(--glass-lo));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(170%);backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 var(--glass-lo),inset 1px 0 0 var(--glass-lo),0 26px 60px -34px var(--glass-shadow);
}
header.top{border-width:0 0 1px;background-image:linear-gradient(180deg,var(--glass-sheen-a),rgba(255,255,255,0));box-shadow:inset 0 -1px 0 var(--glass-edge),0 12px 40px -30px var(--glass-shadow)}
footer{border-width:1px 0 0;box-shadow:inset 0 1px 0 var(--glass-hi)}
.modal-card{background-color:var(--glass-strong);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%)}
.modal{background:var(--glass-dim);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.cookie-note,.ccy-menu,.lfeed-card{background-color:var(--glass-strong)}
.lcard,.card-grid>*{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease}
.lcard:hover,.card-grid>*:hover{transform:translateY(-2px);border-color:var(--glass-hi);box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 var(--glass-lo),0 0 0 1.5px var(--chroma),0 30px 70px -36px var(--chroma-ink)}
[data-theme="dark"] .lcard:hover,[data-theme="dark"] .card-grid>*:hover{box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1.5px var(--chroma),0 30px 70px -36px rgba(0,0,0,.9)}

/* slabs with cells: the cells go clear so one sheet of glass reads through */
.rates-grid{border-right:0;border-bottom:0}
.rate,.rates-grid>.rate{background:transparent;border-color:var(--glass-div)}
.rate.base{background:rgba(255,255,255,.34)}
[data-theme="dark"] .rate.base{background:rgba(255,255,255,.06)}
.rate:hover{background:var(--chroma-wash)}
.stats-row>div,.grid-stats>div{border-color:var(--glass-div)}
.stats-row>div:first-child{border-left:0}
tbody tr:hover{background:rgba(255,255,255,.38)}
[data-theme="dark"] tbody tr:hover{background:rgba(255,255,255,.05)}
.tabs{border-bottom-color:var(--glass-edge)}
.tabs button{border-left-color:var(--glass-div)}

/* controls: small lenses */
.btn,.ccy-btn,.theme-btn,.seg,.ex-layout,.quick button,.tag,.ccy-filter,.seg-sel{
  background-color:var(--glass-strong);
  background-image:linear-gradient(180deg,var(--glass-sheen-a),rgba(255,255,255,0) 58%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 8px 22px -16px var(--glass-shadow);
}
.seg,.ex-layout{overflow:hidden;padding:0}
.seg button,.ex-layout button{background:transparent;border-color:var(--glass-div)}
.seg button.on,.ex-layout button.on{background:var(--ink);color:var(--paper)}
.btn.accent,.hero .btn.accent{
  background-color:var(--chroma);
  background-image:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.04) 56%),linear-gradient(105deg,var(--chroma),var(--sun-b));
  border-color:rgba(255,255,255,.6);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 12px 28px -16px rgba(2,132,199,.55);
}
.btn.accent:hover,.hero .btn.accent:hover{background-image:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 56%),linear-gradient(105deg,var(--chroma-ink),var(--chroma));color:#fff}
[data-theme="dark"] .btn.accent,[data-theme="dark"] .btn.accent:hover{color:#0b1220}
.btn.primary{background-color:rgba(15,23,42,.86);background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 56%);color:#fff;border-color:rgba(255,255,255,.22)}
[data-theme="dark"] .btn.primary{background-color:rgba(230,237,247,.9);color:#0b1220;border-color:rgba(255,255,255,.7)}
.form input,.form select,.amt,.ccy-filter,.ca-addr{background-color:var(--glass-input);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:var(--glass-edge);box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
.tag.live{background:var(--accent-wash);border-color:var(--accent);background-image:none}
.toast{background:rgba(15,23,42,.84);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 40px -20px rgba(0,0,0,.5)}
[data-theme="dark"] .toast{background:rgba(230,237,247,.92);color:#0b1220}

/* the currency selector menu and the wallet picker rows */
.ccy-opt:hover,.wallet-opt:hover{background:rgba(255,255,255,.4)}
[data-theme="dark"] .ccy-opt:hover,[data-theme="dark"] .wallet-opt:hover{background:rgba(255,255,255,.06)}

/* graceful degradation */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:rgba(255,255,255,.94);--glass-strong:rgba(255,255,255,.98);--glass-input:rgba(255,255,255,.9)}
  :root[data-theme="dark"]{--glass:rgba(17,26,43,.96);--glass-strong:rgba(17,26,43,.98);--glass-input:rgba(0,0,0,.4)}
}
@media (prefers-reduced-transparency:reduce){
  header.top,footer,.lcard,.card-grid>*,.stats-row,.rates-grid,.grid-stats,.panel,.trade,.chart-box,.pool-box,.coin-meta,.ca-card,.stat,.tre-cards>div,.fxs-card,.callout,.docs pre,.docs .tbl,.modal-card,.cookie-note,.ccy-menu,.lfeed-card,.drop,.to-top,.btn,.ccy-btn,.theme-btn,.seg,.ex-layout,.quick button,.tag{
    -webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--paper-sunk);background-image:none}
}
@media (prefers-reduced-motion:reduce){.lcard,.card-grid>*{transition:none}.lcard:hover,.card-grid>*:hover{transform:none}}