/* Miexiang brand v1.1: consumer library / creator studio / quiet reader. */
:root { --mx-paper:#fffbf6; --mx-ink:#3e2920; --mx-muted:#7d695e; --mx-green:#356f60; --mx-line:#e8ded2; --mx-orange:#ffb366; }
body:not([data-view="play"]) {
  --bg:var(--mx-paper); --fg:var(--mx-ink); --card:#fffefd; --card2:#f7f1e8;
  --muted:var(--mx-muted); --line:var(--mx-line); --accent:var(--mx-green); --accent-strong:#28584b;
  --tag-bg:#f0e9df; --choice-bg:#fffefd; --choice-border:var(--mx-line);
  --shadow:0 16px 48px #63482e12;
  background:var(--mx-paper); color:var(--mx-ink); background-image:none;
}
body { overflow-wrap:anywhere; }
button, input, select, textarea { font-family:inherit; }
button:focus-visible, a:focus-visible { outline:3px solid #5cc6b7; outline-offset:4px; }
button:disabled { cursor:wait; opacity:.55; }
#app { max-width:1280px; padding-bottom:40px; }
.app-header { position:relative; padding:20px 32px; background:transparent!important; border-bottom:1px solid var(--mx-line); backdrop-filter:none; }
.header-inner { display:flex; width:100%; gap:28px; align-items:center; }
.brand { display:flex; gap:10px; padding:0; border:0; background:none!important; color:var(--mx-ink); flex-shrink:0; }
.mx-logo { width:46px; height:46px; object-fit:contain; background:white; border-radius:14px; }
.brand-copy { display:flex!important; flex-direction:column; align-items:flex-start; gap:1px; }
.brand-copy strong { font-size:18px; letter-spacing:.02em; color:var(--mx-ink); }
.brand-copy small { display:block; color:var(--mx-muted); font-size:11px; letter-spacing:.07em; }
.brand-divider { color:#bda994; font-weight:400; padding:0 3px; }
.main-nav { display:flex; gap:8px; margin-left:auto; }
.main-nav button { background:none; color:var(--mx-muted); padding:10px 16px; border-radius:10px; font-weight:600; }
.main-nav button.active { color:var(--mx-green); background:#eaf2ec; }
#topbar-extra { display:flex; gap:10px; margin-left:0; }
#llm-switch-button { display:none; }
.mobile-entry-button { background:transparent; color:var(--mx-muted); border:1px solid var(--mx-line); border-radius:10px; min-height:44px; }
.mx-primary, body:not([data-view="play"]) .primary-big, body:not([data-view="play"]) .primary-btn { background:var(--mx-green); color:#fff; border:0; border-radius:12px; font-weight:650; min-height:44px; padding:12px 20px; }
.mx-primary:hover, body:not([data-view="play"]) .primary-big:hover { background:#28584b; }
.view { padding:30px 32px; }
.shelf-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0 30px; }
.mx-kicker { display:block; color:var(--mx-green); font-size:11px; font-weight:700; letter-spacing:.18em; margin-bottom:12px; }
.shelf-intro h1, .studio-heading h1 { font-family:"Songti SC","SimSun",serif; font-size:40px; font-weight:700; line-height:1.3; letter-spacing:.035em; color:var(--mx-ink); }
.shelf-intro h1 > span { color:#ce8c52; }
.shelf-intro p, .studio-heading p { margin-top:10px; color:var(--mx-muted); font-size:14px; }
.shelf-note { display:flex; gap:16px; align-items:center; padding:18px 28px; border-left:1px solid var(--mx-line); }
.note-mark { font:76px/1 Georgia,serif; color:#d7b89a; height:44px; }
.shelf-note p { margin:0; line-height:1.9; }.shelf-note strong { color:var(--mx-green); font-weight:600; }
.continue-reading { display:flex; align-items:center; gap:22px; padding:22px 28px; background:linear-gradient(110deg,#e8f0e8,#f3f4e9 70%,#f7eddf); border:1px solid #dce5d8; border-radius:20px; margin:4px 0 32px; }
.continue-reading .book-cover { width:66px; height:88px; flex-shrink:0; padding:9px; border-radius:4px 8px 8px 4px; }
.continue-reading .book-cover strong { font-size:15px; }.continue-reading .book-cover small { display:none; }
.continue-copy { flex:1; min-width:0; }.continue-copy small { color:var(--mx-green); font-size:12px; }.continue-copy h2 { margin:2px 0 4px; font-size:22px; }.continue-copy p { color:var(--mx-muted); font-size:13px; margin:0; }
.library-heading { border:0; padding:0; margin:0 0 20px; display:flex; align-items:center; gap:16px; }
.library-heading h2 { font-size:23px; display:flex; gap:10px; align-items:center; }
.shelf-count { font-size:13px; color:var(--mx-muted); font-weight:400; }
.section-caption { color:var(--mx-muted); font-size:13px; margin:5px 0 12px; }
.quiet-action { background:transparent; color:var(--mx-green); border:1px solid var(--mx-line); border-radius:10px; min-height:40px; padding:8px 14px; }
.quiet-action:hover { background:#eaf2ec; color:#28584b; }
.library-tools { display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.shelf-search { flex:1; display:flex; gap:10px; align-items:center; margin:0; background:white; border:1px solid var(--mx-line); border-radius:12px; padding:0 14px; }
.shelf-search > span { font-size:24px; color:var(--mx-muted); }
.shelf-search input { margin:0; background:transparent; border:0; height:46px; padding:8px 0; color:var(--mx-ink); outline:none; }
.shelf-search:focus-within { border-color:var(--mx-green); box-shadow:0 0 0 3px #356f6010; }
.library-tools select { width:140px; height:46px; margin:0; background:white; padding:10px; border-radius:12px; }
.genre-filters { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 24px; }
.genre-filters button { background:transparent; color:var(--mx-muted); padding:7px 18px; border:1px solid transparent; border-radius:30px; min-height:38px; }
.genre-filters button.active { background:#f5e5d2; color:#68462e; border-color:#edd6ba; font-weight:600; }
.world-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.book-card { min-width:0; border:1px solid var(--mx-line); border-radius:16px; background:#fffefd; padding:16px; display:flex; flex-direction:column; gap:12px; transition:transform .2s,box-shadow .2s; }
.book-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px #63482e10; border-color:#cdbba6; }
.book-open { padding:0; width:100%; background:none!important; color:inherit; text-align:left; }
.book-cover { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:3/3.65; padding:24px 20px; overflow:hidden; border-radius:5px 12px 12px 5px; background:#d9e5d9; color:#254f43; box-shadow:inset 5px 0 0 #0000000c,inset 7px 0 0 #ffffff50; }
.book-cover::before { content:""; position:absolute; z-index:-1; width:140%; aspect-ratio:1; border:1px solid currentColor; opacity:.2; border-radius:50%; left:18%; top:44%; box-shadow:0 0 0 20px #ffffff20,0 0 0 42px #ffffff15; }
.book-cover::after { content:""; position:absolute; z-index:-1; inset:10px; border:1px solid #ffffff50; border-radius:2px 6px 6px 2px; }
.book-cover small { letter-spacing:.18em; font-size:10px; opacity:.7; }.book-cover strong { max-width:90%; font-family:"Songti SC","SimSun",serif; font-size:30px; line-height:1.45; letter-spacing:.1em; font-weight:600; }.book-cover span { font-size:11px; letter-spacing:.15em; opacity:.8; }
.book-cover[data-tone="1"] { background:#e9ddc6;color:#655137; }
.book-cover[data-tone="2"] { background:#dbe4ec;color:#354e66; }
.book-cover[data-tone="3"] { background:#ead9d0;color:#794b41; }
.book-cover[data-tone="4"] { background:#e3dfeb;color:#58516d; }
.book-cover[data-tone="5"] { background:#dce6e0;color:#3b5a51; }
.book-info h3 { color:var(--mx-ink); font-size:17px; line-height:1.4; margin:13px 0 8px; }
.book-meta { display:flex; gap:7px; flex-wrap:wrap; color:var(--mx-muted); font-size:12px; align-items:center; }
.book-meta .status-pill { background:#edf3eb;color:#35634d;padding:2px 7px;border-radius:5px;font-size:11px; }
.book-description { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--mx-muted); font-size:12px; line-height:1.8; margin:10px 0 0; min-height:43px; }
.book-foot { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:10px; border-top:1px solid #efe8de; font-size:11px; color:var(--mx-muted); }
.book-foot button { background:none;color:var(--mx-green);font-size:12px;padding:8px 0 8px 8px;min-height:38px; }
.library-pagination { display:flex; justify-content:center; gap:16px; align-items:center; margin-top:28px; color:var(--mx-muted); font-size:13px; }
.library-pagination button { background:#fff; color:var(--mx-green); border:1px solid var(--mx-line); min-height:42px; }
.shelf-footer { margin-top:45px; padding-top:20px; border-top:1px solid var(--mx-line); display:flex; justify-content:space-between; color:#8a7869; font-size:12px; }
.empty-library,.list-loading,.error-state { grid-column:1/-1; padding:48px 20px; text-align:center; border:1px dashed var(--mx-line); border-radius:16px; color:var(--mx-muted); background:#fffefd; }
.empty-library h3,.error-state strong { color:var(--mx-ink); font-size:19px; }.empty-library button,.error-state button { margin-top:18px;background:var(--mx-green);color:white; }
.empty-library p { max-width:440px;margin:10px auto; }.empty-symbol { color:var(--mx-green); }
.studio-heading { display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0 30px; }
.studio-heading h1 { font-size:34px; }
.studio-stats { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:32px; }
.studio-stat { padding:22px 24px;border:1px solid var(--mx-line);background:white;border-radius:16px; }
.studio-stat small { color:var(--mx-muted);font-size:13px; }.studio-stat strong { display:block;font-size:30px;font-weight:650;color:var(--mx-green);margin-top:5px; }
.studio-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px; }.studio-toolbar > div { display:flex;gap:8px; }
.studio-row { display:grid;grid-template-columns:1fr 190px 220px;align-items:center;gap:18px;padding:20px;border:1px solid var(--mx-line);border-bottom:0;background:#fffefd; }
.studio-row:first-child { border-radius:14px 14px 0 0; }.studio-row:last-child { border-bottom:1px solid var(--mx-line);border-radius:0 0 14px 14px; }
.studio-row h3 { font-size:16px;margin:0 0 6px; }.studio-row p { color:var(--mx-muted);font-size:12px; }.studio-row-actions { display:flex;gap:8px;justify-content:flex-end; }.studio-row-actions button { padding:8px 10px;min-height:40px;background:#eef3ed;color:var(--mx-green); }.studio-row-actions .danger-action { background:none;color:#a64d40; }
.modal { background:#30251d66; }.modal-box { background:var(--card);color:var(--fg); }
body:not([data-view="play"]) .modal-box { background:#fffbf6; }
.book-detail-box { width:min(660px,calc(100vw - 32px));position:relative;padding:32px; }
.detail-close { position:absolute;right:12px;top:12px;background:none;color:var(--mx-muted);width:40px;height:40px;padding:0; }
.detail-heading { display:flex;gap:24px;align-items:center;margin-bottom:24px; }.detail-heading .book-cover { width:130px;flex-shrink:0; }.detail-heading .book-cover strong { font-size:23px; }.detail-heading h2 { font-size:27px;line-height:1.4;margin:10px 0; }
.detail-synopsis { color:var(--mx-muted);line-height:1.9;margin:16px 0 24px; }.detail-actions { display:flex;gap:12px; }
body:not([data-view="play"]) .create-heading h1 { color:var(--mx-ink);font-family:"Songti SC",serif; }
body:not([data-view="play"]) .create-heading p, body:not([data-view="play"]) .form-intro p, body:not([data-view="play"]) #create-step2 label { color:var(--mx-muted); }
body:not([data-view="play"]) .preset-card, body:not([data-view="play"]) #create-step2 input, body:not([data-view="play"]) #create-step2 textarea, body:not([data-view="play"]) #create-step2 select { background:white!important;color:var(--mx-ink);border-color:var(--mx-line); }
body:not([data-view="play"]) .preset-card h3, body:not([data-view="play"]) .preset-card .preset-name { color:var(--mx-ink); }
body:not([data-view="play"]) .ghost-btn { background:#f2eadf;color:var(--mx-ink);border-color:var(--mx-line); }
body:not([data-view="play"]) .section-kicker { color:var(--mx-green); }
body:not([data-view="play"]) .tab { background:#eee7de;color:var(--mx-muted); } body:not([data-view="play"]) .tab.active { background:var(--mx-green);color:white; }
.mobile-nav { display:none; }
/* Reading keeps the user's chosen theme; brand only frames the reading surface. */
body[data-view="play"] { background-image:none; }
body[data-view="play"] #app { max-width:920px; }
.reader-masthead { display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:14px 0;margin-bottom:28px;color:var(--muted); }
.reader-masthead span { flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px; }
.reader-masthead button { background:transparent;color:var(--fg);font-size:13px;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:10px; }
#story-stream .beat-body { font-size:var(--story-font,19px)!important;line-height:var(--story-line,2.0)!important; }
#view-play.immersive #story-stream .beat { padding:28px 24px; }
.beat-seq { font-size:11px; }.play-title-wrap small { font-size:11px; }
body[data-view="play"][data-theme="light"] { --bg:#f8f4ed;--fg:#3e332b;--card:#fffcf5;--card2:#f2eade;--line:#dfd5c7;--muted:#807264;--accent:#356f60;--choice-bg:#fffdf8; }
body[data-theme="light"] .choice-btn,body[data-theme="light"] .choice-state,body[data-theme="light"] .play-bottombar,body[data-theme="light"] .reader-settings,body[data-theme="light"] .read-menu { background:#fffcf5;color:#3e332b;border-color:#dfd5c7;box-shadow:none; }
body[data-theme="light"] .choice-num { background:#e8eee4;color:#356f60; }
body[data-theme="light"] .action-submit { background:#356f60;color:white; }
body[data-theme="light"] .reader-quickbar button,body[data-theme="light"] .reader-settings button,body[data-theme="light"] .chap-item { background:#f0e9df;color:#3e332b; }
body[data-theme="light"] .icon-btn { color:#55493d; }
body[data-theme="light"] .status-bar,body[data-theme="light"] .status-bar .sb-header { background:#f1ebe2;color:#3e332b; }
body[data-theme="light"] .status-bar .sb-row { color:#3e332b; }
body[data-theme="light"] #story-stream .action-tag { background:#eaf1e8;color:#356f60; }
.reading-empty { text-align:center;padding:70px 20px; }.reading-empty h2 { font-family:"Songti SC",serif;font-size:28px; }.reading-empty p { margin:16px auto 24px;color:var(--muted);max-width:420px; }
.genre-filters button { white-space:nowrap; width:auto; min-width:max-content; }
.continue-reading .book-cover span { display:none; }
.chap-item { display:block;width:100%;text-align:left; }
body:not([data-view="play"]) .preset-more-btn { background:#f2eadf;color:var(--mx-green);border-color:#d9cabc; }
body:not([data-view="play"]) .preset-more-btn:hover { background:#e8eee4; }
body:not([data-view="play"]) .ps-title { color:var(--mx-muted); }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }
#view-home { padding-top:18px; }
.shelf-intro { padding:0 0 20px; }
.shelf-intro h1 { font-size:32px; }
.shelf-intro .mx-kicker { margin-bottom:5px; }
.continue-reading { padding:14px 22px;margin-bottom:22px; }
.continue-reading .book-cover { width:44px;height:60px;padding:8px; }
.continue-reading .book-cover strong { font-size:12px;line-height:1.3;letter-spacing:0; }
.library-heading { margin-bottom:10px; }
.library-heading .section-caption { margin-bottom:0; }
.genre-filters { margin-bottom:18px; }
@media(max-width:1000px) {
 .main-nav { gap:0; }.main-nav button { padding:9px; }.header-inner { gap:12px; }.header-create { display:none; }
 .world-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.studio-row { grid-template-columns:1fr 150px; }.studio-row-actions { grid-column:1/-1;justify-content:flex-start; }
}
@media(max-width:650px) {
 #app { padding-bottom:90px; }.app-header { padding:14px 18px; }.header-inner { gap:8px; }
 .mx-logo { width:40px;height:40px; }.brand-copy strong { font-size:16px; }.brand-copy small { font-size:10px; }.main-nav,.header-create { display:none; }
 #topbar-extra { margin-left:auto; }.mobile-entry-button { font-size:11px;padding:7px 9px; }
 .view { padding:24px 18px; }.shelf-intro { padding:0 0 24px; }.shelf-intro h1 { font-size:30px; }.shelf-intro p { font-size:12px; }.mx-kicker { font-size:9px;letter-spacing:.12em; }.shelf-note { display:none; }
 .continue-reading { flex-wrap:nowrap;padding:14px;gap:12px;margin-bottom:22px;border-radius:16px; }.continue-copy h2 { font-size:18px; }.continue-copy p { font-size:11px; }.continue-reading > button { width:auto;padding:9px 12px;font-size:12px; }
 .continue-reading .book-cover { display:none; }.library-heading h2 { font-size:21px; }.library-heading { gap:8px;margin-bottom:14px; }.library-meta { gap:4px; }.library-meta .quiet-action { font-size:11px;padding:6px 9px; }
 .section-caption { font-size:12px; }.library-tools { flex-wrap:wrap;gap:8px; }.shelf-search { flex-basis:100%; }.library-tools select { flex:1;width:0;font-size:12px;height:42px; }
 .genre-filters { flex-wrap:nowrap;overflow:auto;gap:4px;padding-bottom:4px; }.genre-filters button { flex-shrink:0;padding:6px 14px;font-size:12px; }
 .world-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.book-card { padding:10px;border-radius:13px;gap:8px; }.book-cover { padding:18px 13px; }.book-cover strong { font-size:24px; }.book-cover small { font-size:8px;letter-spacing:.07em; }.book-cover span { font-size:9px; }
 .book-info h3 { font-size:16px;margin:10px 0 6px; }.book-description { font-size:11px;min-height:40px; }.book-meta { font-size:10px;gap:4px; }.book-foot { flex-wrap:wrap;gap:0;font-size:10px; }.book-foot button { font-size:11px; }.shelf-footer { margin-top:28px;font-size:10px; }
 .mobile-nav { display:flex;position:fixed;bottom:0;left:0;right:0;z-index:35;background:#fffcf7f5;border-top:1px solid var(--mx-line);padding:7px 16px calc(7px + env(safe-area-inset-bottom));justify-content:space-around;backdrop-filter:blur(12px); }
 .mobile-nav button { display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 28px;background:none;color:#887467;font-size:10px;min-height:48px; }.mobile-nav button span { font-size:22px;line-height:1.2; }.mobile-nav button.active { color:var(--mx-green);font-weight:700; }
 body[data-view="play"] .mobile-nav { display:none; }
 .studio-heading { flex-direction:column;align-items:flex-start;margin:0 0 24px;gap:18px; }.studio-heading h1 { font-size:28px; }.studio-stats { gap:8px; }.studio-stat { padding:15px 11px;border-radius:12px; }.studio-stat strong { font-size:23px; }.studio-stat small { font-size:10px; }
 .studio-toolbar { flex-wrap:wrap; }.studio-toolbar button { font-size:11px; }.studio-row { grid-template-columns:1fr;gap:10px;padding:16px; }.studio-row-actions { grid-column:auto; }
 .book-detail-box { padding:26px 20px; }.detail-heading { gap:16px; }.detail-heading .book-cover { width:100px; }.detail-heading h2 { font-size:22px; }.detail-actions { flex-wrap:wrap; }.detail-actions button { flex:1; }
 .reader-masthead { gap:6px;margin-bottom:16px;padding:8px 0; }.reader-masthead button { padding:8px;font-size:12px; }.reader-masthead span { font-size:12px; }
 #view-play.immersive #story-stream .beat { padding:18px 0; }.read-menu { max-width:100%; }.reader-quickbar button { min-height:44px; }
}
/* Creation model selection stays visible in both creation steps. */
.create-model-panel{padding:18px;margin:20px 0;border:1px solid #e4dfd4;border-radius:16px;background:#fffdf8}
#create-model-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.create-model-choice{display:flex;flex-direction:column;gap:6px;text-align:left;padding:12px;border:1px solid #ddd8ce;border-radius:12px;background:transparent;color:inherit;min-width:0}
.create-model-choice.selected{border-color:#187666;background:#edf7f0}.create-model-choice small{font-size:12px;line-height:1.5;overflow-wrap:anywhere}.create-model-choice:disabled{opacity:.6}
#create-model-status,#create-error{font-size:13px;line-height:1.7}#create-error{color:#a43a29}
@media(max-width:600px){#create-model-options{grid-template-columns:1fr}.create-model-choice{padding:12px 14px}}