:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; color: #172033; background: #f4f7fb; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 15% -5%, #dbe9ff 0, transparent 29rem), linear-gradient(180deg, #f9fbff 0%, #f4f7fb 36%, #eef3fa 100%); }
button, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, textarea:focus-visible { outline: 3px solid rgba(40,112,255,.35); outline-offset: 2px; }
.shell { width: min(1180px, 100%); margin: 0 auto; padding: 24px 18px 44px; }
.hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.eyebrow { margin: 0 0 5px; color: #47617f; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
h1 { margin: 0; color: #12213a; font-size: clamp(24px, 5vw, 34px); line-height: 1.2; letter-spacing: -.03em; }
.subtitle { max-width: 700px; margin: 9px 0 0; color: #536176; font-size: 15px; line-height: 1.6; }
.access-button, .secondary-button, .copy-button, .retry-button { border: 1px solid #c9d6e8; border-radius: 10px; background: rgba(255,255,255,.84); color: #25344d; font-weight: 650; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.access-button { flex: 0 0 auto; padding: 10px 13px; white-space: nowrap; }
.access-button:hover, .secondary-button:hover, .copy-button:hover, .retry-button:hover { border-color: #8eb2ee; background: #f1f6ff; }
.panel { overflow: hidden; border: 1px solid rgba(185,203,229,.84); border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 14px 32px rgba(33,59,104,.08); }
.question-panel { padding: 18px; }
.question-label { display: block; margin-bottom: 10px; color: #1f2f49; font-size: 15px; font-weight: 750; }
#prompt { display: block; width: 100%; min-height: 106px; resize: vertical; padding: 13px 14px; border: 1px solid #b9c8dc; border-radius: 12px; background: #fff; color: #172033; font-size: 16px; line-height: 1.6; }
#prompt::placeholder { color: #8290a3; }
.question-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.counter, .notice, .status-line, .card-meta { color: #607089; font-size: 13px; line-height: 1.45; }
.primary-button { min-height: 42px; padding: 10px 18px; border: 0; border-radius: 10px; background: linear-gradient(135deg,#2475f2,#3d58dd); box-shadow: 0 7px 16px rgba(42,87,207,.24); color: #fff; font-weight: 750; transition: opacity .18s ease, transform .18s ease; }
.primary-button:hover:not(:disabled) { transform: translateY(-1px); }
button:disabled { cursor: not-allowed; opacity: .55; }
.status-line { min-height: 22px; margin: 11px 2px 0; }
.status-line[data-tone="error"] { color: #b42318; }
.status-line[data-tone="success"] { color: #047857; }
.notice { margin: 14px 2px 0; }
.answer-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(285px,1fr)); gap: 14px; margin-top: 18px; }
.answer-card { display: flex; min-width: 0; min-height: 252px; flex-direction: column; }
.answer-card[data-state="loading"] { border-color: #a9c5fb; }
.answer-card[data-state="error"] { border-color: #f4b8ae; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 15px 15px 10px; border-bottom: 1px solid #e5edf7; }
.model-name { margin: 0; color: #1b2b44; font-size: 17px; line-height: 1.35; }
.model-tag { display: inline-flex; align-items: center; min-height: 22px; margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: #edf4ff; color: #3c6096; font-size: 12px; font-weight: 650; }
.card-status { display: inline-flex; align-items: center; gap: 6px; color: #63738a; font-size: 12px; font-weight: 650; white-space: nowrap; }
.card-status::before { width: 7px; height: 7px; border-radius: 50%; background: #a7b6ca; content: ""; }
.answer-card[data-state="loading"] .card-status::before { background: #3c7aee; box-shadow: 0 0 0 4px rgba(60,122,238,.14); animation: pulse 1.2s ease-in-out infinite; }
.answer-card[data-state="success"] .card-status::before { background: #18a36c; }
.answer-card[data-state="error"] .card-status::before { background: #d83a2e; }
@keyframes pulse { 50% { opacity: .4; } }
.answer-content { flex: 1; margin: 0; padding: 15px; overflow-wrap: anywhere; white-space: pre-wrap; color: #27364e; font: 14px/1.68 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; }
.answer-card[data-state="idle"] .answer-content, .answer-card[data-state="loading"] .answer-content { color: #7a899c; font-family: inherit; }
.answer-card[data-state="error"] .answer-content { color: #a82820; font-family: inherit; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 10px 15px 14px; }
.card-meta { min-width: 0; }
.card-actions { display: flex; gap: 7px; }
.copy-button, .retry-button { padding: 7px 9px; font-size: 13px; }
.footer-note { margin: 20px 2px 0; color: #718198; font-size: 12px; line-height: 1.65; }
@media (max-width:600px) { .shell { padding: 18px 12px 32px; } .hero { gap: 12px; } .subtitle { font-size: 14px; } .access-button { padding: 9px 10px; font-size: 13px; } .question-panel { padding: 14px; } .question-actions { align-items: flex-end; } .answer-grid { grid-template-columns: minmax(0,1fr); gap: 12px; margin-top: 14px; } .answer-card { min-height: 220px; } }