/* ==========================================================================
   HGUAPI application skin
   Loaded after the NewAPI bundle. Only presentation is changed: routes,
   requests, auth and state stay in the original application.
   ========================================================================== */

@font-face{
  font-family:"Antonio HGU";
  src:url("/fonts/antonio.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter HGU";
  src:url("/fonts/inter-test.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --hgu-red:#fb2b2e;
  --hgu-red-deep:#b8070c;
  --hgu-ink:#f3f3f1;
  --hgu-glass:rgba(12,12,12,.62);
  --hgu-line:rgba(255,255,255,.1);
}

html.dark{
  color-scheme:dark;
  --background:#050505;
  --foreground:#f3f3f1;
  --card:rgba(15,15,15,.72);
  --card-foreground:#f3f3f1;
  --popover:rgba(12,12,12,.96);
  --popover-foreground:#f3f3f1;
  --primary:var(--hgu-red);
  --primary-foreground:#fff;
  --secondary:rgba(255,255,255,.08);
  --secondary-foreground:#f3f3f1;
  --muted:rgba(255,255,255,.06);
  --muted-foreground:#a5a5a2;
  --accent:rgba(251,43,46,.14);
  --accent-foreground:#fff;
  --destructive:#ff4b4f;
  --border:rgba(255,255,255,.11);
  --input:rgba(255,255,255,.13);
  --ring:rgba(251,43,46,.5);
  --radius:.9rem;
}

html.light{
  color-scheme:light;
  --background:#f4f1e8;
  --foreground:#171614;
  --card:rgba(255,255,255,.72);
  --card-foreground:#171614;
  --popover:rgba(255,255,255,.97);
  --popover-foreground:#171614;
  --primary:#d9151b;
  --primary-foreground:#fff;
  --secondary:rgba(0,0,0,.05);
  --secondary-foreground:#171614;
  --muted:rgba(0,0,0,.05);
  --muted-foreground:#6f6c64;
  --accent:rgba(217,21,27,.1);
  --border:rgba(20,18,14,.14);
  --input:rgba(20,18,14,.18);
  --ring:rgba(217,21,27,.35);
  --radius:.9rem;
}

html,body{background:transparent!important}
html{font-family:"Inter HGU",Inter,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif}
body{color:var(--foreground);min-height:100dvh}

/* --- background film ---------------------------------------------------- */
.hgu-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#050505}
.hgu-bg video{position:absolute;left:50%;top:50%;width:118%;height:118%;transform:translate(-50%,-50%);
  object-fit:cover;opacity:.34;filter:grayscale(1) contrast(1.08) brightness(.62)}
.hgu-bg::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(75% 58% at 50% 18%,rgba(255,255,255,.06),transparent 62%),
    radial-gradient(55% 55% at 82% 8%,rgba(251,43,46,.11),transparent 68%),
    linear-gradient(180deg,rgba(5,5,5,.1) 0%,rgba(5,5,5,.42) 42%,#050505 92%)}
.hgu-bg::after{content:"";position:absolute;inset:0;z-index:2;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
html.light .hgu-bg video{opacity:.16;filter:grayscale(1) brightness(1.25)}
html.light .hgu-bg::before{background:
  radial-gradient(75% 58% at 50% 18%,rgba(255,255,255,.5),transparent 65%),
  radial-gradient(55% 55% at 82% 8%,rgba(217,21,27,.08),transparent 68%),
  linear-gradient(180deg,rgba(244,241,232,.3) 0%,rgba(244,241,232,.7) 44%,#f4f1e8 94%)}
html.light .hgu-bg::after{opacity:.07}
#root{position:relative;z-index:1}

/* --- header ------------------------------------------------------------- */
header.fixed > div{max-width:calc(1320px + 2rem);padding-left:1rem;padding-right:1rem}
header.fixed nav{height:66px;padding:0 16px;border:1px solid var(--hgu-line);border-radius:18px;
  background:rgba(8,8,8,.58);backdrop-filter:blur(22px) saturate(1.1);-webkit-backdrop-filter:blur(22px) saturate(1.1);
  box-shadow:0 18px 50px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);
  margin-top:12px}
html.light header.fixed nav{background:rgba(255,255,255,.6);border-color:rgba(20,18,14,.12);
  box-shadow:0 18px 50px -30px rgba(60,50,30,.3),inset 0 1px 0 rgba(255,255,255,.7)}
header.fixed nav > div:first-child a span[title]{font-family:"Antonio HGU","Inter HGU",sans-serif;
  font-size:22px;line-height:1;letter-spacing:.045em;text-transform:uppercase;font-weight:500}
header.fixed nav > div:first-child img{filter:drop-shadow(0 2px 8px rgba(251,43,46,.35))}
header.fixed nav a[href="/"],header.fixed nav a[href="/dashboard"],header.fixed nav a[href="/pricing"],
header.fixed nav a[href="/rankings"],header.fixed nav a[href="/about"],header.fixed nav a[title="文档"]{
  border-radius:999px;padding:8px 14px;letter-spacing:.01em}
header.fixed nav a.active{color:#fff!important;background:rgba(251,43,46,.13);
  box-shadow:inset 0 0 0 1px rgba(251,43,46,.32),0 0 24px -10px rgba(251,43,46,.6)}
html.light header.fixed nav a.active{color:#171614!important;background:rgba(217,21,27,.09)}
header.fixed nav a.active::after{content:"";display:inline-block;width:4px;height:4px;margin-left:7px;
  border-radius:50%;background:var(--hgu-red);vertical-align:middle;box-shadow:0 0 7px rgba(251,43,46,.9)}
header.fixed nav button:hover{background:rgba(255,255,255,.07)}
html.light header.fixed nav button:hover{background:rgba(0,0,0,.05)}
header.fixed nav a[href="/sign-in"],header.fixed nav button.bg-primary{
  border-radius:999px!important;background:linear-gradient(180deg,#ff4448,#d80f14)!important;
  color:#fff!important;border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 24px -8px rgba(251,43,46,.65)!important;
  padding-left:18px;padding-right:18px}
header.fixed nav a[href="/sign-in"]:hover,header.fixed nav button.bg-primary:hover{filter:brightness(1.08)}

/* --- global type -------------------------------------------------------- */
h1,h2,h3,.font-display{letter-spacing:-.025em}
h1{font-weight:600}
::selection{background:rgba(251,43,46,.35);color:#fff}

/* --- surfaces ----------------------------------------------------------- */
main .bg-card,aside.bg-card,section .bg-card,.bg-card.rounded-xl,
[data-slot="card"],.rounded-xl.border.bg-card{
  background:var(--card)!important;border-color:var(--hgu-line)!important;
  backdrop-filter:blur(16px) saturate(1.05);-webkit-backdrop-filter:blur(16px) saturate(1.05);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.045)}
html.light main .bg-card,html.light aside.bg-card,html.light section .bg-card,html.light .bg-card.rounded-xl{
  box-shadow:0 24px 60px -38px rgba(60,50,30,.35),inset 0 1px 0 rgba(255,255,255,.6)}
main .bg-card:hover,aside.bg-card:hover{transition:border-color .25s,box-shadow .25s,transform .25s}
main .bg-card:hover{border-color:rgba(255,255,255,.2)!important}
html.light main .bg-card:hover{border-color:rgba(20,18,14,.24)!important}
main .bg-card{transition:border-color .25s,box-shadow .25s,transform .25s}
html[data-hgu-route="/pricing"] main .bg-card:hover{transform:translateY(-2px);box-shadow:0 30px 70px -30px rgba(0,0,0,.95),0 0 0 1px rgba(251,43,46,.08),inset 0 1px 0 rgba(255,255,255,.06)}
html[data-hgu-route="/pricing"].light main .bg-card:hover{box-shadow:0 30px 70px -34px rgba(60,50,30,.4),0 0 0 1px rgba(217,21,27,.08),inset 0 1px 0 rgba(255,255,255,.7)}

/* --- auth pages: match the landing login modal -------------------------- */
.hgu-auth-card{width:min(440px,calc(100vw - 64px))!important;max-width:440px;padding:34px 32px!important;
  border:1px solid var(--hgu-line);border-radius:24px;background:rgba(9,9,9,.68);
  backdrop-filter:blur(28px) saturate(1.05);-webkit-backdrop-filter:blur(28px) saturate(1.05);
  box-shadow:0 40px 110px -36px rgba(0,0,0,.94),inset 0 1px 0 rgba(255,255,255,.055)}
html.light .hgu-auth-card{background:rgba(255,255,255,.74);border-color:rgba(20,18,14,.12);
  box-shadow:0 40px 110px -46px rgba(60,50,30,.36),inset 0 1px 0 rgba(255,255,255,.72)}
/* Apply the shell before the bundle mounts, so client-side auth navigation never flashes the stock page. */
html[data-hgu-route="/sign-in"] div.mx-auto:has(> div > form),
html[data-hgu-route="/sign-up"] div.mx-auto:has(> div > form),
html[data-hgu-route="/forgot-password"] div.mx-auto:has(> div > form),
html[data-hgu-route="/reset"] div.mx-auto:has(> div > form){
  width:min(440px,calc(100vw - 64px))!important;max-width:440px;padding:34px 32px!important;
  border:1px solid var(--hgu-line);border-radius:24px;background:rgba(9,9,9,.68);
  backdrop-filter:blur(28px) saturate(1.05);-webkit-backdrop-filter:blur(28px) saturate(1.05);
  box-shadow:0 40px 110px -36px rgba(0,0,0,.94),inset 0 1px 0 rgba(255,255,255,.055)}
html.light[data-hgu-route="/sign-in"] div.mx-auto:has(> div > form),
html.light[data-hgu-route="/sign-up"] div.mx-auto:has(> div > form),
html.light[data-hgu-route="/forgot-password"] div.mx-auto:has(> div > form),
html.light[data-hgu-route="/reset"] div.mx-auto:has(> div > form){
  background:rgba(255,255,255,.74);border-color:rgba(20,18,14,.12)}
html[data-hgu-route="/sign-in"] div.mx-auto:has(> div > form) input,
html[data-hgu-route="/sign-up"] div.mx-auto:has(> div > form) input,
html[data-hgu-route="/forgot-password"] div.mx-auto:has(> div > form) input{
  height:44px!important;font-size:14px!important;padding:0 12px!important;border-radius:12px!important}
html[data-hgu-route="/sign-in"] div.mx-auto:has(> div > form) button[type="submit"],
html[data-hgu-route="/sign-up"] div.mx-auto:has(> div > form) button[type="submit"],
html[data-hgu-route="/forgot-password"] div.mx-auto:has(> div > form) button[type="submit"]{
  height:44px;border-radius:999px!important;font-size:13px;font-weight:500;
  background:linear-gradient(180deg,#ff3b3f,#d80f14)!important;border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 28px -12px rgba(251,43,46,.7)!important}
.hgu-auth-card > div{width:100%}
.hgu-auth-card h2{font-size:26px!important;font-weight:600!important;letter-spacing:-.025em}
.hgu-auth-card form{gap:14px!important}
.hgu-auth-card label{font-size:10px!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)!important}
.hgu-auth-card input{height:44px!important;font-size:14px!important;padding:0 12px!important;border-radius:12px!important;
  background:rgba(255,255,255,.045)!important;border-color:var(--border)!important}
html.light .hgu-auth-card input{background:rgba(255,255,255,.72)!important}
.hgu-auth-card button[type="submit"]{height:44px;border-radius:999px!important;
  font-size:13px;font-weight:500;background:linear-gradient(180deg,#ff3b3f,#d80f14)!important;
  border:1px solid rgba(255,255,255,.22)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 28px -12px rgba(251,43,46,.7)!important}
.hgu-auth-card button[type="submit"]:hover{filter:brightness(1.07)}
.hgu-auth-card button:not([type="submit"]){background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.hgu-auth-card .hgu-oauth-btn{height:40px;width:100%;border:1px solid var(--border)!important;border-radius:12px!important;
  background:rgba(255,255,255,.04)!important;color:var(--foreground)!important;justify-content:center;padding:0 14px}
html.light .hgu-auth-card .hgu-oauth-btn{background:rgba(255,255,255,.6)!important}
.hgu-auth-card a[href="/sign-in"]{color:var(--primary)!important;text-decoration:none;font-weight:500}
.hgu-auth-card a[href="/forgot-password"]{font-size:11px;color:var(--muted-foreground)!important;text-decoration:none}
.hgu-auth-card a[href="/forgot-password"]:hover{color:var(--foreground)!important}
.hgu-auth-alt{margin-top:14px;text-align:center;font-size:12px;color:var(--muted-foreground)}
.hgu-auth-alt a{color:var(--foreground);text-decoration:none;border-bottom:1px solid var(--border);padding-bottom:1px;margin-left:4px}
.hgu-auth-alt a:hover{color:var(--primary)}
.hgu-auth-brand h1{font-family:"Antonio HGU","Inter HGU",sans-serif!important;font-size:22px!important;
  line-height:1;letter-spacing:.045em;text-transform:uppercase;font-weight:500!important}
.hgu-auth-brand img{filter:drop-shadow(0 2px 8px rgba(251,43,46,.35))}
.hgu-auth-home{position:fixed;top:22px;right:24px;z-index:60;display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 15px;border-radius:999px;text-decoration:none;font-size:12px;font-weight:500;
  color:var(--foreground);background:rgba(10,10,10,.58);border:1px solid var(--hgu-line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.8);transition:background .2s,border-color .2s,color .2s}
.hgu-auth-home:hover{color:var(--primary);border-color:rgba(251,43,46,.4);background:rgba(251,43,46,.1)}
html.light .hgu-auth-home{background:rgba(255,255,255,.66);border-color:rgba(20,18,14,.13);
  box-shadow:0 10px 30px -22px rgba(60,50,30,.35)}
@media (max-width:619px){.hgu-auth-home{top:14px;right:14px;height:32px;font-size:11px;padding:0 12px}}

/* --- layout alignment --------------------------------------------------- */
/* The floating glass navigation is taller than the stock header slot. */
main[data-slot="sidebar-inset"]{margin-top:34px!important;margin-bottom:8px!important}
main[data-slot="sidebar-inset"] > div{min-height:0}
html[data-hgu-route="/users"] table{min-width:1360px}
@media (max-width:1599px){
  html[data-hgu-route="/users"] table{min-width:1180px!important;width:100%!important}
  html[data-hgu-route="/users"] thead th:nth-child(8),
  html[data-hgu-route="/users"] tbody td:nth-child(8){display:none!important}
  html[data-hgu-route="/users"] thead th:nth-child(10),
  html[data-hgu-route="/users"] tbody td:nth-child(10){width:150px!important}
}
html[data-hgu-route="/about"] .prose-neutral{padding:clamp(96px,8vw,118px) 24px 64px;max-width:1040px;margin:0 auto}
[data-slot="sidebar"] [data-sidebar="menu-button"]{border-radius:10px}
[data-slot="sidebar"] [data-sidebar="menu-button"][data-active="true"]{background:rgba(251,43,46,.14)!important;
  box-shadow:inset 0 0 0 1px rgba(251,43,46,.24)}
html.light [data-slot="sidebar"] [data-sidebar="menu-button"][data-active="true"]{background:rgba(217,21,27,.09)!important}


/* separators and subtle bands */
.border-border,.border-b,.border-t,.border-l,.border-r{border-color:var(--border)!important}
.bg-muted\/50,.bg-muted\/30,.bg-muted\/20{background-color:rgba(255,255,255,.035)!important}
html.light .bg-muted\/50,html.light .bg-muted\/30,html.light .bg-muted\/20{background-color:rgba(0,0,0,.03)!important}

/* --- controls ----------------------------------------------------------- */
button,[role="button"]{transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s}
button:active,[role="button"]:active{transform:translateY(1px)}
.bg-primary{background:linear-gradient(180deg,#ff3b3f,#d80f14)!important;box-shadow:0 10px 26px -12px rgba(251,43,46,.7)}
.bg-primary:hover{filter:brightness(1.07)}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),textarea,select{background:rgba(255,255,255,.045)!important;border-color:var(--border)!important;border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
html.light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),html.light textarea,html.light select{background:rgba(255,255,255,.72)!important}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,textarea:focus,select:focus{outline:none;border-color:rgba(251,43,46,.6)!important;box-shadow:0 0 0 3px rgba(251,43,46,.15)!important}
html.light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,html.light textarea:focus,html.light select:focus{border-color:rgba(217,21,27,.55)!important;box-shadow:0 0 0 3px rgba(217,21,27,.1)!important}
kbd{background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:6px;padding:1px 5px;font-size:.75em;color:var(--muted-foreground)}

/* --- tables ------------------------------------------------------------- */
table{background:transparent}
thead{background:rgba(255,255,255,.035)}
html.light thead{background:rgba(0,0,0,.04)}
thead th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-foreground)}
tbody tr{transition:background-color .18s}
tbody tr:hover{background:rgba(251,43,46,.055)}
html.light tbody tr:hover{background:rgba(217,21,27,.045)}

/* --- menus, dialogs, popovers ------------------------------------------ */
[role="menu"],[data-slot="dropdown-menu-content"],[data-slot="select-content"],[data-radix-popper-content-wrapper] > div{
  background:var(--popover)!important;border:1px solid var(--border)!important;border-radius:14px!important;
  backdrop-filter:blur(26px) saturate(1.1);-webkit-backdrop-filter:blur(26px) saturate(1.1);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05)}
[role="menuitem"]{border-radius:9px}
[role="menuitem"]:hover,[role="menuitem"]:focus{background:rgba(251,43,46,.12)!important}
[role="dialog"],[data-slot="dialog-content"]{
  background:rgba(9,9,9,.92)!important;border:1px solid var(--border)!important;border-radius:22px!important;
  backdrop-filter:blur(30px) saturate(1.1);-webkit-backdrop-filter:blur(30px) saturate(1.1);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06)}
html.light [role="dialog"],html.light [data-slot="dialog-content"]{background:rgba(250,248,242,.96)!important}
[data-slot="dialog-overlay"],[role="presentation"].fixed.inset-0.bg-black\/80{background:rgba(0,0,0,.7)!important;backdrop-filter:blur(8px)}

/* --- badges, tabs, status --------------------------------------------- */
[data-slot="badge"]{border-radius:999px}
[role="tab"][data-state="active"]{background:rgba(251,43,46,.14)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(251,43,46,.32)}
html.light [role="tab"][data-state="active"]{color:#171614!important}

/* --- scrollbar --------------------------------------------------------- */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
html.light *{scrollbar-color:rgba(20,18,14,.2) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(251,43,46,.45);background-clip:content-box}
html.light ::-webkit-scrollbar-thumb{background:rgba(20,18,14,.18);background-clip:content-box}

/* --- footer ------------------------------------------------------------- */
footer{border-color:var(--border)!important;background:transparent!important}

/* --- page-specific polish ---------------------------------------------- */
/* pricing header */
main > header h1{font-size:clamp(40px,5vw,68px);line-height:1.02;font-weight:500}
main > header p{color:var(--muted-foreground)}
/* model cards: accent edge on hover */
main .bg-card .font-medium,main .bg-card .font-semibold{letter-spacing:-.01em}
main .bg-card code{font-size:.9em;color:var(--foreground)}
/* active filter chips */
button[aria-pressed="true"],button[data-state="on"]{border-color:rgba(251,43,46,.4)!important;background:rgba(251,43,46,.12)!important}

/* the original logo hack still points at /static-assets/tr-logo.png */
.bg-muted.rounded-full{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

@media (max-width:1023px){
  header.fixed nav{height:62px;margin-top:8px;border-radius:16px}
  header.fixed nav > div:first-child a span[title]{font-size:19px}
}

@media (max-width:619px){
  html[data-hgu-route="/sign-in"] .container,
  html[data-hgu-route="/sign-up"] .container,
  html[data-hgu-route="/forgot-password"] .container,
  html[data-hgu-route="/reset"] .container{padding-left:16px!important;padding-right:16px!important}
  .hgu-auth-card{width:calc(100vw - 32px)!important;padding:28px 22px!important}
}

@media (prefers-reduced-motion:reduce){
  .hgu-bg video{display:none}
  *{scroll-behavior:auto!important}
}