:root { --ink:#172033; --muted:#687386; --line:#e5eaf1; --surface:#fff; --blue:#2864dc; --pale:#f5f8fc; }
* { box-sizing:border-box; }
body { margin:0; background:#f6f8fb; color:var(--ink); font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
.app-shell { max-width:1240px; margin:auto; padding:54px 24px 72px; }
.hero { margin-bottom:28px; }.eyebrow { color:var(--blue); font-size:12px; font-weight:750; letter-spacing:.13em; margin:0 0 8px; }.hero h1 { font-size:32px; letter-spacing:-.04em; margin:0; }.hero > p:last-child { color:var(--muted); margin:8px 0 0; font-size:16px; }
.workspace { display:grid; grid-template-columns:minmax(330px, 35fr) minmax(0, 65fr); gap:22px; align-items:start; }.panel { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 24px rgba(22,43,83,.035); }.controls-panel { padding:25px; position:sticky; top:18px; }.panel-title { display:flex; gap:10px; align-items:center; }.panel-title h2 { font-size:17px; margin:0; }.step,.section-kicker { color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.06em; }.panel-title .step { background:#eaf1ff; border-radius:6px; padding:2px 6px; }
form { margin-top:25px; } label { display:block; margin:18px 0 7px; font-size:14px; font-weight:650; } label:first-child { margin-top:0; } label em { color:#dc3e48; font-style:normal; } label span,.field-hint { color:var(--muted); font-weight:400; }.field-hint { font-size:12px; margin:-2px 0 0; }
textarea,select { width:100%; appearance:none; border:1px solid #dbe2eb; border-radius:9px; background:#fff; color:var(--ink); font:inherit; outline:none; padding:11px 12px; transition:border .2s,box-shadow .2s; } textarea { resize:vertical; } select { background-image:linear-gradient(45deg,transparent 50%,#687386 50%),linear-gradient(135deg,#687386 50%,transparent 50%); background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px; } textarea:focus,select:focus { border-color:#7da6ef; box-shadow:0 0 0 3px #eaf2ff; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#generate-button { width:100%; border:0; border-radius:9px; background:var(--blue); color:#fff; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:13px 15px; margin-top:22px; font:650 15px inherit; transition:background .2s,transform .2s; } #generate-button:hover { background:#1e55c5; transform:translateY(-1px); } #generate-button:disabled { cursor:not-allowed; background:#92aedf; transform:none; }.form-message { color:#c22c38; min-height:21px; margin:8px 0 0; font-size:13px; }
.result-panel { min-height:640px; padding:27px 30px 34px; }.result-heading { display:flex; justify-content:space-between; align-items:center; }.status { font-size:12px; color:var(--muted); background:var(--pale); border-radius:999px; padding:4px 9px; }.status.ready { color:#176d44; background:#e8f7ef; }.status.working { color:#9a6800; background:#fff5dc; }.empty-state { text-align:center; max-width:360px; margin:160px auto; color:var(--muted); }.empty-icon { color:var(--blue); font-size:28px; }.empty-state h3 { color:var(--ink); font-size:17px; margin:11px 0 5px; }.empty-state p { margin:0; }.loading-state { display:flex; align-items:center; gap:8px; margin:18px 0 6px; padding:12px 14px; border:1px solid #e4ebf7; border-radius:12px; color:var(--muted); background:#fbfdff; }.loading-state p { margin:0; font-size:13px; }.loader { width:14px; height:14px; flex:0 0 14px; border:2px solid #dce8fc; border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.shoot-tip { display:flex; gap:7px; align-items:baseline; margin-top:12px; padding:9px 11px; border-radius:8px; background:#f5f7fb; color:#6c7890; font-size:12px; }.shoot-tip strong { color:#52627d; white-space:nowrap; }.shoot-tip span { color:#7b879b; }.shot-voice { border-left:3px solid #4d83e8; padding-left:14px; background:#f7faff; border-radius:0 9px 9px 0; padding-top:10px; padding-bottom:10px; }.shot-voice label { color:#2863c5; font-weight:600; }.shot-topic { color:#7a879b; font-size:12px; margin:5px 0 8px; }.voice-copy { color:#1f2d45; font-size:14px; line-height:1.7; margin:0; }
.result-section { padding-top:27px; }.result-section h3 { font-size:19px; margin:3px 0 14px; }.hooks { display:grid; gap:9px; }.hook { border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; gap:11px; }.hook-number { color:var(--blue); font-size:12px; font-weight:800; padding-top:2px; }.hook p { margin:0; }
.storyboard { border:1px solid var(--line); border-radius:10px; overflow:hidden; }.shot { display:grid; grid-template-columns:84px 1fr 1.3fr; border-bottom:1px solid var(--line); }.shot:last-child { border:0; }.shot-time { background:#f8faff; padding:14px 12px; font-size:13px; font-weight:700; }.shot-main,.shot-voice { padding:13px 14px; }.shot-main { border-right:1px solid var(--line); }.shot label { font-size:11px; display:block; color:var(--muted); font-weight:700; letter-spacing:.04em; margin:0 0 3px; }.shot p { margin:0; font-size:14px; }.shoot-tip { color:var(--muted); font-size:13px!important; margin-top:6px!important; }
.voiceover-section { border-top:1px solid var(--line); margin-top:30px; }.voiceover-title { display:flex; justify-content:space-between; gap:12px; align-items:flex-end; }.voiceover-title h3 { margin-bottom:0; }.copy-button { flex:none; border:1px solid #ced9ea; background:#fff; border-radius:7px; padding:7px 10px; cursor:pointer; color:#315381; font:600 13px inherit; }.copy-button:hover { background:#f3f7ff; }.full-voiceover { white-space:pre-wrap; color:#2c374a; background:#f8faff; border-radius:9px; padding:16px; margin:15px 0 0; line-height:1.85; }
@media (max-width:767px) { .app-shell { padding:34px 16px 48px; }.hero { margin-bottom:20px; }.hero h1 { font-size:27px; }.hero > p:last-child { font-size:15px; }.workspace { display:block; }.controls-panel { position:static; padding:21px; }.result-panel { margin-top:16px; min-height:0; padding:22px 18px 26px; }.empty-state { margin:72px auto; }.field-grid { grid-template-columns:1fr; gap:0; }.shot { display:block; padding:14px; }.shot-time { display:inline-block; padding:3px 7px; border-radius:5px; }.shot-main,.shot-voice { padding:11px 0 0; border:0; }.shot-main { border-bottom:1px dashed var(--line); padding-bottom:11px; }.storyboard { overflow:visible; }.voiceover-title { align-items:center; }.voiceover-title h3 { font-size:18px; } }