:root{
  color-scheme: light;
  --font-sans: 'Space Grotesk','SF Pro Display','SF Pro Rounded','Helvetica Neue',system-ui,sans-serif;

  /* Core tokens */
  --bg:#f6f4ec;
  --bg-elev:rgba(255,255,255,.72);
  --text:#1a1812;
  --muted:#4d4a42;
  --border:rgba(255,255,255,.52);
  --shadow:0 24px 48px rgba(16,21,34,.15),0 6px 14px rgba(0,0,0,.08);

  /* Brand */
  --accent:#ffd54f;
  --accent-contrast:#1f1500;
  --accent-soft:rgba(255,213,79,.28);

  /* Liquid Glass */
  --glass-strength:.7;
  --glass-blur:18px;
  --glass-opacity:calc(var(--glass-strength)*100%);
  --glass-blur-active:calc(var(--glass-blur)*(0.6 + var(--glass-strength)));
  --glass-border:rgba(255,255,255,.58);
  --glass-highlight:rgba(255,255,255,.64);
  --glass-shadow:0 20px 50px rgba(20,14,0,.22),0 8px 20px rgba(0,0,0,.12);
  --noise-opacity:.22;

  --surface-alpha:calc((0.35 + var(--glass-strength)*0.5)*100%);
  --tile-alpha:calc((0.45 + var(--glass-strength)*0.4)*100%);
  --frosted-alpha:calc((0.55 + var(--glass-strength)*0.35)*100%);

  /* Radii */
  --r-pill:14px;
  --r-card:18px;

  /* Layout */
  --page-bg:
    radial-gradient(circle at 20% 20%, rgba(255,213,79,.16), transparent 32%),
    radial-gradient(circle at 78% 18%, rgba(106,188,255,.15), transparent 36%),
    radial-gradient(circle at 36% 80%, rgba(255,138,193,.12), transparent 32%),
    var(--bg);

  --noise:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.12), transparent 22%),
    radial-gradient(circle at 80% 0%, rgba(255,255,255,.06), transparent 24%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.05), transparent 26%);
}

[data-theme="dark"]{
  color-scheme: dark;
  --bg:#05060c;
  --bg-elev:rgba(18,20,32,.7);
  --text:#f8f6ec;
  --muted:#c8c4b2;
  --border:rgba(255,255,255,.14);
  --shadow:0 26px 52px rgba(0,0,0,.46),0 8px 20px rgba(0,0,0,.28);

  --accent:#ffd54f;
  --accent-contrast:#1b1400;
  --accent-soft:rgba(255,213,79,.24);

  --glass-strength:.6;
  --glass-blur:16px;
  --glass-opacity:calc(var(--glass-strength)*100%);
  --glass-blur-active:calc(var(--glass-blur)*(0.6 + var(--glass-strength)));
  --glass-border:rgba(255,255,255,.18);
  --glass-highlight:rgba(255,255,255,.18);
  --glass-shadow:0 24px 56px rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.32);
  --noise-opacity:.32;

  --surface-alpha:calc((0.35 + var(--glass-strength)*0.5)*100%);
  --tile-alpha:calc((0.45 + var(--glass-strength)*0.4)*100%);
  --frosted-alpha:calc((0.55 + var(--glass-strength)*0.35)*100%);

  --page-bg:
    radial-gradient(circle at 18% 18%, rgba(255,213,79,.12), transparent 32%),
    radial-gradient(circle at 80% 0%, rgba(88,158,255,.12), transparent 36%),
    radial-gradient(circle at 76% 80%, rgba(255,146,205,.1), transparent 30%),
    var(--bg);
}

/* Glass intensity presets */
.glass-clear{--glass-strength:.12;--glass-blur:6px;--noise-opacity:.08;}
.glass-subtle{--glass-strength:.48;--glass-blur:10px;--noise-opacity:.16;}
.glass-normal{--glass-strength:.64;}
.glass-strong{--glass-strength:.78;--glass-blur:calc(var(--glass-blur) + 4px);--noise-opacity:.30;}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--page-bg);
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:scroll;
  background-position:center top;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

.bg-texture{
  /* Fixed layers reduce scroll repaint artifacts */
  position:fixed; inset:0;
  background-image:var(--noise);
  opacity:calc(var(--noise-opacity) * (0.6 + var(--glass-strength)));
  mix-blend-mode:normal;
  pointer-events:none;
  z-index:0;
  transform:translateZ(0);
}
.bg-gels{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; transform:translateZ(0);}
.gel{position:absolute; filter:blur(56px); opacity:.38; transform:translateZ(0);}
.gel-1{width:380px;height:380px;background:rgba(255,213,79,.48);top:-80px;left:-40px;}
.gel-2{width:320px;height:320px;background:rgba(106,188,255,.42);top:18%;right:-80px;}
.gel-3{width:300px;height:300px;background:rgba(146,255,218,.32);bottom:-60px;left:30%;}

/* Performance: reduce expensive shadows while scrolling (keep background stable to avoid artifacts) */
body.is-scrolling .glass-toolbar,
body.is-scrolling .glass-pill,
body.is-scrolling .glass-button{
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}
/* Arbitrage page: large cards are the main scroll cost */
body.is-scrolling .arbitrage-page .glass-card{
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.page{
  position:relative;
  z-index:1;
  padding:28px 22px 40px;
  max-width:1200px;
  margin:0 auto;
}

/* Glass primitives */
.glass-toolbar,
.glass-card,
.glass-pill,
.glass-button{
  position:relative;
  background:color-mix(in srgb, var(--bg-elev) calc(var(--glass-strength)*100%), transparent);
  border:1px solid color-mix(in srgb, var(--glass-border) calc(var(--glass-strength)*100%), transparent);
  border-radius:var(--r-card);
  box-shadow:var(--glass-shadow);
  overflow:hidden;
  isolation:isolate;
}
@supports (backdrop-filter:blur(1px)){
  .glass-toolbar,.glass-pill,.glass-button{
    backdrop-filter:blur(var(--glass-blur-active)) saturate(120%);
  }
  .glass-card{
    backdrop-filter:blur(calc(var(--glass-blur-active) * 0.65)) saturate(115%);
  }
  .table-card,
  .history-card,
  .alerts-card,
  .alerts-create-card,
  .details-card,
  .modal{
    backdrop-filter:none;
  }
}
.glass-card{
  padding:14px;
  border-radius:var(--r-card);
}
.glass-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border-radius:calc(var(--r-card) + 4px);
  margin-bottom:16px;
}
.controls-card{
  padding:12px 16px;
  margin-bottom:16px;
  overflow:visible;
  z-index:5;
}
.controls-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

/* Brand */
.brand{display:flex;gap:12px;align-items:center}
.orb{
  width:38px;height:38px;border-radius:12px;
  background:color-mix(in srgb, var(--bg-elev) 90%, transparent);
  box-shadow:0 10px 30px rgba(255,213,79,.35),0 10px 30px rgba(143,218,255,.26);
  overflow:hidden;
}
.orb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  image-rendering:auto;
}
.brand-copy .eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.title{font-weight:700;font-size:18px;margin:0}
.build-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  background:color-mix(in srgb, var(--bg-elev) 85%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  margin-top:6px;
  width:fit-content;
}

/* Controls */
.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.control{display:flex;align-items:center;gap:8px;font-weight:600}
.control .label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.control.check{gap:10px}
.control input[type="text"],
.control select{
  padding:9px 10px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background:color-mix(in srgb, var(--bg-elev) var(--surface-alpha), transparent);
  color:var(--text);
  outline:none;
}
.control input[type="checkbox"]{accent-color:var(--accent); width:16px; height:16px}
.control.switch{
  gap:10px;
}
.control.switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.switch-track{
  width:46px;
  height:24px;
  border-radius:999px;
  background:color-mix(in srgb, var(--bg-elev) 85%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  display:inline-flex;
  align-items:center;
  padding:3px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
  transition:background 150ms ease, border-color 150ms ease;
}
.switch-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:color-mix(in srgb, var(--accent) 85%, #fff 15%);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transform:translateX(0);
  transition:transform 150ms ease;
}
.control.switch input:checked + .switch-track .switch-thumb{
  transform:translateX(22px);
}

.glass-pill{
  border-radius:var(--r-pill);
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:color-mix(in srgb, var(--accent-soft) 60%, var(--bg-elev) 40%);
  border:1px solid color-mix(in srgb, var(--glass-border) 70%, var(--accent) 30%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 18px rgba(0,0,0,.08);
  font-weight:700;
  font-size:13px;
}

.glass-button{
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  color:var(--text);
  background:linear-gradient(145deg, color-mix(in srgb,#ffffff 30%,transparent), color-mix(in srgb,#ffffff 18%,transparent));
  transition:transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.glass-button.primary{
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 90%,#fff 10%), color-mix(in srgb,var(--accent) 70%,#fff 30%));
  border-color:color-mix(in srgb,var(--accent) 70%,transparent);
  color:var(--accent-contrast);
  box-shadow:0 10px 26px rgba(255,213,79,.32), inset 0 1px 0 rgba(255,255,255,.4);
}
.glass-button:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(0,0,0,.12);}

/* Table */
.table-card{padding:14px 14px 0}
.table-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 4px 14px;
}
.table-actions[hidden]{display:none;}
.table-count{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.02em;
}
.glass-button.small{
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
}
.auth-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:color-mix(in srgb, var(--bg-base) 88%, transparent);
  z-index:20;
}
.auth-overlay[hidden]{display:none;}
.modal-overlay[hidden]{display:none;}
.auth-card{
  max-width:420px;
  width:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.auth-title{
  font-size:18px;
  font-weight:700;
}
.auth-desc{
  font-size:13px;
  color:var(--muted);
}
.auth-actions{
  display:flex;
  justify-content:center;
}
.auth-error{
  min-height:18px;
  font-size:12px;
  color:color-mix(in srgb, var(--accent) 60%, #ff4d4d 40%);
}
.table-wrapper{
  overflow-x:auto;
  overflow-y:visible;
  max-height:none;
  border-radius:calc(var(--r-card) - 6px);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.table-wrapper::-webkit-scrollbar{
  height:0;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  color:var(--text);
  min-width:980px;          /* щоб колонки не злипались */
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
  overflow:hidden;
}
th,td{
  padding:10px 10px;
  border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  text-align:left;
  vertical-align:middle;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
th{
  position:sticky;
  top:0;                    /* <-- головне: без top:96px */
  z-index:3;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  background:color-mix(in srgb, var(--bg-elev) 88%, transparent);
}
thead th:first-child{border-top-left-radius:12px;}
thead th:last-child{border-top-right-radius:12px;}

tbody tr:hover{
  background:color-mix(in srgb, var(--bg-elev) var(--tile-alpha), transparent);
}

.exchange-cell{
  display:flex;
  align-items:center;
  gap:8px;
}
.exchange-icon,
.exchange-fallback{
  width:20px;
  height:20px;
  border-radius:50%;
  flex:0 0 20px;
}
.exchange-icon{
  display:block;
  object-fit:contain;
  object-position:center;
  background:transparent;
  border:none;
  transition:filter 150ms ease;
}
.exchange-fallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
  color:var(--text);
  background:color-mix(in srgb, var(--bg-elev) 80%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.exchange-fallback.is-hidden{
  display:none;
}
.exchange-name{
  display:inline-block;
}

[data-theme="dark"] .exchange-icon{
  filter:brightness(1.12) contrast(1.08) saturate(1.08);
}
[data-theme="light"] .exchange-icon{
  filter:brightness(0.98) contrast(1.1) saturate(0.92);
}
[data-theme="dark"] .exchange-icon--htx,
[data-theme="dark"] .exchange-icon--bydfi{
  background:#fff;
}
.exchange-icon--ascendex{
  background:var(--bg);
  clip-path:circle(48% at 50% 50%);
}
[data-theme="light"] .exchange-icon--ascendex{
  filter:none;
}

.contract-link{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dashed color-mix(in srgb, var(--muted) 70%, transparent);
  padding-bottom:1px;
  transition:color 150ms ease, border-color 150ms ease;
}
.contract-text{
  color:inherit;
}
.contract-link:hover{
  color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 70%, transparent);
}

.num{text-align:right}
.interval-main{line-height:1.1;}
.interval-switch{
  line-height:1.1;
  font-size:11px;
  color:var(--muted);
  opacity:0.75;
}
.predicted-main{line-height:1.1;}
.predicted-raw{
  line-height:1.1;
  font-size:11px;
  color:var(--muted);
  opacity:0.7;
}
.empty-state td{
  text-align:center;
  color:var(--muted);
  padding:18px 12px;
}

body.stable-only tr.row-unstable{
  display:none;
}

/* Status / color helpers */
.rate-positive{color:#1dd1a1;}
.rate-negative{color:#ff6b6b;}

.badge-wrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.badge-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  background:#8fdaff;
  box-shadow:0 0 0 2px rgba(255,255,255,.08);
}
.badge-info{background:#8fdaff;}
.badge-warning{background:#ffd54f;}
.badge-danger{background:#ff6b6b;}
.badge-success{background:#3ddc84;}
.badge-hourly{background:#ffd54f;}
.badge-4h{background:#3ddc84;}
.badge-premium{background:#3ddc84;}
.badge-slowdown{background:#3ddc84;}
.badge-interval-green{background:#3ddc84;}
.badge-interval-yellow{background:#ffd54f;}
.badge-interval-orange{background:#ff9f43;}

.badge-dot[data-tooltip]{
  cursor:help;
}
.badge-tooltip{
  position:fixed;
  z-index:9999;
  background:rgba(10,12,20,.92);
  color:#fff;
  font-size:12px;
  line-height:1.2;
  padding:6px 8px;
  border-radius:6px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  transition:opacity .12s ease;
}
.badge-tooltip.show{
  opacity:1;
}

.maintenance-card{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 8%, var(--bg-elev)), color-mix(in srgb, var(--bg-elev) 90%, transparent));
}
.maintenance-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  padding:6px 12px;
  border-radius:10px;
  background:color-mix(in srgb, var(--accent) 25%, var(--bg));
  color:var(--bg);
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.maintenance-content{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.maintenance-title{
  font-size:16px;
  font-weight:700;
  color:var(--fg);
}
.maintenance-desc{
  font-size:14px;
  color:var(--muted);
}

body.maintenance-active .table-card{
  display:none;
}

.tier-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  margin-right:6px;
  vertical-align:middle;
}
.tier-1{background:#3ddc84;}
.tier-2{background:#ffd54f;}
.tier-3{background:#ff9f43;}
.tier-4{background:#ff6b6b;}
.row-error{background:rgba(239,68,68,0.09);}

/* Responsive */
@media (max-width: 960px){
  .page{padding:20px 14px 32px;}
  .glass-toolbar{align-items:flex-start;}
  .actions{justify-content:flex-start;}
  table{min-width:920px;}
  .bg-gels{display:none;}
}