/* ================= XK NAV · 星轨导航 ================= */
*, *::before, *::after { box-sizing: border-box; }

:root{
  --a1: 235 184 82;      /* 金色主色 */
  --a2: 225 96 104;      /* 珊瑚副色 */
  --a3: 57 202 178;      /* 青绿点缀 */
  --bg: #090b10;
  --fg: #e9eefc;
  --muted: #8c99b6;
  --line: 255 255 255;
  --r: 18px;
  --top: 66px;
  --maxw: 1240px;
  --font: "Inter","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono: ui-monospace,"JetBrains Mono","Cascadia Code",Consolas,monospace;
}
html[data-theme="sakura"]{ --a1:244 114 182; --a2:168 85 247; --a3:96 165 250; }
html[data-theme="toxic"] { --a1:34 197 94;  --a2:163 230 53;  --a3:56 189 248; }
html[data-theme="ice"]   { --a1:56 189 248; --a2:129 140 248; --a3:45 212 191; }
html[data-theme="magma"] { --a1:249 115 22; --a2:239 68 68;   --a3:250 204 21; }

html{ background: var(--bg); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh; color:var(--fg); font-family:var(--font);
  background:
    radial-gradient(900px 480px at 8% -10%, rgb(var(--a1) / .11), transparent 68%),
    radial-gradient(740px 500px at 94% 0%, rgb(var(--a2) / .10), transparent 70%),
    var(--bg); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background: rgb(var(--a1) / .35); }
a{ color:inherit; text-decoration:none; }
kbd{
  font-family:var(--mono); font-size:11px; padding:2px 6px; border-radius:6px;
  border:1px solid rgb(var(--line) / .16); background:rgb(var(--line) / .06); color:var(--muted);
}
code{ font-family:var(--mono); font-size:.92em; color:rgb(var(--a1)); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(rgb(var(--a1) / .55), rgb(var(--a2) / .55));
  border-radius:99px; border:3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(rgb(var(--a1) / .9), rgb(var(--a2) / .9)); }

/* ---------- 背景层 ---------- */
#bg{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:.9; }
.aurora{
  position:fixed; inset:-25% -15%; z-index:0; pointer-events:none;
  filter:blur(100px); opacity:.6;
  background:
    radial-gradient(38% 42% at 16% 20%, rgb(var(--a1) / .55), transparent 70%),
    radial-gradient(34% 38% at 84% 16%, rgb(var(--a2) / .50), transparent 70%),
    radial-gradient(42% 46% at 62% 90%, rgb(var(--a3) / .34), transparent 72%);
  animation:drift 26s ease-in-out infinite alternate;
}
html[data-fx="off"] .aurora{ animation:none; opacity:.35; }
html[data-fx="off"] #bg{ display:none; }
@keyframes drift{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(2%,-3%,0) scale(1.08); }
  100% { transform:translate3d(-3%,2%,0) scale(1.04); }
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgb(0 0 0 / .55) 100%),
    linear-gradient(rgb(0 0 0 / .25), transparent 30%);
}
.spot{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(320px circle at var(--sx,50%) var(--sy,0%), rgb(var(--a1) / .10), transparent 70%);
}
body.has-pointer .spot{ opacity:1; }

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:30; height:var(--top);
  display:flex; align-items:center; gap:18px;
  padding:0 clamp(14px,3vw,34px);
  background:linear-gradient(rgb(9 11 16 / .94), rgb(9 11 16 / .72));
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid rgb(var(--line) / .07);
}
.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand-mark{ width:34px; height:34px; }
.brand-logo-img{width:auto;max-width:138px;height:34px;object-fit:contain;flex:0 1 auto}
.brand-mark-img{display:block;object-fit:contain}
.brand.has-custom-logo .brand-mark,.brand.has-custom-logo .brand-text{display:none!important}
.brand-mark .g1{ stop-color:rgb(var(--a1)); }
.brand-mark .g2{ stop-color:rgb(var(--a2)); }
.brand-text{ font-size:17px; letter-spacing:.14em; font-weight:800; }
.brand-text b{
  background:linear-gradient(120deg, rgb(var(--a1)), rgb(var(--a2)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-text i{ font-style:normal; color:var(--muted); font-weight:600; }

.search{
  position:relative; flex:1 1 auto; max-width:620px; margin:0 auto;
  display:flex; align-items:center; gap:10px;
  height:42px; padding:0 12px; border-radius:14px;
  background:rgb(var(--line) / .045);
  border:1px solid rgb(var(--line) / .09);
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.search:focus-within{
  border-color:rgb(var(--a1) / .55);
  box-shadow:0 0 0 4px rgb(var(--a1) / .10), 0 12px 40px -18px rgb(var(--a1) / .8);
  background:rgb(var(--line) / .07);
}
.search-ico{ width:18px; height:18px; flex:0 0 auto; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; }
.search:focus-within .search-ico{ stroke:rgb(var(--a1)); }
#q{
  flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent;
  color:var(--fg); font-size:14.5px; font-family:inherit;
}
#q::placeholder{ color:rgb(var(--muted) / .8); }
#q::-webkit-search-cancel-button{ display:none; }
.hint{ flex:0 0 auto; }
.clear{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:0; cursor:pointer;
  background:rgb(var(--line) / .1); color:var(--muted); font-size:11px; line-height:1;
}
.clear:hover{ background:rgb(var(--a1) / .25); color:var(--fg); }

.suggest{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40;
  padding:6px; border-radius:14px; overflow:hidden;
  background:rgb(9 12 20 / .96);
  border:1px solid rgb(var(--line) / .1);
  box-shadow:0 30px 60px -25px #000;
  backdrop-filter:blur(18px);
  max-height:min(58vh,420px); overflow-y:auto;
}
.sg{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
  cursor:pointer; font-size:13.5px;
}
.sg .sg-ico{ width:20px; text-align:center; }
.sg .sg-name{ font-weight:600; }
.sg .sg-host{ margin-left:auto; color:var(--muted); font-size:12px; font-family:var(--mono); }
.sg.on, .sg:hover{ background:rgb(var(--a1) / .14); }
.sg.on .sg-host{ color:rgb(var(--a1)); }

.tools{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.admin-link{
  display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 11px;
  border-radius:9px; color:rgb(var(--a1)); background:rgb(var(--a1) / .08);
  border:1px solid rgb(var(--a1) / .24); font-size:12px; transition:.22s;
}
.admin-link:hover{ color:#17100a; background:rgb(var(--a1)); transform:translateY(-1px); }
.clock{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; }
.clock span{ font-family:var(--mono); font-size:15px; letter-spacing:.06em; }
.clock small{ color:var(--muted); font-size:11px; }
.icon-btn{
  width:36px; height:36px; border-radius:11px; cursor:pointer; font-size:14px;
  color:var(--fg); background:rgb(var(--line) / .05);
  border:1px solid rgb(var(--line) / .1); transition:.22s;
}
.icon-btn:hover{ border-color:rgb(var(--a1) / .5); color:rgb(var(--a1)); box-shadow:0 0 22px -8px rgb(var(--a1) / .9); }
.icon-btn.off{ opacity:.45; }
#hiddenBackBtn[hidden]{display:none}
@media(max-width:620px){.tools{gap:5px}#hiddenBackBtn{width:32px;height:34px}.topbar .search{min-width:0}}

/* ---------- 分类胶囊 ---------- */
.cats{
  position:sticky; top:var(--top); z-index:25;
  display:flex; gap:8px; padding:12px clamp(14px,3vw,34px);
  overflow-x:auto; scrollbar-width:none;
  background:linear-gradient(rgb(5 7 13 / .7), transparent);
  backdrop-filter:blur(8px);
}
.cats::-webkit-scrollbar{ display:none; }
.pill{
  flex:0 0 auto; padding:7px 14px; border-radius:99px; cursor:pointer; white-space:nowrap;
  font-size:13px; font-family:inherit; color:var(--muted);
  background:rgb(var(--line) / .04); border:1px solid rgb(var(--line) / .09);
  transition:.22s;
}
.pill:hover{ color:var(--fg); border-color:rgb(var(--a1) / .4); transform:translateY(-1px); }
.pill.is-active{
  color:#17100a; font-weight:700;
  background:linear-gradient(120deg, rgb(var(--a1)), rgb(var(--a3)));
  border-color:transparent; box-shadow:0 10px 26px -12px rgb(var(--a1));
}

/* ---------- 主区域 ---------- */
.wrap{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto; padding:14px clamp(14px,3vw,34px) 70px;
}
.hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,390px); gap:34px; align-items:stretch; padding:34px 0 30px; }
.hero-copy{ min-width:0; align-self:center; }
.eyebrow{ margin:0 0 12px; color:rgb(var(--a1)); font-family:var(--mono); font-size:11px; letter-spacing:.18em; }
.hero h1{
  margin:0; font-size:clamp(30px,5.4vw,56px); line-height:1.06; letter-spacing:-.02em; font-weight:800;
}
.hero .grad{
  background:linear-gradient(100deg, rgb(var(--a1)), rgb(var(--a2)) 55%, rgb(var(--a3)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgb(var(--a1) / .35));
}
.hero-sub{
  margin:16px 0 0; color:var(--muted); font-size:15px; min-height:24px;
  font-family:var(--mono); letter-spacing:.02em;
}
.caret{
  display:inline-block; width:8px; height:17px; margin-left:3px; vertical-align:-3px;
  background:rgb(var(--a1)); animation:blink 1s steps(2) infinite;
}
@keyframes blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
.stats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.stat{
  display:flex; align-items:baseline; gap:7px; padding:9px 14px; border-radius:12px;
  background:rgb(var(--line) / .045); border:1px solid rgb(var(--line) / .08);
  font-size:12.5px; color:var(--muted);
}
.stat b{ font-family:var(--mono); font-size:17px; color:var(--fg); }
.stat.accent b{ color:rgb(var(--a1)); }

.hero::after{
  content:"域名有变动？牢记本站永久地址:xk001.vip";
  display:inline-flex; margin-top:18px; padding:7px 11px; border-radius:9px;
  color:rgb(var(--a1) / .86); background:rgb(var(--a1) / .07);
  border:1px solid rgb(var(--a1) / .18); font-size:11px; letter-spacing:.02em;
  grid-column:1 / -1;
}
.hero-visual{ position:relative; height:300px; min-height:0; overflow:hidden; border-radius:18px; border:1px solid rgb(var(--a1) / .3); box-shadow:0 28px 70px -35px #000; background:#14100d; }
.hero-visual::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 22%,rgb(5 7 10 / .14) 50%,rgb(5 7 10 / .86) 100%); pointer-events:none; }
.hero-visual img{ width:100%; height:100%; min-height:0; display:block; object-fit:cover; object-position:center 28%; filter:saturate(.9) contrast(1.05); }
.hero-visual-copy{ position:absolute; left:18px; right:18px; bottom:16px; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.hero-visual-copy b{ color:rgb(var(--a1)); font:700 11px var(--mono); letter-spacing:.16em; }
.hero-visual-copy span{ color:#fff; font-size:13px; font-weight:700; }

/* ---------- 分区 ---------- */
.sec{ margin-top:44px; scroll-margin-top:calc(var(--top) + 64px); }
.sec-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.sec-head h2{
  display:flex; align-items:center; gap:9px; margin:0;
  font-size:19px; font-weight:750; letter-spacing:.01em;
}
.sec-ico{ font-size:18px; filter:drop-shadow(0 0 10px rgb(var(--a1) / .5)); }
.sec-line{
  flex:1; height:1px;
  background:linear-gradient(90deg, rgb(var(--a1) / .5), rgb(var(--line) / .06) 60%, transparent);
}
.sec-count{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  padding:3px 9px; border-radius:99px; border:1px solid rgb(var(--line) / .1);
}

.cards{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); }
.sec-entering{opacity:0;transform:translateY(8px)}
.sec.is-visible{animation:section-arrive .26s ease-out both}
@keyframes section-arrive{to{opacity:1;transform:translateY(0)}}
.category-loading{grid-column:1/-1;min-height:108px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:12px;border:1px dashed rgb(var(--line)/.15);border-radius:8px;background:rgb(255 255 255/.018)}
.category-spinner{width:16px;height:16px;border:2px solid rgb(var(--a1)/.18);border-top-color:rgb(var(--a1));border-radius:50%;animation:category-spin .8s linear infinite}
@keyframes category-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sec.is-visible,.category-spinner{animation:none}.sec-entering{opacity:1;transform:none}}

.card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:16px 16px 14px; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(160deg, rgb(255 255 255 / .075), rgb(255 255 255 / .025));
  border:1px solid rgb(var(--a1) / .16);
  box-shadow:0 18px 40px -30px #000;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));
  transition:transform .3s cubic-bezier(.2,.8,.25,1), border-color .3s, box-shadow .3s;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgb(var(--a1)), transparent 42%, transparent 58%, rgb(var(--a2)));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; opacity:0; transition:opacity .3s; pointer-events:none;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgb(var(--a1) / .16), transparent 68%);
  opacity:0; transition:opacity .3s;
}
.card:hover{ --ty:-6px; border-color:transparent; box-shadow:0 30px 60px -30px rgb(var(--a1) / .55), 0 0 0 1px rgb(var(--a1) / .18); }
.card:hover::before, .card:hover::after{ opacity:1; }
.card:focus-visible{ outline:2px solid rgb(var(--a1)); outline-offset:3px; }
.card.hide{ display:none; }

.card-head{ display:flex; align-items:center; gap:10px; }
.ico{
  width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:11px; font-size:17px;
  background:rgb(var(--a1) / .12); border:1px solid rgb(var(--a1) / .22);
}
.ico.letter{ font-family:var(--mono); font-weight:800; color:rgb(var(--a1)); }

/* 站点 logo：图片加载成功后盖住 emoji/首字母兜底，失败则自动退回兜底 */
.ico.has-img, .sg-ico.has-img{ position:relative; overflow:hidden; }
.ico-img{
  position:absolute; inset:0; margin:auto;
  width:20px; height:20px; object-fit:contain; opacity:0;
  transition:opacity .25s;
}
.sg-ico .ico-img{ width:16px; height:16px; }
.ico.has-img.loaded .ico-fb, .sg-ico.has-img.loaded .ico-fb{ visibility:hidden; }
.ico.has-img.loaded .ico-img, .sg-ico.has-img.loaded .ico-img{ opacity:1; }
.ico-fb{ display:grid; place-items:center; width:100%; height:100%; }
.ico-fb.letter{ font-family:var(--mono); font-weight:800; color:rgb(var(--a1)); }
.sg-ico{
  width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:7px; font-size:13px; background:rgb(var(--a1) / .1);
}
.card-name{ font-size:15px; font-weight:700; letter-spacing:.01em; }
.card-go{
  margin-left:auto; color:var(--muted); font-size:14px; opacity:.5;
  transition:transform .25s, opacity .25s, color .25s;
}
.card:hover .card-go{ opacity:1; color:rgb(var(--a1)); transform:translate(3px,-3px); }
.card-desc{
  margin:0; font-size:12.8px; line-height:1.6; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-contacts{ display:grid; gap:4px; margin:0; color:rgb(var(--a3)); font-size:11.5px; }
.contact-line{ display:flex; align-items:center; gap:5px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contact-copy{ width:100%; border:0; padding:0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; }
.contact-copy:hover{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }
.contact-icon{ width:14px; height:14px; flex:0 0 auto; color:rgb(var(--a3)); }
.card-foot{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:4px; }
.host{ font-family:var(--mono); font-size:11px; color:rgb(var(--muted) / .75); }
.download-platform{ font-size:10.5px; color:rgb(var(--a2)); border:1px solid rgb(var(--a2) / .28); border-radius:999px; padding:2px 7px; white-space:nowrap; }
.tags{ display:flex; gap:5px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.tag{
  font-size:10.5px; padding:2px 7px; border-radius:99px;
  color:rgb(var(--a1)); background:rgb(var(--a1) / .1); border:1px solid rgb(var(--a1) / .18);
}

.sec:first-child .card{ border-color:rgb(var(--a1) / .24); }
.sec:first-child .ico{ background:rgb(var(--a1) / .16); border-color:rgb(var(--a1) / .35); }

.empty{ text-align:center; color:var(--muted); padding:60px 0; font-size:14px; }

/* ---------- 页脚 / 提示 ---------- */
.foot{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:center;
  padding:26px 20px 40px; color:rgb(var(--muted) / .85); font-size:12.5px;
  border-top:1px solid rgb(var(--line) / .06);
}
.foot .sep{ opacity:.4; }

.toast{
  position:fixed; left:50%; bottom:30px; z-index:60; transform:translate(-50%,24px);
  padding:10px 18px; border-radius:12px; font-size:13px; pointer-events:none;
  background:rgb(9 12 20 / .95); border:1px solid rgb(var(--a1) / .4);
  box-shadow:0 20px 50px -20px rgb(var(--a1) / .7);
  opacity:0; transition:.3s;
}
.toast.on{ opacity:1; transform:translate(-50%,0); }

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  :root{ --top:60px; }
  .clock{ display:none; }
  .hint{ display:none; }
}
@media (max-width:620px){
  .brand-text{ display:none; }
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .card{ padding:10px; gap:7px; }
  .card-head{ gap:6px; }
  .card-name{ font-size:13px; }
  .card-desc{ font-size:11px; line-height:1.45; }
  .card-contacts{ gap:3px; font-size:10.5px; }
  .contact-icon{ width:12px; height:12px; }
  .card-links{ gap:5px; }
  .card-link{ min-height:28px; flex:1 1 calc(50% - 5px); padding:5px 6px; font-size:11px; }
  .link-health-dot{ width:8px; height:8px; margin-right:4px; }
  .card-desc{ -webkit-line-clamp:2; }
  .tags{ display:none; }
  .hero{ display:block; padding:22px 0 18px; }
  .hero-visual{ height:190px; min-height:0; margin-top:22px; }
  .hero-visual img{ min-height:0; }
  .sec{ margin-top:32px; }
}
@media (max-width:300px){
  .cards{ gap:7px; }
  .card{ padding:8px; }
  .card-name{ font-size:12px; }
  .card-link{ padding-left:4px; padding-right:4px; font-size:10px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}
.card-links{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 2px}.card-link{min-height:30px;padding:6px 11px;border:1px solid rgb(var(--a1)/.45);border-radius:7px;background:rgb(var(--a1)/.1);color:var(--fg);font:700 13px var(--mono);cursor:pointer}.card-link:hover{background:rgb(var(--a1)/.24);color:#fff}.device-link{border-color:rgb(var(--a2)/.5);background:rgb(var(--a2)/.1)}
.link-health-dot{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;background:#8d96a8;box-shadow:0 0 0 2px rgb(141 150 168/.18);vertical-align:1px}.link-health-dot.health-ok{background:#35cf8a;box-shadow:0 0 0 2px rgb(53 207 138/.2)}.link-health-dot.health-bad{background:#ef6670;box-shadow:0 0 0 2px rgb(239 102 112/.2)}
.download-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.download-device-dot{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:rgb(var(--a2));box-shadow:0 0 0 2px rgb(var(--a2)/.2)}
.apple-shared-ids{margin-top:16px;padding:14px;border:1px solid rgb(var(--a2)/.24);border-radius:11px;background:rgb(var(--a2)/.06)}.apple-shared-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}.apple-shared-head strong{font-size:14px}.apple-shared-head span{color:var(--muted);font-size:11px}.apple-id-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}.apple-id-card{display:grid;gap:6px;padding:11px;border:1px solid rgb(var(--line)/.1);border-radius:8px;background:rgb(0 0 0/.14)}.apple-id-card b{font-size:12px}.apple-copy{padding:7px 9px;border:1px solid rgb(var(--line)/.12);border-radius:6px;background:transparent;color:var(--muted);text-align:left;font:11px var(--mono);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.apple-copy:hover{color:var(--fg);border-color:rgb(var(--a2)/.5)}
.chat-toggle{--float-right:24px;--back-bottom:80px;--back-size:44px;position:fixed;right:var(--float-right);bottom:calc(var(--back-bottom) + var(--back-size) + 12px);z-index:80;padding:12px 16px;border:1px solid rgb(var(--a2)/.55);border-radius:999px;background:rgb(var(--a2)/.18);color:var(--fg);font-weight:700;box-shadow:0 10px 28px rgb(0 0 0/.28);cursor:pointer}.chat-panel{position:fixed;right:var(--float-right,24px);bottom:calc(var(--back-bottom,80px) + var(--back-size,44px) + 12px + 46px + 12px);z-index:81;width:min(360px,calc(100vw - 28px));overflow:hidden;border:1px solid rgb(var(--line)/.16);border-radius:13px;background:rgb(10 14 21/.96);box-shadow:0 20px 50px rgb(0 0 0/.4);backdrop-filter:blur(16px)}.chat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgb(var(--line)/.1)}.chat-head button{border:0;background:transparent;color:var(--muted);font-size:22px;cursor:pointer}.chat-identity{display:grid;gap:9px;padding:14px;color:var(--muted);font-size:12px;line-height:1.5}.chat-identity p{margin:0}.chat-identity label{display:grid;gap:5px;color:var(--fg)}.chat-identity input{width:100%;box-sizing:border-box;padding:9px}.chat-identity button{padding:9px 12px;border:0;border-radius:7px;background:rgb(var(--a2));color:#071016;font-weight:700;cursor:pointer}.chat-messages{display:grid;gap:8px;max-height:300px;overflow:auto;padding:12px}.chat-empty{margin:0;color:var(--muted);font-size:12px;text-align:center}.chat-message{display:grid;gap:3px;max-width:86%;padding:8px 10px;border-radius:9px;font-size:12px;line-height:1.5}.chat-message small{color:var(--muted);font:9px var(--mono)}.chat-message.from-visitor{justify-self:end;background:rgb(var(--a1)/.18)}.chat-message.from-admin{justify-self:start;background:rgb(var(--a2)/.15)}.chat-form{display:grid;grid-template-columns:1fr auto;gap:7px;padding:10px;border-top:1px solid rgb(var(--line)/.1)}.chat-form input{min-width:0;padding:9px}.chat-form button{padding:8px 12px;border:0;border-radius:7px;background:rgb(var(--a2));color:#071016;font-weight:700;cursor:pointer}
.back-to-top{--float-right:24px;--back-bottom:80px;--back-size:44px;position:fixed;right:var(--float-right);bottom:var(--back-bottom);z-index:79;width:var(--back-size);height:var(--back-size);display:grid;place-items:center;padding:0;border:1px solid rgb(var(--a1)/.48);border-radius:50%;background:rgb(10 14 21/.92);color:rgb(var(--a1));box-shadow:0 8px 24px rgb(0 0 0/.36);cursor:pointer;transition:opacity .18s ease,transform .18s ease}.back-to-top:hover{transform:translateY(-2px);background:rgb(var(--a1)/.14)}.back-to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}
@media(max-width:520px){.chat-toggle,.back-to-top{--float-right:18px;--back-bottom:78px;--back-size:42px}}

/* Keep customer support directly above the back-to-top control. */
:root{--float-right:24px;--back-bottom:80px;--back-size:44px;--chat-toggle-height:46px}
.chat-toggle{right:var(--float-right);bottom:calc(var(--back-bottom) + var(--back-size) + 12px)}
.chat-panel{right:var(--float-right);bottom:calc(var(--back-bottom) + var(--back-size) + 12px + var(--chat-toggle-height) + 12px)}
.back-to-top{right:var(--float-right);bottom:var(--back-bottom);width:var(--back-size);height:var(--back-size)}
@media(max-width:520px){:root{--float-right:18px;--back-bottom:78px;--back-size:42px}}