:root { color-scheme: light; --green:#173f35; --green-2:#245f50; --cream:#f6f1e6; --red:#9e3e32; --ink:#24302c; --muted:#6d7873; --line:#dfe4df; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:#f4f6f3; }
button,input,textarea { font:inherit; }
.topbar { background:var(--green); color:white; padding:18px 24px; }
.topbar h1 { font-size:20px; margin:0; }
.topbar p { margin:5px 0 0; color:#dce9e3; font-size:13px; }
.shell { max-width:1120px; margin:24px auto; padding:0 20px; }
.grid { display:grid; grid-template-columns:380px 1fr; gap:20px; align-items:start; }
.card { background:white; border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 8px 30px rgba(23,63,53,.05); }
h2 { font-size:18px; margin:0 0 16px; }
label { display:block; font-size:13px; color:var(--muted); margin:12px 0 6px; }
input,textarea { width:100%; padding:10px 12px; border:1px solid #ccd4cf; border-radius:9px; outline:none; }
input:focus,textarea:focus { border-color:var(--green-2); box-shadow:0 0 0 3px rgba(36,95,80,.1); }
textarea { min-height:90px; resize:vertical; }
.primary { width:100%; margin-top:14px; padding:11px 16px; border:0; border-radius:10px; background:var(--green); color:white; cursor:pointer; }
.button-link { display:inline-block; width:auto; text-decoration:none; }
.secondary { padding:7px 11px; border:1px solid var(--green); color:var(--green); border-radius:8px; background:white; cursor:pointer; }
.section-editor { padding:12px; background:#f7f8f6; border-radius:10px; margin-bottom:8px; }
.remove-item { display:block; margin:8px 0 0 auto; padding:5px 9px; border:0; background:transparent; color:var(--red); cursor:pointer; }
.selected-list { display:grid; gap:6px; margin-top:8px; }
.selected-file { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:8px; background:#f4f7f5; font-size:12px; }
.selected-file span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selected-file button { flex:none; border:0; background:transparent; color:var(--red); cursor:pointer; }
.material { border-top:1px solid var(--line); padding:16px 0; }
.material:first-of-type { border-top:0; padding-top:0; }
.material-title { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.material-title h3 { margin:0; font-size:16px; }
.small { color:var(--muted); font-size:12px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0; }
.metric { background:#f4f7f5; border-radius:10px; padding:10px; }
.metric strong { display:block; font-size:19px; color:var(--green); }
.metric span { font-size:11px; color:var(--muted); }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.empty { color:var(--muted); text-align:center; padding:40px 10px; }
.notice { margin-top:12px; padding:10px; background:#fff8e8; color:#795c18; border-radius:8px; font-size:12px; }
.reader { max-width:680px; margin:0 auto; background:white; min-height:100vh; }
.reader-hero { padding:36px 24px 26px; background:linear-gradient(145deg,var(--green),#2f6d5c); color:white; }
.reader-hero h1 { font-size:28px; margin:10px 0; }
.reader-body { padding:18px 24px 80px; }
.reader-section { padding:22px 0; border-bottom:1px solid var(--line); }
.reader-section h2 { color:var(--green); }
.reader-section p { white-space:pre-wrap; line-height:1.85; }
.reader-cta { position:fixed; bottom:0; left:0; right:0; max-width:680px; margin:auto; padding:12px 20px; background:rgba(255,255,255,.96); border-top:1px solid var(--line); }
.reader-cta button { width:100%; padding:13px; border:0; border-radius:10px; background:var(--red); color:white; }
.privacy { font-size:12px; color:var(--muted); background:var(--cream); padding:10px 24px; }
.asset-list { display:grid; gap:14px; margin:18px 0; }
.asset-list img,.asset-list video { max-width:100%; border-radius:12px; }
.asset-file { display:block; padding:14px; border:1px solid #d8dfdc; border-radius:10px; color:#185c48; text-decoration:none; }
@media (max-width:800px) { .grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)} }