:root { --bg:#f8f5ff; --surface:rgba(255,255,255,.74); --surface-solid:#fff; --ink:#302b45; --muted:#7e7892; --line:#e9e3f2; --accent:#7758bd; --accent-strong:#5c3fa1; --accent-soft:#ece5ff; --shadow:0 18px 55px rgba(74,51,119,.12); --radius:24px; color-scheme:light; }
:root[data-theme="dark"] { --bg:#171424; --surface:rgba(39,34,56,.78); --surface-solid:#28233a; --ink:#f2edf9; --muted:#bbb2ca; --line:#453d59; --accent:#c3a5ff; --accent-strong:#d4bfff; --accent-soft:#3c3156; --shadow:0 18px 55px rgba(0,0,0,.3); color-scheme:dark; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); background:var(--bg); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; transition:background .25s,color .25s; } button,textarea { font:inherit; } button { cursor:pointer; } .ambient { position:fixed; z-index:-1; border-radius:50%; filter:blur(4px); opacity:.52; pointer-events:none; } .ambient-one { width:32rem;height:32rem;top:-15rem;right:-10rem;background:#e7d8ff; } .ambient-two { width:25rem;height:25rem;bottom:-13rem;left:-9rem;background:#ffe8d3; }
.topbar { width:min(1120px,calc(100% - 40px)); height:84px; margin:auto; display:flex; align-items:center; gap:32px; } .brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:800; letter-spacing:.03em; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:35px;height:35px; border-radius:12px; color:#fff; background:linear-gradient(145deg,#8969d4,#583c99); font-size:23px; } .view-nav { display:flex; gap:4px; padding:4px; margin:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface); } .nav-item,.icon-button,.secondary-button,.back-button { border:0; color:var(--muted); background:transparent; } .nav-item { padding:8px 15px; border-radius:10px; font-size:14px; } .nav-item.active { color:var(--accent-strong); background:var(--accent-soft); font-weight:700; } .icon-button { display:grid; place-items:center; width:40px;height:40px; border:1px solid var(--line); border-radius:50%; background:var(--surface); font-size:19px; }
.app-shell { width:min(1000px,calc(100% - 40px)); margin:42px auto 80px; } .view { display:none; animation:fade .22s ease; } .view.active { display:block; } @keyframes fade { from {opacity:0;transform:translateY(5px)} to {opacity:1;transform:none} } .hero { max-width:660px; margin:45px auto 32px; text-align:center; } .eyebrow { margin:0 0 10px; color:var(--accent); letter-spacing:.15em; font-size:12px; font-weight:800; } h1 { margin:0; font-size:clamp(30px,5vw,48px); line-height:1.22; letter-spacing:-.04em; } .hero>p:last-child,.section-heading p:last-child { color:var(--muted); line-height:1.7; } .generator-card,.story-paper { padding:clamp(20px,4vw,42px); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); backdrop-filter:blur(12px); } .field-label { display:block; margin:0 0 10px; font-weight:700; font-size:16px; } textarea { width:100%; resize:vertical; outline:none; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:var(--surface-solid); transition:border .2s,box-shadow .2s; } textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .user-prompt { min-height:130px; padding:16px; line-height:1.65; } .form-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:20px; } .form-message { min-height:22px; margin:0; color:var(--muted); font-size:13px; } .form-message.error,.inline-message.error { color:#c44a61; } .primary-button,.secondary-button { display:inline-flex; gap:12px; align-items:center; justify-content:center; border-radius:12px; font-weight:700; transition:transform .18s,opacity .18s,background .18s; } .primary-button { padding:13px 19px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-strong)); box-shadow:0 9px 20px rgba(106,76,176,.27); } .primary-button:hover { transform:translateY(-1px); } button:disabled { cursor:wait; opacity:.62; } .secondary-button { padding:11px 16px; color:var(--accent-strong); border:1px solid var(--line); background:var(--surface); }
.section-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin:25px 0; } .section-heading h1 { font-size:38px; } .inline-message { min-height:24px; margin:0 0 14px; color:var(--muted); } .stories-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); } .stories-table { width:100%; border-collapse:collapse; min-width:680px; } th,td { padding:18px 20px; text-align:left; border-bottom:1px solid var(--line); } th { color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.04em; } td { font-size:14px; } tbody tr { transition:background .16s; cursor:pointer; } tbody tr:hover { background:var(--accent-soft); } tbody tr:last-child td { border-bottom:0; } .story-title-cell { color:var(--ink); font-weight:800; } .summary-cell { max-width:380px; overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; } .favorite-column,.favorite-cell { width:80px; text-align:center; } .tiny-favorite,.favorite-button { border:0; background:transparent; color:var(--muted); font-size:20px; } .tiny-favorite.is-favorite,.favorite-button.is-favorite { color:#e29a3d; } .stories-mobile-list { display:none; } .empty-state { padding:65px 20px; text-align:center; color:var(--muted); } .empty-state span { color:var(--accent); font-size:28px; } .empty-state h2 { margin:12px 0 7px; color:var(--ink); font-size:20px; } .empty-state p { margin:0; }
.back-button { margin:8px 0 22px; padding:8px 0; color:var(--accent-strong); font-weight:700; } .story-paper { max-width:780px; margin:auto; } .story-meta { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:13px; } .favorite-button { padding:4px; font-size:25px; } .story-paper h1 { margin-top:28px; font-size:clamp(30px,5vw,44px); } .story-summary { margin:18px 0 30px; padding:14px 17px; border-left:3px solid var(--accent); border-radius:0 10px 10px 0; color:var(--muted); background:var(--accent-soft); line-height:1.7; } .story-content { line-height:2; font-size:16px; white-space:pre-wrap; } .story-content p { margin:0 0 1.4em; }
@media (max-width:640px) { .topbar { width:calc(100% - 28px); height:70px; gap:12px; } .brand { font-size:14px; } .brand-mark { width:31px;height:31px; } .view-nav { margin-left:auto; margin-right:0; } .nav-item { padding:7px 10px; font-size:13px; } .icon-button { width:35px;height:35px; } .app-shell { width:calc(100% - 28px); margin-top:20px; } .hero { margin:30px auto 25px; } .hero h1 { font-size:34px; } .generator-card,.story-paper { padding:20px; border-radius:19px; } .form-footer { align-items:stretch; flex-direction:column; } .primary-button { width:100%; } .section-heading { align-items:flex-start; flex-direction:column; margin-top:12px; } .section-heading h1 { font-size:32px; } .stories-table-wrap { display:none; } .stories-mobile-list { display:grid; gap:12px; } .mobile-story-card { display:block; width:100%; padding:17px; text-align:left; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:var(--surface); box-shadow:0 7px 20px rgba(74,51,119,.07); } .mobile-story-card-top { display:flex; justify-content:space-between; gap:10px; } .mobile-story-card strong { font-size:16px; } .mobile-story-card time,.mobile-story-card p { color:var(--muted); font-size:12px; } .mobile-story-card p { display:-webkit-box; margin:9px 0 0; overflow:hidden; line-height:1.55; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; } }