.wrong-book-page { background-image: linear-gradient(rgba(250,248,238,.32),rgba(250,248,238,.32)),url("assets/shared/BENGAL_CIRCULAR_GARDEN_BACKGROUND_V1.png"); background-size: cover; background-position: center top; background-attachment: fixed; }
.wrong-book-app { gap: 14px; }
.wrong-book-header { display:grid; grid-template-columns: minmax(64px,1fr) auto minmax(64px,1fr); align-items:center; gap:8px; }
.wrong-book-title { text-align:center; }
.wrong-book-title h1 { font-size:24px; }
.wrong-book-title p { margin:4px 0 0; color:#748675; font:400 13px/1.4 var(--font-zh); }
.header-spacer { min-width:64px; }
.wrong-book-stats { width:100%; padding:10px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); text-align:center; }
.wrong-book-stats>div { display:grid; align-content:center; gap:2px; min-height:66px; border-right:1px solid rgba(214,190,127,.35); }
.wrong-book-stats>div:last-child { border-right:0; }
.wrong-book-stats span { color:#748675; font:500 12px/1.3 var(--font-zh); }
.wrong-book-stats strong { color:var(--ui-forest); font:500 25px/1.1 var(--font-display); font-variant-numeric:tabular-nums; }
.wrong-book-controls { display:grid; gap:10px; }
.wrong-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:4px; border:1px solid #e2e5d8; border-radius:17px; background:rgba(255,253,247,.94); }
.wrong-filters button { min-height:42px; border:0; border-radius:12px; background:transparent; color:#607668; font:600 14px/1.2 var(--font-zh); }
.wrong-filters button[aria-selected="true"] { background:#e7f0e2; color:#315d48; }
.training-entry { width:100%; min-height:52px; justify-content:center; }
.training-entry[aria-disabled="true"] { opacity:.55; pointer-events:none; }
.storage-notice { margin:0; padding:12px 14px; border:1px solid #e5c88e; border-radius:14px; background:#fff6df; color:#76552c; font:500 13px/1.5 var(--font-zh); }
.wrong-book-state { margin:0; padding:24px 18px; color:var(--ui-forest); text-align:center; font:500 15px/1.6 var(--font-zh); }
.wrong-book-list { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.wrong-book-row { width:100%; min-height:76px; padding:12px 14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; border:1px solid rgba(220,214,190,.8); border-radius:16px; background:rgba(255,253,247,.96); color:#294b3a; text-align:left; box-shadow:0 3px 9px rgba(79,88,54,.06); }
.wrong-book-row:active { transform:translateY(1px); }
.wrong-book-row .row-equation { overflow-wrap:anywhere; color:#294b3a; font:400 20px/1.2 var(--font-math); }
.wrong-book-row .row-meta { color:#78877b; font:400 12px/1.4 var(--font-zh); }
.wrong-book-row .row-status { grid-column:2; grid-row:1; padding:4px 8px; border-radius:999px; background:#f3ead6; color:#805d2a; font:500 11px/1.3 var(--font-zh); }
.wrong-book-row[data-status="mastered"] .row-status { background:#e6f0e3; color:#4e7750; }
.wrong-detail { padding:16px; color:var(--ui-forest); }
.detail-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.detail-heading h2 { margin:0; font:600 18px/1.3 var(--font-zh); }
.detail-heading button { min-height:40px; padding:8px 12px; }
.detail-equation { margin:18px 0; padding:18px 10px; border-radius:16px; background:rgba(255,255,255,.72); color:#294b3a; text-align:center; overflow-wrap:anywhere; font:400 clamp(25px,7vw,38px)/1.25 var(--font-math); }
.wrong-detail dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
.wrong-detail dl div { padding:10px; border-radius:12px; background:rgba(255,255,255,.65); }
.wrong-detail dt { color:#758575; font:400 12px/1.4 var(--font-zh); }
.wrong-detail dd { margin:4px 0 0; color:#315d48; font:500 15px/1.4 var(--font-math); overflow-wrap:anywhere; }
.raw-backup { padding:12px 14px; border:1px solid rgba(220,214,190,.8); border-radius:15px; background:rgba(255,253,247,.84); color:#63776a; font:400 12px/1.5 var(--font-zh); }
.raw-backup summary { min-height:36px; display:flex; align-items:center; cursor:pointer; font-weight:600; }
.raw-backup p { margin:8px 0; }
.raw-backup button { min-height:44px; }
#backupStatus { min-height:1em; }
@media(max-width:380px) { .wrong-book-app { padding-inline:14px; } .wrong-book-title h1 { font-size:21px; } .wrong-book-stats { padding:7px; } .wrong-book-stats strong { font-size:22px; } .wrong-book-row { padding:11px; } }