/* Hols — tokens, themes, glass, primitives */
@font-face { font-family: 'HolsInter'; src: url('../assets/fonts/Inter-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'HolsInter'; src: url('../assets/fonts/Inter-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'HolsInter'; src: url('../assets/fonts/Inter-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'HolsInter'; src: url('../assets/fonts/Inter-Bold.woff') format('woff'); font-weight: 700 800; font-display: swap; }

:root {
  --accent: #2f80ff;
  --accent-2: #7c5cff;
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --danger: #ff4d5e;
  --success: #22c55e;
  --warn: #f59e0b;
  --font: 'HolsInter', 'Rubik', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  --blur: 26px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t: .32s;
  --ui-scale: 1;
}
html[data-font="system"] { --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
html[data-font="serif"] { --font: Georgia, 'Times New Roman', serif; }

/* ---------- dark (default) ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000;
  --bg-glow-1: rgba(47, 128, 255, .16);
  --bg-glow-2: rgba(124, 92, 255, .12);
  --panel: rgba(16, 16, 20, .62);
  --panel-solid: #0f0f13;
  --panel-2: rgba(255, 255, 255, .045);
  --panel-3: rgba(255, 255, 255, .08);
  --hover: rgba(255, 255, 255, .06);
  --active: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .085);
  --line-2: rgba(255, 255, 255, .14);
  --text: #f4f5f7;
  --text-2: #a1a5ad;
  --text-3: #6d717a;
  --bubble-in: rgba(36, 37, 42, .92);
  --bubble-out-1: #2f80ff;
  --bubble-out-2: #5b5ff5;
  --bubble-out-text: #fff;
  --shadow: 0 20px 60px rgba(0, 0, 0, .55);
  --shadow-sm: 0 6px 22px rgba(0, 0, 0, .35);
  --glass-hi: rgba(255, 255, 255, .14);
  --glass-lo: rgba(255, 255, 255, .02);
  --pattern: url('../assets/backgrounds/pattern-dark.svg');
  --input: rgba(255, 255, 255, .06);
  --overlay: rgba(0, 0, 0, .55);
}
/* ---------- light ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f7;
  --bg-glow-1: rgba(47, 128, 255, .18);
  --bg-glow-2: rgba(236, 72, 153, .1);
  --panel: rgba(255, 255, 255, .66);
  --panel-solid: #ffffff;
  --panel-2: rgba(15, 23, 42, .04);
  --panel-3: rgba(15, 23, 42, .07);
  --hover: rgba(15, 23, 42, .05);
  --active: rgba(15, 23, 42, .08);
  --line: rgba(15, 23, 42, .09);
  --line-2: rgba(15, 23, 42, .14);
  --text: #0f1420;
  --text-2: #5b6474;
  --text-3: #8b93a3;
  --bubble-in: rgba(255, 255, 255, .95);
  --bubble-out-1: #2f80ff;
  --bubble-out-2: #5b5ff5;
  --bubble-out-text: #fff;
  --shadow: 0 20px 60px rgba(30, 40, 80, .18);
  --shadow-sm: 0 6px 22px rgba(30, 40, 80, .1);
  --glass-hi: rgba(255, 255, 255, .9);
  --glass-lo: rgba(255, 255, 255, .3);
  --pattern: url('../assets/backgrounds/pattern-light.svg');
  --input: rgba(15, 23, 42, .05);
  --overlay: rgba(15, 20, 35, .35);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow-x: hidden; }
html { font-size: calc(15px * var(--ui-scale)); }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  line-height: 1.38;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable="true"], .key-box, .selectable {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default;
}
body::before {
  content: ''; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 35% at 18% 12%, var(--bg-glow-1), transparent 70%),
    radial-gradient(35% 30% at 85% 85%, var(--bg-glow-2), transparent 70%);
  animation: glowDrift 24s ease-in-out infinite alternate;
}
@keyframes glowDrift { to { transform: translate3d(3%, -2%, 0) scale(1.05); } }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--accent); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.i { flex: none; display: inline-block; vertical-align: middle; }
[hidden] { display: none !important; }

/* thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- liquid glass ---------- */
.glass {
  position: relative;
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 100%, transparent), var(--panel));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
  backdrop-filter: blur(var(--blur)) saturate(170%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), var(--shadow-sm);
}
.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: linear-gradient(135deg, var(--glass-hi), transparent 35%, transparent 65%, color-mix(in srgb, var(--accent) 30%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--panel-solid); }
}
html.no-blur .glass, html.no-blur .glass-lite { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--panel-solid) !important; }
.glass-lite {
  background: var(--panel);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line);
}
html.no-anim *, html.no-anim *::before, html.no-anim *::after { animation-duration: 0s !important; transition-duration: 0s !important; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  background: var(--panel-3); color: var(--text);
  transition: transform .18s var(--ease), background .2s, box-shadow .2s, opacity .2s;
  white-space: nowrap; user-select: none;
}
.btn:hover { background: var(--active); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn-primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2))); color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2))); }
.btn-green { background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-green:hover { filter: brightness(1.08); background: linear-gradient(135deg, #22c55e, #15803d); }
.btn-danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 24%, transparent); }
.btn-solid-danger { background: var(--danger); color: #fff; }
.btn-light { background: linear-gradient(180deg, #f3f4f6, #d6d8de); color: #111; box-shadow: inset 0 1px 0 #fff, 0 6px 20px rgba(0, 0, 0, .3); }
.btn-light:hover { background: linear-gradient(180deg, #fff, #e3e5ea); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--hover); }
.btn-block { width: 100%; }
.btn-sm { height: 34px; padding: 0 14px; font-size: .85rem; }
.btn-xs { height: 28px; padding: 0 11px; font-size: .8rem; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--text-2); flex: none;
  transition: background .2s, color .2s, transform .18s var(--ease);
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.on { color: var(--accent); }
.icon-btn.glassy { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); }
.icon-btn.sm { width: 32px; height: 32px; }

.seg-btns { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); }
.seg-btns .icon-btn { width: 34px; height: 34px; color: var(--text); }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: .85rem; font-weight: 500; transition: background .2s, border-color .2s, color .2s; }
.chip:hover { background: var(--hover); }
.chip.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }

.seg { display: flex; padding: 4px; gap: 4px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.seg button { flex: 1; height: 34px; border-radius: 10px; font-weight: 500; font-size: .88rem; color: var(--text-2); transition: background .2s, color .2s; }
.seg button.active { background: var(--panel-3); color: var(--text); box-shadow: var(--shadow-sm); }

/* switch */
.switch { position: relative; width: 46px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--panel-3); transition: background .25s; }
.switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .3s var(--spring); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(18px); }

/* inputs */
.input, .textarea {
  width: 100%; height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--input); outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.textarea { height: auto; min-height: 90px; padding: 12px 16px; resize: vertical; }
.input:focus, .textarea:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.input.err { border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent); }
.field-err { color: var(--danger); font-size: .8rem; min-height: 1.1em; margin-top: 6px; }
.field-hint { color: var(--text-3); font-size: .8rem; margin-top: 6px; }
.label { display: block; font-size: .8rem; color: var(--text-2); margin: 0 0 6px 4px; font-weight: 500; }

/* grouped fields (edit profile look) */
.fgroup { border-radius: 18px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.fgroup .frow { padding: 10px 18px 12px; border-bottom: 1px solid var(--line); position: relative; }
.fgroup .frow:last-child { border-bottom: 0; }
.fgroup .frow label { display: block; font-size: .74rem; color: var(--text-3); font-weight: 600; margin-bottom: 3px; }
.fgroup .frow input, .fgroup .frow textarea { width: 100%; border: 0; outline: 0; background: transparent; font-size: 1rem; padding: 0; resize: none; }
.fgroup .frow .prefix { display: flex; align-items: center; gap: 2px; }
.fgroup .frow .prefix span { color: var(--text-2); }

/* list group (settings look) */
.lgroup { border-radius: 20px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; margin-bottom: 14px; }
.li { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 8px 14px; text-align: left; border-bottom: 1px solid var(--line); transition: background .18s; position: relative; }
.li:last-child { border-bottom: 0; }
button.li:hover, .li.clickable:hover { background: var(--hover); }
.li .li-label { flex: 1; font-weight: 600; font-size: .96rem; min-width: 0; }
.li .li-label small { display: block; font-weight: 400; color: var(--text-2); font-size: .8rem; margin-top: 1px; }
.li .li-val { color: var(--text-2); font-size: .9rem; }
.li .li-chev { color: var(--text-3); }
.li.danger .li-label { color: var(--danger); }
.ico-sq { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.ico-sq.c-blue { background: linear-gradient(160deg, #6aa8ff, #2f6bf0); }
.ico-sq.c-indigo { background: linear-gradient(160deg, #8f8bff, #5145e5); }
.ico-sq.c-green { background: linear-gradient(160deg, #4ade80, #16a34a); }
.ico-sq.c-orange { background: linear-gradient(160deg, #fbbf24, #ea7a0c); }
.ico-sq.c-purple { background: linear-gradient(160deg, #c084fc, #8b3fd9); }
.ico-sq.c-sky { background: linear-gradient(160deg, #38bdf8, #0b72d6); }
.ico-sq.c-gray { background: linear-gradient(160deg, #9ca3af, #4b5563); }
.ico-sq.c-gold { background: linear-gradient(160deg, #fde047, #d4a106); }
.ico-sq.c-ruby { background: linear-gradient(160deg, #3a1b22, #1c0b10); }
.ico-sq.c-pink { background: linear-gradient(160deg, #fb7185, #e0245e); }
.ico-sq.c-teal { background: linear-gradient(160deg, #2dd4bf, #0f8f7e); }
.ico-sq.c-red { background: linear-gradient(160deg, #ff7a7a, #dc2626); }
.ico-sq.c-slate { background: linear-gradient(160deg, #64748b, #334155); }
.badge-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; }
.badge-count.muted { background: var(--text-3); }

/* avatars */
.ava {
  --s: 42px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; position: relative; overflow: hidden;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: calc(var(--s) * .4);
  background: linear-gradient(180deg, var(--a1, #a5b4fc), var(--a2, #4f46e5)); user-select: none;
}
.ava img, .ava video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ava.emoji { background: linear-gradient(160deg, var(--panel-3), var(--panel-2)); font-size: calc(var(--s) * .52); }
.ava-wrap { position: relative; flex: none; }
.ava-wrap .dot { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--success); border: 2.5px solid var(--panel-solid); }
.ava.video-ava::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }

.verified { color: var(--accent); display: inline-flex; vertical-align: -3px; cursor: pointer; transition: transform .2s var(--spring); }
.verified:hover { transform: scale(1.18); }
.premium-star { color: #f7b21b; display: inline-flex; vertical-align: -3px; filter: drop-shadow(0 0 6px rgba(247, 178, 27, .45)); }
.bot-tag { font-size: .66rem; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; background: var(--panel-3); color: var(--text-2); vertical-align: 2px; }
.ruby { display: inline-flex; vertical-align: -3px; }
.muted { color: var(--text-2); }
.danger-text { color: var(--danger) !important; }
.st-online { color: var(--accent) !important; }
.st-blocked { color: var(--danger) !important; font-weight: 600; }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.gap8 { gap: 8px; } .wrap { flex-wrap: wrap; }
.empty-note { color: var(--text-3); text-align: center; padding: 30px 16px; font-size: .9rem; }
.section-title { font-weight: 700; font-size: 1.1rem; margin: 18px 4px 10px; }
.kbd { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; padding: 1px 6px; border-radius: 6px; background: var(--panel-3); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--accent); animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.shimmer { background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 50%, var(--panel-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }