.upload-box { min-height: 300px; border: 2px dashed #efc4a9; border-radius: 18px; background: #fff9f4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; overflow: hidden; cursor: pointer; }
.upload-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 4; }
.upload-box .upload-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #ffeadc; color: #f27530; font-size: 28px; }
.upload-box small { color: var(--muted); }
.upload-box img, .upload-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #211c19; z-index: 2; }
.consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 15px; color: #715f54; font-size: 13px; }
.setting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.setting-grid label { display: flex; flex-direction: column; gap: 7px; color: #806b5f; font-size: 13px; font-weight: 700; }
.setting-grid select { padding: 13px; border: 1px solid #ebd8cc; border-radius: 11px; background: #fff; color: var(--ink); font: inherit; }
.form-error { background: #fff0ee; color: #c73f31; padding: 11px 14px; border-radius: 10px; margin: 18px 0 -10px; }
.real-video { width: 100%; height: 430px; object-fit: contain; background: #171412; border-radius: 18px; }
.download-link { display: inline-block; text-decoration: none; }
.task-message { min-height: 21px; }
.ai-writer { margin: 0 0 18px; padding: 18px; border: 1px solid #e6cca3; border-radius: 16px; background: linear-gradient(145deg,#fffdf8,#fbefd9); }
.ai-writer-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:14px; }.ai-writer-head b,.ai-writer-head span { display:block; }.ai-writer-head span { color:var(--muted);font-size:12px;margin-top:3px; }.ai-writer-head i { display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#d7a150,#99601e);color:#fff;font-style:normal;font-size:11px;font-weight:800; }
.writer-tabs { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;background:rgba(221,190,142,.22);border-radius:11px;margin-bottom:15px; }.writer-tabs button { border:0;border-radius:8px;padding:9px 5px;background:transparent;color:#836746;font-size:12px; }.writer-tabs button.active { background:#fff;box-shadow:0 4px 12px rgba(99,67,30,.1);color:#8b581e;font-weight:700; }
.writer-panel { display:none; }.writer-panel.active { display:block; }.writer-panel>p { margin:0 0 10px;color:var(--muted);font-size:12px; }.writer-panel label { display:flex;flex-direction:column;gap:6px;color:#735537;font-size:12px;font-weight:700;margin-top:10px; }.writer-panel input,.writer-panel select,.writer-panel textarea { width:100%;border:1px solid #dfc7a2;border-radius:9px;padding:10px;background:#fffdf8;font:inherit;color:var(--ink); }.writer-panel textarea { min-height:82px;resize:vertical; }
.purpose-chips { display:flex;flex-wrap:wrap;gap:8px; }.purpose-chips button { border:1px solid #e2cba9;border-radius:99px;padding:7px 11px;background:#fff;color:#76583a;font-size:12px; }.purpose-chips button.chosen { border-color:#a46a24;background:#a46a24;color:#fff; }
.writer-generate { width:100%;margin-top:16px;border:0;background:linear-gradient(110deg,#f7d797,#c78b34 67%,#9c621f);color:#2f1c0c; }.writer-generate:disabled { opacity:.55;cursor:wait; }.writer-status { min-height:18px;margin:8px 0 0;color:#946423;font-size:12px;text-align:center; }.generated-title { margin-top:9px;padding:9px 11px;border-radius:9px;background:#fff; }.generated-title span,.generated-title b { display:block; }.generated-title span { color:var(--muted);font-size:10px; }.generated-title b { margin-top:2px;font-size:13px; }
.works { background: var(--card); border: 1px solid #f3e6dd; border-radius: 25px; padding: 34px; box-shadow: var(--shadow); margin-bottom: 34px; }
.retention-notice { margin: 24px 0 18px; padding: 12px 14px; border: 1px solid #f1d5a7; border-radius: 12px; background: #fff8e9; color: #8c6727; font-size: 13px; }
.works-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.works-empty { grid-column: 1 / -1; margin: 0; padding: 30px 15px; text-align: center; color: var(--muted); background: #fffaf7; border-radius: 14px; }
.work-card { display: grid; grid-template-columns: 96px 1fr auto; gap: 13px; align-items: center; padding: 11px; border: 1px solid #efdfd3; border-radius: 15px; background: #fff; }
.work-thumb { width: 96px; height: 76px; overflow: hidden; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #d2ab79, #63462c); color: #fff; font-weight: 800; }
.work-thumb video { width: 100%; height: 100%; object-fit: cover; }
.work-info b { color: #8e681f; font-size: 13px; }.work-info p { margin: 3px 0; color: var(--muted); font-size: 12px; }.work-info small { color: #b59b89; font-size: 10px; }
.work-download { padding: 9px 12px; border-radius: 9px; font-size: 12px; white-space: nowrap; }.work-expired { color: #a18b7c; font-size: 12px; white-space: nowrap; }
@media (max-width: 720px) { .works { margin: 18px 12px; padding: 24px 17px; border-radius: 20px; } .works-list { grid-template-columns: 1fr; } .work-card { grid-template-columns: 78px 1fr; } .work-thumb { width: 78px; height: 66px; } .work-download,.work-expired { grid-column: 2; justify-self: start; } }
@media (max-width: 720px) { .setting-grid { grid-template-columns: 1fr; } .upload-box { min-height: 240px; } .real-video { height: 390px; } .ai-writer{padding:14px}.writer-tabs button{font-size:11px;padding:9px 2px}.purpose-chips button{padding:7px 9px} }