* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* surfaces */
--bg: #0a0c12;
--bg-2: #0f1218;
--surf: rgba(255, 255, 255, .04);
--surf-2: rgba(255, 255, 255, .065);
--surf-3: rgba(255, 255, 255, .09);
--line: rgba(255, 255, 255, .08);
--line-2: rgba(255, 255, 255, .14);
/* text */
--ink: #f4f6fb;
--ink-2: #c3c9d6;
--ink-3: #8a92a4;
--ink-4: #5b6275;
/* accents */
--cyan: #5eead4;
--teal: #22d3ee;
--pink: #fb7185;
--amber: #fbbf24;
--green: #34d399;
--red: #f87171;
--blue: #60a5fa;
/* type */
--serif: "Instrument Serif", Georgia, "Noto Serif SC", serif;
--sans: "Manrope", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* misc */
--r-sm: 10px;
--r: 16px;
--r-lg: 22px;
--shadow-1: 0 18px 40px rgba(0, 0, 0, .35);
--shadow-2: 0 30px 80px rgba(0, 0, 0, .50);
--glow-cyan: 0 0 0 1px rgba(94, 234, 212, .28), 0 14px 40px rgba(34, 211, 238, .20);
}
html, body { width: 100%; height: 100%; }
body {
min-height: 100vh;
color: var(--ink);
background:
radial-gradient(1100px 600px at 12% -5%, rgba(34, 211, 238, .08), transparent 60%),
radial-gradient(900px 500px at 95% 0%, rgba(251, 113, 133, .07), transparent 55%),
linear-gradient(180deg, #0c0f16 0%, var(--bg) 60%, #080a10 100%);
font: 500 14px/1.55 var(--sans);
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
body.modal-open, body.app-active { overflow: hidden; }
body.app-active::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: .55;
z-index: 1;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: transparent; cursor: pointer; color: inherit; }
input, select, textarea { border: 0; outline: 0; background: transparent; }
::placeholder { color: var(--ink-4); }
.hidden { display: none !important; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
kbd {
display: inline-block;
padding: 1px 6px;
font: 500 11px/1 var(--mono);
color: var(--ink-2);
background: var(--surf-2);
border: 1px solid var(--line);
border-radius: 6px;
}
/* ===========================================================
LOGIN
=========================================================== */
.auth-page {
position: fixed;
inset: 0;
display: grid;
place-items: center;
padding: 24px;
overflow: hidden;
background: #03060d;
z-index: 5;
}
.hyperspeed-login {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hyperspeed-login canvas { width: 100% !important; height: 100% !important; display: block; }
.hyperspeed-login::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 60%, transparent 0, rgba(3, 6, 13, .55) 60%, rgba(3, 6, 13, .92) 100%);
pointer-events: none;
}
.auth-grain {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: .4;
}
.auth-stage {
position: relative;
z-index: 2;
width: min(520px, 100%);
opacity: 0;
transform: translateY(14px) scale(.985);
will-change: transform, opacity;
}
.auth-card {
position: relative;
border-radius: var(--r-lg);
padding: 1px;
background:
linear-gradient(140deg, rgba(94, 234, 212, .35), rgba(94, 234, 212, 0) 45%, rgba(251, 113, 133, .25) 90%);
box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 60px rgba(34, 211, 238, .10);
}
.auth-card-inner {
position: relative;
border-radius: calc(var(--r-lg) - 1px);
padding: 28px 28px 24px;
background:
linear-gradient(180deg, rgba(20, 24, 34, .88), rgba(12, 15, 22, .92)),
rgba(8, 10, 16, .92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
overflow: hidden;
}
.auth-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.auth-mark {
display: inline-flex;
align-items: center;
gap: 8px;
font: 500 11px/1 var(--mono);
color: var(--ink-3);
letter-spacing: .12em;
text-transform: uppercase;
}
.auth-mark b { color: var(--ink); font-weight: 700; }
.auth-mark i {
width: 8px;
height: 8px;
background: var(--cyan);
border-radius: 2px;
box-shadow: 0 0 14px var(--cyan);
}
.auth-pill {
padding: 5px 10px;
font: 500 10.5px/1 var(--mono);
letter-spacing: .1em;
color: var(--cyan);
background: rgba(94, 234, 212, .08);
border: 1px solid rgba(94, 234, 212, .22);
border-radius: 999px;
text-transform: uppercase;
}
.auth-title {
margin: 28px 0 22px;
}
.auth-title h1 {
font: 500 clamp(36px, 6vw, 52px)/1.02 var(--sans);
letter-spacing: -.025em;
color: var(--ink);
}
.auth-title h1 em {
font-size: 1.06em;
color: var(--cyan);
}
.auth-title h1 span {
display: inline-block;
padding-right: 4px;
border-bottom: 2px solid var(--pink);
}
.auth-sub {
margin-top: 10px;
color: var(--ink-3);
font-size: 13px;
}
.auth-input { margin-bottom: 14px; }
.auth-input label {
display: block;
margin-bottom: 8px;
font: 600 10px/1 var(--mono);
letter-spacing: .18em;
color: var(--ink-4);
}
.auth-input-row {
display: flex;
align-items: center;
gap: 8px;
padding: 0 4px 0 14px;
height: 56px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, .03);
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.auth-input-row:focus-within {
border-color: rgba(94, 234, 212, .55);
background: rgba(94, 234, 212, .04);
box-shadow: 0 0 0 4px rgba(94, 234, 212, .08), 0 0 40px rgba(34, 211, 238, .14);
}
.auth-input-prefix {
font: 600 14px/1 var(--mono);
color: var(--ink-4);
}
.auth-input-row input {
flex: 1;
height: 100%;
min-width: 0;
font: 600 15px/1 var(--mono);
letter-spacing: .02em;
color: var(--ink);
}
.auth-eye {
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: var(--ink-3);
border-radius: 10px;
background: transparent;
transition: color .2s ease, background .2s ease;
}
.auth-eye:hover { color: var(--ink); background: var(--surf-2); }
.auth-actions { margin-top: 4px; }
.auth-submit {
width: 100%;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 0 22px;
border-radius: 14px;
font: 700 14px/1 var(--sans);
letter-spacing: .04em;
color: #06121a;
background: linear-gradient(180deg, #7df0db, var(--cyan) 60%, #34c5b8);
box-shadow:
0 14px 30px rgba(94, 234, 212, .35),
0 0 0 1px rgba(94, 234, 212, .35) inset;
transition: transform .2s ease, box-shadow .2s ease;
}
.auth-submit:hover {
transform: translateY(-1px);
box-shadow:
0 20px 38px rgba(94, 234, 212, .45),
0 0 0 1px rgba(94, 234, 212, .55) inset;
}
.auth-submit:disabled { opacity: .6; cursor: progress; }
.auth-submit-arrow { font-family: var(--serif); font-size: 22px; line-height: 1; }
.spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(6, 18, 26, .25);
border-top-color: #06121a;
border-radius: 50%;
animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.auth-foot {
margin-top: 22px;
padding-top: 14px;
border-top: 1px dashed var(--line);
display: flex;
flex-wrap: wrap;
gap: 14px;
font: 500 11px/1 var(--mono);
letter-spacing: .08em;
color: var(--ink-4);
}
.auth-foot span { display: inline-flex; align-items: center; gap: 6px; }
.auth-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.auth-foot .dot.ok { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.auth-foot .dot.blue { background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.auth-foot .dot.pink { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.alert {
margin-top: 14px;
padding: 10px 12px;
font-size: 12px;
color: #fecaca;
background: rgba(248, 113, 113, .10);
border: 1px solid rgba(248, 113, 113, .25);
border-radius: 12px;
}
/* ===========================================================
APP SHELL
=========================================================== */
.app-page {
position: relative;
z-index: 2;
width: 100vw;
height: 100vh;
height: 100dvh;
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
background: transparent;
}
.sidebar {
height: 100vh;
height: 100dvh;
padding: 22px 18px 18px;
display: flex;
flex-direction: column;
gap: 22px;
border-right: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 30%),
rgba(10, 12, 18, .65);
backdrop-filter: blur(16px);
}
.side-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 6px;
}
.side-brand i {
width: 34px;
height: 34px;
border-radius: 10px;
background:
linear-gradient(135deg, var(--cyan) 0%, var(--blue) 60%, var(--pink) 110%);
box-shadow: 0 0 22px rgba(94, 234, 212, .35), inset 0 -6px 12px rgba(0,0,0,.2);
position: relative;
}
.side-brand i::after {
content: "✦";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #06121a;
font-size: 18px;
font-weight: 800;
}
.side-brand strong {
display: block;
font: 800 16px/1 var(--sans);
letter-spacing: -.01em;
}
.side-brand span {
display: block;
margin-top: 4px;
font: 500 10.5px/1 var(--mono);
color: var(--ink-4);
letter-spacing: .12em;
text-transform: uppercase;
}
.side-nav { display: grid; gap: 4px; }
.side-link {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
color: var(--ink-3);
font: 600 13.5px/1 var(--sans);
text-align: left;
transition: color .22s ease, background .22s ease;
}
.side-link svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .82; }
.side-link:hover { color: var(--ink); background: var(--surf); }
.side-link.active {
color: var(--ink);
background: var(--surf-2);
}
.side-link.active::before {
content: "";
position: absolute;
left: -18px;
top: 6px;
bottom: 6px;
width: 2px;
border-radius: 999px;
background: var(--cyan);
box-shadow: 0 0 12px var(--cyan);
}
.side-spacer { flex: 1; }
.side-key {
padding: 14px;
border-radius: 14px;
border: 1px solid var(--line);
background: var(--surf);
}
.side-key small {
display: block;
font: 600 9.5px/1 var(--mono);
letter-spacing: .18em;
color: var(--ink-4);
text-transform: uppercase;
}
.side-key strong {
display: block;
margin: 8px 0 12px;
font: 600 12.5px/1.3 var(--mono);
color: var(--ink);
word-break: break-all;
}
.side-clear {
width: 100%;
padding: 8px 10px;
font: 600 11.5px/1 var(--sans);
color: var(--pink);
border: 1px solid rgba(251, 113, 133, .26);
border-radius: 10px;
background: rgba(251, 113, 133, .06);
transition: background .2s ease;
}
.side-clear:hover { background: rgba(251, 113, 133, .14); }
/* main column */
.main {
height: 100vh;
height: 100dvh;
min-width: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
background:
radial-gradient(900px 500px at 80% -10%, rgba(34, 211, 238, .05), transparent 55%),
radial-gradient(1100px 600px at -10% 110%, rgba(251, 113, 133, .04), transparent 60%);
}
.topbar {
height: 64px;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid var(--line);
background: rgba(10, 12, 18, .35);
backdrop-filter: blur(14px);
}
.topbar-title h2 {
font: 600 19px/1.1 var(--sans);
letter-spacing: -.01em;
}
.topbar-title p {
margin-top: 2px;
font: 500 11.5px/1 var(--mono);
color: var(--ink-4);
letter-spacing: .08em;
text-transform: uppercase;
}
.topbar-tools {
display: flex;
align-items: center;
gap: 8px;
}
.chip {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 12px;
font: 500 11px/1 var(--mono);
letter-spacing: .08em;
color: var(--ink-2);
background: var(--surf-2);
border: 1px solid var(--line);
border-radius: 999px;
text-transform: uppercase;
}
.chip-mini {
display: inline-flex;
align-items: center;
padding: 4px 9px;
font: 600 10.5px/1 var(--mono);
letter-spacing: .04em;
color: var(--ink-2);
background: var(--surf-2);
border: 1px solid var(--line);
border-radius: 999px;
}
.tool-btn {
width: 36px;
height: 36px;
display: grid;
place-items: center;
color: var(--ink-2);
background: var(--surf);
border: 1px solid var(--line);
border-radius: 10px;
transition: color .2s, background .2s, transform .2s;
}
.tool-btn:hover { color: var(--ink); background: var(--surf-2); transform: translateY(-1px); }
.tool-btn.danger { color: var(--pink); }
.tool-btn.danger:hover { background: rgba(251, 113, 133, .12); }
.content {
min-height: 0;
height: 100%;
padding: 24px 28px 32px;
overflow: auto;
}
.content::-webkit-scrollbar { width: 8px; height: 8px; }
.content::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 999px; }
.view { display: none; }
.view.active { display: block; }
/* ===========================================================
BUTTONS / CHIPS / INPUTS
=========================================================== */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 18px;
border-radius: 11px;
font: 700 13px/1 var(--sans);
letter-spacing: .03em;
color: #06121a;
background: linear-gradient(180deg, #7df0db, var(--cyan));
box-shadow: 0 12px 26px rgba(94, 234, 212, .28), inset 0 1px 0 rgba(255,255,255,.3);
transition: transform .2s, box-shadow .2s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 32px rgba(94, 234, 212, .38); }
.btn-primary.full { width: 100%; }
.btn-primary.lg { height: 50px; font-size: 14px; border-radius: 13px; }
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 40px;
padding: 0 16px;
border-radius: 11px;
font: 600 13px/1 var(--sans);
color: var(--ink);
background: var(--surf);
border: 1px solid var(--line-2);
transition: background .2s, border-color .2s, transform .2s;
}
.btn-ghost:hover { background: var(--surf-2); border-color: var(--cyan); }
.btn-ghost.full { width: 100%; }
.btn-ghost.sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 9px; }
.link-btn {
font: 600 11.5px/1 var(--sans);
color: var(--cyan);
letter-spacing: .03em;
transition: opacity .2s;
}
.link-btn:hover { opacity: .7; }
.lbl {
display: block;
margin: 18px 0 8px;
font: 600 10.5px/1 var(--mono);
letter-spacing: .15em;
color: var(--ink-4);
text-transform: uppercase;
}
.input-line {
display: flex;
align-items: center;
gap: 8px;
padding: 0 6px 0 14px;
height: 46px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--surf);
transition: border-color .2s, background .2s;
}
.input-line:focus-within { border-color: var(--cyan); background: var(--surf-2); }
.input-line input {
flex: 1;
height: 100%;
min-width: 0;
font: 600 14px/1 var(--mono);
color: var(--ink);
}
.hint {
margin-top: 6px;
font-size: 11.5px;
color: var(--ink-4);
}
/* ===========================================================
DASHBOARD
=========================================================== */
.dash-hero {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: 20px;
margin-bottom: 20px;
}
.hero-balance, .hero-key, .card, .card-ledger, .card-ai-jump, .card-assets {
position: relative;
padding: 22px;
border-radius: var(--r);
background:
linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
rgba(255, 255, 255, .015);
border: 1px solid var(--line);
box-shadow: var(--shadow-1);
}
.hero-balance::after, .hero-key::after, .card::after, .card-ledger::after, .card-ai-jump::after, .card-assets::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 30%);
opacity: .65;
mix-blend-mode: overlay;
}
.hero-balance > *, .hero-key > *, .card > *, .card-ledger > *, .card-ai-jump > *, .card-assets > * {
position: relative;
}
.hero-balance {
display: flex;
flex-direction: column;
background:
radial-gradient(800px 320px at 0% 0%, rgba(94, 234, 212, .14), transparent 60%),
radial-gradient(600px 300px at 100% 100%, rgba(251, 113, 133, .10), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
border-color: rgba(94, 234, 212, .18);
overflow: hidden;
}
.hero-balance-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.hero-balance-head small {
display: block;
font: 600 11px/1 var(--mono);
letter-spacing: .14em;
color: var(--ink-3);
text-transform: uppercase;
}
.hero-balance-amount {
margin-top: 14px;
font: 500 clamp(46px, 5.6vw, 64px)/1 var(--sans);
font-family: var(--serif);
letter-spacing: -.025em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.hero-balance-sub {
margin-top: 8px;
font: 500 12.5px/1.5 var(--mono);
color: var(--ink-3);
}
.hero-bar { margin-top: 18px; }
.hero-bar-labels {
display: flex;
justify-content: space-between;
font: 500 11px/1 var(--mono);
color: var(--ink-3);
margin-bottom: 8px;
letter-spacing: .04em;
}
.hero-bar-track {
height: 6px;
border-radius: 999px;
background: rgba(255,255,255,.06);
overflow: hidden;
}
.hero-bar-track i {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, var(--cyan), var(--blue));
box-shadow: 0 0 14px var(--cyan);
transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.hero-balance-actions {
margin-top: auto;
padding-top: 18px;
display: flex;
gap: 10px;
}
.hero-key header small {
display: block;
font: 600 11px/1 var(--mono);
letter-spacing: .14em;
color: var(--ink-3);
text-transform: uppercase;
}
.hero-key-rows {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 14px;
}
.hero-key-rows > div {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
border-radius: 11px;
background: var(--surf);
border: 1px solid var(--line);
}
.hero-key-rows .row-wide { grid-column: 1 / -1; }
.hero-key-rows dt {
font: 600 10px/1 var(--mono);
letter-spacing: .14em;
color: var(--ink-4);
text-transform: uppercase;
}
.hero-key-rows dd {
font: 600 14px/1.3 var(--sans);
color: var(--ink);
word-break: break-word;
}
.hero-key-meta {
margin-top: 14px;
font: 500 11.5px/1.6 var(--mono);
color: var(--ink-4);
word-break: break-all;
}
/* dashboard second row */
.dash-row {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, .95fr);
gap: 20px;
}
.card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 16px;
}
.card-head strong {
font: 700 14px/1.2 var(--sans);
color: var(--ink);
}
.card-head span {
display: block;
margin-top: 4px;
font: 500 10.5px/1 var(--mono);
letter-spacing: .12em;
color: var(--ink-4);
text-transform: uppercase;
}
/* ledger mini (home) — actually shows the rows */
.card-ledger { padding: 22px 0 14px 0; }
.card-ledger .card-head { padding: 0 22px; margin-bottom: 14px; }
.ledger-mini {
display: flex;
flex-direction: column;
}
.ledger-mini .empty { padding: 30px 22px; }
.ledger-mini .lrow {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
padding: 11px 22px;
border-top: 1px solid var(--line);
transition: background .2s;
}
.ledger-mini .lrow:hover { background: var(--surf); }
.ledger-mini .lrow:first-of-type { border-top: 0; }
.lrow .ltag {
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
padding: 0 9px;
font: 600 10.5px/1 var(--mono);
letter-spacing: .06em;
color: var(--cyan);
background: rgba(94, 234, 212, .10);
border: 1px solid rgba(94, 234, 212, .26);
border-radius: 999px;
}
.ledger-mini .ltag,
.ledger-modal-body .ltag,
.lrow.lrow-full .lmain small {
display: none !important;
}
.lrow .ltag.spend { color: var(--pink); background: rgba(251, 113, 133, .08); border-color: rgba(251, 113, 133, .26); }
.lrow .ltag.refund { color: var(--amber); background: rgba(251, 191, 36, .08); border-color: rgba(251, 191, 36, .26); }
.lrow .ltag.recharge{ color: var(--green); background: rgba(52, 211, 153, .08); border-color: rgba(52, 211, 153, .26); }
.lrow .lmain { min-width: 0; }
.lrow .lmain strong {
display: block;
font: 600 13px/1.3 var(--sans);
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lrow .lmain small {
display: block;
margin-top: 3px;
font: 500 11px/1 var(--mono);
color: var(--ink-4);
letter-spacing: .02em;
}
.lrow .lamt {
font: 700 14px/1 var(--mono);
text-align: right;
}
.lrow .lamt.plus { color: var(--green); }
.lrow .lamt.minus { color: var(--pink); }
/* AI jump card */
.card-ai-jump {
cursor: pointer;
display: flex;
flex-direction: column;
gap: 14px;
background:
radial-gradient(500px 220px at 100% 0%, rgba(34, 211, 238, .12), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
transition: border-color .25s ease, transform .25s ease;
}
.card-ai-jump:hover { border-color: rgba(94, 234, 212, .35); transform: translateY(-2px); }
.card-ai-jump .card-arrow {
font-family: var(--serif);
font-size: 26px;
line-height: 1;
color: var(--cyan);
}
.card-copy {
font-size: 13px;
line-height: 1.65;
color: var(--ink-2);
}
.ai-jump-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ai-jump-chips span {
padding: 5px 10px;
font: 600 11px/1 var(--mono);
letter-spacing: .02em;
color: var(--cyan);
background: rgba(94, 234, 212, .07);
border: 1px solid rgba(94, 234, 212, .22);
border-radius: 999px;
}
/* assets mini */
.card-assets .asset-mini {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.asset-mini img, .asset-mini .ph {
width: 100%;
aspect-ratio: 1;
border-radius: 12px;
object-fit: cover;
border: 1px solid var(--line);
background: var(--surf);
}
.asset-mini .ph {
display: grid;
place-items: center;
color: var(--ink-3);
font: 600 11px/1 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
}
.asset-mini .empty { grid-column: 1 / -1; padding: 20px; text-align: center; color: var(--ink-4); font-size: 12px; }
/* asset center full page */
.asset-center-view.active {
display: block;
}
.asset-center-shell {
display: grid;
gap: 18px;
}
.asset-center-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
padding: 24px;
border-radius: var(--r);
border: 1px solid rgba(94, 234, 212, .18);
background:
radial-gradient(760px 360px at 0% 0%, rgba(94, 234, 212, .14), transparent 60%),
radial-gradient(620px 320px at 100% 100%, rgba(251, 113, 133, .10), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
box-shadow: var(--shadow-1);
}
.asset-center-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 36%);
opacity: .55;
}
.asset-center-hero > * { position: relative; }
.asset-kicker {
display: inline-flex;
margin-bottom: 10px;
font: 700 10px/1 var(--mono);
letter-spacing: .18em;
color: var(--cyan);
text-transform: uppercase;
}
.asset-center-title h3 {
font: 700 clamp(34px, 5vw, 58px)/.95 var(--sans);
letter-spacing: -.035em;
}
.asset-center-title h3 em {
color: var(--cyan);
}
.asset-center-title p {
max-width: 680px;
margin-top: 12px;
color: var(--ink-3);
font-size: 13.5px;
line-height: 1.7;
}
.asset-center-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
/* docs center */
.docs-center-shell {
display: grid;
gap: 18px;
}
.docs-center-hero,
.docs-section-card,
.docs-card {
border: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
rgba(255,255,255,.015);
box-shadow: var(--shadow-1);
}
.docs-center-hero {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
padding: 24px;
border-radius: var(--r);
}
.docs-kicker {
display: inline-flex;
margin-bottom: 10px;
font: 700 10px/1 var(--mono);
letter-spacing: .18em;
color: var(--cyan);
text-transform: uppercase;
}
.docs-center-hero h3 {
font: 700 clamp(34px, 5vw, 56px)/.95 var(--sans);
letter-spacing: -.035em;
}
.docs-center-hero p {
max-width: 680px;
margin-top: 12px;
color: var(--ink-3);
font-size: 13.5px;
line-height: 1.7;
}
.docs-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.docs-actions a,
.docs-actions button,
.docs-card {
text-decoration: none;
}
.docs-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.docs-card {
min-height: 118px;
padding: 16px;
border-radius: 14px;
color: var(--ink);
transition: transform .2s ease, border-color .2s ease;
}
.docs-card:hover {
transform: translateY(-2px);
border-color: rgba(94, 234, 212, .35);
}
.docs-card small {
display: block;
margin-bottom: 12px;
font: 700 10px/1 var(--mono);
letter-spacing: .14em;
color: var(--ink-4);
text-transform: uppercase;
}
.docs-card strong {
display: block;
font: 700 15px/1.45 var(--sans);
word-break: break-word;
}
.docs-section-card {
padding: 20px;
border-radius: var(--r);
}
.docs-param-table {
display: grid;
gap: 8px;
margin-top: 14px;
}
.docs-param-table > div {
display: grid;
grid-template-columns: 140px 110px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 12px;
border-radius: 12px;
background: var(--surf);
border: 1px solid var(--line);
}
.docs-param-table > div.head {
color: var(--ink);
font: 800 11px/1 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
}
.docs-param-table code,
.docs-param-table span:nth-child(2) {
color: var(--cyan);
font: 700 12px/1.3 var(--mono);
word-break: break-word;
}
.docs-param-table span:last-child {
color: var(--ink-3);
font-size: 12px;
line-height: 1.55;
}
.docs-route-list {
display: grid;
gap: 10px;
margin-top: 14px;
}
.docs-route-list div {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) minmax(160px, .8fr);
gap: 12px;
align-items: center;
padding: 12px;
border-radius: 12px;
background: var(--surf);
border: 1px solid var(--line);
}
.docs-route-list b {
color: var(--cyan);
font: 800 11px/1 var(--mono);
}
.docs-route-list code {
color: var(--ink);
font: 600 12px/1.4 var(--mono);
word-break: break-word;
}
.docs-route-list span {
color: var(--ink-3);
font-size: 12px;
}
.docs-code {
margin-top: 14px;
max-height: 360px;
overflow: auto;
padding: 16px;
border-radius: 14px;
color: #dbeafe;
background: #0f172a;
border: 1px solid rgba(255,255,255,.1);
font: 600 12px/1.75 var(--mono);
white-space: pre-wrap;
word-break: break-word;
}
/* docs v2 */
.docs-page {
display: flex;
flex-direction: column;
gap: 14px;
}
.docs-hero,
.docs-nav-panel,
.docs-main-panel .doc-panel,
.docs-base-card {
border: 1px solid rgba(37, 99, 235, .11);
background:
radial-gradient(720px 280px at 100% 0%, rgba(37, 99, 235, .10), transparent 62%),
rgba(255, 255, 255, .82);
box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-radius: 18px;
}
.docs-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 430px;
gap: 18px;
align-items: center;
padding: 22px;
}
.docs-kicker {
display: inline-flex;
margin: 0;
color: #64748b;
font: 900 12px/1 var(--sans);
letter-spacing: .04em;
text-transform: uppercase;
}
.docs-hero h3 {
margin-top: 9px;
color: #0f172a;
font: 900 30px/1.08 var(--sans);
letter-spacing: 0;
}
.docs-hero p,
.docs-main-panel .doc-panel > p {
max-width: 760px;
margin-top: 10px;
color: #64748b;
font-size: 14px;
line-height: 1.7;
}
.docs-download-panel {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.docs-base-card {
padding: 14px;
overflow: hidden;
}
.docs-actions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.docs-actions button,
.docs-export-grid button,
.docs-request-top > button,
.docs-model-toolbar button,
.docs-code-head button,
.docs-nav-panel button {
border: 0;
cursor: pointer;
font-weight: 900;
}
.docs-actions button {
min-height: 38px;
padding: 0 10px;
border-radius: 12px;
color: #2563eb;
background: rgba(37, 99, 235, .08);
font-size: 12px;
}
.docs-actions button.primary,
.docs-export-grid button.primary {
color: #fff;
background: linear-gradient(135deg, #3b82f6, #2563eb);
box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
}
.docs-layout {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 14px;
align-items: start;
}
.docs-nav-panel {
position: sticky;
top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
}
.docs-nav-panel button {
min-height: 42px;
padding: 0 12px;
border-radius: 12px;
color: #64748b;
background: transparent;
display: flex;
align-items: center;
gap: 9px;
text-align: left;
font-size: 13px;
}
.docs-nav-panel button span {
width: 26px;
color: #2563eb;
font: 900 11px/1 var(--mono);
}
.docs-nav-panel button.active {
color: #1d4ed8;
background: rgba(37, 99, 235, .10);
}
.docs-main-panel {
min-width: 0;
}
.docs-main-panel .doc-panel {
display: none;
padding: 20px;
}
.docs-main-panel .doc-panel.active {
display: block;
}
.docs-main-panel .doc-panel h4 {
margin: 0;
color: #0f172a;
font: 900 22px/1.2 var(--sans);
letter-spacing: 0;
}
.doc-step-grid,
.docs-auth-grid,
.docs-model-grid,
.docs-export-grid {
display: grid;
gap: 12px;
margin-top: 16px;
}
.doc-step-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.doc-step-grid.two,
.docs-auth-grid,
.docs-export-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.doc-step-grid > div,
.docs-model-card,
.docs-auth-card,
.docs-export-grid button {
min-width: 0;
padding: 15px;
border-radius: 14px;
background: rgba(248, 250, 252, .92);
border: 1px solid rgba(15, 23, 42, .055);
}
.doc-step-grid span,
.docs-model-card small {
color: #2563eb;
font: 900 12px/1 var(--mono);
letter-spacing: .04em;
}
.doc-step-grid strong,
.docs-model-card strong,
.docs-export-grid strong {
display: block;
margin-top: 8px;
color: #0f172a;
font: 900 15px/1.35 var(--sans);
}
.doc-step-grid p,
.docs-model-card span,
.docs-export-grid span {
display: block;
margin-top: 8px;
color: #64748b;
font-size: 13px;
line-height: 1.55;
}
.docs-model-toolbar {
margin-top: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px;
border-radius: 14px;
background: rgba(248, 250, 252, .9);
border: 1px solid rgba(15, 23, 42, .055);
color: #64748b;
font-size: 13px;
}
.docs-model-toolbar button,
.docs-request-top > button {
min-height: 34px;
padding: 0 14px;
border-radius: 11px;
color: #2563eb;
background: rgba(37, 99, 235, .08);
font-size: 12px;
}
.docs-model-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.docs-empty {
grid-column: 1 / -1;
padding: 22px;
text-align: center;
color: #64748b;
border-radius: 14px;
background: rgba(248, 250, 252, .9);
border: 1px dashed rgba(37, 99, 235, .22);
}
.docs-request-list {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 16px;
}
.docs-request-card {
padding: 16px;
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, .06);
background:
radial-gradient(680px 260px at 100% 0%, rgba(37, 99, 235, .09), transparent 62%),
rgba(255, 255, 255, .94);
box-shadow: 0 14px 34px rgba(15, 23, 42, .045);
overflow: hidden;
}
.docs-request-top {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
}
.docs-request-title {
display: flex;
align-items: center;
gap: 9px;
}
.docs-request-title .method {
min-width: 52px;
height: 26px;
padding: 0 10px;
border-radius: 999px;
color: #fff;
background: #2563eb;
display: inline-flex;
align-items: center;
justify-content: center;
font: 900 11px/1 var(--mono);
}
.docs-request-title .method.get {
background: #10b981;
}
.docs-request-title strong {
color: #0f172a;
font: 900 17px/1.3 var(--sans);
}
.docs-request-top p {
margin-top: 8px;
color: #64748b;
font-size: 13px;
line-height: 1.7;
}
.docs-code-wrap {
margin-top: 12px;
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, .06);
overflow: hidden;
background: #0f172a;
}
.docs-code-head {
min-height: 38px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0 13px;
background:
linear-gradient(90deg, rgba(37, 99, 235, .20), rgba(37, 99, 235, .04)),
#10172a;
border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.docs-code-head span {
color: #cbd5e1;
font: 900 12px/1 var(--sans);
}
.docs-code-head button {
color: #93c5fd;
background: transparent;
font-size: 12px;
}
.docs-code {
margin: 0;
max-height: 360px;
padding: 14px;
color: #e5e7eb;
background: #0f172a;
border: 0;
border-radius: 0;
font: 600 12px/1.7 var(--mono);
white-space: pre-wrap;
word-break: break-word;
overflow: auto;
}
.docs-code.small {
max-height: 120px;
}
.docs-route-table {
display: grid;
gap: 8px;
margin-top: 16px;
}
.docs-route-table > div {
display: grid;
grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 12px;
border-radius: 13px;
background: rgba(248, 250, 252, .92);
color: #64748b;
font-size: 13px;
}
.docs-route-table.compact > div {
grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr);
}
.docs-route-table .head {
color: #0f172a;
font-weight: 900;
}
.docs-route-table code {
display: block;
padding: 10px;
border-radius: 10px;
color: #dbeafe;
background: #0f172a;
font: 600 12px/1.5 var(--mono);
word-break: break-word;
}
.docs-export-grid button {
text-align: left;
color: inherit;
}
@media (max-width: 1080px) {
.docs-hero,
.docs-layout {
grid-template-columns: 1fr;
}
.docs-nav-panel {
position: static;
flex-direction: row;
overflow-x: auto;
}
.docs-nav-panel button {
flex: 0 0 auto;
}
.docs-model-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.docs-page {
gap: 10px;
}
.docs-hero,
.docs-main-panel .doc-panel,
.docs-nav-panel,
.docs-request-card {
border-radius: 16px;
}
.docs-hero,
.docs-main-panel .doc-panel {
padding: 16px;
}
.docs-hero h3 {
font-size: 24px;
}
.docs-actions,
.doc-step-grid,
.doc-step-grid.two,
.docs-auth-grid,
.docs-model-grid,
.docs-export-grid {
grid-template-columns: 1fr;
}
.docs-request-top {
flex-direction: column;
}
.docs-request-top > button {
width: 100%;
}
.docs-route-table > div,
.docs-route-table.compact > div {
grid-template-columns: 1fr;
}
.docs-code {
max-height: 420px;
font-size: 11px;
}
}
.asset-summary-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.asset-summary-strip > div,
.asset-toolbar,
.asset-card-full,
.asset-pager,
.asset-empty {
border: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
rgba(255,255,255,.015);
box-shadow: var(--shadow-1);
}
.asset-summary-strip > div {
padding: 14px 16px;
border-radius: 14px;
}
.asset-summary-strip small {
display: block;
margin-bottom: 8px;
font: 700 10px/1 var(--mono);
letter-spacing: .14em;
color: var(--ink-4);
text-transform: uppercase;
}
.asset-summary-strip b {
font: 800 18px/1.1 var(--sans);
color: var(--ink);
}
.asset-toolbar {
display: grid;
grid-template-columns: minmax(240px, 1fr) 160px 160px auto;
gap: 10px;
align-items: end;
padding: 14px;
border-radius: var(--r);
}
.asset-search,
.asset-select {
display: grid;
gap: 6px;
}
.asset-search label,
.asset-select label {
font: 700 9.5px/1 var(--mono);
letter-spacing: .16em;
color: var(--ink-4);
}
.asset-search input,
.asset-select select {
width: 100%;
height: 40px;
padding: 0 12px;
border-radius: 11px;
color: var(--ink);
background: var(--surf-2);
border: 1px solid var(--line);
}
.asset-select select {
padding-right: 30px;
appearance: none;
cursor: pointer;
}
.asset-search input:focus,
.asset-select select:focus {
border-color: var(--cyan);
}
.asset-grid-full {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.asset-card-full {
min-width: 0;
overflow: hidden;
border-radius: var(--r);
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.asset-card-full:hover {
transform: translateY(-3px);
border-color: rgba(94, 234, 212, .35);
box-shadow: var(--shadow-2);
}
.asset-card-media {
position: relative;
aspect-ratio: 4 / 3;
background: rgba(255,255,255,.04);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.asset-card-media img,
.asset-card-media video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.asset-audio,
.asset-file-ph {
width: 100%;
height: 100%;
display: grid;
place-items: center;
gap: 10px;
text-align: center;
color: var(--ink-3);
background:
radial-gradient(260px 160px at 50% 20%, rgba(94, 234, 212, .12), transparent 70%),
var(--surf);
}
.asset-audio audio {
width: 82%;
}
.asset-audio span,
.asset-file-ph b {
font: 800 12px/1 var(--mono);
letter-spacing: .18em;
color: var(--cyan);
}
.asset-file-ph span {
font: 700 11px/1 var(--mono);
color: var(--ink-4);
}
.asset-card-body {
padding: 14px;
}
.asset-card-top,
.asset-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.asset-kind,
.asset-status {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 9px;
border-radius: 999px;
font: 800 9.5px/1 var(--mono);
letter-spacing: .08em;
border: 1px solid var(--line);
background: var(--surf);
color: var(--ink-3);
}
.asset-kind.image { color: var(--cyan); border-color: rgba(94, 234, 212, .28); background: rgba(94, 234, 212, .07); }
.asset-kind.video { color: var(--pink); border-color: rgba(251, 113, 133, .26); background: rgba(251, 113, 133, .07); }
.asset-kind.audio { color: var(--amber); border-color: rgba(251, 191, 36, .28); background: rgba(251, 191, 36, .08); }
.asset-status.completed { color: var(--green); }
.asset-status.processing { color: var(--amber); }
.asset-status.failed { color: var(--red); }
.asset-card-body strong {
display: block;
margin-top: 12px;
font: 800 14px/1.35 var(--sans);
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.asset-card-body p {
min-height: 42px;
margin-top: 6px;
color: var(--ink-3);
font-size: 12.5px;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.asset-card-meta {
margin-top: 12px;
font: 600 10.5px/1.2 var(--mono);
color: var(--ink-4);
}
.asset-card-meta span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.asset-open {
margin-top: 12px;
display: inline-flex;
width: 100%;
height: 36px;
align-items: center;
justify-content: center;
border-radius: 10px;
font: 800 12px/1 var(--sans);
color: var(--ink);
background: var(--surf);
border: 1px solid var(--line-2);
text-decoration: none;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.asset-open:hover {
transform: translateY(-1px);
border-color: var(--cyan);
background: rgba(94, 234, 212, .08);
}
.asset-open.disabled {
opacity: .55;
}
.asset-empty {
grid-column: 1 / -1;
display: grid;
place-items: center;
min-height: 260px;
padding: 32px;
border-radius: var(--r);
text-align: center;
}
.asset-empty b {
display: block;
margin-bottom: 8px;
font: 800 18px/1 var(--sans);
}
.asset-empty span {
color: var(--ink-4);
font-size: 13px;
}
.asset-pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-radius: var(--r);
color: var(--ink-3);
font: 700 11px/1 var(--mono);
}
.asset-pager .pager {
display: flex;
align-items: center;
gap: 8px;
}
.asset-mini video {
width: 100%;
aspect-ratio: 1;
border-radius: 12px;
object-fit: cover;
border: 1px solid var(--line);
background: var(--surf);
}
/* ===========================================================
AI TEST PAGE
=========================================================== */
.ai-view.active {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
gap: 20px;
height: 100%;
min-height: 0;
}
.ai-shell {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto auto auto;
min-height: 0;
padding: 18px;
border-radius: var(--r);
border: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
box-shadow: var(--shadow-1);
}
.ai-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 4px 4px 14px;
border-bottom: 1px solid var(--line);
margin-bottom: 14px;
}
.ai-head-left strong {
display: block;
font: 700 15px/1 var(--sans);
}
.ai-head-left span {
display: block;
margin-top: 4px;
font: 500 11px/1 var(--mono);
letter-spacing: .1em;
color: var(--ink-4);
text-transform: uppercase;
}
.ai-head-right {
display: flex;
align-items: flex-end;
gap: 10px;
}
.ai-select {
display: flex;
flex-direction: column;
gap: 4px;
}
.ai-select label {
font: 600 9.5px/1 var(--mono);
letter-spacing: .15em;
color: var(--ink-4);
text-transform: uppercase;
}
.ai-select select {
height: 36px;
padding: 0 28px 0 12px;
font: 600 12.5px/1 var(--sans);
color: var(--ink);
background:
var(--surf-2)
url("data:image/svg+xml;utf8,")
no-repeat right 10px center;
border: 1px solid var(--line);
border-radius: 10px;
appearance: none;
cursor: pointer;
}
.ai-select select:focus { border-color: var(--cyan); }
.ai-media-controls {
display: flex;
gap: 8px;
}
/* chat log */
.ai-chat {
min-height: 0;
overflow: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 8px 4px;
}
.ai-chat::-webkit-scrollbar { width: 8px; }
.ai-chat::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 999px; }
.ai-msg {
position: relative;
max-width: 78%;
padding: 14px 16px;
border-radius: 14px;
font-size: 13.5px;
line-height: 1.65;
border: 1px solid var(--line);
background: var(--surf);
}
.ai-msg.user {
align-self: flex-end;
border-color: rgba(94, 234, 212, .28);
background: linear-gradient(180deg, rgba(94, 234, 212, .14), rgba(94, 234, 212, .05));
}
.ai-msg.assistant {
align-self: flex-start;
}
.ai-msg.is-error {
border-color: rgba(248, 113, 113, .28);
background: rgba(248, 113, 113, .08);
color: #fecaca;
}
.ai-msg-tag {
display: inline-block;
margin-bottom: 6px;
font: 700 9.5px/1 var(--mono);
letter-spacing: .18em;
color: var(--ink-4);
text-transform: uppercase;
}
.ai-msg.user .ai-msg-tag { color: var(--cyan); }
.ai-msg p {
white-space: pre-wrap;
word-break: break-word;
color: var(--ink);
}
/* attachments strip */
.ai-attachments {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 4px;
}
.ai-attachments:empty { display: none; }
.ai-attach-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 8px 6px 6px;
border-radius: 10px;
background: var(--surf-2);
border: 1px solid var(--line);
max-width: 220px;
}
.ai-attach-chip img,
.ai-attach-chip .ph {
width: 32px;
height: 32px;
border-radius: 7px;
object-fit: cover;
background: rgba(94, 234, 212, .12);
display: grid;
place-items: center;
color: var(--cyan);
font: 700 9px/1 var(--mono);
letter-spacing: .1em;
}
.ai-attach-chip b {
font: 600 12px/1 var(--sans);
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.ai-attach-chip small {
flex: 0 0 auto;
padding: 3px 6px;
border-radius: 999px;
font: 700 9px/1 var(--mono);
letter-spacing: .08em;
color: var(--cyan);
background: rgba(94, 234, 212, .10);
border: 1px solid rgba(94, 234, 212, .18);
}
.ai-attach-chip.is-uploading {
border-color: rgba(96, 165, 250, .35);
}
.ai-attach-chip.is-uploading small {
color: var(--blue);
background: rgba(96, 165, 250, .10);
border-color: rgba(96, 165, 250, .20);
}
.ai-attach-chip.is-failed {
border-color: rgba(248, 113, 113, .38);
}
.ai-attach-chip.is-failed small {
color: var(--red);
background: rgba(248, 113, 113, .10);
border-color: rgba(248, 113, 113, .22);
}
.ai-attach-chip button {
width: 22px;
height: 22px;
border-radius: 50%;
color: var(--ink-3);
background: rgba(0, 0, 0, .25);
font-size: 13px;
transition: color .2s, background .2s;
}
.ai-attach-chip button:hover { color: var(--ink); background: rgba(251, 113, 133, .2); }
/* composer */
.ai-composer {
margin-top: 10px;
padding: 8px 8px 8px 12px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
border-radius: 16px;
border: 1px solid var(--line);
background: var(--surf-2);
transition: border-color .25s, box-shadow .25s, background .25s;
}
.ai-composer:focus-within {
border-color: rgba(94, 234, 212, .45);
background: rgba(94, 234, 212, .04);
box-shadow: 0 0 0 4px rgba(94, 234, 212, .06);
}
.ai-upload {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 11px;
color: var(--ink-3);
background: var(--surf);
border: 1px solid var(--line);
cursor: pointer;
transition: color .2s, background .2s, transform .2s;
}
.ai-upload:hover { color: var(--cyan); background: rgba(94, 234, 212, .08); transform: translateY(-1px); }
.ai-composer textarea {
min-height: 40px;
max-height: 180px;
resize: none;
padding: 10px 6px;
font: 500 14px/1.5 var(--sans);
color: var(--ink);
}
.ai-send {
height: 40px;
padding: 0 16px;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 11px;
font: 700 13px/1 var(--sans);
color: #06121a;
background: linear-gradient(180deg, #7df0db, var(--cyan));
box-shadow: 0 10px 24px rgba(94, 234, 212, .28);
transition: transform .2s, box-shadow .2s;
}
.ai-send:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(94, 234, 212, .38); }
.ai-send:disabled { opacity: .6; cursor: progress; }
/* output side panel */
.ai-output {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
min-height: 0;
padding: 18px;
border-radius: var(--r);
border: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
box-shadow: var(--shadow-1);
}
.ai-output-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.ai-output-head strong { font: 700 14px/1 var(--sans); }
.ai-output-tabs {
display: inline-flex;
padding: 3px;
border-radius: 999px;
background: var(--surf);
border: 1px solid var(--line);
}
.ai-output-tabs .tab {
height: 26px;
padding: 0 12px;
border-radius: 999px;
font: 600 11px/1 var(--mono);
letter-spacing: .04em;
color: var(--ink-3);
transition: color .2s, background .2s;
}
.ai-output-tabs .tab.active {
color: #06121a;
background: var(--cyan);
}
.ai-output-list {
min-height: 0;
overflow: auto;
display: grid;
gap: 12px;
align-content: start;
padding-right: 4px;
}
.ai-output-card {
display: block;
overflow: hidden;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--surf);
color: var(--ink);
text-decoration: none;
}
.ai-output-card img,
.ai-output-card video {
width: 100%;
display: block;
background: #0a0c12;
max-height: 320px;
object-fit: contain;
}
.ai-output-link, .ai-output-text {
padding: 12px 14px;
font: 500 12px/1.6 var(--mono);
word-break: break-all;
white-space: pre-wrap;
}
/* ===========================================================
ANALYTICS
=========================================================== */
.stats-top {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 18px;
}
.stat-tile {
padding: 18px 20px;
border-radius: var(--r);
border: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.stat-tile small {
display: block;
font: 600 11px/1 var(--mono);
letter-spacing: .14em;
color: var(--ink-4);
text-transform: uppercase;
}
.stat-tile b {
display: block;
margin-top: 12px;
font: 500 28px/1 var(--serif);
color: var(--ink);
}
.stat-tile.accent {
background:
radial-gradient(400px 200px at 80% 0%, rgba(251, 113, 133, .18), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
border-color: rgba(251, 113, 133, .26);
}
.stat-tile.accent b { color: var(--pink); }
.stats-filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
margin-bottom: 18px;
border-radius: var(--r);
border: 1px solid var(--line);
background: var(--surf);
}
.stats-filter strong {
display: block;
font: 700 14px/1 var(--sans);
}
.stats-filter span {
display: block;
margin-top: 4px;
font: 500 11px/1 var(--mono);
color: var(--ink-4);
letter-spacing: .08em;
text-transform: uppercase;
}
.stats-controls {
display: flex;
gap: 10px;
align-items: center;
}
.stats-controls select {
height: 36px;
padding: 0 28px 0 12px;
font: 600 12.5px/1 var(--sans);
color: var(--ink);
background:
var(--surf-2)
url("data:image/svg+xml;utf8,")
no-repeat right 10px center;
border: 1px solid var(--line);
border-radius: 10px;
appearance: none;
}
.stats-grid {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
gap: 18px;
margin-bottom: 18px;
}
.chart {
height: clamp(260px, 36vh, 420px);
border-radius: 12px;
border: 1px solid var(--line);
background:
linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.0)),
repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 36px),
repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 60px);
}
.chart svg { width: 100%; height: 100%; padding: 14px; overflow: visible; }
.donut-wrap {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 18px;
align-items: center;
}
.donut {
position: relative;
width: 160px;
height: 160px;
border-radius: 50%;
background: conic-gradient(var(--cyan) 0 45%, var(--pink) 45% 70%, var(--blue) 70% 90%, var(--amber) 90% 100%);
display: grid;
place-items: center;
}
.donut::after {
content: "";
position: absolute;
inset: 16px;
border-radius: 50%;
background: linear-gradient(180deg, rgba(15, 18, 24, .98), rgba(10, 12, 18, .98));
}
.donut b, .donut span { position: relative; z-index: 1; }
.donut b {
font: 500 22px/1 var(--serif);
color: var(--ink);
}
.donut span {
position: absolute;
top: calc(50% + 16px);
font: 600 10px/1 var(--mono);
letter-spacing: .2em;
color: var(--ink-4);
text-transform: uppercase;
}
.legend {
display: grid;
gap: 8px;
}
.legend div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background: var(--surf);
border: 1px solid var(--line);
font: 500 12px/1 var(--sans);
color: var(--ink-2);
}
.legend i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cyan);
flex: 0 0 8px;
}
.key-stats {
margin-bottom: 18px;
}
.key-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.key-stats-grid > div {
padding: 14px 16px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--surf);
}
.key-stats-grid small {
display: block;
font: 600 10px/1 var(--mono);
letter-spacing: .14em;
color: var(--ink-4);
text-transform: uppercase;
}
.key-stats-grid b {
display: block;
margin-top: 8px;
font: 700 16px/1.2 var(--sans);
color: var(--ink);
word-break: break-all;
}
/* ===========================================================
RECHARGE
=========================================================== */
.recharge-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: 20px;
}
.preset-grid, .pay-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.pay-grid { grid-template-columns: repeat(2, 1fr); margin-bottom: 6px; }
.preset-btn {
height: 54px;
padding: 0 14px;
border-radius: 12px;
font: 700 14px/1 var(--sans);
color: var(--ink-2);
border: 1px solid var(--line);
background: var(--surf);
transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.preset-btn:hover:not(:disabled) {
color: var(--ink);
border-color: var(--cyan);
transform: translateY(-1px);
}
.preset-btn.active {
color: #06121a;
background: linear-gradient(180deg, #7df0db, var(--cyan));
border-color: var(--cyan);
box-shadow: 0 10px 24px rgba(94, 234, 212, .26);
}
.preset-btn:disabled { opacity: .42; cursor: not-allowed; }
.flow-log {
display: grid;
gap: 8px;
max-height: 380px;
overflow: auto;
}
.flow-item {
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--surf);
}
.flow-item b {
display: block;
font: 700 12.5px/1.2 var(--sans);
color: var(--ink);
}
.flow-item span {
display: block;
margin-top: 4px;
font: 500 11px/1.5 var(--mono);
color: var(--ink-4);
}
/* ===========================================================
MOBILE TABS
=========================================================== */
.mobile-tabs {
display: none;
position: fixed;
left: 12px;
right: 12px;
bottom: calc(10px + env(safe-area-inset-bottom));
z-index: 800;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
padding: 6px;
border-radius: 18px;
background: rgba(10, 12, 18, .8);
border: 1px solid var(--line);
backdrop-filter: blur(20px);
box-shadow: var(--shadow-2);
}
.m-tab {
height: 46px;
border-radius: 14px;
font: 600 12.5px/1 var(--sans);
color: var(--ink-3);
transition: color .2s, background .2s;
}
.m-tab.active {
color: #06121a;
background: var(--cyan);
}
/* ===========================================================
PAY MODAL
=========================================================== */
.modal-mask {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 18px;
background: rgba(0, 0, 0, .65);
backdrop-filter: blur(8px);
}
.modal-mask.show { display: flex; }
.modal {
width: min(520px, 100%);
max-height: calc(100vh - 36px);
overflow: auto;
padding: 24px;
border-radius: var(--r);
background: linear-gradient(180deg, #14171f, #0d1018);
border: 1px solid var(--line);
box-shadow: var(--shadow-2);
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
}
.modal-head strong { font: 700 16px/1 var(--sans); }
.order-meta { display: grid; gap: 8px; margin-bottom: 14px; }
.order-meta div {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surf);
font-size: 12.5px;
}
.order-meta span { color: var(--ink-3); }
.order-meta b { text-align: right; word-break: break-all; }
.qr-box {
display: grid;
place-items: center;
gap: 10px;
padding: 18px;
border-radius: 14px;
border: 1px solid var(--line);
background: var(--surf);
margin-bottom: 14px;
text-align: center;
}
.qr-box img {
width: min(220px, 72vw);
height: min(220px, 72vw);
padding: 10px;
background: #fff;
border-radius: 12px;
}
.qr-box span { color: var(--amber); font: 600 11px/1 var(--mono); letter-spacing: .08em; }
.url-box {
display: grid;
gap: 8px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(94, 234, 212, .06);
border: 1px solid rgba(94, 234, 212, .22);
margin-bottom: 14px;
}
.url-box span { font: 500 11px/1 var(--mono); color: var(--ink-3); letter-spacing: .08em; }
.url-box p { font: 500 12px/1.55 var(--mono); color: var(--cyan); word-break: break-all; }
.modal-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
/* ===========================================================
LEDGER MODAL
=========================================================== */
.ledger-modal {
display: none;
position: fixed;
inset: 0;
z-index: 1100;
padding: 22px;
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(8px);
}
.ledger-modal.show { display: grid; place-items: center; }
.ledger-modal-shell {
width: min(960px, 100%);
max-height: calc(100dvh - 44px);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
background: linear-gradient(180deg, #14171f, #0d1018);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-2);
overflow: hidden;
}
.ledger-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 22px;
border-bottom: 1px solid var(--line);
}
.ledger-modal-head strong { font: 700 16px/1.2 var(--sans); }
.ledger-modal-head span {
display: block;
margin-top: 4px;
font: 500 11px/1 var(--mono);
letter-spacing: .1em;
color: var(--ink-4);
text-transform: uppercase;
}
.ledger-modal-tools {
display: flex;
align-items: center;
gap: 8px;
}
.ledger-modal-tools select {
height: 34px;
padding: 0 28px 0 12px;
font: 600 12px/1 var(--sans);
color: var(--ink);
background:
var(--surf-2)
url("data:image/svg+xml;utf8,")
no-repeat right 10px center;
border: 1px solid var(--line);
border-radius: 9px;
appearance: none;
}
.ledger-modal-tools input {
height: 34px;
width: 200px;
padding: 0 12px;
font: 500 12px/1 var(--mono);
color: var(--ink);
background: var(--surf-2);
border: 1px solid var(--line);
border-radius: 9px;
}
.ledger-modal-body {
min-height: 0;
overflow: auto;
padding: 14px 22px;
display: grid;
gap: 8px;
align-content: start;
}
.ledger-modal-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 22px;
border-top: 1px solid var(--line);
font: 500 12px/1 var(--mono);
color: var(--ink-3);
}
.pager { display: flex; align-items: center; gap: 8px; }
.lrow.lrow-full {
display: grid;
grid-template-columns: minmax(0, 1fr) 110px 140px;
gap: 14px;
align-items: center;
padding: 13px 14px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--surf);
}
.lrow.lrow-full time {
font: 500 12px/1 var(--mono);
color: var(--ink-3);
}
.lrow.lrow-full .lmain { order: 1; }
.lrow.lrow-full .lamt { order: 2; }
.lrow.lrow-full time { order: 3; }
/* ===========================================================
TOAST
=========================================================== */
.toast {
position: fixed;
left: 50%;
bottom: calc(24px + env(safe-area-inset-bottom));
transform: translateX(-50%) translateY(10px);
z-index: 2500;
padding: 11px 16px;
border-radius: 999px;
font: 700 12.5px/1 var(--sans);
color: #06121a;
opacity: 0;
pointer-events: none;
background: var(--cyan);
box-shadow: 0 18px 40px rgba(94, 234, 212, .28);
transition: opacity .25s ease, transform .25s ease;
white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--pink); color: #1a0708; }
.toast.info { background: var(--blue); color: #06121a; }
/* common empty */
.empty {
padding: 28px 16px;
text-align: center;
font: 500 12px/1.6 var(--mono);
color: var(--ink-4);
}
/* ===========================================================
RESPONSIVE
=========================================================== */
@media (max-width: 1240px) {
.asset-grid-full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-row {
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}
.card-assets { grid-column: 1 / -1; }
.card-assets .asset-mini { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1080px) {
.asset-grid-full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.asset-toolbar { grid-template-columns: 1fr 1fr; }
.stats-grid { grid-template-columns: 1fr; }
.stats-top { grid-template-columns: repeat(2, 1fr); }
.recharge-grid { grid-template-columns: 1fr; }
.key-stats-grid { grid-template-columns: repeat(2, 1fr); }
.ai-view.active { grid-template-columns: 1fr; }
.ai-output { max-height: 420px; }
}
@media (max-width: 880px) {
.app-page { grid-template-columns: 1fr; }
.sidebar { display: none; }
.mobile-tabs { display: grid; }
.topbar { height: auto; padding: 14px 16px; }
.content { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
.dash-hero { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
.dash-row { grid-template-columns: 1fr; gap: 14px; }
.docs-center-hero {
align-items: stretch;
flex-direction: column;
padding: 18px;
}
.docs-actions {
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: stretch;
}
.docs-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.docs-route-list div {
grid-template-columns: 52px minmax(0, 1fr);
}
.docs-param-table > div {
grid-template-columns: 110px minmax(0, 1fr);
}
.docs-param-table > div span:last-child {
grid-column: 1 / -1;
}
.docs-route-list span {
grid-column: 1 / -1;
}
.hero-key-rows { grid-template-columns: repeat(2, 1fr); }
.hero-balance-amount { font-size: 48px; }
.preset-grid, .pay-grid, .stats-top { grid-template-columns: repeat(2, 1fr); }
.key-stats-grid { grid-template-columns: 1fr; }
.ai-head { flex-direction: column; align-items: stretch; gap: 12px; }
.ai-head-right { flex-wrap: wrap; }
.ledger-modal-head { flex-direction: column; align-items: stretch; }
.ledger-modal-tools { flex-wrap: wrap; }
.ledger-modal-tools input { width: 100%; }
.lrow.lrow-full { grid-template-columns: minmax(0, 1fr) auto; }
.lrow.lrow-full time { grid-column: 1 / -1; }
.ledger-mini .lrow { grid-template-columns: minmax(0, 1fr) auto; padding-left: 16px; padding-right: 16px; }
.ledger-mini .card-head, .card-ledger .card-head { padding: 0 16px; }
}
@media (max-width: 520px) {
.auth-card-inner { padding: 22px; }
.auth-title h1 { font-size: 32px; }
.stats-top { grid-template-columns: 1fr 1fr; }
.docs-actions,
.docs-grid {
grid-template-columns: 1fr;
}
.hero-key-rows { grid-template-columns: 1fr; }
.donut-wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
/* ===========================================================
LIGHT BLUE H5 RECOVERY
Keep the current desktop composition, restore the bright blue tone,
and remove the top bar/notch from every app page.
=========================================================== */
:root {
--bg: #eef7ff;
--bg-2: #f7fbff;
--surf: rgba(255, 255, 255, .68);
--surf-2: rgba(255, 255, 255, .9);
--surf-3: #ffffff;
--line: rgba(37, 99, 235, .12);
--line-2: rgba(37, 99, 235, .22);
--ink: #0f172a;
--ink-2: #334155;
--ink-3: #64748b;
--ink-4: #94a3b8;
--cyan: #2563eb;
--teal: #0ea5e9;
--pink: #7c3aed;
--amber: #f59e0b;
--green: #16a34a;
--red: #ef4444;
--blue: #3b82f6;
--shadow-1: 0 18px 50px rgba(15, 23, 42, .08);
--shadow-2: 0 28px 80px rgba(15, 23, 42, .14);
--glow-cyan: 0 0 0 1px rgba(37, 99, 235, .18), 0 18px 42px rgba(37, 99, 235, .14);
}
html {
background: #eef7ff;
}
body {
color: var(--ink);
background:
radial-gradient(900px 520px at 12% -10%, rgba(96, 165, 250, .26), transparent 62%),
radial-gradient(900px 560px at 98% 0%, rgba(45, 212, 191, .16), transparent 58%),
linear-gradient(180deg, #eef7ff 0%, #f8fbff 46%, #edf6ff 100%);
}
body.app-active::before,
.auth-grain {
display: none;
}
::placeholder {
color: rgba(100, 116, 139, .68);
}
.auth-page {
padding: 18px;
background:
radial-gradient(760px 520px at 28% 0%, rgba(59, 130, 246, .22), transparent 64%),
radial-gradient(640px 460px at 88% 18%, rgba(14, 165, 233, .18), transparent 62%),
linear-gradient(180deg, #eff8ff 0%, #f8fbff 52%, #eaf5ff 100%);
}
.hyperspeed-login {
opacity: .22;
filter: saturate(.75) brightness(1.18);
}
.hyperspeed-login::after {
background:
radial-gradient(circle at 50% 65%, rgba(255,255,255,.04) 0, rgba(239,248,255,.72) 56%, rgba(239,248,255,.96) 100%);
}
.auth-card {
background:
linear-gradient(140deg, rgba(37, 99, 235, .42), rgba(14, 165, 233, .06) 48%, rgba(124, 58, 237, .22) 100%);
box-shadow: 0 28px 90px rgba(30, 64, 175, .16);
}
.auth-card-inner {
background:
linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,249,255,.9)),
rgba(255,255,255,.9);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.auth-card-inner::before {
background:
radial-gradient(500px 260px at 15% 0%, rgba(37, 99, 235, .14), transparent 62%),
radial-gradient(480px 260px at 100% 100%, rgba(14, 165, 233, .12), transparent 62%);
}
.auth-mark b,
.auth-title h1,
.auth-input-row input,
.auth-foot,
.auth-submit-text,
.auth-submit-arrow,
.side-brand strong,
.topbar-title h2 {
color: var(--ink);
}
.auth-title h1 em,
.auth-title h1 span,
.auth-mark i,
.auth-pill,
.link-btn,
.card-ai-jump .card-arrow,
.ai-jump-chips span,
.ai-msg.user .ai-msg-tag {
color: var(--cyan);
}
.auth-input {
background: rgba(255,255,255,.78);
border-color: rgba(37, 99, 235, .14);
box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}
.auth-input:focus-within {
border-color: rgba(37, 99, 235, .45);
box-shadow: 0 0 0 5px rgba(37, 99, 235, .08), inset 0 1px 0 rgba(255,255,255,.9);
}
.auth-submit,
.btn-primary,
.ai-send,
.preset-btn.active,
.ai-output-tabs .tab.active,
.m-tab.active {
color: #fff;
background: linear-gradient(180deg, #3b82f6, #2563eb);
box-shadow: 0 14px 30px rgba(37, 99, 235, .24);
}
.auth-submit:hover,
.btn-primary:hover,
.ai-send:hover {
box-shadow: 0 18px 38px rgba(37, 99, 235, .28);
}
.app-page {
background:
radial-gradient(1000px 620px at 15% -12%, rgba(96, 165, 250, .2), transparent 64%),
radial-gradient(960px 620px at 100% 0%, rgba(45, 212, 191, .13), transparent 58%),
linear-gradient(180deg, #eef7ff 0%, #f8fbff 56%, #eef7ff 100%);
}
.sidebar {
background: rgba(248, 252, 255, .76);
border-right-color: rgba(37, 99, 235, .12);
box-shadow: 16px 0 54px rgba(15, 23, 42, .05);
}
.side-link:hover,
.side-link.active {
color: #1d4ed8;
background: rgba(37, 99, 235, .09);
}
.side-link.active::before {
background: #2563eb;
box-shadow: 0 0 12px rgba(37, 99, 235, .45);
}
.side-key,
.hero-balance,
.hero-key,
.card,
.card-ledger,
.card-ai-jump,
.card-assets,
.ai-shell,
.ai-output,
.stat-tile,
.stats-filter,
.key-stats-grid > div,
.flow-item,
.modal,
.ledger-modal-shell {
background:
linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
border-color: rgba(37, 99, 235, .12);
box-shadow: var(--shadow-1);
}
.hero-balance::after,
.hero-key::after,
.card::after,
.card-ledger::after,
.card-ai-jump::after,
.card-assets::after {
opacity: .25;
mix-blend-mode: normal;
}
.hero-balance {
background:
radial-gradient(760px 340px at 4% 0%, rgba(96, 165, 250, .16), transparent 60%),
radial-gradient(620px 320px at 100% 100%, rgba(45, 212, 191, .13), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,247,255,.8));
border-color: rgba(37, 99, 235, .2);
}
.card-ai-jump {
background:
radial-gradient(520px 260px at 100% 0%, rgba(14, 165, 233, .13), transparent 58%),
linear-gradient(180deg, rgba(255,255,255,.95), rgba(239,247,255,.74));
}
.main {
grid-template-rows: minmax(0, 1fr);
background: transparent;
}
.topbar {
display: none !important;
}
.topbar-tools,
#refreshTopBtn,
#clearKeySideBtn,
.side-clear {
display: none !important;
}
.content {
grid-row: 1;
padding: 22px 28px 32px;
scrollbar-color: rgba(37, 99, 235, .25) transparent;
}
.content::-webkit-scrollbar-thumb,
.ai-chat::-webkit-scrollbar-thumb {
background: rgba(37, 99, 235, .22);
}
.chip,
.chip-mini,
.tool-btn,
.btn-ghost,
.input-line,
.hero-key-rows > div,
.lrow .ltag,
.ai-select select,
.ai-msg,
.ai-attach-chip,
.ai-composer,
.ai-upload,
.ai-output-tabs,
.ai-output-card,
.legend div,
.preset-btn,
.order-meta div,
.qr-box,
.url-box,
.ledger-modal-tools select,
.ledger-modal-tools input,
.lrow.lrow-full {
background: rgba(255,255,255,.72);
border-color: rgba(37, 99, 235, .13);
color: var(--ink);
}
.btn-ghost:hover,
.tool-btn:hover,
.preset-btn:hover:not(:disabled),
.card-ai-jump:hover {
border-color: rgba(37, 99, 235, .35);
background: rgba(239, 247, 255, .9);
}
.hero-bar-track,
.asset-mini img,
.asset-mini .ph {
background: rgba(226, 239, 255, .75);
}
.ai-msg.user {
border-color: rgba(37, 99, 235, .22);
background: linear-gradient(180deg, rgba(219,234,254,.92), rgba(239,246,255,.86));
}
.ai-msg.is-error,
.alert {
color: #991b1b;
background: rgba(254, 226, 226, .88);
border-color: rgba(239, 68, 68, .22);
}
.ai-attach-chip button {
background: rgba(226, 239, 255, .9);
}
.ai-output-card img,
.ai-output-card video {
background: #f8fbff;
}
.chart {
background:
linear-gradient(180deg, rgba(255,255,255,.6), rgba(239,247,255,.34)),
repeating-linear-gradient(0deg, rgba(37,99,235,.07) 0, rgba(37,99,235,.07) 1px, transparent 1px, transparent 36px),
repeating-linear-gradient(90deg, rgba(37,99,235,.07) 0, rgba(37,99,235,.07) 1px, transparent 1px, transparent 60px);
}
.donut::after {
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,247,255,.98));
}
.modal-mask,
.ledger-modal {
background: rgba(15, 23, 42, .18);
backdrop-filter: blur(12px);
}
.mobile-tabs {
bottom: 10px;
background: rgba(255,255,255,.9);
border-color: rgba(37, 99, 235, .14);
box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
}
.m-tab {
color: var(--ink-3);
}
.toast {
bottom: 22px;
color: #fff;
background: #2563eb;
box-shadow: 0 18px 40px rgba(37, 99, 235, .24);
}
.toast.err { background: #ef4444; color: #fff; }
.toast.info { background: #0ea5e9; color: #fff; }
.asset-center-hero {
background:
radial-gradient(760px 340px at 4% 0%, rgba(96, 165, 250, .16), transparent 60%),
radial-gradient(620px 320px at 100% 100%, rgba(45, 212, 191, .13), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,247,255,.8));
border-color: rgba(37, 99, 235, .2);
}
.asset-summary-strip > div,
.asset-toolbar,
.asset-card-full,
.asset-pager,
.asset-empty {
background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
border-color: rgba(37, 99, 235, .12);
box-shadow: var(--shadow-1);
}
.asset-search input,
.asset-select select,
.asset-kind,
.asset-status,
.asset-open {
background: rgba(255,255,255,.72);
border-color: rgba(37, 99, 235, .13);
color: var(--ink);
}
.asset-card-media,
.asset-audio,
.asset-file-ph,
.asset-mini video {
background: rgba(226, 239, 255, .75);
}
.asset-card-full:hover,
.asset-open:hover {
border-color: rgba(37, 99, 235, .35);
}
@media (min-width: 881px) {
.app-page {
grid-template-columns: 220px minmax(0, 1fr);
}
.content {
padding-top: 22px;
}
}
@media (max-width: 880px) {
html,
body {
overflow: hidden;
background: #eef7ff;
}
.auth-page {
padding: 14px;
place-items: center;
}
.auth-stage {
width: min(460px, 100%);
}
.auth-card-inner {
padding: 22px;
}
.auth-title {
margin: 22px 0 18px;
}
.auth-title h1 {
font-size: clamp(34px, 12vw, 48px);
}
.auth-actions {
grid-template-columns: 1fr;
}
.auth-foot {
grid-template-columns: 1fr;
gap: 8px;
}
.app-page {
display: block;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.sidebar {
display: none !important;
}
.main {
display: block;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.content {
height: 100vh;
height: 100dvh;
padding: 12px 12px 86px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-tabs:not(.hidden) {
display: grid !important;
}
.mobile-tabs {
left: 10px;
right: 10px;
bottom: 8px;
padding: 6px;
border-radius: 18px;
}
.m-tab {
height: 50px;
font-size: 12px;
}
.dash-hero,
.dash-row,
.stats-grid,
.recharge-grid,
.ai-view.active {
grid-template-columns: 1fr !important;
}
.dash-hero,
.dash-row,
.stats-grid,
.recharge-grid {
gap: 12px;
margin-bottom: 12px;
}
.hero-balance,
.hero-key,
.card,
.card-ledger,
.card-ai-jump,
.card-assets,
.ai-shell,
.ai-output,
.stat-tile {
border-radius: 18px;
}
.hero-balance,
.hero-key,
.card-assets,
.card-ai-jump,
.ai-shell,
.ai-output,
.card {
padding: 18px;
}
.card-ledger {
padding: 18px 0 12px;
}
.card-ledger .card-head,
.ledger-mini .card-head {
padding: 0 18px;
}
.hero-balance-amount {
font-size: clamp(44px, 15vw, 62px);
}
.hero-balance-actions,
.modal-actions {
grid-template-columns: 1fr;
display: grid;
}
.hero-key-rows,
.stats-top,
.preset-grid,
.pay-grid,
.card-assets .asset-mini {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.key-stats-grid {
grid-template-columns: 1fr;
}
.ai-view.active {
display: grid;
height: auto;
min-height: 0;
}
.ai-shell {
min-height: 560px;
}
.ai-head {
flex-direction: column;
align-items: stretch;
}
.ai-head-right,
.ai-media-controls {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
gap: 8px;
}
.ai-head-right > .ai-select {
grid-column: 1 / -1;
}
.ai-head-right .tool-btn {
justify-self: end;
}
.ai-select select,
.input-line,
.ai-composer {
min-width: 0;
}
.ai-msg {
max-width: 92%;
}
.ai-output {
max-height: none;
min-height: 360px;
}
.ledger-mini .lrow {
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
padding: 12px 18px;
}
.lrow .lmain strong {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.stats-filter {
align-items: stretch;
flex-direction: column;
}
.stats-controls {
display: grid;
grid-template-columns: 1fr 1fr;
}
.ledger-modal {
padding: 10px;
}
.ledger-modal-shell {
max-height: calc(100dvh - 20px);
border-radius: 18px;
}
}
@media (max-width: 520px) {
.auth-card-inner {
padding: 20px;
}
.auth-input-row {
height: 56px;
}
.auth-input-prefix {
font-size: 14px;
}
.auth-input-row input {
font-size: 15px;
}
.content {
padding: 10px 10px 84px;
}
.hero-key-rows {
grid-template-columns: 1fr 1fr;
}
.hero-key-rows .row-wide {
grid-column: 1 / -1;
}
.hero-balance-actions,
.stats-controls,
.ai-head-right,
.ai-media-controls {
grid-template-columns: 1fr;
}
.ai-composer {
grid-template-columns: auto minmax(0, 1fr);
}
.ai-send {
grid-column: 1 / -1;
width: 100%;
justify-content: center;
}
.ledger-mini .lrow,
.lrow.lrow-full {
grid-template-columns: minmax(0, 1fr);
}
.ledger-mini .lrow .lamt,
.lrow.lrow-full .lamt {
grid-column: 1 / -1;
text-align: left;
}
}
@media (max-width: 880px) {
.asset-center-shell { gap: 12px; }
.asset-center-hero { align-items: stretch; flex-direction: column; padding: 18px; border-radius: 18px; }
.asset-center-actions { justify-content: stretch; display: grid; grid-template-columns: 1fr 1fr; }
.asset-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.asset-toolbar { grid-template-columns: 1fr; padding: 12px; border-radius: 18px; }
.asset-grid-full { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.asset-card-body { padding: 12px; }
.asset-pager { align-items: stretch; flex-direction: column; }
.asset-pager .pager { display: grid; grid-template-columns: 1fr 1fr; }
.asset-pager .pager span { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.asset-center-title h3 { font-size: 34px; }
.asset-center-actions { grid-template-columns: 1fr; }
.asset-summary-strip { grid-template-columns: 1fr 1fr; }
.asset-grid-full { grid-template-columns: 1fr; }
.asset-card-media { aspect-ratio: 16 / 10; }
}
/* ===========================================================
PATCH · Glass bottom navigation + compact AI media controls
=========================================================== */
.mobile-tabs {
left: max(12px, env(safe-area-inset-left));
right: max(12px, env(safe-area-inset-right));
bottom: calc(12px + env(safe-area-inset-bottom));
gap: 8px;
padding: 8px;
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.28));
border: 1px solid rgba(255,255,255,.72);
box-shadow:
0 22px 54px rgba(15, 23, 42, .16),
inset 0 1px 0 rgba(255,255,255,.78),
inset 0 -1px 0 rgba(37, 99, 235, .08);
backdrop-filter: blur(26px) saturate(170%);
-webkit-backdrop-filter: blur(26px) saturate(170%);
}
.mobile-tabs::before {
content: "";
position: absolute;
inset: 1px;
z-index: -1;
border-radius: 23px;
background:
radial-gradient(180px 80px at 18% 0%, rgba(59, 130, 246, .22), transparent 64%),
radial-gradient(180px 80px at 88% 100%, rgba(14, 165, 233, .16), transparent 66%);
pointer-events: none;
}
.m-tab {
position: relative;
height: 48px;
border-radius: 17px;
overflow: hidden;
font: 800 12px/1 var(--sans);
letter-spacing: .02em;
color: rgba(30, 41, 59, .62);
background: rgba(255,255,255,.34);
border: 1px solid rgba(255,255,255,.62);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.74),
0 8px 22px rgba(15, 23, 42, .06);
transition:
color .22s ease,
background .22s ease,
border-color .22s ease,
box-shadow .22s ease,
transform .22s ease;
}
.m-tab::after {
content: "";
position: absolute;
left: 18%;
right: 18%;
bottom: 7px;
height: 3px;
border-radius: 999px;
background: currentColor;
opacity: 0;
transform: scaleX(.3);
transition: opacity .22s ease, transform .22s ease;
}
.m-tab:hover {
color: #1d4ed8;
background: rgba(255,255,255,.56);
transform: translateY(-1px);
}
.m-tab.active {
color: #fff;
background:
linear-gradient(135deg, rgba(59, 130, 246, .98), rgba(37, 99, 235, .88) 58%, rgba(14, 165, 233, .82));
border-color: rgba(255,255,255,.78);
box-shadow:
0 14px 30px rgba(37, 99, 235, .28),
inset 0 1px 0 rgba(255,255,255,.42),
inset 0 -12px 24px rgba(30, 64, 175, .18);
}
.m-tab.active::after {
opacity: .92;
transform: scaleX(1);
}
.ai-head-right .ai-media-controls {
display: none;
}
.ai-composer {
grid-template-columns: auto auto minmax(0, 1fr) auto;
padding: 8px;
}
.ai-inline-controls {
display: inline-flex;
align-items: center;
gap: 6px;
height: 40px;
padding: 3px;
border-radius: 13px;
background: rgba(255,255,255,.46);
border: 1px solid rgba(37, 99, 235, .12);
box-shadow: inset 0 1px 0 rgba(255,255,255,.66);
}
.ai-inline-controls.hidden {
display: none !important;
}
.ai-compact-select {
position: relative;
min-width: 66px;
}
.ai-compact-select select {
width: 100%;
height: 32px;
padding: 0 24px 0 10px;
border-radius: 10px;
font: 800 11.5px/1 var(--mono);
letter-spacing: .02em;
color: var(--ink);
background:
rgba(255,255,255,.72)
url("data:image/svg+xml;utf8,")
no-repeat right 8px center;
border: 1px solid rgba(37, 99, 235, .13);
appearance: none;
cursor: pointer;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ai-compact-select select:focus,
.ai-compact-select select:hover {
border-color: rgba(37, 99, 235, .36);
background-color: rgba(255,255,255,.9);
box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}
@media (max-width: 880px) {
.mobile-tabs {
left: 10px;
right: 10px;
bottom: calc(10px + env(safe-area-inset-bottom));
padding: 7px;
gap: 7px;
border-radius: 23px;
}
.m-tab {
height: 48px;
border-radius: 16px;
}
.ai-head-right {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
}
.ai-head-right > .ai-select {
grid-column: auto;
}
.ai-composer {
grid-template-columns: auto auto minmax(0, 1fr) auto;
}
}
@media (max-width: 520px) {
.content {
padding-bottom: calc(94px + env(safe-area-inset-bottom));
}
.mobile-tabs {
left: 8px;
right: 8px;
bottom: calc(8px + env(safe-area-inset-bottom));
gap: 6px;
padding: 6px;
border-radius: 21px;
}
.m-tab {
height: 46px;
border-radius: 15px;
font-size: 11.5px;
}
.ai-composer {
grid-template-columns: auto auto minmax(0, 1fr);
gap: 7px;
padding: 7px;
}
.ai-inline-controls {
height: 38px;
gap: 5px;
}
.ai-compact-select {
min-width: 60px;
}
.ai-compact-select select {
height: 30px;
padding-left: 8px;
padding-right: 21px;
font-size: 10.5px;
}
.ai-composer textarea {
grid-column: 1 / -1;
min-height: 42px;
padding: 8px 6px;
}
.ai-send {
grid-column: 1 / -1;
width: 100%;
justify-content: center;
}
}
/* ===== current round overrides: compact text send + richer ratio + key switch ===== */
.chip-key { cursor: pointer; }
.chip-key:hover { color: var(--cyan); border-color: rgba(94, 234, 212, .35); }
.side-key-display {
width: 100%;
text-align: left;
display: block;
background: transparent;
border: 0;
padding: 0;
}
.side-key-display strong {
display: block;
margin: 8px 0 6px;
font: 600 12.5px/1.3 var(--mono);
color: var(--ink);
word-break: break-all;
}
.side-key-display span {
display: block;
font: 500 10.5px/1.45 var(--mono);
color: var(--ink-4);
}
.side-key-display:hover strong,
.side-key-display:hover span {
color: var(--cyan);
}
.key-modal { max-width: 460px; }
.key-modal-body {
display: grid;
gap: 10px;
padding: 6px 0 2px;
}
.key-modal-body small {
font: 600 10px/1 var(--mono);
letter-spacing: .16em;
color: var(--ink-4);
text-transform: uppercase;
}
.key-modal-body p {
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--surf);
color: var(--ink);
word-break: break-all;
}
.key-modal-body span {
font-size: 12px;
color: var(--ink-3);
}
.ai-composer.text-mode {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.ai-composer.text-mode .ai-send {
width: auto;
min-width: 92px;
padding: 0 16px;
grid-column: auto;
justify-content: center;
}
.ai-composer.text-mode textarea {
grid-column: auto;
}
@media (max-width: 520px) {
.ai-composer.text-mode {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.ai-composer.text-mode textarea {
grid-column: auto;
min-height: 40px;
}
.ai-composer.text-mode .ai-send {
grid-column: auto;
width: auto;
min-width: 78px;
padding: 0 14px;
}
}
/* ===========================================================
LOGIN RESTORE · keep old dark login only
说明：新版后面的 LIGHT BLUE/H5 覆盖了 :root 和 auth-*，这里仅把登录页恢复成旧版。
其他 app 页面、资产页、统计页、AI 控制台、按钮样式不改。
=========================================================== */
.auth-page {
/* old login local variables: avoid being affected by the light app theme */
--bg: #0a0c12;
--bg-2: #0f1218;
--surf: rgba(255, 255, 255, .04);
--surf-2: rgba(255, 255, 255, .065);
--surf-3: rgba(255, 255, 255, .09);
--line: rgba(255, 255, 255, .08);
--line-2: rgba(255, 255, 255, .14);
--ink: #f4f6fb;
--ink-2: #c3c9d6;
--ink-3: #8a92a4;
--ink-4: #5b6275;
--cyan: #5eead4;
--teal: #22d3ee;
--pink: #fb7185;
--amber: #fbbf24;
--green: #34d399;
--red: #f87171;
--blue: #60a5fa;
--shadow-1: 0 18px 40px rgba(0, 0, 0, .35);
--shadow-2: 0 30px 80px rgba(0, 0, 0, .50);
--glow-cyan: 0 0 0 1px rgba(94, 234, 212, .28), 0 14px 40px rgba(34, 211, 238, .20);
position: fixed;
inset: 0;
display: grid;
place-items: center;
padding: 24px;
overflow: hidden;
background: #03060d;
z-index: 5;
}
.auth-page ::placeholder {
color: var(--ink-4);
}
.hyperspeed-login {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
opacity: 1;
filter: none;
}
.hyperspeed-login canvas {
width: 100% !important;
height: 100% !important;
display: block;
}
.hyperspeed-login::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 60%, transparent 0, rgba(3, 6, 13, .55) 60%, rgba(3, 6, 13, .92) 100%);
pointer-events: none;
}
.auth-grain {
display: block;
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: .4;
}
.auth-stage {
position: relative;
z-index: 2;
width: min(520px, 100%);
opacity: 0;
transform: translateY(14px) scale(.985);
will-change: transform, opacity;
}
.auth-card {
position: relative;
border-radius: var(--r-lg);
padding: 1px;
background:
linear-gradient(140deg, rgba(94, 234, 212, .35), rgba(94, 234, 212, 0) 45%, rgba(251, 113, 133, .25) 90%);
box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 60px rgba(34, 211, 238, .10);
}
.auth-card-inner {
position: relative;
border-radius: calc(var(--r-lg) - 1px);
padding: 28px 28px 24px;
background:
linear-gradient(180deg, rgba(20, 24, 34, .88), rgba(12, 15, 22, .92)),
rgba(8, 10, 16, .92);
box-shadow: none;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
overflow: hidden;
}
.auth-card-inner::before {
content: none;
}
.auth-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.auth-mark {
display: inline-flex;
align-items: center;
gap: 8px;
font: 500 11px/1 var(--mono);
color: var(--ink-3);
letter-spacing: .12em;
text-transform: uppercase;
}
.auth-mark b { color: var(--ink); font-weight: 700; }
.auth-mark i {
width: 8px;
height: 8px;
background: var(--cyan);
border-radius: 2px;
box-shadow: 0 0 14px var(--cyan);
}
.auth-pill {
padding: 5px 10px;
font: 500 10.5px/1 var(--mono);
letter-spacing: .1em;
color: var(--cyan);
background: rgba(94, 234, 212, .08);
border: 1px solid rgba(94, 234, 212, .22);
border-radius: 999px;
text-transform: uppercase;
}
.auth-title {
margin: 28px 0 22px;
}
.auth-title h1 {
font: 500 clamp(36px, 6vw, 52px)/1.02 var(--sans);
letter-spacing: -.025em;
color: var(--ink);
}
.auth-title h1 em {
font-size: 1.06em;
color: var(--cyan);
}
.auth-title h1 span {
display: inline-block;
padding-right: 4px;
color: inherit;
border-bottom: 2px solid var(--pink);
}
.auth-sub {
margin-top: 10px;
color: var(--ink-3);
font-size: 13px;
}
.auth-input {
margin-bottom: 14px;
background: transparent;
border-color: transparent;
box-shadow: none;
}
.auth-input label {
display: block;
margin-bottom: 8px;
font: 600 10px/1 var(--mono);
letter-spacing: .18em;
color: var(--ink-4);
}
.auth-input-row {
display: flex;
align-items: center;
gap: 8px;
padding: 0 4px 0 14px;
height: 56px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, .03);
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.auth-input-row:focus-within {
border-color: rgba(94, 234, 212, .55);
background: rgba(94, 234, 212, .04);
box-shadow: 0 0 0 4px rgba(94, 234, 212, .08), 0 0 40px rgba(34, 211, 238, .14);
}
.auth-input-prefix {
font: 600 14px/1 var(--mono);
color: var(--ink-4);
}
.auth-input-row input {
flex: 1;
height: 100%;
min-width: 0;
font: 600 15px/1 var(--mono);
letter-spacing: .02em;
color: var(--ink);
}
.auth-eye {
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: var(--ink-3);
border-radius: 10px;
background: transparent;
transition: color .2s ease, background .2s ease;
}
.auth-eye:hover { color: var(--ink); background: var(--surf-2); }
.auth-actions {
margin-top: 4px;
display: block;
}
.auth-submit {
width: 100%;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 0 22px;
border-radius: 14px;
font: 700 14px/1 var(--sans);
letter-spacing: .04em;
color: #06121a;
background: linear-gradient(180deg, #7df0db, var(--cyan) 60%, #34c5b8);
box-shadow:
0 14px 30px rgba(94, 234, 212, .35),
0 0 0 1px rgba(94, 234, 212, .35) inset;
transition: transform .2s ease, box-shadow .2s ease;
}
.auth-submit:hover {
transform: translateY(-1px);
box-shadow:
0 20px 38px rgba(94, 234, 212, .45),
0 0 0 1px rgba(94, 234, 212, .55) inset;
}
.auth-submit:disabled { opacity: .6; cursor: progress; }
.auth-submit-text { color: #06121a; }
.auth-submit-arrow { font-family: var(--serif); font-size: 22px; line-height: 1; color: #06121a; }
.auth-page .spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(6, 18, 26, .25);
border-top-color: #06121a;
border-radius: 50%;
animation: spin .8s linear infinite;
}
.auth-foot {
margin-top: 22px;
padding-top: 14px;
border-top: 1px dashed var(--line);
display: flex;
flex-wrap: wrap;
grid-template-columns: none;
gap: 14px;
font: 500 11px/1 var(--mono);
letter-spacing: .08em;
color: var(--ink-4);
}
.auth-foot span { display: inline-flex; align-items: center; gap: 6px; }
.auth-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.auth-foot .dot.ok { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.auth-foot .dot.blue { background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.auth-foot .dot.pink { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.auth-page .alert {
margin-top: 14px;
padding: 10px 12px;
font-size: 12px;
color: #fecaca;
background: rgba(248, 113, 113, .10);
border: 1px solid rgba(248, 113, 113, .25);
border-radius: 12px;
}
@media (max-width: 880px) {
.auth-page {
padding: 24px;
place-items: center;
background: #03060d;
}
.auth-stage {
width: min(520px, 100%);
}
.auth-card-inner {
padding: 28px 28px 24px;
}
.auth-title {
margin: 28px 0 22px;
}
.auth-title h1 {
font-size: clamp(36px, 6vw, 52px);
}
.auth-actions {
display: block;
margin-top: 4px;
}
.auth-foot {
display: flex;
flex-wrap: wrap;
grid-template-columns: none;
gap: 14px;
}
}
@media (max-width: 520px) {
.auth-card-inner { padding: 22px; }
.auth-title h1 { font-size: 32px; }
.auth-input-row { height: 56px; }
.auth-input-prefix { font-size: 14px; }
.auth-input-row input { font-size: 15px; }
}
/* ============================================================
LOGIN STATIC FALLBACK
静态部署兜底：模块脚本或 GSAP 加载失败时，登录卡片不消失。
只影响登录页，不影响控制台、资产页、AI 调用台。
============================================================ */
.auth-page:not(.hidden) {
display: grid !important;
place-items: center !important;
}
.auth-page:not(.hidden) .auth-stage {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.auth-page.hidden {
display: none !important;
}
/* ===========================================================
PAY PATCH 20260527
=========================================================== */
.modal-url-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.btn-primary.sm {
height: 32px;
padding: 0 12px;
font-size: 12px;
border-radius: 9px;
}
.pay-grid .preset-btn[data-pay-method] {
cursor: pointer;
}
.pay-grid .preset-btn[data-pay-method].active {
color: #06121a;
background: linear-gradient(180deg, #7df0db, var(--cyan));
border-color: var(--cyan);
box-shadow: 0 10px 24px rgba(94, 234, 212, .26);
}
/* ===========================================================
KEY LOGIN REDESIGN · Ready to Connect / Logo Grid Motion
可直接覆盖旧登录页；不影响登录成功后的控制台页面。
=========================================================== */
.auth-redesign {
--login-bg: #f7f8fc;
--login-ink: #090a12;
--login-muted: rgba(9, 10, 18, .58);
--login-soft: rgba(110, 102, 255, .14);
--login-line: rgba(13, 16, 27, .08);
--login-purple: #8d7cff;
--login-purple-2: #635bff;
--login-card: rgba(255, 255, 255, .72);
--login-shadow: 0 26px 70px rgba(36, 43, 80, .12);
position: fixed;
inset: 0;
z-index: 5;
display: block !important;
overflow: auto;
color: var(--login-ink);
background:
radial-gradient(900px 520px at 76% 8%, rgba(124, 135, 255, .22), transparent 62%),
radial-gradient(720px 460px at 8% 4%, rgba(255, 255, 255, .95), transparent 68%),
linear-gradient(180deg, #fbfcff 0%, #f4f6fb 52%, #eef2f8 100%);
padding: clamp(18px, 3vw, 42px) clamp(14px, 4vw, 56px) 0;
}
.auth-redesign.hidden { display: none !important; }
.auth-redesign * { box-sizing: border-box; }
.auth-redesign button,
.auth-redesign input { color: inherit; }
.auth-redesign ::placeholder { color: rgba(9, 10, 18, .36); }
.auth-redesign .auth-grain {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .45;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
.auth-redesign .auth-ambient {
position: fixed;
border-radius: 999px;
filter: blur(8px);
pointer-events: none;
z-index: 0;
}
.auth-redesign .auth-ambient-a {
width: 34vw;
height: 34vw;
right: 4vw;
top: -12vw;
background: radial-gradient(circle, rgba(124, 111, 255, .16), transparent 66%);
}
.auth-redesign .auth-ambient-b {
width: 28vw;
height: 28vw;
left: -12vw;
bottom: 14vh;
background: radial-gradient(circle, rgba(144, 213, 255, .20), transparent 66%);
}
.auth-redesign .auth-shell {
position: relative;
z-index: 1;
width: min(1440px, 100%);
min-height: calc(100vh - clamp(18px, 3vw, 42px));
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(18px, 3vw, 34px);
}
.auth-redesign .auth-hero-grid {
min-height: clamp(560px, 70vh, 760px);
display: grid;
grid-template-columns: minmax(420px, .96fr) minmax(520px, 1.18fr);
align-items: center;
gap: clamp(18px, 4vw, 64px);
}
.auth-redesign .auth-stage {
width: min(560px, 100%);
position: relative;
z-index: 3;
opacity: 0;
transform: translateY(14px) scale(.985);
will-change: transform, opacity;
}
.auth-redesign .auth-card {
position: relative;
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.auth-redesign .auth-card-inner {
position: relative;
padding: 0;
overflow: visible;
color: var(--login-ink);
background: transparent;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.auth-redesign .auth-card-inner::before { content: none; }
.auth-redesign .auth-head {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
margin-bottom: clamp(26px, 5vw, 42px);
}
.auth-redesign .auth-mark {
display: inline-flex;
align-items: center;
gap: 9px;
font: 700 13px/1 var(--sans);
letter-spacing: -.01em;
text-transform: none;
color: rgba(9, 10, 18, .42);
}
.auth-redesign .auth-mark b {
color: var(--login-purple-2);
font-weight: 700;
}
.auth-redesign .auth-mark em {
font: 700 13px/1 var(--sans);
color: rgba(9, 10, 18, .18);
}
.auth-redesign .auth-mark i,
.auth-redesign .auth-pill { display: none; }
.auth-redesign .auth-title { margin: 0 0 22px; }
.auth-redesign .auth-title h1 {
display: flex;
flex-direction: column;
gap: 2px;
color: var(--login-ink);
letter-spacing: -.07em;
margin: 0;
}
.auth-redesign .auth-title h1 span {
display: block;
width: max-content;
padding: 0;
border: 0;
color: var(--login-ink);
font: 500 clamp(64px, 8.5vw, 108px)/.93 "Noto Serif SC", "Songti SC", "STSong", serif;
letter-spacing: -.11em;
}
.auth-redesign .auth-title h1 em {
display: block;
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: clamp(52px, 7.2vw, 88px);
line-height: .94;
letter-spacing: -.045em;
color: var(--login-ink);
}
.auth-redesign .auth-title h1 em::first-letter { color: var(--login-purple); }
.auth-redesign .auth-sub {
max-width: 510px;
margin-top: 22px;
color: rgba(9, 10, 18, .52);
font: 500 16px/1.8 var(--sans);
letter-spacing: -.01em;
}
.auth-redesign .auth-input {
width: min(392px, calc(100% - 132px));
margin: 20px 0 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.auth-redesign .auth-input label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.auth-redesign .auth-input-row {
height: 64px;
display: grid;
grid-template-columns: 1fr 42px;
align-items: center;
gap: 8px;
padding: 0 10px 0 18px;
border: 1px solid rgba(12, 16, 32, .06);
border-radius: 12px;
background: rgba(255, 255, 255, .86);
box-shadow: 0 16px 34px rgba(24, 33, 70, .08);
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.auth-redesign .auth-input-row::before {
content: "API Key";
font: 700 13px/1 var(--mono);
color: rgba(9, 10, 18, .48);
padding-right: 10px;
border-right: 1px solid rgba(9, 10, 18, .08);
}
.auth-redesign .auth-input-row {
grid-template-columns: auto minmax(0, 1fr) 42px;
}
.auth-redesign .auth-input-row:focus-within {
border-color: rgba(99, 91, 255, .26);
background: #fff;
box-shadow: 0 18px 40px rgba(99, 91, 255, .12), 0 0 0 4px rgba(99, 91, 255, .06);
}
.auth-redesign .auth-input-prefix { display: none; }
.auth-redesign .auth-input-row input {
min-width: 0;
width: 100%;
height: 100%;
color: var(--login-ink);
font: 700 15px/1 var(--mono);
letter-spacing: .025em;
}
.auth-redesign .auth-eye {
width: 42px;
height: 42px;
display: grid;
place-items: center;
color: rgba(9, 10, 18, .42);
border-radius: 10px;
transition: color .2s ease, background .2s ease;
}
.auth-redesign .auth-eye:hover {
color: var(--login-purple-2);
background: rgba(99, 91, 255, .08);
}
.auth-redesign .auth-actions {
position: relative;
margin: -64px 0 0 min(404px, calc(100% - 120px));
display: block;
width: 120px;
}
.auth-redesign .auth-submit {
width: 120px;
height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 20px;
border-radius: 12px;
color: #fff;
font: 800 15px/1 var(--sans);
letter-spacing: .04em;
background: #050507;
box-shadow: 0 18px 38px rgba(5, 5, 7, .22);
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.auth-redesign .auth-submit:hover {
transform: translateY(-2px);
background: #111119;
box-shadow: 0 22px 46px rgba(5, 5, 7, .28);
}
.auth-redesign .auth-submit:disabled { opacity: .72; cursor: progress; }
.auth-redesign .auth-submit-text,
.auth-redesign .auth-submit-arrow { color: #fff; }
.auth-redesign .auth-submit-arrow { font-family: var(--sans); font-size: 18px; }
.auth-redesign .spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,.28);
border-top-color: #fff;
border-radius: 50%;
animation: spin .8s linear infinite;
}
.auth-redesign .auth-foot {
width: min(520px, 100%);
margin-top: 26px;
padding: 0;
border: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
color: rgba(9, 10, 18, .48);
font: 600 12px/1.3 var(--sans);
letter-spacing: -.01em;
}
.auth-redesign .auth-foot span {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.auth-redesign .auth-foot .dot {
flex: 0 0 auto;
width: 17px;
height: 17px;
display: grid;
place-items: center;
border-radius: 6px;
background: rgba(99, 91, 255, .10);
box-shadow: none;
}
.auth-redesign .auth-foot .dot::after {
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--login-purple-2);
}
.auth-redesign .auth-foot .dot.blue::after { background: #6b8cff; }
.auth-redesign .auth-foot .dot.pink::after { background: #9f7aea; }
.auth-redesign .alert {
width: min(520px, 100%);
margin-top: 14px;
padding: 12px 14px;
color: #b42318;
background: rgba(255, 245, 245, .92);
border: 1px solid rgba(244, 63, 94, .18);
border-radius: 12px;
font-size: 13px;
}
.auth-model-wall {
position: relative;
height: clamp(520px, 68vh, 740px);
min-width: 0;
overflow: hidden;
border-radius: 30px;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
}
.auth-model-wall::before {
content: "";
position: absolute;
inset: -10% -8%;
background:
radial-gradient(500px 320px at 76% 25%, rgba(91, 113, 255, .18), transparent 70%),
linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .26) 42%, transparent 100%);
pointer-events: none;
z-index: 3;
}
.auth-model-wall::after {
content: "";
position: absolute;
inset: auto -5% -8% auto;
width: 70%;
height: 36%;
background: radial-gradient(ellipse at center, rgba(104, 116, 255, .22), transparent 68%);
filter: blur(8px);
pointer-events: none;
z-index: 3;
}
.logo-edge {
position: absolute;
top: 0;
bottom: 0;
width: 22%;
pointer-events: none;
z-index: 4;
}
.logo-edge-left { left: 0; background: linear-gradient(90deg, #f7f8fc 0%, rgba(247,248,252,.76) 34%, transparent 100%); }
.logo-edge-right { right: 0; background: linear-gradient(270deg, #f2f5fb 0%, rgba(242,245,251,.72) 35%, transparent 100%); }
.logo-motion-intro {
position: absolute;
inset: -18% -26% -18% -12%;
width: auto;
height: auto;
min-height: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: transparent !important;
}
.logo-motion-intro::after { content: none; }
.logo-motion-container {
position: relative;
z-index: 2;
width: 138%;
height: 128%;
display: grid;
grid-template-rows: repeat(4, 1fr);
gap: clamp(14px, 2vw, 24px);
transform: rotate(-12deg);
transform-origin: center;
will-change: transform;
}
.logo-motion-row {
min-width: 0;
display: flex;
align-items: stretch;
will-change: transform;
}
.logo-motion-track {
display: flex;
align-items: stretch;
gap: clamp(14px, 1.8vw, 24px);
min-width: max-content;
animation: logoTrackLeft 42s linear infinite;
will-change: transform;
}
.logo-motion-row:nth-child(even) .logo-motion-track {
animation-name: logoTrackRight;
animation-duration: 48s;
}
.logo-motion-row:hover .logo-motion-track { animation-play-state: paused; }
.model-tile {
position: relative;
flex: 0 0 clamp(166px, 15vw, 230px);
min-height: clamp(104px, 11vw, 142px);
padding: clamp(16px, 1.8vw, 22px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
overflow: hidden;
border-radius: 22px;
color: #151724;
background:
linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(246, 247, 255, .72)),
repeating-linear-gradient(90deg, rgba(17, 24, 39, .05) 0 1px, transparent 1px 6px);
border: 1px solid rgba(24, 31, 56, .06);
box-shadow:
0 20px 48px rgba(36, 43, 80, .12),
inset 0 1px 0 rgba(255, 255, 255, .95),
inset 0 -16px 32px rgba(103, 111, 255, .08);
transform: translateZ(0);
}
.model-tile::before {
content: attr(data-sort);
position: absolute;
left: 12px;
top: 10px;
color: rgba(8, 10, 18, .18);
font: 800 10px/1 var(--mono);
}
.model-tile::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 34%;
background: linear-gradient(180deg, transparent, rgba(100, 116, 255, .14));
pointer-events: none;
}
.model-tile-icon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
color: #121420;
}
.model-tile-icon img {
display: block;
width: 38px;
height: 38px;
object-fit: contain;
}
.model-tile strong {
position: relative;
z-index: 1;
color: #171927;
font: 800 clamp(15px, 1.6vw, 19px)/1.1 var(--sans);
letter-spacing: -.025em;
text-align: center;
}
.model-tile small {
position: relative;
z-index: 1;
color: rgba(9, 10, 18, .48);
font: 600 11px/1 var(--sans);
letter-spacing: -.01em;
text-align: center;
}
@keyframes logoTrackLeft {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes logoTrackRight {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
.reviews-section {
position: relative;
z-index: 2;
padding: 0 0 clamp(18px, 3vw, 34px);
}
.reviews-title {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
margin-bottom: 18px;
color: #11131c;
}
.reviews-title strong {
font: 800 clamp(20px, 2.6vw, 28px)/1 var(--sans);
letter-spacing: -.05em;
}
.reviews-title span {
color: rgba(99, 91, 255, .86);
font: 700 12px/1 var(--sans);
}
.reviews-title a {
color: rgba(9, 10, 18, .56);
text-decoration: none;
font: 700 12px/1 var(--sans);
}
.reviews-marquee {
position: relative;
width: 100%;
overflow: hidden;
padding: 2px 0 8px;
}
.review-row {
display: flex;
width: 100%;
margin-bottom: 14px;
}
.review-row:last-child { margin-bottom: 0; }
.review-track {
display: flex;
gap: 16px;
min-width: max-content;
animation: reviewLeft 32s linear infinite;
}
.review-row-right .review-track {
animation-name: reviewRight;
animation-duration: 36s;
}
.review-row:hover .review-track { animation-play-state: paused; }
.review-card {
width: clamp(230px, 22vw, 320px);
min-height: 120px;
padding: 18px;
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(16, 20, 32, .06);
background: rgba(255, 255, 255, .66);
box-shadow: 0 14px 34px rgba(32, 38, 70, .06);
}
.review-head {
display: grid;
grid-template-columns: 38px 1fr auto;
align-items: center;
gap: 10px;
}
.review-head img {
width: 38px;
height: 38px;
border-radius: 999px;
object-fit: cover;
}
.review-head figcaption {
display: flex;
flex-direction: column;
min-width: 0;
}
.review-head strong {
color: #181a24;
font: 800 13px/1.2 var(--sans);
}
.review-head span {
color: rgba(9, 10, 18, .42);
font: 600 12px/1.2 var(--sans);
}
.review-head b {
color: rgba(99, 91, 255, .24);
font: 800 32px/1 Georgia, serif;
}
.review-card blockquote {
margin-top: 14px;
color: rgba(9, 10, 18, .76);
font: 500 13px/1.65 var(--sans);
}
.review-fade {
position: absolute;
top: 0;
bottom: 0;
width: min(22vw, 240px);
pointer-events: none;
z-index: 2;
}
.review-fade-left { left: 0; background: linear-gradient(90deg, #f4f6fb 0%, rgba(244,246,251,.82) 32%, transparent 100%); }
.review-fade-right { right: 0; background: linear-gradient(270deg, #f4f6fb 0%, rgba(244,246,251,.82) 32%, transparent 100%); }
@keyframes reviewLeft {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - 8px)); }
}
@keyframes reviewRight {
from { transform: translateX(calc(-50% - 8px)); }
to { transform: translateX(0); }
}
.auth-redesign:not(.hidden) .auth-stage {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
@media (max-width: 1080px) {
.auth-redesign .auth-hero-grid {
grid-template-columns: 1fr;
min-height: auto;
gap: 24px;
padding-top: 14px;
}
.auth-redesign .auth-stage {
width: min(620px, 100%);
margin: 0 auto;
}
.auth-model-wall {
order: -1;
height: 290px;
border-radius: 24px;
}
.logo-motion-intro { inset: -34% -28%; }
.logo-motion-container {
width: 160%;
height: 150%;
gap: 14px;
transform: rotate(-10deg);
}
.model-tile { flex-basis: 170px; min-height: 98px; border-radius: 18px; }
.auth-redesign .auth-foot { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
.auth-redesign {
padding: 18px 14px 0;
}
.auth-redesign .auth-shell {
min-height: calc(100vh - 18px);
gap: 20px;
}
.auth-model-wall {
height: 220px;
margin: -18px -14px 0;
border-radius: 0 0 26px 26px;
opacity: .94;
}
.auth-redesign .auth-head { margin-bottom: 24px; }
.auth-redesign .auth-mark { font-size: 12px; }
.auth-redesign .auth-title h1 span {
font-size: clamp(48px, 17vw, 72px);
}
.auth-redesign .auth-title h1 em {
font-size: clamp(42px, 14vw, 62px);
}
.auth-redesign .auth-sub {
font-size: 14px;
line-height: 1.7;
margin-top: 16px;
}
.auth-redesign .auth-input-row {
height: 58px;
padding-left: 14px;
}
.auth-redesign .auth-input { width: 100%; }
.auth-redesign .auth-actions {
position: static;
width: 100%;
margin: 12px 0 0;
}
.auth-redesign .auth-submit {
width: 100%;
height: 56px;
}
.auth-redesign .auth-foot {
margin-top: 18px;
gap: 10px;
font-size: 12px;
}
.reviews-title { margin-top: 4px; }
.reviews-title a { display: none; }
.review-row-right { display: none; }
.review-card { width: 254px; }
.review-fade { width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
.logo-motion-track,
.review-track { animation: none !important; }
}
/* ===========================================================
KEY LOGIN RESPONSIVE FINAL · 2026-05-30
修复：桌面单页自适应、禁止横向滚动、按钮紧贴输入框右侧、重点模型居中滚动。
=========================================================== */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
.auth-redesign {
width: 100vw;
height: 100vh;
height: 100dvh;
max-width: 100vw;
overflow: hidden;
padding: clamp(18px, 3vh, 36px) clamp(18px, 4vw, 56px) clamp(14px, 2.4vh, 28px);
}
.auth-redesign .auth-shell {
width: min(1420px, 100%);
height: 100%;
min-height: 0;
max-width: 100%;
margin-inline: auto;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
align-content: stretch;
gap: clamp(14px, 2.4vh, 28px);
}
.auth-redesign .auth-hero-grid {
min-height: 0;
height: 100%;
max-width: 100%;
display: grid;
grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr);
align-items: center;
gap: clamp(26px, 4vw, 58px);
overflow: visible;
}
.auth-redesign .auth-stage {
width: min(590px, 100%);
max-width: 100%;
justify-self: start;
}
.auth-redesign .auth-head {
margin-bottom: clamp(20px, 4vh, 36px);
}
.auth-redesign .auth-title {
margin-bottom: clamp(18px, 2.8vh, 24px);
}
.auth-redesign .auth-title h1 span {
font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
font-size: clamp(66px, 7vw, 96px);
line-height: .92;
}
.auth-redesign .auth-title h1 em {
font-size: clamp(52px, 5.6vw, 76px);
line-height: .94;
}
.auth-redesign .auth-sub {
max-width: 580px;
margin-top: clamp(16px, 2.4vh, 22px);
font-size: clamp(14px, 1.08vw, 16px);
line-height: 1.72;
}
.auth-redesign .auth-form-row {
width: min(610px, 100%);
display: grid;
grid-template-columns: minmax(0, 1fr) 124px;
align-items: stretch;
gap: 12px;
margin-top: clamp(18px, 3vh, 26px);
}
.auth-redesign .auth-input {
width: auto;
min-width: 0;
margin: 0;
}
.auth-redesign .auth-input-row {
height: 62px;
min-width: 0;
grid-template-columns: auto minmax(0, 1fr) 40px;
gap: 8px;
padding: 0 10px 0 18px;
border-radius: 14px;
}
.auth-redesign .auth-input-row input {
height: 100%;
min-width: 0;
}
.auth-redesign .auth-eye {
width: 40px;
height: 40px;
}
.auth-redesign .auth-actions {
position: static;
width: auto;
margin: 0;
display: block;
}
.auth-redesign .auth-submit {
width: 100%;
height: 62px;
border-radius: 14px;
white-space: nowrap;
}
.auth-redesign .auth-foot {
width: min(610px, 100%);
margin-top: clamp(16px, 2.8vh, 24px);
}
.auth-model-wall {
width: 100%;
max-width: 100%;
height: min(62vh, 620px);
min-height: 410px;
justify-self: stretch;
border-radius: 32px;
overflow: hidden;
contain: paint;
}
.logo-motion-intro {
inset: -16% -18% -16% -10%;
max-width: none;
}
.logo-motion-container {
width: 128%;
height: 124%;
gap: clamp(12px, 1.8vw, 22px);
transform: rotate(-12deg) translate3d(-1%, 0, 0);
}
.logo-motion-row {
min-width: 0;
}
.logo-motion-row-center {
z-index: 2;
}
.logo-motion-track {
gap: clamp(12px, 1.45vw, 20px);
animation-duration: 46s;
}
.logo-motion-row-center .logo-motion-track {
animation-duration: 40s;
}
.logo-motion-row:nth-child(even) .logo-motion-track {
animation-duration: 44s;
}
.model-tile {
flex-basis: clamp(154px, 12.4vw, 205px);
min-height: clamp(94px, 9.3vw, 128px);
padding: clamp(14px, 1.4vw, 20px);
border-radius: clamp(18px, 1.7vw, 24px);
}
.model-tile-featured {
flex-basis: clamp(176px, 13.8vw, 226px);
min-height: clamp(104px, 10.5vw, 144px);
background:
linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 248, 255, .80)),
repeating-linear-gradient(90deg, rgba(17, 24, 39, .055) 0 1px, transparent 1px 6px);
border-color: rgba(99, 91, 255, .12);
box-shadow:
0 24px 58px rgba(47, 55, 108, .16),
inset 0 1px 0 rgba(255, 255, 255, .96),
inset 0 -18px 34px rgba(103, 111, 255, .12);
}
.model-tile-featured strong {
font-size: clamp(16px, 1.45vw, 20px);
}
.reviews-section {
max-width: 100%;
min-height: 0;
padding: 0;
overflow: hidden;
}
.reviews-title {
margin-bottom: clamp(10px, 1.5vh, 16px);
}
.reviews-marquee {
max-height: min(23vh, 210px);
overflow: hidden;
padding-bottom: 2px;
}
.review-row {
margin-bottom: 12px;
}
.review-track {
gap: 14px;
}
.review-card {
width: clamp(235px, 18.4vw, 292px);
min-height: 104px;
padding: 15px 16px;
border-radius: 16px;
}
.review-head {
grid-template-columns: 34px 1fr auto;
}
.review-head img {
width: 34px;
height: 34px;
}
.review-card blockquote {
margin-top: 10px;
font-size: 12.5px;
line-height: 1.55;
}
@media (min-width: 1680px) {
.auth-redesign .auth-shell { width: min(1500px, 100%); }
.auth-redesign .auth-hero-grid { grid-template-columns: minmax(460px, .86fr) minmax(0, 1.14fr); }
.auth-model-wall { height: min(64vh, 660px); }
}
@media (max-height: 820px) and (min-width: 1081px) {
.auth-redesign { padding-block: 18px 14px; }
.auth-redesign .auth-shell { gap: 12px; }
.auth-redesign .auth-head { margin-bottom: 18px; }
.auth-redesign .auth-title h1 span { font-size: clamp(56px, 6.3vw, 82px); }
.auth-redesign .auth-title h1 em { font-size: clamp(44px, 5vw, 64px); }
.auth-redesign .auth-sub { margin-top: 12px; line-height: 1.55; }
.auth-redesign .auth-form-row { margin-top: 16px; }
.auth-redesign .auth-foot { margin-top: 14px; }
.auth-model-wall { height: 56vh; min-height: 360px; }
.reviews-marquee { max-height: 176px; }
.review-row-right { display: none; }
}
@media (max-width: 1080px) {
.auth-redesign {
overflow-y: auto;
overflow-x: hidden;
padding: 16px 16px 22px;
}
.auth-redesign .auth-shell {
min-height: 100%;
height: auto;
display: flex;
gap: 22px;
}
.auth-redesign .auth-hero-grid {
grid-template-columns: 1fr;
height: auto;
gap: 22px;
padding-top: 0;
}
.auth-redesign .auth-stage {
width: min(650px, 100%);
justify-self: center;
margin-inline: auto;
}
.auth-model-wall {
order: -1;
width: 100%;
height: clamp(220px, 34vh, 330px);
min-height: 220px;
margin: 0;
border-radius: 26px;
}
.logo-motion-intro { inset: -30% -24%; }
.logo-motion-container {
width: 150%;
height: 152%;
gap: 13px;
transform: rotate(-10deg) translate3d(-2%, 0, 0);
}
.model-tile,
.model-tile-featured {
flex-basis: 168px;
min-height: 96px;
border-radius: 18px;
}
.auth-redesign .auth-foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reviews-marquee { max-height: 220px; }
}
@media (max-width: 680px) {
.auth-redesign {
height: auto;
min-height: 100vh;
min-height: 100dvh;
padding: 12px 14px 18px;
}
.auth-redesign .auth-shell { gap: 18px; }
.auth-model-wall {
height: 190px;
min-height: 190px;
margin: 0 -2px;
border-radius: 24px;
}
.auth-redesign .auth-head { margin-bottom: 18px; }
.auth-redesign .auth-title h1 span { font-size: clamp(46px, 16vw, 66px); }
.auth-redesign .auth-title h1 em { font-size: clamp(40px, 13vw, 58px); }
.auth-redesign .auth-sub { margin-top: 14px; font-size: 13px; line-height: 1.65; }
.auth-redesign .auth-form-row {
grid-template-columns: 1fr;
gap: 10px;
margin-top: 16px;
}
.auth-redesign .auth-input-row { height: 56px; }
.auth-redesign .auth-submit { height: 54px; }
.auth-redesign .auth-foot {
grid-template-columns: 1fr;
margin-top: 14px;
gap: 8px;
}
.reviews-title { margin-top: 0; }
.reviews-title a { display: none; }
.review-row-right { display: none; }
.reviews-marquee { max-height: 134px; }
.review-card { width: 254px; min-height: 108px; }
.review-fade { width: 58px; }
}
/* === Login page patch: hide sort labels on model cards + color Jimeng logo === */
.auth-redesign .model-tile::before {
content: none !important;
display: none !important;
}
.auth-redesign .model-tile[data-sort="06"] .model-tile-icon img {
width: 42px;
height: 42px;
}
/* ===========================================================
KEY LOGIN MOBILE FIX V4 · 2026-05-30
修复：手机预览偏移、宽度溢出、页面过高、file:// 模块报错后的登录卡片可见。
=========================================================== */
.auth-redesign:not(.hidden) {
display: block !important;
place-items: unset !important;
}
.auth-redesign,
.auth-redesign .auth-shell,
.auth-redesign .auth-hero-grid,
.auth-redesign .auth-stage,
.auth-redesign .auth-card,
.auth-redesign .auth-card-inner,
.auth-model-wall,
.reviews-section {
max-width: 100% !important;
}
.auth-redesign:not(.hidden) .auth-stage {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}
@media (max-width: 680px) {
html,
body {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
overscroll-behavior: none;
}
.auth-redesign {
position: fixed !important;
inset: 0 !important;
width: 100% !important;
height: 100vh !important;
height: 100svh !important;
min-height: 100vh !important;
min-height: 100svh !important;
overflow: hidden !important;
padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
.auth-redesign .auth-shell {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
display: grid !important;
grid-template-rows: minmax(0, 1fr) auto !important;
gap: 10px !important;
margin: 0 auto !important;
overflow: hidden !important;
}
.auth-redesign .auth-hero-grid {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
gap: 12px !important;
padding: 0 !important;
overflow: hidden !important;
}
.auth-redesign .auth-stage {
order: 2 !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
justify-self: stretch !important;
}
.auth-redesign .auth-card,
.auth-redesign .auth-card-inner {
width: 100% !important;
min-width: 0 !important;
}
.auth-model-wall {
order: 1 !important;
flex: 0 0 auto !important;
width: 100% !important;
height: clamp(132px, 22vh, 180px) !important;
min-height: 132px !important;
margin: 0 !important;
border-radius: 22px !important;
}
.auth-model-wall::before { inset: -18% -12% !important; }
.auth-model-wall::after { height: 42% !important; opacity: .82 !important; }
.logo-motion-intro {
inset: -40% -38% -34% -26% !important;
}
.logo-motion-container {
width: 172% !important;
height: 162% !important;
gap: 10px !important;
transform: rotate(-9deg) translate3d(-3%, 0, 0) !important;
}
.logo-motion-track { gap: 10px !important; }
.model-tile,
.model-tile-featured {
flex-basis: 142px !important;
min-height: 78px !important;
padding: 10px 12px !important;
border-radius: 16px !important;
}
.model-tile-icon {
width: 28px !important;
height: 28px !important;
margin-bottom: 4px !important;
}
.model-tile-icon img {
max-width: 28px !important;
max-height: 28px !important;
}
.auth-redesign .model-tile[data-sort="06"] .model-tile-icon img {
width: 30px !important;
height: 30px !important;
}
.model-tile strong,
.model-tile-featured strong {
font-size: 13px !important;
line-height: 1.12 !important;
}
.model-tile small { font-size: 10px !important; }
.auth-redesign .auth-head {
margin-bottom: 10px !important;
}
.auth-redesign .auth-mark {
font-size: 11px !important;
gap: 7px !important;
}
.auth-redesign .auth-title {
margin: 0 0 10px !important;
}
.auth-redesign .auth-title h1 {
gap: 0 !important;
max-width: 100% !important;
}
.auth-redesign .auth-title h1 span {
width: auto !important;
max-width: 100% !important;
font-size: clamp(42px, 15.2vw, 58px) !important;
line-height: .92 !important;
letter-spacing: -.105em !important;
white-space: nowrap !important;
}
.auth-redesign .auth-title h1 em {
max-width: 100% !important;
font-size: clamp(33px, 11.5vw, 46px) !important;
line-height: .94 !important;
white-space: nowrap !important;
}
.auth-redesign .auth-sub {
max-width: 100% !important;
margin-top: 9px !important;
font-size: 12px !important;
line-height: 1.5 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.auth-redesign .auth-form-row {
width: 100% !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 86px !important;
align-items: stretch !important;
gap: 8px !important;
margin-top: 12px !important;
}
.auth-redesign .auth-input {
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
}
.auth-redesign .auth-input-row {
height: 50px !important;
min-width: 0 !important;
grid-template-columns: auto minmax(0, 1fr) 32px !important;
gap: 6px !important;
padding: 0 8px 0 12px !important;
border-radius: 12px !important;
}
.auth-redesign .auth-input-row::before {
font-size: 11px !important;
padding-right: 7px !important;
}
.auth-redesign .auth-input-row input {
min-width: 0 !important;
font-size: 12px !important;
letter-spacing: .02em !important;
}
.auth-redesign .auth-eye {
width: 32px !important;
height: 32px !important;
border-radius: 9px !important;
}
.auth-redesign .auth-actions {
position: static !important;
width: auto !important;
margin: 0 !important;
}
.auth-redesign .auth-submit {
width: 100% !important;
height: 50px !important;
min-width: 0 !important;
padding: 0 10px !important;
border-radius: 12px !important;
font-size: 13px !important;
letter-spacing: .02em !important;
}
.auth-redesign .auth-submit-arrow { font-size: 16px !important; }
.auth-redesign .auth-foot {
width: 100% !important;
margin-top: 10px !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
font-size: 10px !important;
line-height: 1.25 !important;
}
.auth-redesign .auth-foot span {
gap: 4px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.auth-redesign .auth-foot .dot {
width: 13px !important;
height: 13px !important;
border-radius: 4px !important;
}
.auth-redesign .auth-foot .dot::after {
width: 5px !important;
height: 5px !important;
}
.reviews-section {
width: 100% !important;
height: 108px !important;
min-height: 0 !important;
flex: 0 0 auto !important;
overflow: hidden !important;
}
.reviews-title {
margin: 0 0 6px !important;
align-items: baseline !important;
}
.reviews-title strong { font-size: 16px !important; }
.reviews-title span { display: none !important; }
.reviews-title a { display: none !important; }
.reviews-marquee {
max-height: 82px !important;
padding-bottom: 0 !important;
}
.review-row {
margin-bottom: 8px !important;
}
.review-row-right {
display: none !important;
}
.review-track {
gap: 10px !important;
}
.review-card {
width: 224px !important;
min-height: 78px !important;
padding: 10px 12px !important;
border-radius: 14px !important;
}
.review-head {
grid-template-columns: 28px 1fr auto !important;
gap: 8px !important;
}
.review-head img {
width: 28px !important;
height: 28px !important;
}
.review-head figcaption strong { font-size: 12px !important; }
.review-head figcaption span { font-size: 10px !important; }
.review-head b { font-size: 20px !important; }
.review-card blockquote {
margin-top: 6px !important;
font-size: 11px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.review-fade { width: 48px !important; }
}
@media (max-width: 420px) and (max-height: 760px) {
.auth-model-wall {
height: 118px !important;
min-height: 118px !important;
}
.auth-redesign .auth-head { margin-bottom: 8px !important; }
.auth-redesign .auth-title h1 span { font-size: clamp(38px, 14.4vw, 52px) !important; }
.auth-redesign .auth-title h1 em { font-size: clamp(30px, 10.8vw, 42px) !important; }
.auth-redesign .auth-sub { -webkit-line-clamp: 1 !important; }
.auth-redesign .auth-form-row { margin-top: 10px !important; }
.auth-redesign .auth-foot { margin-top: 8px !important; }
.reviews-section { height: 88px !important; }
.reviews-marquee { max-height: 62px !important; }
.review-card { min-height: 62px !important; }
}
@media (max-width: 360px) {
.auth-redesign { padding-inline: 10px !important; }
.auth-redesign .auth-form-row { grid-template-columns: minmax(0, 1fr) 76px !important; gap: 7px !important; }
.auth-redesign .auth-submit-text { font-size: 12px !important; }
.auth-redesign .auth-submit-arrow { display: none !important; }
.auth-redesign .auth-foot { grid-template-columns: 1fr !important; }
.reviews-section { height: 94px !important; }
}
/* ===========================================================
KEY LOGIN MOBILE FIX V5 · 2026-05-30
修复：手机端模型墙不再作为独立大块占位，改为顶部背景层；
登录内容与输入按钮保持完整同屏，评价区固定底部高度。
SVG Logo 已在 index.html 中转为 data URI 硬编码，不再依赖 assets/logos 的相对加载。
=========================================================== */
.auth-redesign .model-tile::before {
content: none !important;
display: none !important;
}
.auth-redesign .model-tile-icon img {
display: block;
max-width: 100%;
max-height: 100%;
}
@media (max-width: 680px) {
html,
body {
width: 100% !important;
max-width: 100% !important;
min-height: 100% !important;
overflow: hidden !important;
}
.auth-redesign {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
height: 100svh !important;
min-height: 100vh !important;
min-height: 100svh !important;
padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
overflow: hidden !important;
background:
radial-gradient(360px 220px at 72% 6%, rgba(124, 135, 255, .25), transparent 68%),
radial-gradient(340px 260px at 16% 18%, rgba(255,255,255,.86), transparent 70%),
linear-gradient(180deg, #fbfcff 0%, #f5f7fc 55%, #eef3f9 100%) !important;
}
.auth-redesign .auth-shell {
position: relative !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
display: grid !important;
grid-template-rows: minmax(0, 1fr) 108px !important;
gap: 10px !important;
overflow: hidden !important;
margin: 0 !important;
}
.auth-redesign .auth-hero-grid {
position: relative !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
display: block !important;
overflow: hidden !important;
padding: 0 !important;
}
.auth-model-wall {
position: absolute !important;
left: -12px !important;
right: -12px !important;
top: -8px !important;
width: auto !important;
height: clamp(156px, 25svh, 212px) !important;
min-height: 0 !important;
margin: 0 !important;
border-radius: 0 0 26px 26px !important;
opacity: .9 !important;
z-index: 0 !important;
pointer-events: none !important;
transform: none;
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0,0,0,.72) 82%, transparent 100%) !important;
mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0,0,0,.72) 82%, transparent 100%) !important;
}
.auth-model-wall::before {
inset: -18% -10% !important;
background:
radial-gradient(260px 160px at 70% 18%, rgba(91, 113, 255, .18), transparent 72%),
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.56)) !important;
}
.auth-model-wall::after {
inset: auto -12% -10% -12% !important;
width: auto !important;
height: 44% !important;
background: linear-gradient(180deg, transparent, rgba(245,247,252,.9)) !important;
filter: none !important;
}
.logo-edge { display: none !important; }
.logo-motion-intro {
position: absolute !important;
inset: -42% -44% -38% -34% !important;
height: auto !important;
width: auto !important;
}
.logo-motion-container {
width: 182% !important;
height: 164% !important;
gap: 9px !important;
transform: rotate(-9deg) translate3d(-4%, -1%, 0) !important;
grid-template-rows: repeat(4, 1fr) !important;
}
.logo-motion-row { min-height: 0 !important; }
.logo-motion-track { gap: 9px !important; }
.model-tile,
.model-tile-featured {
flex-basis: 136px !important;
min-height: 74px !important;
padding: 9px 10px !important;
border-radius: 15px !important;
box-shadow: 0 14px 34px rgba(47,55,108,.12), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.model-tile-icon {
width: 27px !important;
height: 27px !important;
margin-bottom: 3px !important;
}
.model-tile-icon img,
.auth-redesign .model-tile[data-sort="06"] .model-tile-icon img {
width: 27px !important;
height: 27px !important;
max-width: 27px !important;
max-height: 27px !important;
}
.model-tile strong,
.model-tile-featured strong {
font-size: 12.5px !important;
line-height: 1.08 !important;
}
.model-tile small {
margin-top: 3px !important;
font-size: 9.5px !important;
line-height: 1 !important;
}
.auth-redesign .auth-stage {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding-top: clamp(142px, 23svh, 188px) !important;
opacity: 1;
visibility: visible;
transform: none;
}
.auth-redesign .auth-card,
.auth-redesign .auth-card-inner {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.auth-redesign .auth-head {
margin: 0 0 8px !important;
}
.auth-redesign .auth-mark {
max-width: 100% !important;
font-size: 11px !important;
gap: 7px !important;
white-space: nowrap !important;
}
.auth-redesign .auth-title {
margin: 0 0 8px !important;
}
.auth-redesign .auth-title h1 {
gap: 0 !important;
max-width: 100% !important;
}
.auth-redesign .auth-title h1 span {
width: auto !important;
max-width: 100% !important;
font-size: clamp(43px, 15vw, 58px) !important;
line-height: .92 !important;
letter-spacing: -.105em !important;
white-space: nowrap !important;
}
.auth-redesign .auth-title h1 em {
width: auto !important;
max-width: 100% !important;
font-size: clamp(34px, 11.4vw, 45px) !important;
line-height: .94 !important;
white-space: nowrap !important;
}
.auth-redesign .auth-sub {
max-width: 100% !important;
margin: 8px 0 0 !important;
font-size: 12px !important;
line-height: 1.45 !important;
color: rgba(9, 10, 18, .54) !important;
display: -webkit-box !important;
-webkit-line-clamp: 1 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.auth-redesign .auth-form-row {
width: 100% !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 86px !important;
align-items: stretch !important;
gap: 8px !important;
margin-top: 12px !important;
}
.auth-redesign .auth-input {
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
}
.auth-redesign .auth-input-row {
height: 50px !important;
min-width: 0 !important;
grid-template-columns: auto minmax(0, 1fr) 32px !important;
gap: 6px !important;
padding: 0 8px 0 12px !important;
border-radius: 12px !important;
background: rgba(255,255,255,.88) !important;
box-shadow: 0 12px 28px rgba(24,33,70,.08) !important;
}
.auth-redesign .auth-input-row::before {
font-size: 11px !important;
padding-right: 7px !important;
}
.auth-redesign .auth-input-row input {
min-width: 0 !important;
font-size: 12px !important;
letter-spacing: .02em !important;
}
.auth-redesign .auth-eye {
width: 32px !important;
height: 32px !important;
border-radius: 9px !important;
}
.auth-redesign .auth-actions {
position: static !important;
width: auto !important;
margin: 0 !important;
}
.auth-redesign .auth-submit {
width: 100% !important;
height: 50px !important;
min-width: 0 !important;
padding: 0 10px !important;
border-radius: 12px !important;
font-size: 13px !important;
letter-spacing: .02em !important;
}
.auth-redesign .auth-submit-arrow { font-size: 16px !important; }
.auth-redesign .auth-foot {
width: 100% !important;
margin-top: 10px !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
font-size: 10px !important;
line-height: 1.25 !important;
}
.auth-redesign .auth-foot span {
gap: 4px !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.auth-redesign .auth-foot .dot {
width: 13px !important;
height: 13px !important;
border-radius: 4px !important;
}
.auth-redesign .auth-foot .dot::after {
width: 5px !important;
height: 5px !important;
}
.reviews-section {
width: 100% !important;
height: 108px !important;
min-height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
align-self: end !important;
}
.reviews-title {
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
margin: 0 0 6px !important;
}
.reviews-title strong { font-size: 17px !important; }
.reviews-title span { font-size: 10px !important; }
.reviews-title a { display: none !important; }
.reviews-marquee {
max-height: 82px !important;
padding: 0 !important;
}
.review-row { margin-bottom: 8px !important; }
.review-row-right { display: none !important; }
.review-track { gap: 10px !important; }
.review-card {
width: 224px !important;
min-height: 78px !important;
padding: 10px 12px !important;
border-radius: 14px !important;
}
.review-head {
grid-template-columns: 28px 1fr auto !important;
gap: 8px !important;
}
.review-head img {
width: 28px !important;
height: 28px !important;
}
.review-head figcaption strong { font-size: 12px !important; }
.review-head figcaption span { font-size: 10px !important; }
.review-head b { font-size: 20px !important; }
.review-card blockquote {
margin-top: 6px !important;
font-size: 11px !important;
line-height: 1.35 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.review-fade { width: 46px !important; }
}
@media (max-width: 420px) and (max-height: 760px) {
.auth-redesign .auth-shell {
grid-template-rows: minmax(0, 1fr) 86px !important;
gap: 8px !important;
}
.auth-model-wall {
height: clamp(124px, 21svh, 150px) !important;
}
.auth-redesign .auth-stage {
padding-top: clamp(112px, 19.5svh, 138px) !important;
}
.auth-redesign .auth-head { margin-bottom: 6px !important; }
.auth-redesign .auth-title h1 span { font-size: clamp(36px, 14.2vw, 50px) !important; }
.auth-redesign .auth-title h1 em { font-size: clamp(28px, 10.6vw, 38px) !important; }
.auth-redesign .auth-sub { display: none !important; }
.auth-redesign .auth-form-row { margin-top: 10px !important; }
.auth-redesign .auth-input-row,
.auth-redesign .auth-submit { height: 46px !important; }
.auth-redesign .auth-foot { margin-top: 8px !important; }
.reviews-section { height: 86px !important; }
.reviews-marquee { max-height: 60px !important; }
.review-card { min-height: 60px !important; }
}
@media (max-width: 360px) {
.auth-redesign { padding-inline: 10px !important; }
.auth-redesign .auth-form-row {
grid-template-columns: minmax(0, 1fr) 76px !important;
gap: 7px !important;
}
.auth-redesign .auth-submit-text { font-size: 12px !important; }
.auth-redesign .auth-submit-arrow { display: none !important; }
.auth-redesign .auth-foot { grid-template-columns: 1fr !important; }
}
/* ===========================================================
SHELL ANIMATION RESTORE · 2026-05-30
允许 GSAP 接管登录页与控制台切换动画，同时保留移动端兜底显示。
=========================================================== */
.auth-redesign:not(.hidden) .auth-stage,
.auth-page:not(.hidden) .auth-stage {
will-change: transform, opacity;
}
.mobile-tabs {
will-change: transform, opacity;
}