:root { --ink:#17312e; --muted:#6d7f7b; --line:#dbe5e2; --paper:#f7faf8; --surface:#ffffff; --green:#167465; --deep:#123b36; --coral:#e78363; --yellow:#f1c86a; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font:15px/1.5 Inter,"Microsoft YaHei",sans-serif; }
button,textarea,select { font:inherit; } button { cursor:pointer; }
.shell { min-height:100vh; display:flex; }
.sidebar { width:244px; flex:0 0 244px; min-height:100vh; padding:28px 16px 18px; background:var(--deep); color:#e8f4ef; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:10px; padding:0 10px; font-size:18px; font-weight:700; }
.brand-mark,.avatar { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--coral); font-weight:800; }
.nav-list { display:grid; gap:6px; margin-top:44px; }.nav-item,.settings { border:0; display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:6px; color:#b7d0c9; background:transparent; text-align:left; }.nav-item span,.settings span { width:18px; text-align:center; font-size:19px; }.nav-item:hover,.nav-item.active { color:#fff; background:rgba(232,244,239,.13); }.sidebar-bottom { margin-top:auto; display:grid; gap:16px; padding:0 10px; }.connection { color:#a9c6bd; font-size:12px; display:flex; align-items:center; gap:8px; }.connection i { width:8px; height:8px; border-radius:50%; background:var(--yellow); }.settings { padding:0; }
.workspace { width:100%; max-width:1180px; min-height:100vh; margin:0 auto; padding:44px 56px 36px; }.view { display:none; min-height:calc(100vh - 80px); flex-direction:column; }.view.active { display:flex; }.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:28px; border-bottom:1px solid var(--line); }.topbar.compact { padding-bottom:24px; }.eyebrow { margin:0 0 5px; color:var(--green); font-weight:700; font-size:12px; letter-spacing:0; }.topbar h1 { margin:0; font-size:28px; line-height:1.2; letter-spacing:0; }.mode-switch { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; white-space:nowrap; }.mode-switch input { display:none; }.mode-switch span { width:38px; height:22px; border-radius:20px; background:#b9c9c4; position:relative; }.mode-switch span::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.2s; }.mode-switch input:checked + span { background:var(--green); }.mode-switch input:checked + span::after { transform:translateX(16px); }
.message-list { flex:1; display:flex; flex-direction:column; gap:20px; max-width:760px; padding:36px 0; overflow:auto; }.message { display:flex; align-items:flex-start; gap:12px; max-width:85%; }.message p { margin:0; padding:13px 15px; border-radius:3px 12px 12px 12px; background:var(--surface); box-shadow:0 3px 16px rgba(20,61,54,.05); }.message time { display:block; margin:5px 4px; color:#91a29e; font-size:11px; }.user-message { align-self:flex-end; flex-direction:row-reverse; }.user-message .avatar { background:var(--green); }.user-message p { background:#dff0eb; border-radius:12px 3px 12px 12px; }.user-message time { text-align:right; }
.composer { display:flex; align-items:flex-end; gap:10px; width:100%; max-width:760px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }.composer textarea { flex:1; max-height:150px; resize:none; border:0; outline:0; padding:9px; color:var(--ink); }.send-button { width:38px; height:38px; border:0; border-radius:6px; background:var(--green); color:#fff; font-size:22px; line-height:1; }
.creation-layout { display:grid; grid-template-columns:minmax(280px,390px) minmax(340px,1fr); gap:28px; padding-top:32px; flex:1; }.creation-form { align-self:start; display:grid; gap:20px; padding:24px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }.creation-form label { display:grid; gap:8px; color:#425b56; font-size:13px; font-weight:700; }.creation-form textarea,.creation-form select { width:100%; border:1px solid #cfdcd8; border-radius:5px; padding:10px; background:#fbfdfc; color:var(--ink); outline-color:var(--green); resize:vertical; }.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.primary { min-height:42px; border:0; border-radius:5px; color:#fff; background:var(--green); font-weight:700; }.primary:hover,.send-button:hover { background:#105d52; }.result-stage { min-height:430px; border:1px dashed #b9ccc6; border-radius:8px; background:var(--surface); display:grid; place-content:center; text-align:center; overflow:hidden; }.result-stage.empty { color:#82948f; }.result-icon { color:var(--coral); font-size:42px; }.result-stage p { margin:10px 20px; }.image-art { position:relative; width:100%; height:430px; overflow:hidden; background:linear-gradient(145deg,#163d42,#df745b); }.image-art::before,.image-art::after { content:""; position:absolute; border-radius:50%; filter:blur(2px); }.image-art::before { width:58%; aspect-ratio:1; right:-8%; top:7%; background:#f7c96e; opacity:.88; }.image-art::after { width:70%; aspect-ratio:1; left:-17%; bottom:-26%; background:#2c8a80; opacity:.8; }.art-caption { position:absolute; inset:auto 22px 18px; z-index:1; margin:0!important; padding:9px 11px; color:#fff; background:rgba(18,59,54,.72); border-radius:4px; text-align:left; font-size:13px; }.video-card { width:min(100%,500px); padding:20px; text-align:left; }.video-preview { position:relative; aspect-ratio:9/16; width:190px; margin:0 auto 18px; border-radius:7px; background:linear-gradient(150deg,#e68561 0%,#f3cf75 45%,#255e61 100%); }.play { position:absolute; inset:0; margin:auto; width:50px; height:50px; display:grid; place-items:center; border-radius:50%; color:#fff; background:rgba(18,59,54,.7); }.video-status { color:var(--green); font-weight:700; }.progress { height:6px; overflow:hidden; border-radius:9px; background:#e2ebe8; }.progress span { display:block; width:0; height:100%; background:var(--green); transition:width 1.8s ease; }
.library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; padding-top:30px; }.library-item { overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--surface); }.library-thumb { height:152px; background:linear-gradient(140deg,#df765c,#f4ca74,#21736d); }.library-item.video .library-thumb { background:linear-gradient(140deg,#183d43,#e37d5f); }.library-meta { padding:12px; }.library-meta p { margin:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.library-meta small { color:var(--muted); }.library-empty { grid-column:1/-1; padding:54px 20px; border:1px dashed #b9ccc6; color:#82948f; text-align:center; }.text-button { border:0; background:transparent; color:#a04d3b; }.text-button:hover { text-decoration:underline; } #toast { position:fixed; z-index:10; left:50%; bottom:24px; transform:translate(-50%,130px); padding:10px 15px; border-radius:5px; background:var(--deep); color:#fff; font-size:13px; transition:.25s; }.show-toast { transform:translate(-50%,0)!important; }
@media (max-width:760px) { .shell { display:block; }.sidebar { position:fixed; z-index:3; bottom:0; width:100%; min-height:64px; height:calc(64px + env(safe-area-inset-bottom)); padding:7px 8px calc(7px + env(safe-area-inset-bottom)); flex-direction:row; }.brand,.sidebar-bottom { display:none; }.nav-list { width:100%; grid-template-columns:repeat(4,1fr); gap:2px; margin:0; }.nav-item { flex-direction:column; justify-content:center; gap:0; min-width:0; padding:4px 2px; font-size:10px; text-align:center; }.nav-item span { height:19px; }.workspace { padding:calc(28px + env(safe-area-inset-top)) 20px calc(86px + env(safe-area-inset-bottom)); }.view { min-height:calc(100vh - 114px); }.topbar h1 { font-size:24px; }.creation-layout { grid-template-columns:1fr; }.result-stage { min-height:320px; }.image-art { height:320px; }.message { max-width:95%; } }