:root { --ink:#111; --muted:#858585; --orange:#ff8a27; --blue:#2f7dff; --green:#19a866; --red:#d93434; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#fff; }
body { color:var(--ink); font-family:Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,textarea { font:inherit; } button { -webkit-tap-highlight-color:transparent; }
.hero { min-height:100vh; padding:112px 24px 54px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.kicker { display:flex; justify-content:center; align-items:center; gap:58px; margin-bottom:48px; font-size:18px; line-height:1; font-weight:700; }
.word { display:inline-flex; } .glyph { display:inline-block; animation:glyphFlash 5.2s ease-in-out infinite; }
.word-left { animation:driftLeft 5.2s ease-in-out infinite; } .word-right { animation:driftRight 5.2s ease-in-out infinite; }
h1 { margin:0; font-size:clamp(44px,5.8vw,76px); line-height:1.04; font-weight:500; letter-spacing:0; }
.subtitle { max-width:510px; margin:24px 0 0; font-size:19px; line-height:1.48; font-weight:500; }
.hero-panel { width:min(660px,calc(100% - 96px)); margin:64px auto 0; padding:40px 44px 44px; border-radius:36px; background:#fff; box-shadow:0 34px 78px rgba(0,0,0,.16); display:grid; gap:12px; text-align:left; transition:box-shadow .2s ease; }
.hero-panel.is-invalid { box-shadow:0 34px 78px rgba(0,0,0,.16),0 0 34px rgba(217,52,52,.28); } .hero-panel.is-checking { box-shadow:0 34px 78px rgba(0,0,0,.16),0 0 34px rgba(47,125,255,.3); } .hero-panel.is-valid { box-shadow:0 34px 78px rgba(0,0,0,.16),0 0 34px rgba(25,168,102,.25); }
.panel-message { min-height:44px; display:flex; justify-content:center; align-items:center; gap:10px; margin:0 0 4px; font-size:20px; line-height:1.25; font-weight:800; text-align:center; }
.panel-message.is-error { color:var(--red); } .panel-message.is-valid { color:var(--green); }
.step-row { min-height:40px; display:flex; align-items:center; gap:10px; padding:4px 2px 0; } .step-index { width:25px; height:25px; flex:0 0 25px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff; font-size:13px; font-weight:800; }
.step-copy { min-width:0; flex:1; display:grid; gap:2px; } .step-copy strong { font-size:16px; } .step-copy span { color:var(--muted); font-size:12px; }
.step-action { min-width:56px; padding:7px 12px; border:0; border-radius:999px; background:#f1f1f1; color:var(--ink); font-size:13px; font-weight:700; cursor:pointer; } .step-action:disabled { color:#aaa; cursor:wait; }
.panel-section { width:100%; border:2px solid #f0f0f0; border-radius:12px; background:#fff; } .panel-input { padding:13px 16px; }
.panel-input input,.panel-input textarea { width:100%; border:0; outline:0; resize:vertical; color:var(--ink); background:transparent; line-height:1.5; font-size:16px; font-weight:600; }
.panel-input input { min-height:30px; } .panel-input textarea { min-height:56px; } .panel-input input::placeholder,.panel-input textarea::placeholder { color:#9a9a9a; }
.validation-line { min-height:18px; margin:-5px 3px 1px; color:var(--muted); font-size:13px; } .validation-line.is-valid { color:var(--green); font-weight:700; } .validation-line.is-invalid { color:var(--red); font-weight:700; }
.panel-info { padding:15px 16px; border:2px solid #f0f0f0; border-radius:12px; } .panel-info-text { display:flex; gap:9px; color:#222; font-size:14px; line-height:1.55; font-weight:600; } .info-icon { flex:0 0 auto; color:var(--orange); }
.confirm-row { display:flex; align-items:flex-start; gap:9px; margin:3px 2px 0; color:#666; font-size:13px; line-height:1.45; cursor:pointer; } .confirm-row input { width:16px; height:16px; flex:0 0 16px; margin:1px 0 0; accent-color:var(--ink); }
.enter-button,.query-action { width:100%; min-height:51px; border:0; border-radius:999px; color:#fff; font-weight:800; cursor:pointer; box-shadow:0 14px 25px rgba(0,0,0,.16); transition:transform .18s ease,opacity .18s ease,filter .18s ease; }
.enter-button { margin-top:4px; background:var(--ink); font-size:17px; } .enter-button:hover:not(:disabled),.query-action:hover { transform:translateY(-1px); filter:brightness(1.03); } .enter-button:disabled { color:#aaa; background:#e8e8e8; cursor:not-allowed; box-shadow:none; } .enter-button.is-checking { background:var(--blue); } .enter-button.is-valid { background:var(--green); }
.query-action { min-height:48px; background:linear-gradient(135deg,#ff7a1a,#ff9f43); font-size:14px; } .form-feedback { min-height:19px; color:var(--red); font-size:13px; text-align:center; }
.status-panel { width:min(660px,calc(100% - 96px)); margin:24px auto 0; padding:24px 30px 28px; border:1px solid #ededed; border-radius:22px; background:#fff; box-shadow:0 18px 48px rgba(0,0,0,.08); text-align:left; }
.status-heading,.status-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; } .status-heading { font-size:17px; font-weight:800; } .status-badge { padding:5px 10px; border-radius:999px; background:#f3f3f3; color:#666; font-size:12px; } .status-badge.is-running { background:#eaf1ff; color:#2368db; } .status-badge.is-success { background:#e8f8ef; color:#11804a; } .status-badge.is-review,.status-badge.is-failed { background:#fff1e6; color:#b65f11; }
.progress-track { height:6px; margin:18px 0 13px; overflow:hidden; border-radius:99px; background:#eee; } .progress-fill { width:0; height:100%; border-radius:inherit; background:var(--blue); transition:width .35s ease; } .status-message { min-height:22px; font-size:14px; } .status-meta { margin-top:13px; color:#888; font-size:12px; } .status-meta b { color:#222; font-weight:700; }
.timeline { display:grid; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid #f0f0f0; } .timeline-item { display:grid; grid-template-columns:10px 1fr auto; gap:9px; align-items:start; color:#777; font-size:12px; line-height:1.45; } .timeline-dot { width:8px; height:8px; margin-top:4px; border-radius:50%; background:#bbb; } .timeline-item strong { color:#222; font-size:13px; } .timeline-item time { color:#aaa; white-space:nowrap; } .plain-button { display:block; margin:18px auto 0; border:0; background:transparent; color:var(--blue); font-size:14px; cursor:pointer; }
@keyframes glyphFlash { 0%,100% { color:#111; } 6% { color:#ff7a1a; } 10% { color:#111; } } @keyframes driftLeft { 0%,100% { transform:translateX(0); } 40%,58% { transform:translateX(-46px); } 76% { transform:translateX(-22px); } } @keyframes driftRight { 0%,100% { transform:translateX(0); } 40%,58% { transform:translateX(46px); } 76% { transform:translateX(22px); } }
@media (max-width:640px) { .hero { padding:90px 20px 36px; } .kicker { gap:28px; margin-bottom:42px; font-size:16px; } h1 { max-width:360px; font-size:clamp(38px,11.8vw,54px); } .subtitle { max-width:345px; margin-top:23px; font-size:17px; } .hero-panel,.status-panel { width:min(100%,calc(100% - 32px)); } .hero-panel { margin-top:43px; padding:27px 22px 36px; border-radius:28px; gap:11px; } .panel-message { min-height:40px; font-size:18px; } .step-copy strong { font-size:15px; } .step-copy span { font-size:11px; } .panel-input { padding:12px 14px; } .panel-info { padding:13px 14px; } .panel-info-text { font-size:13px; } .status-panel { padding:21px 20px 24px; border-radius:20px; } .timeline-item time { font-size:10px; } @keyframes driftLeft { 0%,100% { transform:translateX(0); } 40%,58% { transform:translateX(-24px); } 76% { transform:translateX(-12px); } } @keyframes driftRight { 0%,100% { transform:translateX(0); } 40%,58% { transform:translateX(24px); } 76% { transform:translateX(12px); } } }