:root {
    --bg: #f8f9fc;
    --card-bg: #ffffff;
    --card-shadow: 0 8px 24px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03);
    --border: #e9edf2;
    --text: #1a1c23;
    --text-secondary: #5e6573;
    --text-muted: #959da8;
    --accent: #ff5e7a;
    --input-bg: #f5f7fa;
    --input-focus-bg: #ffffff;
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 20px;
    --font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
    --transition: 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 32px 20px 60px;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    letter-spacing: -0.01em;
}
.app-container { width:100%; max-width:820px; display:flex; flex-direction:column; gap:20px; }
.app-header { text-align:left; padding:4px 0 8px; }
.app-header h1 {
    font-size: 1.8rem; font-weight:700; letter-spacing:-0.02em; color:#1a1c23;
    display:flex; align-items:center; gap:8px;
}
.app-header h1 span {
    background: linear-gradient(135deg, #ff5e7a 0%, #ff9f43 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.app-header .subtitle { font-size:0.85rem; color:var(--text-muted); margin-top:4px; }
.card {
    background:var(--card-bg); border-radius:var(--radius-lg); padding:24px;
    box-shadow:var(--card-shadow); border:1px solid var(--border); transition:all var(--transition);
}
.card:hover { box-shadow:0 12px 32px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.03); }
.form-row { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.form-group { display:flex; flex-direction:column; gap:6px; flex:1; min-width:120px; }
.form-group label {
    font-size:0.78rem; font-weight:600; color:var(--text-secondary); letter-spacing:0.02em;
    text-transform:uppercase; display:flex; align-items:center; gap:6px;
}
.label-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; }
input[type="text"], input[type="number"], textarea, select {
    background:var(--input-bg); border:1px solid transparent; border-radius:var(--radius-sm);
    padding:10px 14px; color:var(--text); font-size:0.9rem; font-family:var(--font-sans);
    transition:all var(--transition); outline:none; letter-spacing:0.01em;
}
input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
    background:var(--input-focus-bg); border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,94,122,0.08);
}
textarea { resize:vertical; min-height:80px; line-height:1.6; }
select {
    cursor:pointer; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L2 4h8z' fill='%23959da8'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}
.file-upload-btn {
    display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:var(--input-bg);
    border:1px dashed var(--border); border-radius:24px; cursor:pointer; font-size:0.82rem;
    color:var(--text-secondary); transition:all var(--transition); white-space:nowrap; user-select:none;
}
.file-upload-btn:hover { background:#fff; border-color:var(--accent); color:var(--accent); }
.file-upload-btn.uploaded { border-style:solid; border-color:#2ed573; background:#f0faf4; color:#2d8a4e; }
.file-name { font-size:0.78rem; color:var(--text-muted); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
input[type="file"] { display:none; }
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 22px;
    border-radius:24px; font-weight:600; font-size:0.88rem; cursor:pointer; border:none;
    letter-spacing:0.02em; transition:all var(--transition); font-family:var(--font-sans); white-space:nowrap;
}
.btn-primary { background:linear-gradient(135deg, #ff5e7a 0%, #ff7b8a 100%); color:white; box-shadow:0 6px 18px rgba(255,94,122,0.25); font-size:0.95rem; padding:12px 28px; }
.btn-primary:hover { box-shadow:0 10px 26px rgba(255,94,122,0.35); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); box-shadow:0 4px 14px rgba(255,94,122,0.2); }
.btn-primary:disabled { background:#d0d5dd; color:#8e95a3; box-shadow:none; cursor:not-allowed; transform:none; }
.btn-secondary { background:#f5f7fa; color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:#fff; border-color:#cbd0d8; }
.btn-sm { padding:6px 14px; font-size:0.78rem; border-radius:20px; }
.btn-accent { background:linear-gradient(135deg, #7ecb9a 0%, #2ed573 100%); color:white; box-shadow:0 6px 18px rgba(46,213,115,0.25); font-size:0.9rem; padding:10px 22px; }
.btn-accent:hover { box-shadow:0 10px 26px rgba(46,213,115,0.35); transform:translateY(-1px); }
.btn-accent:disabled { background:#d0d5dd; color:#8e95a3; box-shadow:none; cursor:not-allowed; transform:none; }
.preview-wrap {
    position:relative; border-radius:var(--radius); overflow:hidden; background:#f5f6f8;
    box-shadow:0 8px 30px rgba(0,0,0,0.06); aspect-ratio:16/9; width:100%; border:1px solid var(--border);
}
.preview-wrap canvas { display:block; width:100%; height:100%; object-fit:contain; }
.preview-badge {
    position:absolute; top:10px; right:14px; background:rgba(255,255,255,0.85); color:#5e6573;
    font-size:0.7rem; padding:4px 10px; border-radius:20px; pointer-events:none; font-weight:500;
    backdrop-filter:blur(6px); border:1px solid rgba(0,0,0,0.06);
}
.progress-wrap { width:100%; height:4px; background:#e9edf2; border-radius:2px; overflow:hidden; margin-top:12px; }
.progress-fill { height:100%; background:linear-gradient(90deg, #ff5e7a, #ff9f43, #2ed573); transition:width 0.1s linear; width:0%; border-radius:2px; }
.progress-text { font-size:0.75rem; color:var(--text-muted); text-align:center; margin-top:6px; }
.info-badge { display:inline-flex; align-items:center; gap:4px; font-size:0.72rem; color:var(--text-muted); background:#f5f7fa; padding:4px 12px; border-radius:20px; }
.download-link-wrap {
    display:none; text-align:center; margin-top:12px; padding:14px 18px;
    background:#f0faf4; border-radius:14px; border:2px dashed #2ed573;
}
.download-link-wrap a {
    color:#2d8a4e; font-weight:700; font-size:0.9rem; text-decoration:underline;
    cursor:pointer; word-break:break-all;
}
.download-link-wrap a:hover { color:#1a6b35; }
.format-tip { font-size:0.7rem; color:#5e6573; margin-top:6px; }
.poster-tip { font-size:0.7rem; color:#5e6573; margin-top:4px; }
@media (max-width: 640px) {
    .form-row { flex-direction:column; gap:12px; }
    .form-group { min-width:100%; }
    .card { padding:16px 14px; }
    .app-header h1 { font-size:1.5rem; }
    .btn-primary, .btn-accent { width:100%; justify-content:center; }
}