:root { --paper:#edf2f1; --ink:#172321; --muted:#64706c; --line:#cbd7d4; --cyan:#007e82; --cyan-dark:#005f63; --coral:#e35a46; --coral-pale:#f9dfd8; --panel:#ffffff; --shadow:0 20px 60px rgba(31, 44, 41, .10); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:"Noto Sans SC","Microsoft YaHei",sans-serif; }
.rights-confirm { display:inline-flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; cursor:pointer; }
.rights-confirm input { width:16px; height:16px; margin:0; accent-color:var(--cyan); }
button,input,textarea { font:inherit; } button { cursor:pointer; } a { color:inherit; }
.shell { min-height:100vh; }.is-hidden { display:none!important; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.login-view { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); overflow:hidden; }
.login-intro { position:relative; display:flex; flex-direction:column; justify-content:center; padding:clamp(52px,10vw,150px); background:var(--ink); color:#f1f7f5; isolation:isolate; }
.eyebrow,.panel-kicker { margin:0 0 14px; color:var(--cyan); font-size:12px; font-weight:700; letter-spacing:0; text-transform:uppercase; }.login-intro .eyebrow { color:#87d9d2; display:flex; align-items:center; gap:7px; }.eyebrow svg { width:14px; height:14px; }
.login-intro h1 { margin:0; max-width:620px; font-family:Georgia,"Noto Serif SC",serif; font-size:clamp(46px,5.2vw,82px); font-weight:400; line-height:1.12; letter-spacing:0; }.login-intro h1 em { color:#9de4db; font-style:italic; }.intro-copy { margin:30px 0 0; max-width:440px; color:#d0d5ca; font-size:16px; line-height:1.8; }.login-rule { width:46px; height:3px; margin:46px 0 20px; background:var(--coral); }.login-note { display:flex; gap:8px; align-items:center; margin:0; color:#b6c1b8; font-size:13px; }.login-note svg { width:15px; color:#87d9d2; }
.login-panel { align-self:center; justify-self:center; width:min(100%,438px); padding:42px; background:var(--panel); box-shadow:var(--shadow); display:grid; gap:17px; }.monogram,.brand-mark { display:grid; place-items:center; font-family:Georgia,serif; background:var(--coral); color:white; }.monogram { width:43px; height:43px; font-size:25px; }.panel-kicker { margin:0 0 5px; }.login-panel h2 { margin:0; font-family:Georgia,"Noto Serif SC",serif; font-size:28px; font-weight:400; }.field-label { margin-top:8px; color:var(--muted); font-size:13px; font-weight:700; }.password-wrap { position:relative; }.password-wrap input { width:100%; padding:13px 46px 13px 14px; border:1px solid var(--line); border-radius:0; outline:none; background:#fffefb; color:var(--ink); transition:border-color .2s, box-shadow .2s; }.password-wrap input:focus,textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,126,130,.12); }.password-wrap .icon-button { position:absolute; right:5px; top:50%; transform:translateY(-50%); }
.icon-button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; color:var(--muted); background:transparent; }.icon-button:hover { color:var(--cyan); background:#e9f4f1; }.icon-button svg { width:18px; }.icon-button.bordered { border:1px solid var(--line); }.form-notice { min-height:18px; margin:0; color:#be3928; font-size:13px; line-height:1.35; }.form-notice:empty { display:none; }
.primary-button,.secondary-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:11px; padding:0 17px; border:1px solid var(--cyan); border-radius:0; text-decoration:none; font-size:14px; font-weight:700; transition:transform .2s, background .2s, color .2s; }.primary-button { color:white; background:var(--cyan); }.primary-button:hover { background:var(--cyan-dark); transform:translateY(-1px); }.primary-button:disabled { cursor:wait; opacity:.65; transform:none; }.primary-button svg,.secondary-button svg { width:17px; }.secondary-button { color:var(--cyan); background:transparent; }.secondary-button:hover { background:#e7f4f2; }
.app-view { max-width:1380px; min-height:100vh; margin:auto; padding:0 clamp(18px,4vw,62px) 52px; }.topbar { min-height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; }.brand-mark { width:28px; height:28px; font-size:17px; }.topbar-actions { display:flex; align-items:center; gap:20px; }.secure-label { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; }.secure-label svg { width:14px; color:var(--cyan); }.text-button { display:inline-flex; align-items:center; gap:6px; padding:6px 0; border:0; color:var(--muted); background:transparent; font-size:13px; }.text-button:hover { color:var(--coral); }.text-button svg { width:15px; }
.job-entry { display:grid; grid-template-columns:minmax(190px,.5fr) minmax(420px,1.5fr); gap:42px; padding:46px 0 34px; border-bottom:1px solid var(--line); }.section-heading h1 { margin:0; font-family:Georgia,"Noto Serif SC",serif; font-size:31px; font-weight:400; }.job-entry form { display:grid; gap:12px; }.job-entry textarea { min-height:90px; width:100%; resize:vertical; padding:14px; border:1px solid var(--line); border-radius:0; outline:none; background:rgba(255,253,248,.65); color:var(--ink); line-height:1.6; }.job-entry textarea::placeholder,.copy-editor::placeholder { color:#9da49d; }.entry-footer { min-height:44px; display:flex; justify-content:space-between; gap:14px; }.entry-footer .primary-button { min-width:140px; }.field-hint { grid-column:2; display:flex; align-items:center; gap:7px; margin:-2px 0 0; color:var(--muted); font-size:12px; }.field-hint svg { width:14px; color:var(--cyan); }
.workspace { padding-top:34px; }.empty-state { display:grid; place-items:center; min-height:360px; align-content:center; color:var(--muted); text-align:center; border:1px dashed #c8c1b2; }.empty-icon { display:grid; place-items:center; width:50px; height:50px; margin-bottom:17px; color:var(--cyan); background:#e4f1ee; }.empty-icon svg { width:25px; }.empty-state h2 { margin:0 0 9px; color:var(--ink); font-family:Georgia,"Noto Serif SC",serif; font-size:25px; font-weight:400; }.empty-state p { max-width:280px; margin:0; font-size:13px; line-height:1.65; }
.processing-state { max-width:760px; margin:28px auto 0; padding:42px; background:var(--panel); box-shadow:var(--shadow); }.processing-header { display:flex; justify-content:space-between; align-items:start; gap:20px; }.processing-header h2 { margin:0; font-family:Georgia,"Noto Serif SC",serif; font-size:27px; font-weight:400; }.status-pill { padding:5px 9px; color:var(--cyan-dark); background:#deefec; font-size:13px; font-weight:700; }.progress-track { height:6px; margin:30px 0; overflow:hidden; background:#dfe4dc; }.progress-track span { display:block; width:0%; height:100%; background:var(--cyan); transition:width .45s ease; }.pipeline { display:flex; justify-content:space-between; gap:5px; padding:0; margin:0; list-style:none; counter-reset:stage; }.pipeline li { position:relative; flex:1; padding-top:23px; color:#8a938d; font-size:12px; text-align:center; }.pipeline li:before { content:""; position:absolute; top:5px; left:50%; z-index:1; width:10px; height:10px; border:2px solid #aeb6af; border-radius:50%; background:var(--panel); transform:translateX(-50%); }.pipeline li:not(:last-child):after { content:""; position:absolute; top:9px; left:50%; width:100%; height:2px; background:#d9dfd7; }.pipeline li.is-done,.pipeline li.is-current { color:var(--cyan-dark); font-weight:700; }.pipeline li.is-done:before,.pipeline li.is-current:before { border-color:var(--cyan); background:var(--cyan); }.pipeline li.is-done:after { background:var(--cyan); }.processing-message { margin:30px 0 0; color:var(--muted); font-size:13px; text-align:center; }
.result-state { display:grid; grid-template-columns:minmax(270px,.72fr) minmax(400px,1.28fr); gap:32px; }.video-panel { min-width:0; }.video-frame { position:relative; display:grid; aspect-ratio:9/12; max-height:470px; overflow:hidden; background:#243533; }.video-frame img { width:100%; height:100%; object-fit:cover; }.video-frame img[src=""] { display:none; }.frame-fallback { position:absolute; inset:0; display:grid; place-items:center; color:#a8ded7; }.frame-fallback svg { width:42px; height:42px; }.play-button { position:absolute; inset:50% auto auto 50%; display:grid; place-items:center; width:54px; height:54px; border:0; border-radius:50%; color:white; background:rgba(0, 0, 0, .65); transform:translate(-50%,-50%); }.play-button:hover { background:var(--coral); }.play-button svg { width:24px; margin-left:3px; }.video-summary { padding:25px 0; border-bottom:1px solid var(--line); }.video-summary h2 { margin:0 0 8px; font-family:Georgia,"Noto Serif SC",serif; font-size:23px; font-weight:400; line-height:1.35; }.author { margin:0 0 23px; color:var(--muted); font-size:13px; }.video-summary dl { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0; }.video-summary dl div { display:grid; gap:4px; }.video-summary dt { color:var(--muted); font-size:12px; }.video-summary dd { margin:0; font-size:14px; font-weight:700; }.download-actions { display:grid; gap:10px; padding-top:20px; }.download-actions .secondary-button { width:100%; }.download-actions p { margin:0; color:var(--muted); font-size:12px; text-align:center; }
.copy-panel { min-width:0; min-height:565px; display:flex; flex-direction:column; padding:32px; background:var(--panel); box-shadow:var(--shadow); }.copy-header { display:flex; align-items:start; justify-content:space-between; gap:18px; }.copy-header h2 { margin:0; font-family:Georgia,"Noto Serif SC",serif; font-size:28px; font-weight:400; }.copy-actions { display:flex; gap:7px; }.tabs { display:flex; gap:22px; margin-top:33px; border-bottom:1px solid var(--line); }.tab { position:relative; padding:0 0 11px; border:0; color:var(--muted); background:transparent; font-size:13px; }.tab:after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:transparent; }.tab.is-active { color:var(--ink); font-weight:700; }.tab.is-active:after { background:var(--coral); }.copy-editor { flex:1; width:100%; min-height:300px; margin-top:20px; padding:0; border:0; border-radius:0; outline:none; resize:none; background:transparent; color:var(--ink); font-family:"Noto Serif SC","Songti SC",serif; font-size:16px; line-height:1.95; }.editor-footer { display:flex; justify-content:space-between; gap:15px; padding-top:15px; margin:0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.toast { position:fixed; right:20px; bottom:20px; z-index:10; max-width:min(340px,calc(100vw - 40px)); padding:12px 15px; color:#fff; background:var(--ink); box-shadow:var(--shadow); font-size:13px; opacity:0; pointer-events:none; transform:translateY(12px); transition:.2s; }.toast.is-visible { opacity:1; transform:translateY(0); }.modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; }.modal-backdrop { position:absolute; inset:0; background:rgba(17,29,27,.8); }.modal-content { position:relative; width:min(720px,100%); max-height:90vh; background:#000; }.modal-content video { display:block; width:100%; max-height:90vh; }.modal-close { position:absolute; top:8px; right:8px; z-index:1; color:white; background:rgba(0,0,0,.55); }.modal-close:hover { color:white; background:var(--coral); }
@media (max-width:800px) { .login-view { grid-template-columns:1fr; }.login-intro { min-height:47vh; padding:52px 27px; }.login-intro h1 { font-size:48px; }.intro-copy { margin-top:21px; }.login-rule,.login-note { display:none; }.login-panel { width:calc(100% - 36px); margin:-28px auto 34px; padding:30px; z-index:2; }.job-entry { grid-template-columns:1fr; gap:25px; padding:32px 0 25px; }.field-hint { grid-column:auto; }.result-state { grid-template-columns:1fr; gap:24px; }.video-panel { display:grid; grid-template-columns:132px 1fr; gap:0 18px; }.video-frame { grid-row:span 2; max-height:185px; }.video-summary { padding:0 0 16px; }.video-summary h2 { font-size:19px; }.video-summary dl { margin-top:0; }.download-actions { grid-column:2; padding-top:15px; }.copy-panel { min-height:520px; padding:25px 21px; }.processing-state { padding:29px 20px; }.pipeline li { font-size:10px; }.secure-label { display:none; } }
@media (max-width:480px) { .app-view { padding:0 16px 32px; }.topbar { min-height:66px; }.brand { font-size:14px; }.job-entry textarea { min-height:105px; }.entry-footer { align-items:end; flex-direction:column; }.entry-footer .primary-button { width:100%; }.field-hint { align-items:start; line-height:1.5; }.video-panel { grid-template-columns:110px 1fr; gap:0 14px; }.video-frame { max-height:160px; }.video-summary h2 { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; }.video-summary dl { gap:8px; }.copy-header h2 { font-size:24px; }.copy-actions { gap:3px; }.copy-actions .icon-button { width:32px; height:32px; }.editor-footer { flex-direction:column; gap:4px; }.pipeline { gap:0; }.pipeline li { font-size:0; }.pipeline li:after { width:100%; }.processing-message { line-height:1.55; }.modal { padding:10px; } }