/* ============================================================
   DnrKyc · Ice theme (shared)
   Loaded LAST on a page (after site.css and ui.css). It swaps the
   gold accent for frost blue, cools the dark backgrounds down and
   adds the diamond / frost details. Working pages (dashboard, deal
   lists, ...) get the calm version: colours, prism edges and frozen
   funds, but no drifting crystals.

   Not touched on purpose: Sender yellow / Receiver green, the green
   money amounts, coin logos, tier icons and the Mario-style pieces.
   ============================================================ */
html:root {
  --accent: #8fd8ff;
  --accent-dim: #4ab3f4;
  --accent-bright: #d6f3ff;
  --accent-soft: rgba(143,216,255,.14);
  --on-accent: #04121f;
  --ice-grad: linear-gradient(135deg, #e6f8ff 0%, #8fd8ff 48%, #4ab3f4 100%);
  --ice-grad-h: linear-gradient(135deg, #f4fcff 0%, #aee4ff 48%, #63bff7 100%);
  /* prism edge: light catching a cut stone */
  --prism: linear-gradient(135deg, #8fd8ff 0%, #ffffff 30%, #c3b6ff 55%, #8fd8ff 80%, #e6f8ff 100%);
  --prism-dim: linear-gradient(135deg, rgba(143,216,255,.38) 0%, rgba(255,255,255,.16) 30%, rgba(195,182,255,.22) 55%, rgba(143,216,255,.38) 100%);
  --bg: #070b11;
  --bg-side: #080c13;
  --surface: #0e141d;
  --surface-2: #121a25;
  --border: rgba(190,228,255,.10);
  --border-strong: rgba(190,228,255,.18);
}

/* ---------- backgrounds: cold blue-black, with a soft cold light from the top ---------- */
html:root body { background-color: #070b11 !important; }
html:root body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 460px at 30% -12%, rgba(143,216,255,.10), transparent 70%),
    radial-gradient(700px 420px at 100% 0%, rgba(170,160,255,.06), transparent 70%);
}
html:root body > .wrap, html:root body > aside.side { position: relative; z-index: 1; }
html:root body > aside.side { position: fixed; }

/* ---------- logo text ("Escrow"): cut ice with a glint, and one small sparkle ---------- */
html:root .brand span {
  position: relative; display: inline-block; color: #8fd8ff;
  background: linear-gradient(105deg, #4ab3f4 0%, #8fd8ff 28%, #f6fdff 47%, #ffffff 50%, #8fd8ff 64%, #6cc6fb 100%);
  background-size: 280% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: iceGlint 6s ease-in-out infinite;
}
@keyframes iceGlint { 0%, 50% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
html:root .brand span::after {
  content: ""; position: absolute; right: -8px; top: -3px; width: 9px; height: 9px; background: #fff; pointer-events: none;
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
  transform: scale(0); animation: iceTwinkle 3.6s ease-in-out .8s infinite;
}
@keyframes iceTwinkle { 0%, 55%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 70% { transform: scale(1) rotate(20deg); opacity: 1; } 85% { transform: scale(.5) rotate(40deg); opacity: .7; } }

/* ---------- logo: gives way like a pillow where you push it (static/ice.js does the tilting) ---------- */
.ice-logo { will-change: transform; transition: transform .55s cubic-bezier(.3,1.9,.45,1), filter .3s ease; }
.ice-logo.pressing { transition: transform .12s ease-out, filter .2s ease; filter: brightness(.93); }

/* ---------- sidebar ---------- */
html:root body aside.side { background: #080c13 !important; border-right-color: rgba(190,228,255,.09) !important; }
html:root body:has(aside.side) .side a.on {
  background: linear-gradient(180deg, rgba(143,216,255,.15), rgba(143,216,255,.05)) !important;
  box-shadow: inset 0 1px 0 rgba(214,243,255,.14), 0 1px 0 rgba(0,0,0,.25) !important;
}
html:root body:has(aside.side) .side a.on .si { color: #8fd8ff !important; stroke: #8fd8ff !important; }
html:root body:has(aside.side) .side a:hover { background: rgba(143,216,255,.06) !important; }
html:root body aside.side .side-sep { background-image: radial-gradient(#2c4257 1px, transparent 1.2px) !important; }
html:root .side a .ncount, html:root .ncount { background: #8fd8ff !important; color: #04121f !important; }

/* ---------- top bar: frosted glass ---------- */
html:root body:has(aside.side) .topbar {
  background: rgba(8,12,19,.72) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: rgba(190,228,255,.09) !important;
}
html:root .belln { background: #8fd8ff !important; color: #04121f !important; }
html:root .bell-all, html:root .bell-row .bdot { color: #8fd8ff; }
html:root .bell-row:not(.seen) .bdot { background: #8fd8ff; }
html:root .bell-all:hover { background: rgba(143,216,255,.1); }
html:root .bellpanel { background: rgba(12,19,28,.94) !important; border-color: rgba(190,228,255,.16) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* ---------- main buttons: clear ice, crisp edge, dark navy text, no glow ---------- */
html:root body .btn-main, html:root body .btn-deal, html:root body a.btn-main, html:root body a.btn-deal,
html:root body .topbar-cta, html:root body button.go, html:root body .go, html:root body:has(aside.side) .box .btn {
  background-color: #8fd8ff !important;
  background-image: var(--ice-grad) !important;
  color: #04121f !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(4,18,31,.18) !important;
}
html:root body .btn-main:hover, html:root body .btn-deal:hover, html:root body a.btn-deal:hover,
html:root body .topbar-cta:hover, html:root body .go:hover, html:root body:has(aside.side) .box .btn:hover {
  background-color: #aee4ff !important;
  background-image: var(--ice-grad-h) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(4,18,31,.18) !important;
}
html:root body .btn-main:disabled, html:root body .go:disabled, html:root body .btn-deal:disabled { opacity: .5; }

/* ---------- panels and tables: prism edge ---------- */
html:root .v-panel {
  border: 1px solid transparent !important;
  background: linear-gradient(#0a1018, #0a1018) padding-box, var(--prism-dim) border-box !important;
}
html:root .v-plans { border-bottom-color: rgba(190,228,255,.10) !important; }
html:root .v-plan + .v-plan { border-left-color: rgba(190,228,255,.10) !important; }
html:root .v-plan.on { box-shadow: inset 3px 0 0 #8fd8ff !important; }
html:root .v-bar { background: #142030; }
html:root .v-bar i { background: linear-gradient(90deg, #d6f3ff, #8fd8ff 55%, #4ab3f4); }
html:root .v-seg { background: #0c131c !important; border-color: rgba(190,228,255,.12) !important; }
html:root .v-seg button.on { background: linear-gradient(180deg, rgba(143,216,255,.18), rgba(143,216,255,.07)) !important; }
html:root .v-table { border-color: rgba(190,228,255,.11) !important; background: rgba(9,14,21,.6); }
html:root .v-table .v-tr { border-color: rgba(190,228,255,.08) !important; }
html:root .v-table a.v-tr:hover { background: rgba(143,216,255,.05) !important; }
html:root .v-search, html:root .search, html:root .volsel { border-color: rgba(190,228,255,.14); }
html:root .v-search:focus, html:root .search:focus, html:root .volsel:focus,
html:root .box select:focus, html:root .box input:focus { border-color: rgba(143,216,255,.55) !important; outline: none; }
html:root .sdot.wait { background: #8fd8ff; }
html:root .invite { border-color: rgba(143,216,255,.45) !important; background: rgba(143,216,255,.07) !important; }
html:root .invite span { color: #8fd8ff !important; }
html:root .users button.on, html:root .openbtn.on { border-color: #8fd8ff !important; }
html:root .openbtn.on { color: #8fd8ff !important; }
html:root .tabs button.on { color: #8fd8ff !important; border-bottom-color: #8fd8ff !important; }

/* ---------- popups: frosted glass with a prism edge ---------- */
html:root .modal { -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
html:root .modal .box {
  border: 1px solid transparent !important;
  background: linear-gradient(rgba(11,17,25,.96), rgba(11,17,25,.96)) padding-box, var(--prism-dim) border-box !important;
}

/* ---------- frozen funds: money that sits locked in escrow is iced in ---------- */
.frozen {
  position: relative; display: inline-flex; align-items: center; gap: .38rem; overflow: hidden;
  padding: .2rem .6rem .2rem .42rem; border-radius: 9px;
  border: 1px solid rgba(190,228,255,.30);
  background: linear-gradient(135deg, rgba(214,243,255,.17), rgba(74,179,244,.07) 60%, rgba(12,20,29,.2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
html:root .frozen b { color: #e6f8ff !important; }
.frozen .flake { width: 13px; height: 13px; flex-shrink: 0; color: #8fd8ff; animation: flakeTurn 14s linear infinite; }
@keyframes flakeTurn { to { transform: rotate(360deg); } }
/* frost grain on the ice, and a slow glint across it */
.frozen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='60'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 .86  0 0 0 0 .95  0 0 0 0 1  0 0 0 2.6 -1'/></filter><rect width='160' height='60' filter='url(%23f)'/></svg>");
}
.frozen::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  animation: frozenGlint 5.5s ease-in-out infinite;
}
@keyframes frozenGlint { 0%, 62% { transform: translateX(0); } 100% { transform: translateX(520%); } }
.frozen > * { position: relative; z-index: 1; }

/* phones: tables are tight, so the frozen amount is just the snowflake and icy text */
@media (max-width: 700px) {
  .v-tr .frozen { padding: 0; border: 0; background: none; box-shadow: none; gap: .2rem; overflow: visible; }
  .v-tr .frozen::before, .v-tr .frozen::after { display: none; }
  .v-tr .frozen .flake { width: 11px; height: 11px; }
}

/* ---------- Settings: currency picker ---------- */
html:root .cur-opt span i { background: #121c28; color: #8fd8ff; }
html:root .cur-opt input:checked + span { border-color: #8fd8ff; background: rgba(143,216,255,.08); }
html:root .cur-opt:hover span { border-color: rgba(190,228,255,.3); }

/* ---------- deal lists: filter buttons ---------- */
html:root .vis button.on { border-color: #8fd8ff; color: #8fd8ff; }