/* ============================================================ 拾字 · 个人文学收藏 —— 样式与主题系统 所有主题通过 上的 CSS 变量注入，便于用户自定义 / 上传 ============================================================ */ /* ---------- 主题：默认（宣纸淡墨） ---------- */ :root{ color-scheme: light; --bg: #f7f5f0; --bg-soft: #f1eee7; --surface: #ffffff; --surface-2: #faf8f4; --border: #e3ded3; --text: #23201b; --text-2: #5b5449; --text-3: #93897c; --accent: #9a3b2e; --accent-2: #c2785e; --accent-ink:#ffffff; --shadow: 0 1px 2px rgba(35,32,27,.04), 0 8px 28px rgba(35,32,27,.07); --shadow-lg: 0 2px 6px rgba(35,32,27,.06), 0 24px 60px rgba(35,32,27,.14); --radius: 14px; --radius-sm: 9px; --font-serif: "Songti SC","Source Han Serif SC","Noto Serif SC",Georgia,"Times New Roman",serif; --font-sans: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif; --font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .44 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --deco-size: 160px 160px; --deco-opacity: .9; --read-width: 43rem; } /* ---------- 主题：午夜书房（深色） ---------- */ html[data-theme="midnight"]{ color-scheme: dark; --bg:#14161a; --bg-soft:#191c21; --surface:#1c1f25; --surface-2:#212530; --border:#2c313c; --text:#e9e6df; --text-2:#a9a49a; --text-3:#767165; --accent:#c9a25a; --accent-2:#8f7440; --accent-ink:#1a1509; --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.36); --shadow-lg:0 2px 8px rgba(0,0,0,.4), 0 28px 70px rgba(0,0,0,.6); --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .8 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- 主题：竹青 ---------- */ html[data-theme="bamboo"]{ --bg:#f2f6f1; --bg-soft:#e9f0e7; --surface:#ffffff; --surface-2:#f6faf5; --border:#d8e3d5; --text:#1d2a20; --text-2:#4c5c50; --text-3:#7d8f81; --accent:#2f6b4f; --accent-2:#5c9a78; --accent-ink:#ffffff; --shadow:0 1px 2px rgba(29,42,32,.05), 0 8px 28px rgba(29,42,32,.08); --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%232f6b4f' stroke-width='1' stroke-opacity='.05'%3E%3Cpath d='M20 0v120M60 0v120M100 0v120M0 20h120M0 60h120M0 100h120'/%3E%3C/g%3E%3C/svg%3E"); } /* ---------- 主题：樱灰 ---------- */ html[data-theme="sakura"]{ --bg:#faf5f6; --bg-soft:#f4ebee; --surface:#ffffff; --surface-2:#fdf8f9; --border:#eddfe3; --text:#2b2126; --text-2:#5f4e56; --text-3:#9b8890; --accent:#b04a63; --accent-2:#d38a9c; --accent-ink:#ffffff; --shadow:0 1px 2px rgba(43,33,38,.04), 0 8px 28px rgba(176,74,99,.08); --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23b04a63' fill-opacity='.045'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Ccircle cx='90' cy='70' r='3'/%3E%3Ccircle cx='60' cy='105' r='3.5'/%3E%3Ccircle cx='105' cy='20' r='2.5'/%3E%3C/g%3E%3C/svg%3E"); } /* ---------- 主题：海蓝夜 ---------- */ html[data-theme="ocean"]{ --bg:#eef3f8; --bg-soft:#e5edf5; --surface:#ffffff; --surface-2:#f5f9fc; --border:#d7e2ec; --text:#16222e; --text-2:#44586b; --text-3:#7b8fa3; --accent:#1f5f8b; --accent-2:#4a8cbd; --accent-ink:#ffffff; --shadow:0 1px 2px rgba(22,34,46,.05), 0 10px 30px rgba(31,95,139,.1); --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cpath d='M0 40q30-26 60 0t60 0' fill='none' stroke='%231f5f8b' stroke-opacity='.07'/%3E%3C/svg%3E"); } /* ---------- 主题：古籍黄（仿旧书） ---------- */ html[data-theme="scroll"]{ --bg:#f6ecd6; --bg-soft:#f0e3c6; --surface:#fdf7e8; --surface-2:#f8efd9; --border:#e0cfa5; --text:#3a2c14; --text-2:#6b5630; --text-3:#9c8555; --accent:#8a5a20; --accent-2:#b98a45; --accent-ink:#fdf7e8; --shadow:0 1px 2px rgba(58,44,20,.08), 0 10px 30px rgba(58,44,20,.12); --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .9' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E"); } /* ---------- 基础 ---------- */ /* 关键：hidden 属性必须真正隐藏。否则 .modal-mask{display:grid} / .dropdown{display:flex} 会覆盖 UA 的 [hidden]{display:none}，导致遮罩一直显示并拦截所有点击。 */ [hidden]{display:none !important} *{box-sizing:border-box} html,body{height:100%} html{overflow-x:hidden} body{ margin:0; overflow-x:hidden; background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .35s ease, color .35s ease; } body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background-image:var(--deco); background-size:var(--deco-size,auto); opacity:var(--deco-opacity,1); transition:background-image .35s ease; } /* 自定义背景图（覆盖在底纹之上、内容之下） */ body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background-image:var(--bg-image,none); background-size:var(--bg-image-size,cover); background-position:center; background-repeat:var(--bg-image-repeat,no-repeat); opacity:var(--bg-image-opacity,.35); transition:background-image .35s ease, opacity .35s ease; } .view, .footer, .topbar{position:relative; z-index:1} a{color:inherit; text-decoration:none} button{font:inherit; color:inherit; cursor:pointer} img{max-width:100%; display:block} ::selection{background:var(--accent); color:var(--accent-ink)} .wrap{width:min(1120px,100% - 40px); margin-inline:auto} .view{position:relative; z-index:1; min-height:calc(100vh - 190px); padding:34px 0 70px} .footer{position:relative; z-index:1; border-top:1px solid var(--border); padding:20px 0; background:var(--bg-soft)} .footer-inner{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--text-3)} .footer-left{display:flex; align-items:center; gap:9px} .footer-right{display:flex; align-items:center; gap:8px} .footer a:hover{color:var(--accent)} .dot{opacity:.5} /* ---------- 顶栏 ---------- */ .topbar{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--border); } .topbar-inner{display:flex; align-items:center; gap:22px; height:62px} .brand{display:flex; align-items:center; gap:11px; flex-shrink:0} .brand-mark{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(150deg,var(--accent),var(--accent-2)); color:var(--accent-ink); font-family:var(--font-serif); font-size:19px; font-weight:700; box-shadow:var(--shadow); } .brand-mark.small{width:22px;height:22px;border-radius:7px;font-size:12px} .brand-text{display:flex; flex-direction:column; line-height:1.15} .brand-text b{font-family:var(--font-serif); font-size:17px; letter-spacing:.06em} .brand-text i{font-style:normal; font-size:10.5px; color:var(--text-3); letter-spacing:.04em} .nav{display:flex; gap:4px; margin-left:8px} .nav-auth{display:none} .nav-link{ padding:7px 13px; border-radius:9px; font-size:14px; color:var(--text-2); transition:background .18s, color .18s; } .nav-link:hover{background:var(--surface); color:var(--text)} .nav-link.active{background:var(--surface); color:var(--accent); font-weight:600; box-shadow:var(--shadow)} .topbar-actions{margin-left:auto; display:flex; align-items:center; gap:9px} .icon-btn{ width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; font-size:15px; transition:transform .18s, border-color .18s, color .18s; } .icon-btn:hover{transform:translateY(-1px); border-color:var(--accent); color:var(--accent)} .nav-toggle{display:none} .btn{ border:1px solid transparent; border-radius:10px; padding:8px 16px; font-size:14px; transition:transform .18s, box-shadow .18s, background .18s, border-color .18s, color .18s; white-space:nowrap; } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow)} .btn-primary:hover{box-shadow:var(--shadow-lg); filter:brightness(1.06)} .btn-ghost{background:transparent; border-color:var(--border); color:var(--text-2)} .btn-ghost:hover{border-color:var(--accent); color:var(--accent)} .btn-soft{background:var(--surface-2); border-color:var(--border); color:var(--text-2)} .btn-soft:hover{border-color:var(--accent); color:var(--accent)} .btn-sm{padding:6px 12px; font-size:13px; border-radius:9px} .btn-danger{color:#b03434; border-color:color-mix(in srgb,#b03434 35%, var(--border))} .btn-danger:hover{background:color-mix(in srgb,#b03434 10%, transparent)} .user-menu{position:relative} .user-chip{ display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; border-radius:999px; border:1px solid var(--border); background:var(--surface); } .user-chip:hover{border-color:var(--accent)} .avatar{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; background:linear-gradient(150deg,var(--accent),var(--accent-2)); color:var(--accent-ink); font-weight:600; } .user-name{font-size:13.5px; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .caret{font-size:10px; color:var(--text-3)} .dropdown{ position:absolute; right:0; top:calc(100% + 8px); min-width:180px; padding:7px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:1px; } .dropdown a, .dropdown button{ text-align:left; padding:9px 11px; border-radius:8px; font-size:13.5px; background:none; border:none; color:var(--text-2); width:100%; } .dropdown a:hover, .dropdown button:hover{background:var(--surface-2); color:var(--accent)} .dropdown .sep{height:1px; background:var(--border); margin:5px 3px} /* ---------- 通用元件 ---------- */ .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)} .page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; flex-wrap:wrap} .page-title{font-family:var(--font-serif); font-size:30px; margin:0; letter-spacing:.02em; font-weight:600} .page-sub{color:var(--text-3); font-size:13px; margin-top:6px} .eyebrow{font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:600} .muted{color:var(--text-3)} .divider{height:1px; background:var(--border); margin:26px 0} .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap} .grow{flex:1} .spacer{flex:1} .input, .textarea, .select{ width:100%; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:11px 13px; font-size:14px; font-family:inherit; transition:border-color .18s, box-shadow .18s; } .input:focus, .textarea:focus, .select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(120,120,120,.18); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .textarea{resize:vertical; line-height:1.8} .field{margin-bottom:14px} .label{display:block; font-size:12.5px; color:var(--text-2); margin-bottom:6px; font-weight:600} .hint{font-size:11.5px; color:var(--text-3); margin-top:5px} .err{color:#b03434; font-size:12.5px; min-height:18px} .chip{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-size:12px; color:var(--text-2); } .chip.accent{background:var(--surface-2); border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, transparent); border-color:color-mix(in srgb,var(--accent) 30%, transparent)} .chip button{background:none; border:none; padding:0; color:inherit; opacity:.6} .chip button:hover{opacity:1} .empty{text-align:center; padding:56px 20px; color:var(--text-3)} .empty h3{font-family:var(--font-serif); color:var(--text-2); font-size:19px; margin:16px 0 6px} .empty p{font-size:13.5px; margin:0 0 18px} /* ---------- 首页 Hero ---------- */ .hero{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:34px; align-items:center; padding:22px 0 6px} .hero-title{font-family:var(--font-serif); font-size:clamp(30px,4.6vw,50px); line-height:1.24; margin:14px 0 16px; letter-spacing:.02em} .hero-title em{font-style:normal; color:var(--accent); position:relative} .hero-title em::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.32em; background:transparent; background:color-mix(in srgb,var(--accent) 16%, transparent); border-radius:2px; z-index:-1} .hero-desc{color:var(--text-2); font-size:15.5px; max-width:34em} .hero-actions{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap} .hero-art{position:relative; max-width:100%; overflow:hidden} .hero-art svg{width:100%; height:auto; max-width:100%; display:block; filter:drop-shadow(0 18px 32px rgba(0,0,0,.10))} /* 每日一句 */ .quote-hero{ margin-top:44px; padding:30px 34px; border-radius:20px; position:relative; overflow:hidden; background:linear-gradient(140deg, var(--surface), var(--surface)); background:linear-gradient(140deg, color-mix(in srgb,var(--accent) 9%, var(--surface)), var(--surface)); border:1px solid var(--border); box-shadow:var(--shadow); } .quote-hero::before{ content:"“"; position:absolute; left:14px; top:-34px; font-family:var(--font-serif); font-size:150px; color:color-mix(in srgb,var(--accent) 12%, transparent); line-height:1; } .quote-hero blockquote{ position:relative; margin:0; font-family:var(--font-serif); font-size:clamp(17px,2.2vw,23px); line-height:1.85; letter-spacing:.03em; white-space:pre-wrap; } .quote-hero .who{margin-top:16px; font-size:13px; color:var(--text-3); display:flex; gap:10px; align-items:center; flex-wrap:wrap} .quote-hero .who b{color:var(--accent); font-weight:600} /* 统计 */ .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px} .stat{padding:18px 20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border)} .stat b{display:block; font-family:var(--font-serif); font-size:27px; line-height:1.2} .stat span{font-size:12px; color:var(--text-3)} /* ---------- 作品网格 ---------- */ .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:18px} .work{ padding:20px 20px 16px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); cursor:pointer; position:relative; display:flex; flex-direction:column; gap:10px; transition:transform .2s, box-shadow .2s, border-color .2s; } .work:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent)} .work-top{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-3)} .work-cat{padding:2.5px 9px; border-radius:999px; background:var(--surface-2); color:var(--accent); font-weight:600; background:color-mix(in srgb,var(--accent) 11%, transparent)} .work h3{font-family:var(--font-serif); font-size:18.5px; margin:0; line-height:1.4; letter-spacing:.02em} .work-excerpt{ font-size:13.4px; color:var(--text-2); line-height:1.85; flex:1; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap; } .work-meta{display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--text-3); border-top:1px solid var(--border); padding-top:11px} .work-meta .spacer{flex:1} .fav{color:var(--accent)} .icon-mini{background:none; border:none; padding:2px 4px; border-radius:6px; font-size:13px; opacity:.55} .icon-mini:hover{opacity:1; background:var(--surface-2)} /* 工具条 */ .toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:20px} .search-box{position:relative; flex:1; min-width:210px} .search-box .input{padding-left:34px} .search-box::before{content:"⌕"; position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:15px} .seg{display:flex; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:3px; gap:2px} .seg button{padding:6px 13px; border:none; background:none; border-radius:7px; font-size:13px; color:var(--text-2)} .seg button.on{background:var(--accent); color:var(--accent-ink); font-weight:600} /* ---------- 阅读器 ---------- */ .reader-wrap{max-width:var(--read-width); margin:0 auto} .reader-head{text-align:center; margin-bottom:30px} .reader-head h1{font-family:var(--font-serif); font-size:clamp(25px,3.6vw,36px); margin:8px 0 12px; line-height:1.3} .reader-head .meta{color:var(--text-3); font-size:13px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap} .reader-body{ font-family:var(--font-serif); font-size:var(--read-font,18px); line-height:var(--read-lh,2.05); letter-spacing:.02em; color:var(--text); white-space:pre-wrap; word-break:break-word; } .reader-body p{margin:0 0 1.15em} .reader-toolbar{ position:sticky; top:74px; z-index:20; display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 14px; border-radius:12px; background:color-mix(in srgb,var(--bg) 88%, transparent); backdrop-filter:blur(12px); border:1px solid var(--border); margin-bottom:26px; box-shadow:var(--shadow); } .reader-toolbar .spacer{flex:1} .back-link{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-3); margin-bottom:14px} .back-link:hover{color:var(--accent)} /* ---------- 编辑器 ---------- */ .editor-grid{display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start} .editor-main{padding:24px} .editor-side{display:flex; flex-direction:column; gap:16px; position:sticky; top:84px} .panel{padding:18px 20px} .panel h4{margin:0 0 13px; font-size:13px; letter-spacing:.06em; color:var(--text-2)} .wordcount{font-size:11.5px; color:var(--text-3); text-align:right; margin-top:6px} .drop{ border:1.5px dashed var(--border); border-radius:12px; padding:18px; text-align:center; font-size:12.5px; color:var(--text-3); transition:border-color .2s, background .2s; cursor:pointer; } .drop:hover, .drop.over{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%, transparent); color:var(--accent)} /* ---------- 主题画廊 ---------- */ .theme-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:18px} .theme-card{border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); overflow:hidden; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s} .theme-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)} .theme-card.on{border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%, transparent), var(--shadow)} .theme-preview{height:118px; padding:14px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden} .theme-preview .tp-title{font-family:var(--font-serif); font-size:16px; line-height:1.3} .theme-preview .tp-line{font-size:10.5px; opacity:.72} .theme-preview .tp-chips{display:flex; gap:5px} .theme-preview .tp-dot{width:15px; height:15px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .theme-info{padding:13px 15px; display:flex; align-items:center; justify-content:space-between; gap:10px} .theme-info b{font-size:14px; display:block} .theme-info span{font-size:11px; color:var(--text-3)} .swatch-row{display:flex; gap:8px; flex-wrap:wrap} .swatch{width:34px; height:34px; border-radius:9px; border:1px solid var(--border); position:relative; overflow:hidden} .swatch input{position:absolute; inset:-6px; width:200%; height:200%; border:none; background:none; padding:0; cursor:pointer} .pattern-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:9px} .pattern{ height:52px; border-radius:10px; border:1px solid var(--border); cursor:pointer; position:relative; background-color:var(--surface-2); background-size:cover; transition:border-color .18s, transform .18s; } .pattern:hover{transform:translateY(-2px)} .pattern.on{border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 26%, transparent)} .pattern span{position:absolute; left:0; right:0; bottom:3px; font-size:9.5px; text-align:center; color:var(--text-3)} /* ---------- 弹窗 ---------- */ .modal-mask{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:22px; background:color-mix(in srgb,#000 42%, transparent); backdrop-filter:blur(3px); animation:fade .18s ease; } @keyframes fade{from{opacity:0}to{opacity:1}} .modal-mask:not(.open){display:none !important} @keyframes rise{from{opacity:0; transform:translateY(14px) scale(.985)}to{opacity:1; transform:none}} .modal{ width:min(460px,100%); max-height:88vh; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-lg); padding:28px 30px; animation:rise .22s cubic-bezier(.2,.8,.3,1); } .modal.wide{width:min(620px,100%)} .modal h2{font-family:var(--font-serif); font-size:22px; margin:0 0 6px} .modal .sub{color:var(--text-3); font-size:13px; margin-bottom:20px} .modal-close{position:absolute; top:14px; right:16px; width:30px; height:30px; border:none; background:none; font-size:18px; color:var(--text-3); border-radius:8px} .modal-close:hover{background:var(--surface-2); color:var(--text)} .modal-foot{display:flex; gap:10px; justify-content:flex-end; margin-top:20px} /* ---------- 提示 ---------- */ .toasts{position:fixed; right:22px; bottom:22px; z-index:99; display:flex; flex-direction:column; gap:10px; align-items:flex-end} .toast{ padding:11px 16px; border-radius:11px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg); font-size:13.5px; max-width:330px; animation:rise .2s ease; border-left:3px solid var(--accent); } .toast.ok{border-left-color:#2f8f5b} .toast.err{border-left-color:#b03434} /* ---------- 响应式 ---------- */ @media (max-width: 940px){ .hero{grid-template-columns:1fr; gap:22px} .hero-art{order:-1; max-width:400px; margin:0 auto} .editor-grid{grid-template-columns:1fr} .editor-side{position:static} .stats{grid-template-columns:repeat(2,1fr)} } @media (max-width: 720px){ .modal-mask{padding:14px; align-items:end} .modal{border-radius:16px; max-height:86vh} .modal h2{font-size:19px} .wrap{width:min(1120px,100% - 26px)} .nav{ position:fixed; inset:62px 0 auto 0; flex-direction:column; gap:2px; padding:12px; background:var(--surface); border-bottom:1px solid var(--border); transform:translateY(-130%); transition:transform .26s cubic-bezier(.2,.8,.3,1); margin:0; box-shadow:var(--shadow); } .nav.open{transform:none} .nav-toggle{display:grid} .nav-link{padding:11px 14px} .nav-auth{display:flex; gap:9px; padding:10px 6px 4px; border-top:1px solid var(--border); margin-top:6px} .nav-auth .btn{flex:1} #btnLogin, #btnRegister{display:none} .view{padding:22px 0 56px} .page-title{font-size:24px} .modal{padding:22px 20px} .quote-hero{padding:24px 22px} .stats{grid-template-columns:1fr 1fr; gap:10px} .stat{padding:14px} .stat b{font-size:22px} } @media print{ .topbar,.footer,.reader-toolbar,.toasts{display:none} body{background:#fff} } /* ---------- 插画（用 class 而不是 SVG 属性里的 var()，兼容老安卓浏览器） ---------- */ .hero-art .a-card, .empty .a-card{fill:var(--surface)} .a-card{fill:var(--surface)} .a-border{stroke:var(--border)} .a-accent{fill:var(--accent)} .a-accent2{fill:var(--accent-2)} .a-accent-s{stroke:var(--accent); fill:none} .a-text3{stroke:var(--text-3)} .a-ink{fill:var(--accent-ink)} .a-ink-s{stroke:var(--accent-ink); fill:none} .a-grad{fill:var(--accent)} /* ---------- 创始人署名 ---------- */ .hero-founder{margin-top:18px} .founder-chip{display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 7px; border:1px solid var(--border); border-radius:999px; background:var(--surface); box-shadow:var(--shadow)} .founder-avatar{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(150deg,var(--accent),var(--accent-2)); color:var(--accent-ink); font-family:var(--font-serif); font-size:14px; font-weight:700} .founder-avatar.lg{width:64px; height:64px; font-size:27px; flex:0 0 64px} .founder-meta{display:flex; flex-direction:column; line-height:1.25; text-align:left} .founder-meta b{font-size:13.5px} .founder-meta i{font-style:normal; font-size:11px; color:var(--text-3)} .founder-line{font-size:12.5px; color:var(--text-3)} .founder-line b{color:var(--accent)} .founder-card{display:flex; gap:18px; align-items:flex-start; margin-bottom:18px} .founder-body h3{font-family:var(--font-serif); font-size:21px; margin:4px 0 2px} .founder-title{font-size:12.5px; color:var(--accent); font-weight:600} .founder-bio{margin:10px 0 0; font-size:13.5px; color:var(--text-2); line-height:1.9} @media (max-width:560px){ .founder-card{flex-direction:column; gap:12px} } /* ---------- 公告条 ---------- */ .ann-bar{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:var(--accent-ink); font-size:13px; padding:9px 0; position:relative; z-index:2} .ann-bar .wrap{display:flex; gap:8px; align-items:center} /* ---------- 管理台 ---------- */ .ad-works{max-height:340px; overflow:auto; border:1px solid var(--border); border-radius:10px; padding:6px} .ad-work{display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:8px; font-size:13px; cursor:pointer} .ad-work:hover{background:var(--surface-2)} .ad-work input{width:16px; height:16px; flex:0 0 16px} .ad-work b{font-weight:600} .ad-work i{font-style:normal; color:var(--text-3); font-size:12px} /* ---------- 公共文库 ---------- */ .cls-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(276px,1fr)); gap:16px} .cls-card{padding:18px 18px 14px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px} .cls-top{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-3)} .cls-card h3{font-family:var(--font-serif); font-size:17.5px; margin:0; letter-spacing:.02em} .cls-author{font-size:12.5px; color:var(--accent); font-weight:600} .cls-body{font-size:13px; color:var(--text-2); line-height:1.85; white-space:pre-wrap; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden} .cls-note{font-size:11.5px; color:var(--text-3); line-height:1.7; border-left:2px solid var(--border); padding-left:8px} .cls-foot{display:flex; gap:8px; align-items:center; margin-top:auto; padding-top:10px; border-top:1px solid var(--border)} /* ---------- 互动：朗读 / 默写 / 批注 / 打卡 ---------- */ .progress-line{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border)} .progress-line>div{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s} .quiz-prompt{font-family:var(--font-serif);font-size:19px;line-height:2.1;white-space:pre-wrap; padding:18px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);letter-spacing:.02em} .quiz-score{font-family:var(--font-serif);font-size:44px;line-height:1.2;color:var(--accent)} .quiz-wrong{padding:12px 14px;border-radius:10px;background:var(--surface-2);border-left:3px solid #b03434;margin-bottom:10px} .quote-mini{font-family:var(--font-serif);font-size:16px;line-height:2;margin:0 0 12px;white-space:pre-wrap} .note-row{padding:12px 0;border-bottom:1px solid var(--border)} .note-row:last-child{border-bottom:none} .note-quote{font-family:var(--font-serif);font-size:14px;color:var(--accent);line-height:1.8} .note-body{font-size:13.5px;color:var(--text-2);line-height:1.9;margin-top:4px} .note-meta{font-size:11.5px;color:var(--text-3);margin-top:6px;display:flex;gap:10px;align-items:center} mark.hl{background:color-mix(in srgb, var(--accent) 22%, transparent); background:rgba(200,180,120,.35); color:inherit; border-radius:3px; padding:0 2px} .note-bar{position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:70; width:min(560px, calc(100% - 32px)); padding:14px 16px; border-radius:14px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg)} .note-bar-quote{font-family:var(--font-serif); font-size:13px; color:var(--accent); margin-bottom:8px; line-height:1.7} .heat{display:flex; gap:4px; margin-top:8px; flex-wrap:wrap} .heat-cell{width:14px; height:14px; border-radius:4px; background:var(--surface-2); border:1px solid var(--border)} .heat-cell.on{background:var(--accent); border-color:var(--accent)} /* ---------- 留言 / 点赞 ---------- */ .cm-row, .wall-row{padding:11px 0; border-bottom:1px solid var(--border)} .cm-row:last-child, .wall-row:last-child{border-bottom:none} .cm-head{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-3)} .cm-head b{color:var(--text); font-size:13px} .cm-body{font-size:13.5px; color:var(--text-2); line-height:1.9; margin-top:4px; white-space:pre-wrap} .live-tag{font-size:11.5px}