:root { --ink:#1d1b18; --muted:#77716a; --line:#e8e1da; --paper:#f7f4ef; --card:#fff; --accent:#d47745; --accent-dark:#b95e32; --accent-soft:#fff0e7; --green:#53b67a; --shadow:0 20px 55px rgba(55,43,34,.10); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--paper); }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 15% 5%,#fff 0,transparent 30%),var(--paper); font-family:"Microsoft YaHei","PingFang SC",sans-serif; }
button,input,select,textarea { font:inherit; }
button { color:inherit; }
.hidden { display:none!important; }
body.auth-checking .app-shell { visibility:hidden; }
.boot-loading { position:fixed; inset:0; z-index:80; display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); background:var(--paper); font-size:13px; }
body.auth-checking .boot-loading { display:flex; }
.boot-loading .spinner { width:38px; height:38px; margin-bottom:8px; border-color:rgba(212,119,69,.22); border-top-color:var(--accent); }
.app-shell { min-height:100vh; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; border-bottom:1px solid rgba(226,217,208,.85); background:rgba(255,255,255,.82); backdrop-filter:blur(14px); position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand>span { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--ink); font-family:Georgia,serif; font-size:21px; }
.brand strong { font-family:Georgia,serif; letter-spacing:.07em; }
.brand small { padding-left:10px; border-left:1px solid var(--line); color:var(--muted); }
.top-actions { display:flex; align-items:center; gap:10px; }
.text-button,.model-trigger { height:42px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; }
.text-button { padding:0 16px; }
.text-button.subtle { color:var(--muted); }
.model-picker { position:relative; }
.model-trigger { min-width:220px; display:flex; align-items:center; gap:9px; padding:0 14px; text-align:left; transition:border-color .18s,box-shadow .18s; }
.model-trigger:hover,.model-picker.open .model-trigger { border-color:#d9c8bb; box-shadow:0 0 0 3px rgba(212,119,69,.08); }
.model-trigger i { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px #e8f7ed; }
.model-trigger span { flex:1; }
.model-trigger b,.custom-select-trigger i { width:8px; height:8px; flex:0 0 8px; border-right:1.5px solid #706a64; border-bottom:1.5px solid #706a64; transform:rotate(45deg) translateY(-2px); transition:transform .18s; }
.model-picker.open .model-trigger b,.custom-select.open .custom-select-trigger i { transform:rotate(225deg) translate(-1px,-1px); }
.model-menu { width:280px; position:absolute; top:48px; right:0; z-index:25; padding:7px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 16px 42px rgba(55,43,34,.14); }
.model-option { width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; border:0; border-radius:10px; background:transparent; cursor:pointer; text-align:left; }
.model-option:hover,.model-option.selected { background:var(--accent-soft); }
.model-option:disabled { color:var(--muted); cursor:not-allowed; }
.model-option:disabled:hover { background:transparent; }
.model-option small,.model-group { color:var(--muted); font-size:12px; }
.model-group { margin:7px 9px 4px; padding-top:8px; border-top:1px solid var(--line); }
main { min-height:calc(100vh - 76px); }
.auth-screen { min-height:calc(100vh - 76px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.65fr); align-items:center; gap:9vw; max-width:1180px; margin:auto; padding:60px 32px; }
.auth-copy>span,.hero>span,.result-header>div>span { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.17em; }
.auth-copy h1 { margin:16px 0 24px; font-family:SimSun,serif; font-size:clamp(42px,5vw,68px); font-weight:500; line-height:1.2; }
.auth-copy p,.hero p { max-width:620px; color:var(--muted); line-height:1.9; }
.auth-card { padding:30px; border:1px solid rgba(232,225,218,.8); border-radius:24px; background:rgba(255,255,255,.92); box-shadow:var(--shadow); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:24px; padding:4px; border-radius:12px; background:var(--paper); }
.auth-tabs button { height:40px; border:0; border-radius:9px; color:var(--muted); background:transparent; cursor:pointer; }
.auth-tabs button.active { color:var(--ink); background:#fff; box-shadow:0 3px 14px rgba(30,25,21,.08); font-weight:700; }
.auth-card form { display:grid; gap:13px; }
.auth-card input,.title-field input,.settings-drawer textarea { width:100%; border:1px solid var(--line); outline:0; background:#fff; }
.auth-card input,.title-field input { height:50px; padding:0 15px; border-radius:12px; }
.auth-card input:focus,.title-field input:focus,.settings-drawer textarea:focus { border-color:#d4aa92; box-shadow:0 0 0 3px var(--accent-soft); }
.primary-button,.secondary-button,.generate-button,.primary-small { border:0; border-radius:12px; cursor:pointer; }
.primary-button { height:48px; color:#fff; background:var(--ink); }
.primary-button:hover { background:#3a3530; }
.auth-hint { margin:18px 0 0; color:var(--muted); font-size:13px; text-align:center; }
.pending-screen { min-height:calc(100vh - 76px); display:grid; place-items:center; padding:40px 20px; }
.pending-card { width:min(480px,100%); display:flex; flex-direction:column; align-items:center; padding:42px; border:1px solid var(--line); border-radius:26px; background:#fff; box-shadow:var(--shadow); text-align:center; }
.pending-card h1 { margin:12px 0 5px; font-family:SimSun,serif; font-size:34px; }
.pending-card p { margin:0; color:var(--muted); line-height:1.8; }
.pending-card img { width:220px; margin:26px 0 12px; border:10px solid #fff; border-radius:18px; box-shadow:0 7px 30px rgba(0,0,0,.09); }
.pending-card strong { margin-bottom:22px; }
.pending-tag { padding:5px 10px; border-radius:20px; color:#a15c21; background:#fff0d9; font-size:12px; }
.secondary-button { height:42px; padding:0 16px; border:1px solid var(--line); background:#fff; }
.workspace { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:52px 0 80px; }
.hero { margin-bottom:30px; }
.hero h1 { margin:10px 0 9px; font-family:SimSun,serif; font-size:38px; font-weight:500; }
.hero p { margin:0; }
.builder-card { padding:30px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 12px 40px rgba(54,42,32,.06); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.builder-card label>span,.word-count>span { display:block; margin-bottom:9px; font-size:13px; font-weight:700; }
.native-select-hidden { display:none; }
.custom-select { position:relative; }
.custom-select-trigger { width:100%; height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; text-align:left; transition:border-color .18s,box-shadow .18s; }
.custom-select-trigger:hover,.custom-select.open .custom-select-trigger { border-color:#d4aa92; box-shadow:0 0 0 3px var(--accent-soft); }
.custom-select-menu { width:100%; position:absolute; top:56px; left:0; z-index:15; padding:7px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 16px 42px rgba(55,43,34,.14); }
.custom-select-option { width:100%; min-height:40px; display:flex; align-items:center; padding:8px 12px; border:0; border-radius:9px; background:transparent; cursor:pointer; text-align:left; }
.custom-select-option:hover,.custom-select-option.selected { color:var(--accent-dark); background:var(--accent-soft); }
#professionSelect+.custom-select .custom-select-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; }
#professionSelect+.custom-select .custom-select-option:first-child { grid-column:1/-1; }
.title-field { display:block; margin-top:20px; }
.word-count { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
#wordOptions { display:flex; flex-wrap:wrap; gap:10px; }
#wordOptions button { height:38px; padding:0 18px; border:1px solid var(--line); border-radius:20px; color:var(--muted); background:#fff; cursor:pointer; }
#wordOptions button.selected { border-color:var(--accent); color:#fff; background:var(--accent); }
.upload-area { margin-top:24px; }
.upload-button { width:100%; min-height:94px; display:grid; grid-template-columns:48px 1fr; grid-template-rows:1fr 1fr; align-items:center; padding:18px 22px; border:1px dashed #cfb9a9; border-radius:16px; background:#fffaf6; cursor:pointer; text-align:left; }
.upload-button b { grid-row:1/3; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--accent); font-size:24px; }
.upload-button span { align-self:end; font-weight:700; }
.upload-button small { align-self:start; color:var(--muted); }
.loading-button { opacity:.6; pointer-events:none; }
.attachment-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:13px; }
.attachment-item { min-width:0; display:flex; align-items:center; gap:10px; padding:11px; border:1px solid var(--line); border-radius:12px; }
.attachment-item>b { width:34px; height:34px; display:grid; flex:0 0 34px; place-items:center; border-radius:9px; color:var(--accent); background:var(--accent-soft); }
.attachment-item span { min-width:0; display:flex; flex:1; flex-direction:column; }
.attachment-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.attachment-item small { color:var(--muted); }
.attachment-item button { border:0; color:var(--muted); background:transparent; cursor:pointer; font-size:20px; }
.generate-button { width:230px; height:52px; display:block; margin:28px auto 0; color:#fff; background:var(--accent); font-weight:700; box-shadow:0 10px 25px rgba(212,119,69,.23); }
.generate-button:hover { background:var(--accent-dark); }
.privacy-note { margin:14px 0 0; color:var(--muted); font-size:12px; text-align:center; }
.result-section { scroll-margin-top:94px; }
.result-header { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; margin-bottom:22px; }
.result-header>div:first-child { min-width:0; flex:1; }
.result-header h2 { margin:7px 0 0; font-family:SimSun,serif; font-size:clamp(24px,2.3vw,30px); font-weight:500; line-height:1.35; overflow-wrap:anywhere; }
.result-header>div:last-child { display:flex; flex:0 0 auto; gap:10px; padding-top:18px; }
.result-header button { min-width:104px; white-space:nowrap; }
.primary-small { height:42px; padding:0 18px; color:#fff; background:var(--ink); }
.paper-options .paper-word-options { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px; margin-bottom:22px; }
.paper-word-options button { height:36px; padding:0 13px; border:1px solid var(--line); border-radius:18px; background:#fff; cursor:pointer; }
.paper-word-options button:hover { border-color:var(--accent); color:#fff; background:var(--accent); }
.source-details summary { display:none; margin-bottom:15px; padding:14px 18px; border:1px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; font-weight:700; }
.source-details.paper-started summary { display:list-item; list-style-position:inside; }
.source-details:not([open]) summary { margin-bottom:0; }
.result-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:18px; align-items:start; }
.result-panel { padding:25px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 10px 35px rgba(54,42,32,.05); }
.result-panel h3 { margin:0 0 20px; font-size:18px; }
.paper-panel { margin-top:18px; }
.paper-panel-header { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.paper-panel-header h3 { margin-bottom:12px; }
.paper-panel-header>div { display:flex; align-items:center; gap:12px; }
.paper-panel-header span { color:var(--muted); font-size:13px; }
.paper-panel pre { margin:0; font:inherit; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; }
.paper-panel .paper-generating::after { content:"正在生成中"; display:inline-block; margin-left:8px; padding:2px 9px 2px 23px; border-radius:12px; color:var(--accent-dark); background:radial-gradient(circle at 11px 50%,var(--accent) 4px,transparent 5px),var(--accent-soft); font-size:12px; line-height:1.6; animation:paper-loading-pulse 1.2s ease-in-out infinite; }
@keyframes paper-loading-pulse { 50% { opacity:.45; } }
.paper-rendered p { margin:0 0 16px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; }
.paper-table-wrap { max-width:100%; margin:20px 0; overflow-x:auto; border:1px solid var(--line); border-radius:12px; box-shadow:0 5px 18px rgba(54,42,32,.05); }
.paper-table-wrap table { width:100%; min-width:520px; border-collapse:collapse; font-size:14px; line-height:1.7; }
.paper-table-wrap th,.paper-table-wrap td { padding:12px 15px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.paper-table-wrap th { color:var(--accent-dark); background:#fff5ee; font-weight:700; }
.paper-table-wrap tr:last-child td { border-bottom:0; }
.paper-table-wrap tbody tr:nth-child(even) { background:#fcfaf7; }
.paper-chart { margin:22px 0; padding:20px; border:1px solid var(--line); border-radius:14px; background:#fffdfa; box-shadow:0 5px 18px rgba(54,42,32,.05); }
.paper-chart figcaption { margin-bottom:18px; font-weight:700; line-height:1.6; }
.paper-chart-row { display:grid; grid-template-columns:minmax(90px,1fr) minmax(100px,3fr) auto; align-items:center; gap:12px; margin:12px 0; font-size:13px; }
.paper-chart-row span:first-child { overflow-wrap:anywhere; }
.paper-chart-row span:last-child { min-width:52px; font-weight:700; text-align:right; white-space:nowrap; }
.paper-chart-track { height:18px; overflow:hidden; border-radius:9px; background:#f1e8e0; }
.paper-chart-bar { height:100%; border-radius:9px; background:linear-gradient(90deg,var(--accent),#e8a475); }
.paper-chart small { display:block; margin-top:18px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); line-height:1.6; overflow-wrap:anywhere; }
.paper-confirm-dialog { width:min(420px,calc(100% - 32px)); padding:26px; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:#fff; box-shadow:var(--shadow); }
.paper-confirm-dialog::backdrop { background:rgba(28,24,21,.45); }
.paper-confirm-dialog h3 { margin:0 0 12px; font-size:20px; }
.paper-confirm-dialog p { margin:0 0 22px; color:var(--muted); line-height:1.7; }
.paper-confirm-dialog>div { display:flex; justify-content:flex-end; gap:10px; }
.outline-tree ul { margin:0; padding:0; list-style:none; }
.outline-tree ul ul { margin:9px 0 0 15px; padding-left:18px; border-left:1px solid #e4d8ce; }
.outline-tree li { margin:0 0 12px; }
.outline-tree li>strong { display:block; line-height:1.55; }
.outline-tree ul[data-level="1"]>li>strong { padding:11px 13px; border-radius:10px; background:var(--paper); font-size:16px; }
.outline-tree p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }
.reference-warning { margin:-8px 0 16px; color:#9a6b43; font-size:12px; line-height:1.6; }
.reference-card { padding:15px 0; border-top:1px solid var(--line); }
.reference-card:first-child { border-top:0; }
.reference-card strong { display:block; line-height:1.55; }
.reference-card span { display:block; margin:6px 0; color:var(--accent-dark); font-size:12px; }
.reference-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }
.raw-result-panel { grid-column:1/-1; }
.raw-result-panel .secondary-button { margin-bottom:18px; }
.raw-result-panel pre { margin:0; padding:18px 20px; border-radius:12px; color:var(--ink); background:var(--paper); font:inherit; line-height:1.85; white-space:pre-wrap; overflow-wrap:anywhere; }
.drawer-backdrop { position:fixed; inset:0; z-index:29; background:rgba(28,24,21,.28); backdrop-filter:blur(2px); }
.settings-drawer { width:min(430px,92vw); height:100%; position:fixed; top:0; right:0; z-index:30; padding:30px; background:#fff; box-shadow:-20px 0 60px rgba(31,29,26,.13); transform:translateX(105%); transition:.22s; }
.settings-drawer.open { transform:translateX(0); }
.settings-drawer>div { display:flex; align-items:center; justify-content:space-between; color:var(--accent); font-size:12px; font-weight:700; }
.settings-drawer>div button { border:0; background:transparent; cursor:pointer; font-size:27px; }
.settings-drawer h2 { margin:9px 0; font-family:SimSun,serif; font-size:28px; }
.settings-drawer p { color:var(--muted); line-height:1.7; }
.settings-drawer textarea { resize:vertical; padding:14px; border-radius:13px; line-height:1.7; }
.settings-drawer .primary-button { width:100%; margin-top:18px; }
.loading { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#fff; background:rgba(25,22,20,.84); backdrop-filter:blur(5px); }
.loading span { color:#d9d4d0; font-size:13px; }
.spinner { width:45px; height:45px; margin-bottom:10px; border:4px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast { max-width:min(440px,90vw); position:fixed; left:50%; bottom:28px; z-index:70; padding:12px 17px; border-radius:11px; color:#fff; background:var(--ink); box-shadow:var(--shadow); transform:translateX(-50%); font-size:13px; }
.toast[data-type="error"] { background:#a23f32; }
@media (max-width:800px) { .topbar { height:auto; min-height:68px; padding:12px 18px; flex-wrap:wrap; gap:10px; } .brand small { display:none; } .top-actions { width:100%; order:2; } .model-picker { flex:1; } .model-trigger { width:100%; min-width:0; } .model-menu { left:0; right:auto; } .auth-screen { grid-template-columns:1fr; gap:35px; padding:42px 22px; } .auth-copy h1 { font-size:42px; } .workspace { width:calc(100% - 26px); padding-top:35px; } .form-grid,.result-grid { grid-template-columns:1fr; } .attachment-list { grid-template-columns:1fr; } .result-header { flex-direction:column; gap:16px; } .result-header>div:last-child { width:100%; padding-top:0; } .result-header button { flex:1; } }
@media (max-width:500px) { .text-button { padding:0 10px; font-size:12px; } .builder-card,.result-panel { padding:19px; } .hero h1 { font-size:30px; } #wordOptions button { flex:1; padding:0 9px; } .generate-button { width:100%; } }
@media (max-width:800px) { .result-header>div:last-child { flex-wrap:wrap; } }
@media (max-width:500px) { .paper-panel-header { align-items:flex-start; flex-direction:column; } .paper-panel-header>div { width:100%; justify-content:space-between; flex-wrap:wrap; } }
@media (max-width:500px) { .paper-chart { padding:15px; } .paper-chart-row { grid-template-columns:minmax(0,1fr) auto; gap:6px; } .paper-chart-track { grid-column:1/-1; grid-row:2; } }