/* UI styles: complete looks on top of the same layout. Each one is a "pack" (customize.js → UI_STYLES)
   that also sets a matching background, font, accent and glass sliders; body[data-ui] holds the choice.
   "mercury" is the default and uses app.css as is. */

/* ═════════════════════════ LIQUID GLASS — thick refractive glass, light that follows you ═════════════════════════ */
body[data-ui=liquid] { --text: rgba(255, 255, 255, .97); --text-2: rgba(255, 255, 255, .72); --text-3: rgba(255, 255, 255, .5); }
body[data-ui=liquid] .glass {
  background:
    radial-gradient(420px circle at var(--mx, 25%) var(--my, -10%), rgba(255, 255, 255, .16), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--glass) + .08)), rgba(255, 255, 255, calc(var(--glass) * .5)));
  backdrop-filter: blur(calc(var(--blur) + 10px)) saturate(220%) brightness(1.1);
  -webkit-backdrop-filter: blur(calc(var(--blur) + 10px)) saturate(220%) brightness(1.1);
  border: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 1.5px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(255, 255, 255, .12),
    inset 0 -22px 40px -30px rgba(255, 255, 255, .25),
    0 30px 70px -30px rgba(0, 0, 0, .55), 0 4px 14px -6px rgba(0, 0, 0, .3);
}
/* the rim: bright where light hits (top-left), a second glint bottom-right */
body[data-ui=liquid] .glass::before {
  padding: 1.2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .15) 22%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .45));
}
body[data-ui=liquid] .panel, body[data-ui=liquid] .stat { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
body[data-ui=liquid] .stat:hover, body[data-ui=liquid] .src-card:hover { transform: translateY(-3px) scale(1.01); }
/* glass inside glass */
body[data-ui=liquid] .cal-day { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); border-radius: 14px; }
body[data-ui=liquid] .cal-day.win { background: linear-gradient(170deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 20px -10px rgba(0, 0, 0, .4); }
body[data-ui=liquid] .btn, body[data-ui=liquid] .seg, body[data-ui=liquid] .pill, body[data-ui=liquid] .chip { border-radius: 999px; }
body[data-ui=liquid] .btn:not(.primary):not(.ghost) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07));
  border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .45);
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
}
body[data-ui=liquid] .btn.primary {
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .78)); color: #0b0b12;
  box-shadow: 0 10px 30px -12px rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .12);
}
body[data-ui=liquid] .seg { background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); border: 0; }
body[data-ui=liquid] .seg button { border-radius: 999px; }
body[data-ui=liquid] .seg button.on { background: rgba(255, 255, 255, .24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 8px rgba(0, 0, 0, .2); }
body[data-ui=liquid] .nav {
  padding: 5px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .45), 0 20px 40px -20px rgba(0, 0, 0, .5);
  backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%);
}
body[data-ui=liquid] .nav a { color: rgba(255, 255, 255, .7); }
body[data-ui=liquid] .nav a.on { color: #0b0b12; }
body[data-ui=liquid] .nav-ind { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .8)); box-shadow: 0 6px 18px -6px rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(0, 0, 0, .1); }
body[data-ui=liquid] :is(input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=url], select, textarea) {
  background: rgba(0, 0, 0, .18); border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 2px 4px rgba(0, 0, 0, .25); border-radius: 14px;
}
body[data-ui=liquid] .hero-v { filter: drop-shadow(0 6px 30px rgba(255, 255, 255, .25)); }
body[data-ui=liquid] .sidebar { border-left: 0; }

/* ═════════════════════════ QUICKSILVER — brushed steel, chrome edges, liquid metal numbers ═════════════════════════ */
body[data-ui=quicksilver] {
  --metal: linear-gradient(180deg, #fafafc 0%, #c9cad1 38%, #74767f 50%, #dcdde3 62%, #ffffff 100%);
  --text-3: rgba(220, 222, 230, .45);
}
body[data-ui=quicksilver] .glass {
  background:
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .055) 48%, transparent 62%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 2px, rgba(0, 0, 0, .05) 2px 3px),
    linear-gradient(180deg, rgba(46, 46, 53, .86), rgba(14, 14, 17, .92));
  backdrop-filter: blur(var(--blur)) saturate(110%); -webkit-backdrop-filter: blur(var(--blur)) saturate(110%);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -3px 10px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .7), 0 26px 50px -24px #000;
}
body[data-ui=quicksilver] .glass::before {
  padding: 2px;
  background: conic-gradient(from 210deg, #ffffff, #5a5c66 12%, #f4f4f7 25%, #2b2c31 40%, #c9cad2 55%, #45464d 70%, #ffffff 85%, #8a8c95);
}
/* machined rivets in the corners of every panel */
body[data-ui=quicksilver] .panel::after {
  content: ''; position: absolute; inset: 9px; pointer-events: none;
  --r: radial-gradient(circle at 40% 35%, #fff 0 0.6px, #b7b9c2 1.4px, #3c3d44 2.6px, transparent 3.2px);
  background: var(--r) left top/7px 7px no-repeat, var(--r) right top/7px 7px no-repeat, var(--r) left bottom/7px 7px no-repeat, var(--r) right bottom/7px 7px no-repeat;
}
body[data-ui=quicksilver] :is(.panel-title, .stat-k, .hero-k, .lbl, .cal-dow, .sb-head) {
  color: #b9bbc4; text-shadow: 0 1px 0 rgba(0, 0, 0, .9), 0 -1px 0 rgba(255, 255, 255, .06);
}
body[data-ui=quicksilver]:not(.pnl-classic):not(.pnl-custom) :is(.stat-v, .sb-big, .hero-v, .pod-pnl, .pp-big:not(.dim), .pp-tile b) {
  background: var(--metal); background-size: 100% 200%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); animation: sheen 6s ease-in-out infinite alternate;
}
body[data-ui=quicksilver] .btn:not(.ghost) {
  background: var(--metal); color: #121214; border: 0; font-weight: 600;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .35), 0 6px 14px -6px rgba(0, 0, 0, .8);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
body[data-ui=quicksilver] .btn:not(.ghost):hover { filter: brightness(1.08); }
body[data-ui=quicksilver] .cal-day { background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .2)); border-color: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
body[data-ui=quicksilver] .cal-day.win { background: linear-gradient(180deg, rgba(235, 236, 242, .3), rgba(120, 122, 132, .12)); border-color: rgba(255, 255, 255, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .4); }
body[data-ui=quicksilver] .seg { background: linear-gradient(180deg, #0c0c0e, #1b1b1f); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .08); border: 0; }
body[data-ui=quicksilver] .seg button.on { background: var(--metal); color: #111; box-shadow: inset 0 1px 0 #fff; }
body[data-ui=quicksilver] .h-title { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ═════════════════════════ TERMINAL — phosphor CRT, brackets, a blinking cursor ═════════════════════════ */
/* Colours come from the accent: amber by default, green / cyan / white if you pick those. */
body[data-ui=terminal] {
  --text: rgb(var(--accent-rgb));
  --text-2: rgba(var(--accent-rgb), .72);
  --text-3: rgba(var(--accent-rgb), .45);
  --line: rgba(var(--accent-rgb), .25);
  --line-2: rgba(var(--accent-rgb), .12);
  --chart-line: rgb(var(--accent-rgb));
  --radius: 2px; --radius-sm: 2px;
}
body[data-ui=terminal] #app { text-shadow: 0 0 5px rgba(var(--accent-rgb), .45), 0 0 1px rgba(var(--accent-rgb), .8); }
body[data-ui=terminal] .glass {
  background: rgba(6, 4, 0, .93); border: 1px solid rgba(var(--accent-rgb), .38);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 50px rgba(var(--accent-rgb), .05), 0 0 22px -12px rgba(var(--accent-rgb), .6);
}
body[data-ui=terminal] .glass::before { display: none; }
body[data-ui=terminal] .panel-head { border-bottom: 1px dashed rgba(var(--accent-rgb), .3); padding-bottom: 10px; }
body[data-ui=terminal] .panel-title { color: rgb(var(--accent-rgb)); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
body[data-ui=terminal] .panel-title::before { content: '['; margin-right: 2px; }
body[data-ui=terminal] .panel-title::after { content: ']'; margin-left: 2px; }
body[data-ui=terminal] .panel-title .ic { display: none; }
body[data-ui=terminal] :is(.hero-k em, .panel-title em) { font-family: inherit; font-style: normal; text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em; }
body[data-ui=terminal] .h-title { font-family: var(--mono); font-style: normal; font-weight: 600; text-transform: uppercase; font-size: 30px; }
body[data-ui=terminal] .h-title::before { content: '> '; opacity: .7; }
body[data-ui=terminal] .h-title::after { content: '█'; margin-left: 6px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
body[data-ui=terminal] :is(.stat-k, .hero-k, .lbl, .cal-dow, .sb-head, .nav a, .btn) { text-transform: uppercase; letter-spacing: .06em; }
body[data-ui=terminal] .hero-v, body[data-ui=terminal] .stat-v { font-weight: 500; letter-spacing: -.02em; }
body[data-ui=terminal] .btn { background: transparent; color: rgb(var(--accent-rgb)); border: 1px solid rgba(var(--accent-rgb), .55); border-radius: 0; }
body[data-ui=terminal] .btn:hover, body[data-ui=terminal] .btn.primary { background: rgb(var(--accent-rgb)); color: #000; text-shadow: none; }
body[data-ui=terminal] .nav a { font-size: 12.5px; border-radius: 0; }
body[data-ui=terminal] .nav a.on { color: #000; text-shadow: none; }
body[data-ui=terminal] .nav-ind { border-radius: 0; background: rgb(var(--accent-rgb)); box-shadow: 0 0 18px rgba(var(--accent-rgb), .7); }
body[data-ui=terminal] .seg, body[data-ui=terminal] .seg button, body[data-ui=terminal] .chip, body[data-ui=terminal] .pill { border-radius: 0; }
body[data-ui=terminal] .seg button.on { background: rgba(var(--accent-rgb), .25); }
body[data-ui=terminal] .cal-day { border-radius: 0; background: transparent; border: 1px solid rgba(var(--accent-rgb), .14); }
body[data-ui=terminal] .cal-day.win { background: rgba(var(--accent-rgb), .16); border-color: rgba(var(--accent-rgb), .6); box-shadow: inset 0 0 14px rgba(var(--accent-rgb), .2); }
body[data-ui=terminal] :is(input, select, textarea) { border-radius: 0 !important; background: #000 !important; border-color: rgba(var(--accent-rgb), .4) !important; color: rgb(var(--accent-rgb)); caret-color: rgb(var(--accent-rgb)); }
body[data-ui=terminal] img { filter: sepia(.4) saturate(.9); }
/* the CRT: scanlines + a faint flicker over everything */
body[data-ui=terminal]::after {
  content: ''; position: fixed; inset: 0; z-index: 250; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px), radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, .5));
  animation: crt 6s infinite;
}
@keyframes crt { 0%, 100% { opacity: .85; } 48% { opacity: .85; } 50% { opacity: .7; } 52% { opacity: .9; } }

/* ═════════════════════════ HUD — cockpit display: brackets, rulers, a sweeping scan ═════════════════════════ */
body[data-ui=hud] { --c: rgb(var(--accent-rgb)); --c2: rgba(var(--accent-rgb), .18); --text-3: rgba(var(--accent-rgb), .55); --chart-line: rgb(var(--accent-rgb)); }
body[data-ui=hud] .glass {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .07), rgba(2, 8, 14, .78) 60%);
  backdrop-filter: blur(var(--blur)) saturate(130%); -webkit-backdrop-filter: blur(var(--blur)) saturate(130%);
  border: 1px solid var(--c2); border-radius: 3px;
  box-shadow: inset 0 0 30px rgba(var(--accent-rgb), .05);
}
body[data-ui=hud] .glass::before { display: none; }
body[data-ui=hud] :is(.hero-k em, .panel-title em) { font-family: inherit; font-style: normal; text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; }
body[data-ui=hud] .panel, body[data-ui=hud] .stat, body[data-ui=hud] .pod {
  overflow: hidden;
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(180deg, rgba(var(--accent-rgb), .07), rgba(2, 8, 14, .78) 60%);
  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, auto;
  background-position: left -1px top -1px, left -1px top -1px, right -1px top -1px, right -1px top -1px, left -1px bottom -1px, left -1px bottom -1px, right -1px bottom -1px, right -1px bottom -1px, 0 0;
  background-repeat: no-repeat;
}
/* the scan line sweeping each panel */
body[data-ui=hud] .panel::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .07) 85%, rgba(var(--accent-rgb), .25) 99%, transparent);
  transform: translateY(-100%); animation: scan 7s cubic-bezier(.5, 0, .5, 1) infinite;
}
body[data-ui=hud] .panel:nth-child(2n)::after { animation-delay: -2.5s; }
body[data-ui=hud] .panel:nth-child(3n)::after { animation-delay: -4.5s; }
@keyframes scan { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(260%); } }
/* a ruler under each panel title */
body[data-ui=hud] .panel-head { position: relative; padding-bottom: 12px; }
body[data-ui=hud] .panel-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--c2) 0 1px, transparent 1px 8px), linear-gradient(90deg, var(--c), transparent 30%) bottom/100% 1px no-repeat;
}
body[data-ui=hud] :is(.panel-title, .stat-k, .hero-k, .lbl, .cal-dow, .sb-head) { text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; color: rgba(var(--accent-rgb), .8); }
body[data-ui=hud] .panel-title .ic { color: var(--c); opacity: 1; }
body[data-ui=hud] :is(.hero-v, .stat-v, .sb-big, .pod-pnl) { text-shadow: 0 0 22px rgba(var(--accent-rgb), .55); }
body[data-ui=hud] .h-title { font-family: var(--font); font-style: normal; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 32px; text-shadow: 0 0 20px rgba(var(--accent-rgb), .5); }
body[data-ui=hud] .btn { border-radius: 0; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; background: rgba(var(--accent-rgb), .08); border-color: rgba(var(--accent-rgb), .4); }
body[data-ui=hud] .btn.primary { background: var(--c); color: #001014; }
body[data-ui=hud] .nav a { text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; }
body[data-ui=hud] .nav a.on { color: #001014; }
body[data-ui=hud] .nav-ind { border-radius: 0; background: var(--c); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); box-shadow: none; filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), .8)); }
body[data-ui=hud] .seg, body[data-ui=hud] .seg button { border-radius: 0; }
body[data-ui=hud] .cal-day { border-radius: 0; background: rgba(var(--accent-rgb), .02); border-color: rgba(var(--accent-rgb), .12); }
body[data-ui=hud] .cal-day.win { background: rgba(var(--accent-rgb), .14); border-color: rgba(var(--accent-rgb), .55); box-shadow: inset 0 0 18px rgba(var(--accent-rgb), .2); }
body[data-ui=hud] .stat:hover .stat-v { animation: hudGlitch .35s steps(2) 1; }
@keyframes hudGlitch { 0% { text-shadow: 3px 0 #ff3d7f, -3px 0 rgb(var(--accent-rgb)); } 50% { text-shadow: -2px 0 #ff3d7f, 2px 0 rgb(var(--accent-rgb)); transform: translateX(1px); } 100% { text-shadow: 0 0 22px rgba(var(--accent-rgb), .55); } }
/* the glowing grid floor */
body[data-ui=hud]::before {
  content: ''; position: fixed; left: -50%; right: -50%; bottom: -10%; height: 60%; z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgba(var(--accent-rgb), .22) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), .22) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(420px) rotateX(62deg); transform-origin: bottom;
  mask: linear-gradient(transparent, #000 70%); -webkit-mask: linear-gradient(transparent, #000 70%);
  animation: floor 4s linear infinite; opacity: .55;
}
@keyframes floor { to { background-position: 0 60px; } }

/* ═════════════════════════ STUDIO — flat, sharp, quiet (pro tool) ═════════════════════════ */
body[data-ui=studio] { --text-2: rgba(255, 255, 255, .62); --text-3: rgba(255, 255, 255, .4); }
body[data-ui=studio] .glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 30%), #0e0e11;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 16px 40px -24px rgba(0, 0, 0, .9);
}
body[data-ui=studio] .glass::before { display: none; }
body[data-ui=studio] .h-title { font-family: var(--font); font-style: normal; font-weight: 600; font-size: 28px; letter-spacing: -.03em; }
body[data-ui=studio]:not(.pnl-classic):not(.pnl-custom) .hero-v.pos { background: none; color: #fff; filter: none; animation: none; }
body[data-ui=studio] .nav a.on { color: var(--text); }
body[data-ui=studio] .nav-ind { border-radius: 8px; background: rgba(255, 255, 255, .06); box-shadow: inset 2px 0 0 rgb(var(--accent-rgb)); }
body[data-ui=studio] .btn { border-radius: 8px; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .09); }
body[data-ui=studio] .btn.primary { background: rgb(var(--accent-rgb)); color: #fff; border: 0; }
body[data-ui=studio] .cal-day { border-radius: 6px; background: rgba(255, 255, 255, .02); border-color: rgba(255, 255, 255, .05); }
body[data-ui=studio] .cal-day.win { background: rgba(var(--accent-rgb), .14); border-color: rgba(var(--accent-rgb), .35); box-shadow: none; }
body[data-ui=studio] .sidebar { background: #0b0b0d; }

@media (prefers-reduced-motion: reduce) {
  body[data-ui=hud] .panel::after, body[data-ui=hud]::before, body[data-ui=terminal]::after, body[data-ui=terminal] .h-title::after { animation: none; }
}

/* ───────── Customize: background additions ───────── */
.bg-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sub-lbl { font-size: 11px; color: var(--text-3); margin: 16px 0 2px; letter-spacing: .04em; }
.ob-ui { margin-bottom: 6px; }

/* ───────── style picker: each card is a tiny working sample of the look ───────── */
.ui-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ui-card { position: relative; border-radius: 16px; padding: 7px 7px 10px; border: 1px solid var(--line); text-align: left; transition: border-color .2s, transform .3s var(--ease); background: rgba(255, 255, 255, .02); text-shadow: none; }
.ui-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .25); }
.ui-card.on { border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 12px 30px -14px rgba(255, 255, 255, .4); }
.ui-card > b { display: block; font-size: 13px; margin: 9px 4px 0; color: #fff; font-family: 'Geist', system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.ui-card > i { display: block; font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .5); line-height: 1.35; margin: 2px 4px 0; font-family: 'Geist', system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
.uip { display: block; position: relative; height: 92px; border-radius: 11px; overflow: hidden; font-family: 'Geist', system-ui, sans-serif; }
.uip > span { position: absolute; left: 12px; right: 12px; top: 14px; bottom: 12px; padding: 9px 10px; display: flex; flex-direction: column; justify-content: space-between; }
.uip em { font-style: normal; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.uip strong { font-size: 19px; font-weight: 650; letter-spacing: -.03em; line-height: 1; }
.uip u { text-decoration: none; display: block; height: 4px; border-radius: 3px; width: 70%; background: currentColor; opacity: .25; }

.uip-mercury { background: radial-gradient(70% 90% at 75% 0%, #4a4b57, #070708 70%); color: #fff; }
.uip-mercury > span { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; backdrop-filter: blur(6px); }
.uip-mercury strong { background: linear-gradient(172deg, #fff 18%, #b9bbc5 44%, #55575f 52%, #dfe0e6 70%, #fff 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.uip-liquid { background: radial-gradient(55% 70% at 85% 15%, #8f7bff, transparent 70%), radial-gradient(60% 70% at 5% 95%, #ff7ac6, transparent 70%), radial-gradient(50% 60% at 60% 110%, #39d5ff, transparent 70%), #0b0a1c; color: #fff; }
.uip-liquid > span { border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .08)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), inset 0 1.5px 0 rgba(255, 255, 255, .8), 0 10px 24px -10px rgba(0, 0, 0, .5); backdrop-filter: blur(12px) saturate(180%); }

.uip-quicksilver { background: radial-gradient(circle at 70% 30%, #fff 0 4%, #9c9ea8 9%, #1a1a1d 22%, transparent 23%), radial-gradient(60% 60% at 70% 30%, #2c2d33, #040405 70%); color: #fff; }
.uip-quicksilver > span { border-radius: 9px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #2a2a30, #0d0d10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1.5px #b8bac2, 0 0 0 2.5px #2a2b30; }
.uip-quicksilver strong { background: linear-gradient(180deg, #fafafc, #c9cad1 38%, #74767f 50%, #dcdde3 62%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }

.uip-terminal { background: #050400; color: #ffb000; font-family: 'JetBrains Mono', ui-monospace, monospace; text-shadow: 0 0 6px rgba(255, 176, 0, .6); }
.uip-terminal::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px); }
.uip-terminal > span { border: 1px solid rgba(255, 176, 0, .5); border-radius: 0; }
.uip-terminal em::before { content: '['; }
.uip-terminal em::after { content: ']'; }
.uip-terminal strong { font-weight: 500; font-size: 17px; }
.uip-terminal strong::after { content: '█'; margin-left: 3px; animation: blink 1.05s steps(1) infinite; }

.uip-hud { background: linear-gradient(rgba(63, 240, 255, .14) 1px, transparent 1px) 0 0/14px 14px, linear-gradient(90deg, rgba(63, 240, 255, .14) 1px, transparent 1px) 0 0/14px 14px, radial-gradient(80% 80% at 50% 120%, #0b3a5c, #02040a 70%); color: #3ff0ff; font-family: 'Chakra Petch', 'Geist', sans-serif; }
.uip-hud > span {
  background:
    linear-gradient(#3ff0ff, #3ff0ff) left top/10px 1.5px no-repeat, linear-gradient(#3ff0ff, #3ff0ff) left top/1.5px 10px no-repeat,
    linear-gradient(#3ff0ff, #3ff0ff) right bottom/10px 1.5px no-repeat, linear-gradient(#3ff0ff, #3ff0ff) right bottom/1.5px 10px no-repeat,
    rgba(2, 12, 20, .7);
  border: 1px solid rgba(63, 240, 255, .2);
}
.uip-hud strong { text-shadow: 0 0 14px rgba(63, 240, 255, .8); letter-spacing: .02em; }
.uip-hud em { letter-spacing: .24em; }

.uip-studio { background: #08080a; color: #fff; font-family: 'Inter', 'Geist', sans-serif; }
.uip-studio > span { background: none; border-top: 1px solid rgba(255, 255, 255, .14); border-radius: 0; left: 22px; right: 8px; }
.uip-studio u { background: #8b7cff; opacity: .9; height: 3px; width: 40%; }