/* XinXin Aurora Elite 12.4 — public visual layer.
   Keeping this in a tiny, separately versioned file avoids touching admin theme
   rules and keeps the large legacy stylesheet functionally compatible. */
body.public-surface {
  --elite-ink:#172745;
  --elite-soft-ink:#7183a0;
  --elite-outline:rgba(122,143,202,.17);
  --elite-glow:rgba(93,108,239,.16);
  --elite-ease:cubic-bezier(.22,.77,.28,1);
  background:radial-gradient(ellipse 760px 560px at 5% 4%,rgba(117,122,249,.15),transparent 66%),
             radial-gradient(ellipse 700px 540px at 100% 22%,rgba(49,187,241,.11),transparent 66%),
             linear-gradient(155deg,#f4f7ff 0%,#f8fbff 50%,#f2f5fe 100%);
}
body.public-surface .app-frame{max-width:1600px; min-width:0}
body.public-surface :is(.page-main,.console-shell,.multipage-content,.user-page-content,.module-section,.card,.module-card,.key-workspace-grid,.key-workspace-grid>*,.key-create-grid,.key-item,.key-pool-control,.key-model-scope,.guide-card,.pool-public-mini-list,.pool-public-mini,.home-pool-grid,.home-pool-card,.hero-copy,.relay-console-preview){min-width:0;box-sizing:border-box}
body.public-surface :is(input,select,textarea,pre,code){max-width:100%}
body.public-surface :is(.user-page-content,.guide-card,.api-key-card,.key-item,.pool-public-mini,.workspace-hero-card) {overflow-wrap:anywhere}
body.public-surface .topbar{border-radius:20px;box-shadow:0 13px 38px rgba(39,57,104,.10),inset 0 1px rgba(255,255,255,.9)}
body.public-surface .brand-mark{background:linear-gradient(135deg,#506af4 0%,#7d68ed 52%,#35bbd6 100%);box-shadow:0 9px 22px rgba(89,102,236,.22)}
body.public-surface .nav-text{transition:background .18s ease,color .18s ease,transform .18s ease}
body.public-surface .nav-text:hover{transform:translateY(-1px)}
body.public-surface .page-main{isolation:isolate}
body.public-surface .page-progress{overflow:hidden}
body.public-surface .page-progress i{width:100%!important;transform:scaleX(0);transform-origin:left center;will-change:transform}

/* Marketing / home: stronger typographic hierarchy and readable endpoint. */
body.public-surface .aurora-home-hero{position:relative;isolation:isolate;overflow:hidden;column-gap:clamp(24px,4vw,64px);padding:clamp(24px,3.2vw,52px);border:1px solid var(--elite-outline);box-shadow:0 27px 75px rgba(42,61,117,.12),inset 0 1px 0 #fff}
body.public-surface .aurora-home-hero::before{content:"";pointer-events:none;position:absolute;z-index:-1;width:360px;height:360px;top:-176px;right:-126px;border-radius:50%;background:radial-gradient(circle,rgba(94,111,246,.19),transparent 72%)}
body.public-surface .aurora-home-hero .eyebrow{letter-spacing:.18em;font-weight:900}
body.public-surface .aurora-home-hero .hero-copy h1{font-weight:920;line-height:1.03;letter-spacing:-.065em;text-wrap:balance;max-width:14ch}
body.public-surface .aurora-home-hero .hero-copy>p{font-size:clamp(14px,1.2vw,18px);line-height:1.85;color:#617593;text-wrap:pretty}
body.public-surface .endpoint-copy-row{max-width:100%;gap:12px;flex-wrap:wrap;border:1px solid rgba(118,139,196,.19);border-radius:17px;padding:12px 14px;background:rgba(255,255,255,.87)}
body.public-surface .endpoint-copy-row code{min-width:0;white-space:normal;overflow-wrap:anywhere;font-weight:750}
body.public-surface :is(.hero-actions .btn,.key-create-grid button){position:relative;isolation:isolate;overflow:hidden;transition:transform .22s var(--elite-ease),box-shadow .22s var(--elite-ease)}
body.public-surface .hero-stat-ribbon article{transition:transform .24s var(--elite-ease),box-shadow .24s var(--elite-ease);min-width:0}
body.public-surface .hero-stat-ribbon strong{font-size:clamp(15px,1.3vw,20px);line-height:1.35}
body.public-surface .preview-request,body.public-surface .preview-nodes article{box-shadow:0 8px 22px rgba(56,75,118,.05)}
body.public-surface .home-pool-grid,body.public-surface .model-public-grid{min-width:0}
body.public-surface .home-pool-card,body.public-surface .public-model-card{min-width:0;transition:transform .24s var(--elite-ease),box-shadow .24s var(--elite-ease),border-color .24s ease}
body.public-surface .home-pool-model-list>div{min-width:0;align-items:center}
body.public-surface .home-pool-model-list code{min-width:0;overflow-wrap:anywhere}
body.public-surface .home-pool-model-list span{flex:0 1 56%;min-width:0;overflow-wrap:anywhere}
body.public-surface .relay-api-card h2{overflow-wrap:anywhere;word-break:break-word;max-width:100%}

/* User workplace – optical polish without heavy permanent animations. */
body.public-surface .user-hero-v7{isolation:isolate;border:1px solid rgba(129,153,245,.12);box-shadow:0 25px 78px rgba(19,39,87,.22);overflow:hidden}
body.public-surface .user-hero-v7::before{content:"";position:absolute;pointer-events:none;z-index:-1;inset:-45% 45% -100% -60%;background:radial-gradient(ellipse at center,rgba(119,131,255,.12),transparent 65%)}
body.public-surface .user-hero-main h1{font-weight:900;letter-spacing:-.05em;line-height:1.16;text-wrap:balance}
body.public-surface .user-hero-chips span{max-width:100%;overflow-wrap:anywhere}
body.public-surface .user-hero-panels article{backdrop-filter:none;transition:transform .24s var(--elite-ease),background .24s ease;min-width:0}
body.public-surface .user-hero-panels span{overflow-wrap:anywhere}
body.public-surface .user-page-sidebar{border:1px solid rgba(116,139,220,.14);box-shadow:0 24px 56px rgba(21,35,76,.17)}
body.public-surface .user-page-sidebar .side-link{transition:background .18s ease,transform .18s var(--elite-ease),border-color .18s ease}
body.public-surface .user-page-sidebar .side-link.active{box-shadow:0 9px 24px rgba(46,74,162,.25),inset 0 1px rgba(255,255,255,.09)}
body.public-surface .user-workspace-hero{min-width:0;align-items:flex-start;box-shadow:0 18px 50px rgba(44,63,108,.09);overflow:hidden}
body.public-surface .user-workspace-hero>div{min-width:0}
body.public-surface .user-workspace-hero .page-breadcrumb{margin:0 0 9px}
body.public-surface .user-workspace-hero h2{font-weight:900;letter-spacing:-.045em}
body.public-surface .user-workspace-hero p{color:#6e7d98}
body.public-surface .user-shortcuts{min-width:0;flex:0 1 auto}
body.public-surface .user-shortcuts .pill-link{white-space:nowrap}
body.public-surface .user-page-content .module-heading>div{min-width:0}
body.public-surface .user-page-content .module-heading h2{line-height:1.16;text-wrap:balance}
body.public-surface .user-page-content .module-heading p{font-size:clamp(12px,1vw,15px)}
body.public-surface .chart-card{min-width:0}
body.public-surface .chart-host{overflow:hidden}
body.public-surface .metric-card strong{font-variant-numeric:tabular-nums;max-width:100%;overflow-wrap:anywhere;font-size:clamp(28px,3vw,48px)}

/* Key / model card responsiveness. This specifically fixes cards overpainting the catalog. */
body.public-surface .key-workspace-grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:18px;align-items:start;min-width:0;width:100%;max-width:100%}
body.public-surface .key-workspace-grid>.api-key-card,body.public-surface .key-workspace-grid>.guide-card{width:auto;max-width:100%;min-width:0;overflow:hidden;contain:layout}
body.public-surface .key-command-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body.public-surface .key-command-grid article{min-width:0;padding:clamp(11px,1vw,16px)}
body.public-surface .key-command-grid span{font-size:11px}
body.public-surface .key-create-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px;align-items:end;max-width:100%}
body.public-surface .key-create-grid .field{min-width:0;width:100%}
body.public-surface .key-create-grid :is(input,select){min-width:0;width:100%;max-width:100%;text-overflow:ellipsis}
body.public-surface .key-create-grid button{grid-column:1/-1;min-width:0;width:100%;min-height:52px}
body.public-surface .key-pool-item{width:100%;max-width:100%;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"info control" "scope scope" "actions actions";gap:12px}
body.public-surface .key-pool-item :is(.key-main-info,.key-pool-control,.key-model-scope,.key-actions){min-width:0;max-width:100%}
body.public-surface .key-title-line{min-width:0}
body.public-surface .key-title-line strong{font-size:clamp(18px,1.8vw,24px);overflow-wrap:anywhere}
body.public-surface .key-pool-label strong{font-size:clamp(13px,1.2vw,17px);max-width:100%;overflow-wrap:anywhere}
body.public-surface .key-pool-switch-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;max-width:100%}
body.public-surface .key-pool-switch-form select{min-width:0;max-width:100%;width:100%;text-overflow:ellipsis}
body.public-surface .key-pool-switch-form button{min-width:74px;max-width:100%;padding-inline:12px}
body.public-surface .key-model-scope .model-chip-row{min-width:0}
body.public-surface .guide-card :is(.code-panel,pre){min-width:0;max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
body.public-surface .pool-public-mini>summary{min-width:0}
body.public-surface .pool-public-mini>summary>div{min-width:0;flex:1}
body.public-surface .pool-public-mini>summary strong{overflow-wrap:anywhere;line-height:1.35}
body.public-surface .pool-public-mini>summary .badge{flex-shrink:0}

/* Readable and effective focus, hover, native inputs. */
body.public-surface :is(button,.btn,a,input,select,textarea):focus-visible{outline:3px solid rgba(90,112,248,.42);outline-offset:3px}
body.public-surface :is(input,select,textarea){transition:border-color .16s ease,box-shadow .16s ease}
body.public-surface :is(input,select,textarea):focus{border-color:rgba(89,114,237,.55)!important;box-shadow:0 0 0 4px rgba(93,116,240,.10)!important}
body.public-surface .model-chip-row code{white-space:normal;word-break:break-word;max-width:100%}

/* Purposeful, one-shot GPU-friendly entrances. No endless expensive blur/position animation. */
@keyframes elite-rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes elite-fade{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:no-preference){
  body.public-surface.ui-desktop .user-hero-main,
  body.public-surface.ui-desktop .aurora-home-hero .hero-copy{animation:elite-rise .62s var(--elite-ease) both}
  body.public-surface.ui-desktop .user-hero-panels article,
  body.public-surface.ui-desktop .hero-stat-ribbon article{animation:elite-fade .42s var(--elite-ease) both}
  body.public-surface.ui-desktop .user-hero-panels article:nth-child(2),
  body.public-surface.ui-desktop .hero-stat-ribbon article:nth-child(2){animation-delay:.06s}
  body.public-surface.ui-desktop .user-hero-panels article:nth-child(3),
  body.public-surface.ui-desktop .hero-stat-ribbon article:nth-child(3){animation-delay:.12s}
  body.public-surface.ui-desktop .hero-stat-ribbon article:nth-child(4){animation-delay:.18s}
}
@media (hover:hover) and (pointer:fine){
 body.public-surface .hero-stat-ribbon article:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(58,78,128,.11)}
 body.public-surface .user-hero-panels article:hover{transform:translateY(-3px);background:rgba(255,255,255,.14)}
 body.public-surface .user-page-content .card:hover{border-color:rgba(111,128,215,.26)}
 body.public-surface .key-create-grid button:hover{transform:translateY(-2px);box-shadow:0 18px 35px rgba(75,96,188,.28)}
}

/* Break sooner than the old 1240px rule: avoid squeezing a key form and catalog. */
@media (max-width:1470px){
 body.public-surface .key-workspace-grid{grid-template-columns:1fr}
 body.public-surface .key-create-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.public-surface .key-create-grid button{grid-column:auto;grid-column:1/-1}
 body.public-surface .user-workspace-hero{display:grid;grid-template-columns:1fr;gap:12px}
 body.public-surface .user-shortcuts{justify-content:flex-start}
}
@media (max-width:1160px){
 body.public-surface .user-hero-v7{grid-template-columns:minmax(0,1fr)}
 body.public-surface .user-hero-panels{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.public-surface .hero-stat-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.public-surface .home-pool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.public-surface .user-console-shell{grid-template-columns:1fr}
 body.public-surface .user-page-sidebar{position:relative;top:auto}
}
@media (max-width:820px){
 body.public-surface.ui-mobile .app-frame{min-width:0}
 body.public-surface.ui-mobile .user-page-content{display:block!important}
 body.public-surface.ui-mobile .user-page-sidebar{display:flex!important;position:sticky!important;top:65px!important;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:16px;background:rgba(20,30,61,.95)!important;border:1px solid rgba(125,144,212,.16)!important}
 body.public-surface.ui-mobile .user-page-sidebar .side-link{flex:0 0 auto!important;white-space:nowrap;color:#edf2ff!important}
 body.public-surface.ui-mobile .user-page-sidebar .side-link.active{background:rgba(105,129,251,.35)!important;color:#fff!important}
 body.public-surface.ui-mobile .user-workspace-hero{display:block;width:100%;padding:16px;border-radius:20px}
 body.public-surface.ui-mobile .user-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
 body.public-surface.ui-mobile .user-shortcuts .pill-link{display:grid;place-items:center;min-height:37px;padding:7px 9px!important;font-size:11px;white-space:normal}
 body.public-surface.ui-mobile .user-page-content .module-card{overflow:hidden}
 body.public-surface.ui-mobile .key-workspace-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px;width:100%}
 body.public-surface.ui-mobile .key-workspace-grid>.card{width:100%!important;min-width:0!important;max-width:100%!important;padding:14px!important}
 body.public-surface.ui-mobile .key-command-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.public-surface.ui-mobile .key-command-grid article{padding:10px;border-radius:14px}
 body.public-surface.ui-mobile .key-command-grid strong{font-size:22px}
 body.public-surface.ui-mobile .key-command-grid span{font-size:9px}
 body.public-surface.ui-mobile .key-create-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px;padding:12px}
 body.public-surface.ui-mobile .key-create-grid button{grid-column:1;min-height:48px;width:100%}
 body.public-surface.ui-mobile .key-pool-item{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"info" "control" "scope" "actions"!important;gap:10px;padding:13px}
 body.public-surface.ui-mobile .key-pool-switch-form{grid-template-columns:minmax(0,1fr);gap:8px}
 body.public-surface.ui-mobile .key-pool-switch-form button{width:100%;min-height:44px}
 body.public-surface.ui-mobile .key-model-scope{padding:12px}
 body.public-surface.ui-mobile .pool-public-mini>summary{align-items:start}
 body.public-surface.ui-mobile .pool-public-mini>summary .badge{font-size:10px}
 body.public-surface.ui-mobile .aurora-home-hero{padding:20px 16px;border-radius:22px}
 body.public-surface.ui-mobile .home-pool-grid{grid-template-columns:minmax(0,1fr)}
 body.public-surface.ui-mobile .hero-stat-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
 body.public-surface.ui-mobile .key-command-grid{grid-template-columns:1fr}
 body.public-surface.ui-mobile .hero-stat-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.public-surface.ui-mobile .aurora-home-hero .hero-copy h1{font-size:clamp(36px,10vw,46px)}
 body.public-surface.ui-mobile .user-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Accessibility and operator-configured no-animation modes take precedence. */
@media (prefers-reduced-motion:reduce){
 body.public-surface *,body.public-surface *::before,body.public-surface *::after{animation:none!important;transition-duration:0s!important;scroll-behavior:auto!important}
}
html[data-desktop-motion="off"] body.public-surface.ui-desktop *,
html[data-mobile-motion="off"] body.public-surface.ui-mobile *{animation:none!important;transition-duration:0s!important}