:root { --bg:#ffffff; --card:#ffffff; --text:#202124; --muted:#5f6368; --primary:#3e7bfa; --border:#e0e3e7; --header-h:64px; --footer-h:48px; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Helvetica, Arial; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; padding-top: var(--header-h); padding-bottom: var(--footer-h); }
.app-header { position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.7)); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); padding: 12px 16px; z-index: 100; }
.app-header h1 { margin: 0; font-size: 20px; }
.subtitle { color: var(--muted); font-size: 12px; margin-top: 4px; }
.container { max-width: 640px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; height: calc(100vh - var(--header-h) - var(--footer-h)); overflow: hidden; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.animation-card { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.result-card { flex: 0 0 auto; max-height: clamp(140px, 28vh, 240px); overflow-y: auto; display: flex; flex-direction: column; }
.form-card form { display: grid; gap: 12px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; }
.field span { font-size: 13px; color: var(--muted); }
input { width: 100%; padding: 12px 12px; border-radius: 10px; border: 1px solid var(--border); background: #ffffff; color: var(--text); outline: none; }
input:focus { border-color: #c5c9d3; }
select { width: 100%; padding: 12px 12px; border-radius: 10px; border: 1px solid var(--border); background: #ffffff; color: var(--text); outline: none; }
.sections { display: grid; gap: 10px; margin-top: 10px; }
.section { border: 1px dashed var(--border); border-radius: 10px; padding: 10px; background: #ffffff; }
.section-title { font-weight: 600; color: var(--text); margin-bottom: 6px; }
.section-body { color: var(--text); white-space: pre-wrap; line-height: 1.7; font-size: 15px; }
.section-body strong { color: #000; font-weight: 600; }
.section-body li { margin-left: 20px; margin-bottom: 4px; }
.section-body p { margin-bottom: 12px; margin-top: 0; }
.primary { appearance: none; border: none; background: var(--primary); color: white; padding: 12px 14px; border-radius: 12px; font-size: 15px; }
.primary:disabled { opacity: .6; }
.hint { margin-top: 8px; font-size: 12px; color: var(--muted); }
.result-header { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.status { color: #7bd88f; }
.stream { white-space: pre-wrap; line-height: 1.6; font-size: 15px; }
.app-footer { position: fixed; bottom: 0; left: 0; right: 0; text-align: center; color: var(--muted); font-size: 12px; padding: 12px 16px; background: rgba(255,255,255,.95); border-top: 1px solid var(--border); z-index: 100; }
@media (max-width: 400px) { .container { padding: 10px; } }